JQuery是一个JavaScript框架，能够简化JS的开发，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
可以在JQuery官网(https://jquery.com/)下载JQuery的js文件
下载时有两种版本可以选择
Production version，生产版本，实际开发中使用，源码经过压缩和精简，后缀名为.min.jsDevelopment version，开发版本，源代码有缩进及注释，可以查看源码，后缀名为.js示例：获取元素对象并输出标签体内容
// JQuery var div_jq = $("#div"); alert(div_jq.html()); // JavaScript var div_js = document.getElementById("div"); alert(div_js.innerHTML);通过JS获取页面上所有的div标签对象
var divs = document.getElementsByTagName("div"); alert(divs); // 弹出 [object HTMLCollection] // 将所有div标签体内容更改为123 for (var i = 0; i < divs.length ; i++) { divs[i].innerHTML = "123"; }通过JQ获取页面上所有的div标签对象
var $divs = $("div"); alert($divs); // 弹出 [object Object] // 将所有div标签体内容更改为456 $divs.html("456");通过以上代码可以发现，JQuery对象在操作时更加方便，但是JQuery对象和JS对象的方法是不通用的
var div = document.getElementById("div"); div.html("123"); // 不生效，标签体内容不发生改变JS对象转为JQ对象：$(JS对象)
var div = document.getElementById("div"); var $div = $(div);JQ对象转为JS对象：JQ对象[索引] 或 JQ对象.get(索引)
var $div = $("#div"); var div1 = $div[0]; var div2 = $div.get(0);获取元素对象并绑定一个点击事件
$(选择器).click();click方法括号内可以自定义匿名方法
$(选择器).click(function(){ // 方法体 });示例
$("#div").click(function () { alert("click"); });JQuery的入口函数是在DOM加载完毕后执行，且可以定义多次，后定义的入口函数不会覆盖之前的入口函数
$(function () { alert("abc"); }) $(function () { alert("123"); })可以弹出 abc 和 123
JavaScript的入口函数是在页面所有内容，包括外部图片之类的文件加载完毕后执行，且只能执行一次，若定义了多个入口函数，则后面的函数会覆盖之前的函数
window.onload = function () { alert("abc"); } window.onload = function () { alert("123"); }只弹出 123
筛选具有相似特征的元素（标签）
① 标签选择器（元素选择器）
语法：$(“HTML标签名”) 获得所有匹配标签名称的元素 $("div"); // 选择页面上的所有 <div> 元素② id选择器
语法：$("#id属性值") 获得指定id属性值的元素 $("#div1"); // 选择id为 div1 的元素③ 类选择器
语法：$(".class属性值") 获得指定class属性值的元素 $(".div2"); // 选择所有class值为 div2 的元素④ 并集选择器
语法：$(“选择器1,选择器2,…,选择器n”) 获取多个选择器中的元素 $("div,#test") // 获取页面上所有 <div> 元素和id为 test 的元素① 后代选择器
语法：$(“A B”) 选择A元素内部的所有B元素② 子选择器
语法：$(“A > B”) 选择A元素内部的所有B子元素示例
<body> <div> <p><span>div内部span</span></p> <span>div内部span + div子span</span> </div> <input type="button" id="btn1" value="内部span"> <input type="button" id="btn2" value="子span"> <script> $("#btn1").click(function () { $("div span").css("color","red"); }) $("#btn2").click(function () { $("div > span").css("color","blue"); }) </script> </body>① 属性名称选择器
语法：$(“A[属性名]”) 选择包含指定属性的A元素$("[属性名]") 选择包含指定属性的元素 $("input[type]"); // 选择页面上所有包含 type 属性的 <input> 元素 $("[type]"); // 选择包含 type 属性的所有元素② 属性选择器
语法：$(“A[属性名 = ‘属性值’]”) 选择包含指定属性且等于属性值的A元素 $("input[type = button]"); // 选择页面上所有包含 type 属性且属性值为 button 的 <input> 元素③ 复合属性选择器
语法：$(“A[ 属性名1 = ‘属性值1’ ][ 属性值2: = ‘属性名2’ ]”) 选择包含多个属性条件的A元素，多个属性条件之间没有空格 $("input[type = 'button'][value = 'check']"); // 选择满足属性条件的 <input> 元素① 首元素选择器
语法：:first 获得选择的元素中的第一个元素② 尾元素选择器
语法：:last 获得选择的元素中的最后一个元素③ 非元素选择器
语法：:not(选择器) 获得不包括指定内容的元素④ 偶数选择器
语法：:even 获得选择元素中索引为偶数的元素，从0开始计数⑤ 奇数选择器
语法：:odd 获得选择元素中索引为奇数的元素，从0开始计数⑥ 等于索引选择器
语法：:eq(index) 获得选择元素中等于指定索引的元素⑦ 大于索引选择器
语法：:gt(index) 获得选择元素中大于指定索引的元素⑧ 小于索引选择器
语法：:lt(index) 获得选择元素中小于指定索引的元素⑨ 标题选择器
语法：:header 获得所有标题元素示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤选择器</title> <script src="jquery-3.5.1.js"></script> </head> <body> <h1>h1</h1> <h2>h2</h2> <div class="a">1</div> <div class="b">2</div> <div class="a">3</div> <div class="a">4</div> <div class="b">5</div> <div class="a">6</div> <input id="first" type="button" value="first"> <input id="last" type="button" value="last"> <input id="even" type="button" value="even"> <input id="odd" type="button" value="odd"> <input id="not" type="button" value="not"> <input id="eq" type="button" value="eq"> <input id="gt" type="button" value="gt"> <input id="lt" type="button" value="lt"> <input id="header" type="button" value="header"> <input id="reset" type="button" value="reset"> <script> $("#first").click(function () { $("div:first").css("background-color","red"); }) $("#last").click(function () { $("div:last").css("background-color","blue"); }) $("#even").click(function () { $("div:even").css("background-color","yellow"); }) $("#odd").click(function () { $("div:odd").css("background-color","pink"); }) $("#not").click(function () { $("div:not(.a)").css("background-color","grey"); }) $("#eq").click(function () { $("div:eq(3)").css("background-color","purple"); }) $("#lt").click(function () { $("div:lt(3)").css("background-color","orange"); }) $("#gt").click(function () { $("div:gt(3)").css("background-color","red"); }) $("#header").click(function () { $(":header").css("background-color","green"); }) $("#reset").click(function () { $("div,:header").css("background-color","white"); }) </script> </body> </html>① 可用元素选择器
语法：:enabled 获得可用的元素② 不可用元素选择器
语法：:disabled 获得不可用的元素③ 选中选择器
语法：:checked 获得单选/复选框选中的元素④ 下拉框选中选择器
语法：:selected 获得下拉框选中的元素① html()：获取/设置元素的标签体内容
// 获取元素标签体内容 var div_html = $("#div").html(); // 设置元素标签体内容 $("#div").html("<input type='text'>");该方法相当于JavaScript中的innerHTML属性
// 获取元素标签体内容 var div_html = document.getElementById("div").innerHTML; // 设置元素标签体内容 document.getElementById("div").innerHTML = "<input type='text'>";② text()：获取/设置元素的标签体纯文本内容
// 获取元素标签体文本内容 var div_text = $("#div").text(); // 设置元素标签体文本内容 $("#div").text("123");该方法相当于JavaScript中的innerText属性
// 获取元素标签体文本内容 var div_text = document.getElementById("div").innerText; // 设置元素标签体文本内容 document.getElementById("div").innerText = "123";③ val()：获取/设置元素的value属性值
// 获取元素的value属性值 var input_val = $("#input").val(); // 设置元素的value属性值 $("#input").val("abc");该方法相当于JavaScript中的value属性
// 获取元素的value属性值 var input_val = document.getElementById("input").value; // 设置元素的value属性值 document.getElementById("input").value = "abc";① attr()：获取/设置元素的属性
// 获取元素属性值 var input_type = $("#input").attr("type"); // 修改元素属性值 $("#input").attr("type","text");② removeAttr()：删除属性
$("#input").removeAttr("name");③ prop()：获取/设置元素的属性
// 获取元素属性值 var input_type = $("#input").prop("type"); // 修改元素属性值 $("#input").prop("type","text");④ removeProp()：删除属性
attr和prop的区别
若操作元素的固有属性，则推荐使用prop方法
若操作元素的自定义属性，则推荐使用attr方法
<div id="div" ziDing="zidingyi"></div> <script> alert($("#div").attr("ziDing")); //弹出 zidingyi alert($("#div").prop("ziDing")); //弹出 undefined </script>对于 checked / selected / disabled 这些方法，若元素定义过这些属性，attr()方法会返回对应属性名的字符串，而prop()方法会返回一个布尔值
<input name="123" id="input" type="checkbox" checked="true"> <script> document.write($("#input").prop("checked")); // 输出 true document.write($("#input").attr("checked")); // 输出 checked </script>若没有定义这些属性，prop()方法会返回这些属性的默认布尔值，attr()方法则返回undefined
<input name="123" id="input" type="checkbox" checked="true"> <script> document.write($("#input").prop("disabled")); // 输出 false document.write($("#input").attr("disabled")); // 输出 undefined </script>① addClass()：添加class属性值
$("#div").addClass("red");② removeClass()：删除class属性值
$("#div").removeClass("red");③ toggleClass()：切换class属性
若元素有对应属性，则删除对应属性，若元素没有对应属性，则添加对应属性
<div class="red" id="div">This is a div</div> <script> $("#div").toggleClass("red"); // div的class属性包含red 则删除red $("#div").toggleClass("blue"); // div的class属性不包含blue 则添加blue </script>① append()：父元素将子元素追加到末尾
父元素.append(子元素);
var p = document.createElement("p"); $(p).html("This is a p"); $("#div").append(p); // div标签将p标签追加到末尾② appendTo()：将子元素追加到父元素末尾
子元素.appendTo(父元素);
var p = document.createElement("p"); $(p).html("This is a p"); $(p).appendTo($("#div")); // 将p标签追加到div标签末尾③ prepend()：父元素将子元素添加到开头
父元素.prepend(子元素);
var p = document.createElement("p"); $(p).html("This is a p"); $("#div").prepend(p); // div标签将p标签添加到开头④ prependTo()：将子元素添加到父元素开头
子元素.prependTo(父元素);
var p = document.createElement("p"); $(p).html("This is a p"); $(p).prependTo($("#div")); // 将p标签添加到div标签开头⑤ after()：添加对应元素到元素之后
$(obj1).after(obj2); // 将obj2添加到obj1之后⑥ before()：添加对应元素到元素之前
$(obj1).before(obj2); // 将obj2添加到obj1之前⑦ insertAfter()：添加元素到对应元素之前
$(obj1).insertAfter(obj2); // 将obj1添加到obj2之后⑧ insertBefore()：添加元素到对应元素之后
$(obj1).insertBefore(obj2); // 将obj1添加到obj2之前在方法 ⑤ ⑥ ⑦ ⑧ 中，两个元素应为兄弟关系
⑨ remove()：移除元素
obj.remove(); // 删除obj元素⑩ empty()：清空元素的所有后代元素
obj.empty(); // 删除obj的所有后代元素，保留obj元素