jQuery是一个JavaScript函数库（是一个轻量级的 “写的少，做的多” 的库），由John Resig于2006年创建。jQuery的官网地址： https://jquery.com/
特点和功能
-
DOM操作简化：jQuery提供了一套简单易用的API来选取和操作DOM元素，比如添加、删除、修改元素以及遍历DOM树，使得这些操作比原生JavaScript更加直接和高效。
-
事件处理：它有一套统一的事件处理机制，使得跨浏览器的事件绑定变得简单一致，同时支持事件委托，提高性能和灵活性。
-
CSS操作：jQuery可以轻松地操作元素的样式，包括添加、移除、切换CSS类，以及直接操作元素的样式属性。
-
动画效果：内置了一系列动画方法，如淡入淡出、滑动和自定义动画，使得网页元素的动态效果实现变得轻而易举。
-
Ajax支持：简化了Ajax请求的发送过程，提供了对XML、JSON等多种数据格式的支持，以及错误处理和成功回调的简单配置。
-
链式操作：jQuery支持链式编程风格，允许开发者在一个语句中连续调用多个方法，使得代码更加紧凑和易读。
-
插件系统：jQuery有一个强大的插件生态系统，开发者可以很容易地为jQuery扩展新功能，或者使用现有的数千个插件来增强应用的功能和效果。
-
跨浏览器兼容性：jQuery内部处理了浏览器之间的差异性，确保大部分功能可以在多种浏览器环境中无缝运行，包括老版本的IE浏览器。
导入jQuery
<body>
<!-- 引入jQuery 也可使用cdn等方式引入-->
<script src="js/jquery-3.7.1.js"></script>
<script>
// 入口函数(第一种): 简单易用（推荐使用）
$(function () {
... // 此处是页面 DOM 加载完成的入口
});
// 入口函数(第二种): 繁琐，但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
</script>
</body>由于其易用性和强大功能，jQuery在很长一段时间内是Web开发的标配，虽然随着现代浏览器对原生JavaScript API的支持增强，以及新的库和框架（如React、Vue.js等）的兴起，jQuery的使用有所减少，但它仍然在很多现有项目和特定场景下发挥着作用。
// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box'); // 获取DOM对象
var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
// 2.jQuery 对象转换为 DOM 对象有两种方法：
var domObject1 = $('div')[0]; // 2.1 jQuery对象[索引值]
var domObject2 = $('div').get(0) // 2.2 jQuery对象.get(索引值)
实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法
常用选择器
jQuery 选择器支持已经存在的 CSS 选择器，除此之外它还有一些自定义的选择器、 jQuery 中所有选择器都以美元符号开头：$()
jQuery supports most CSS3 selectors, as well as some non-standard selectors. 查看官网文档
| 常用选择器 | 语法 | 描述 |
|---|---|---|
| 标签选择器 | $("div") |
获取同一类标签的所有元素 |
| 类选择器 | $(".className") |
获取指定类名的元素 |
| ID选择器 | $("#id") |
获取指定id的元素 |
| 并集选择器 | $("div,#id,li") |
将每一个选择器匹配到的元素合并后一起返回 |
| 全局选择器 | $("*") |
获取所有元素 |
| jQuery选择器 | 语法 | 描述 |
|---|---|---|
| 交集选择器 | $("div.box") |
获取类名为box的div标签（中间没有符号） |
| 子代选择器 | $("ul>li") |
获取亲儿子层级的元素 |
| 后代选择器 | $("ul li") |
获取所有后代元素（这里指ul下的所有li元素） |
| 相邻选择器 | $("label+input") |
获取前面有一个label标签的input元素 |
| 同辈选择器 | $("form~input") |
获取与form同层级的input元素 |
匹配包含给定属性的元素
$("div[id]"); //获取所有有id属性的div的元素集合
$("div[class]"); //获取所有有class属性的div的元素集合
$("input[name='userName']"); //获取所有input标签中name属性是userName元素的集合
$("input[name^='user']"); //获取所有input标签中name属性是user开头的元素的集合
$("input[name$='user']"); //获取所有input标签中name属性是user结尾的元素的集合
$("input[name*='user']"); //获取所有input标签中name属性包含了user的元素的集合
$("input[id][name^='user']"); //获取所有input标签中既有id属性又有name属性（以user开头）的元素的集合
| 选择器 | 语法示例 | 说明 |
|---|---|---|
| parent() | $("li"). parent() |
查找父级 |
| children(selector) | $("u1").children("1i") |
相当于$(ul>li")，最近一级(亲儿子) |
| find(selector) | $("u1").find("1i") |
相当于$(“ul li”"), 后代选择器 |
| siblings(selector) | $(".first").siblings("1i") |
查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll() |
查找当前元素之后所有的同辈元素 |
| prevtAl1([expr]) | $(".last").prevAll() |
查找当前元素之前所有的同辈元素 |
| hasClass(class) | $('div').hasClass("protected") |
检查当前的元素是否含有某个特定的类，如果有，则返回true |
| eq(index) | $("li").eq(2) |
相当于$(“li:eq(2)”), index从o开始 |
伪类选择器：
常用的伪类选择器（Pseudo-Selectors）
| 伪类选择器 | 语法示例 | 描述 |
|---|---|---|
| :first | $('li:first') |
获取第一个li元素 |
| :last | $("li:last") |
获取最后一个li元素 |
| :eq(index) | $("li:eq(2)") |
获取索引号为2的li元素，索引号index从0开始 |
| :odd | $("li:odd") |
获取索引号为奇数的li元素 |
| :even | $("li:even") |
获取索引号为偶数的li元素 |
| :animated | $("div:animated") |
所有正在执行动画的div元素 |
| :visible | $("div:visible") |
获取所有真实可见的元素 |
| :hidden | $("div:hidden") |
获取隐藏的元素 |
Note: 这里显示和隐藏是根据它是否真实显示或不显示来判定，并非根据其visibility 或 display 的值，见文档解释：
When using the :visible and :hidden pseudo-selectors, jQuery tests the actual visibility of the element, not its CSS visibility or display properties. jQuery looks to see if the element’s physical height and width on the page are both greater than zero.
常用的表单选择器
| Selecting Form Elements | 语法示例 | 描述 |
|---|---|---|
| :checked | $("input:checked") |
获取选中的项（checkboxes, radio, selects 均可） |
| :disabled | $("input:disabled") |
any <input> elements with the disabled attribute |
| :enabled | $("input:enabled") |
any elements that do not have a disabled attribute |
| :input | $("form :input") |
all <input>, <textarea>, <select>, and <button> elements |
| :selected | $("form :selected") |
any selected items in <option> elements |
Note: In order to get the best performance using :selected, first select elements with a standard jQuery selector, then use .filter( ":selected" ), or precede the pseudo-selector with a tag name or some other selector.
Selecting by type： jQuery provides pseudo selectors to select form-specific elements according to their type
-
:password：Selects all elements of type password. （use[type="password"]instead） -
:reset：Selects all elements of type reset （use[type="reset"]instead） -
:radio：Selects all elements of type radio （use[type="radio"]instead） -
:text：Selects all input elements of type text. （use[type="text"]instead） -
:submit：Selects all elements of type submit. （useinput[type="submit"], button[type="submit"]instead） -
:checkbox：Selects all elements of type checkbox. （use[type="checkbox"]instead） -
:button：Selects all button elements and elements of type button.（first select the elements using a pure CSS selector, then use
.filter(":button")） -
:image：Selects all elements of type image. （use[type="image"]instead） -
:file：Selects all elements of type file. （use[type="file"]instead）
属性和样式
.attr() – Get or set the value of the provided attribute
var img=$("img");
img.attr("src","img/cat.jpg"); //设置属性
var src=img.attr("src"); //获取属性
img.removeAttr("title"); //移除属性
// Manipulating multiple attributes.
$( "#myDiv a:first" ).attr({
href: "newDestination.html",
rel: "nofollow"
});CSS, Styling, & Dimensions ：
jQuery中常用的样式操作有两种：css() 和 设置类样式方法 （注意：css() 多用于样式少时操作，多了则不太方便）
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式
// 获取CSS样式属性
$( "h1" ).css( "fontSize" ); // Returns a string such as "19px".
// 设置CSS样式属性
$( "h1" ).css( "fontSize", "100px" ); // Setting an individual property.
// 设置多个CSS样式属性
$( "h1" ).css({
fontSize: "100px",
color: "red"
});
// Using CSS Classes for Styling
$("div").addClass("redBg");
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass(); //没有参数的时候直接移除所有的样式
$("div").toggleClass("fontColor"); //匹配元素如果有当前的样式就删除，如果没有就添加
// Basic dimensions methods.
$( "h1" ).width( "50px" ); // Sets the width of all <h1> elements.
$( "h1" ).width(); // Gets the width of the first <h1> element.
$( "h1" ).height( "50px" ); // Sets the height of all <h1> elements.
$( "h1" ).height(); // Gets the height of the first <h1> element.
文本属性值：
jQuery的文本属性值常见操作有三种：html() 、 text() 、 val() 、分别对应JS中的 innerHTML 、innerText 和 value 属性
$("div").html(); // 获取元素内容 (包括嵌套在内部的标签)
$("div").html("123"); // 设置元素内容
$("div").text(); // 获取元素文本内容 (不包含标签)
$("div").text("123"); // 设置元素文本内容
$("input").val(); // 获取表单值
$("input").val("123"); // 设置表单值
元素的操作
jQuery 元素主要操作方法：遍历、创建、添加和删除，克隆和移动
-
遍历：
each()方法each()方法遍历匹配的每一个元素、里面的回调函数有2个参数：索引号和DOM元素对象（不是jquery对象）
要想使用jquery方法，需要给这个dom元素转换为jquery对象
javascript// 1. each() 方法遍历元素 $("div").each(function(i, domEle) { console.log(i); // 回调函数第一个参数一定是索引号 console.log(domEle); // dom元素对象、使用jQuery方法需要转换 $(domEle) $(domEle).css("color", "red"); }); // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据 $.each(arr, function(i, ele) { console.log(i); console.log(ele); }); -
创建、添加、删除元素
js// 创建元素 $("<li></li>"); // 动态的创建了一个li元素 $("<a/>", { html: "This is a <strong>new</strong> link", "class": "new", href: "foo.html" }); // Creating a new element with an attribute object. // 添加元素 element.append("内容"); // 把内容添加到匹配元素内部最后面，类似原生appendChild element.prepend("内容") // 把内容放入匹配元素内部最前面 element.after("内容"); // 把内容放入目标元素后面 element.before("内容"); // 把内容放入目标元素前面 // 删除元素 element.remove(); // 删除元素本身 element.empty(); // 删除匹配的元素集合中所有的子节点 element.html(""); // 清空匹配的元素内容内部添加元素，生成之后它们是父子关系。外部添加元素，生成之后他们是兄弟关系
empty()和html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内容 -
克隆和移动元素
javascriptvar li=$("#myList li:first").appendTo("#myList"); // 将第一个li移动到最后 $("#myList").append($( "#myList li:first")); // 同上 $("#myList li:first").clone().appendTo("#myList"); // 将第一个li复制一份添加到最后
jQuery事件
jQuery offers convenience methods for most native browser events. 参照官网关于事件的文档
These methods — including .click(), .focus(), .blur(), .change(), etc
// Event setup using a convenience method
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});2011年11月，jQuery 1.7版发布。该版本新增了新的事件API：on()和off()、统一了jQuery中所有对文档绑定事件的操作
// Equivalent event setup using the `.on()` method
$( "p" ).on( "click", function() {
console.log( "click" );
});
// Multiple events, same handler （多个事件、同一个处理函数）
$( "input" ).on(
"click change", // Bind handlers for multiple events
function() {
console.log( "An input was clicked or changed!" );
}
);
// Binding multiple events with different handlers （不同的事件，不同的处理函数）
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});on(): 用于事件绑定，目前最好用的事件绑定方法off(): 事件解绑
// on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小li 、相当于： $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);off()方法可以移除通过on()方法添加的事件处理程序
$("p").off(); // 解绑p元素所有事件处理程序
$("p").off( "click"); // 解绑p元素上面的点击事件
$("ul").off( "click", "li"); // 解绑事件委托
如果有的事件只想触发—次，可以使用one()来绑定事件
$("p").one("click", function() {
alert(11);
});trigger() / triggerHandler(): 事件触发
// 1. 元素.事件()、会触发元素的默认行为
$("div").click();
// 2. 元素.trigger("事件")、会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 但是不会触发元素的默认行为
$("input").triggerHandler("focus");
// 绑定事件
$("div").on("click", function() { alert(11);});
$("input").on("focus", function() { $(this).val("你好吗");});生成二维码
jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件（可以从https://github.com/jeromeetienne/jquery-qrcode 获取）
它使用非常简单，生成的 QRcode 无需下载图片，并且不依赖第三方服务，插件压缩之后大小小于 4K
使用步骤：
-
下载并引入 Jquery.js 文件、jquery.qrcode.js 文件、 （utf-16转utf-8: utf.js ）
html<script src="js/jquery-1.11.1.js"></script> <script src="js/jquery.qrcode.js"></script> <script src="js/utf.js"></script> -
网页中编写一个div 用于显示二维码
html<div id="qrcode"></div> -
通过jquery对象的qrcode函数生成二维码
javascript// 准备二维码的规格对象(JSON) var config = { width:数字, // 值是number类型, 表示的单位是px 必须传递 height:数字, // 值是number类型, 表示的单位是px 必须传递 text:"内容", // text就表示二维码中存储的数据 必须传递 correctLevel:数字, // 取值为0|1|2|3 表示二维码的纠错级别0:L/1:M/2:Q/3:H ,默认0 可选参数 background:"#rrggbb", // 默认白色, 表示二维码的后景颜色 可选参数 foreground:"#rrggbb", // 默认黑色, 表示二维码的前景颜色 可选参数 render:"绘制模式" // 取值:table/canvas , 默认table 可选参数 }; // 通过选择器, 查找到上述的div ,得到Jquery对象, 通过jquery对象的qrcode函数生成二维码 $("#qrcode").qrcode(config);