当前位置：首页 > news >正文

JavaScript之JQuery

news 2025/6/28 23:46:20

JQuery

W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: jQuery是⼀个快速、简洁且功能丰富的JavaScript框架，原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象，如

• ⽹⻚内容

• ⽹⻚结构

• ⽹⻚样式

1 引⼊依赖

使⽤JQuery需要先引⼊对应的库

在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址: https://releases.jquery.com/

其中， src 属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库

提供的⼀个统⼀资源定位符.

如果需要使⽤其他版本的JQuery, 可以在官⽹进⾏下载

我们一般使用minified

uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)

minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)

slim: 精简瘦⾝版, 没有Ajax和⼀些特效

slim minified : slim 的压缩版

.2 JQuery 语法

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作

基础语法

1 $(selector).action()

事件源.事件（操作对象）

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.

• Selector 选择器, ⽤来"查询"和"查找" HTML 元素

• action 操作, 执⾏对元素的操作

<button type="button">点我消失</button><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>$(document).ready(function(){$('button').click(function(){$(this).hide();});});</script>

3 JQuery 选择器

我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作.

JQuery选择器基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器. jQuery 中所有选择器都以 $ 开头：$().

4 JQuery事件

JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏

更复杂的交互操作.

浏览器就是⼀个哨兵, 在侦查敌情(⽤⼾⾏为). ⼀旦⽤⼾有反应(触发具体动作), 哨兵就会点燃烽⽕台的

狼烟(事件), 后⽅就可以根据狼烟来决定下⼀步的对敌策略.

事件由三部分组成:

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数

例如: 某个元素的点击事件:

$("p").click(function(){

//动作发⽣后执⾏的代码

});

5 操作元素

5.1 获取/设置元素内容

三个简单的获取元素内容的JQuery⽅法

这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容.

有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取.

代码⽰例:

获取元素内容:

<div id="test"><span>你好</span></div><input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html内容为:"+html);var text = $("#test").text();console.log("⽂本内容为:"+text);var inputVal = $("input").val();console.log(inputVal);});</script>

设置元素内容


<div id="test"></div><div id="test2"></div><input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>设置html</h1>');$("#test2").text('<h1>设置text</h1>');$("input").val("设置内容");});</script>

3.4.5.2 获取/设置元素属性

JQuery attr() ⽅法⽤于获取属性值.

代码⽰例

获取元素属性

<p><a href="https://www.bitejiuyeke.com/index" id="bite">zhuzhu</a></p><script>$(function(){var href = $("p a").attr("href")console.log(href);});</script>

设置元素属性

<p><a href="https://www.bitejiuyeke.com/index" id="bite">zhuzhu</a></p><script>$(function(){$("p a").attr("href","baidu.com")console.log($("p a").attr("href"));});</script>

3.4.5.3 获取/返回css属性

css() ⽅法设置或返回被选元素的⼀个或多个样式属性

代码⽰例

获取元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){var fontSize = $("div").css("font-size");console.log(fontSize);});</script>

设置元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div><script>$(function(){$("div").css("font-size","24px");});</script>

5.4 添加元素

添加 HTML 内容

1. append() : 在被选元素的结尾插⼊内容

2. prepend() : 在被选元素的开头插⼊内容

3. after() : 在被选元素之后插⼊内容

4. before() : 在被选元素之前插⼊内容

代码⽰例:

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><img src="pic/rose.jpg"><script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("img").before("图⽚前插⼊");$("img").after("图⽚后插⼊");});</script>

5.5 删除元素

删除元素和内容，⼀般使⽤以下两个 jQuery ⽅法：

1. remove() : 删除被选元素（及其⼦元素）

2. empty() : 删除被选元素的⼦元素。

代码⽰例:

<div id="div1">我是⼀个div</div><button>删除 div 元素</button><script>$(function () {$('button').click(function(){$('#div1').remove();});});</script>删除被选元素的⼦元素<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol><button>删除列表元素</button><script>$(function () {$('button').click(function(){$('ol').empty();});});</script>

表白墙

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style></head><body><div class="container"><h1>表⽩墙</h1><p>输⼊后点击提交, 会将信息显⽰在表格中</p><div class="row"><span>谁: </span><input class="edit" type="text"></div><div class="row"><span>对谁: </span><input class="edit" type="text"></div><div class="row"><span>说什么: </span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div></body></html>$(function () {// 给点击按钮注册点击事件$(".submit").click(function () {// 1. 获取到编辑框内容var from = $('.edit:eq(0)').val();var to = $('.edit:eq(1)').val();var message = $('.edit:eq(2)').val(); });});

查看全文

http://www.lryc.cn/news/517177.html