一. 在HTML网页中引入jQuery
jQuery本质上就是一个装满了JS函数的文件，因此引入jQuery还是使用script标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--把下载好的jQuery库文件保存在项目根目录下js目录中--> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <script> // 在页面的console中打印$来判断jQuery是否成功引入到当前网页中 console.log($); // 在控制台显示"function jQuery()"即表明引用成功 // $是jQuery的核心对象 console.log(jQuery); // 这样判断结果一样 </script> </body> </html>
二. 让js代码在页面加载完成以后执行，之前是用window.onload来完成
jQuery中，也提供了一个页面加载函数，即入口函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> <script> // // window.onload方法 // window.onload = function () { // console.log(document.getElementById("title").innerHTML); // 标题 // }; // // 这个方法有个缺点，如果有多个onload，只有最后一个onload里面的代码会被执行，前面的都被覆盖了 // window.onload = function () { // console.log(111); // 111 // }; // 而在jQuery中可以使用ready入口函数来解决这个问题 $(document).ready(function () { console.log(document.getElementById("title").innerHTML); // 标题 }); // 再写一个入口函数，查看是否两个都会被执行 $(document).ready(function () { console.log(111); // 111 }); // 运行发现两个都会运行 // 当然，一般也不会这样写多个入口函数 //另外，ready函数写法可以简化 $(function () { console.log(222); // 222 console.log(document.getElementById("title").innerHTML); }); </script> </head> <body> <h1 id="title">标题</h1> </body> </html>
三. jQuery获取标签元素
jQuery为了简化js获取元素的操作，参考了CSS选择器的规则
jQuery还额外提供了一些CSS没有的选择器
jQuery根据选择器设计了一套获取元素的方法
jQuery常用选择器的写法
$("#test"); // 获取id为test的元素
$(".myClass"); // 获取所有class为myClass的元素
$("li"); // 获取所有的li元素
$("#ul1 li span"); // 获取id为ul1元素下的所有li下的所有的span元素
$("input[name=first]"); // 获取所有name为first的input元素
$("p, h1"); // 获取所有的p元素和h1元素
$(".list li:odd"); // 获取class为list的所有元素下所有下标(索引号)为奇数的li
$(".list li:even"); // 获取class为list的所有元素下所有下标(索引号)为偶数的li
$("input[name=fav]:checked"); // 获取name为fav的所有被选中状态的input元素，用于多选框
总结
1. 使用CSS的选择器作为$()的参数，可以直接获取html元素，而且可以获取多个
$("#id") // id选择器
$(".class") // 类选择器
$("ul li") // 层级选择器
$("h1, div") // 群组选择器
2. 不管jQuery使用选择器是否获取到元素，都会返回类似数组的jQuery对象，目的有两个：
2.1. 方便开发者获取元素以后直接继续使用jQuery的其他操作方法
2.2. 防止报错
3. 可以在获取元素以后，直接使用.html()获取元素的内容
4. 可以在获取元素以后，直接使用.css()操作元素的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <p id="first">这是一个段落</p> <script> // 根据id属性值获取一个元素：$("#id值") console.log($("#first")); // Object { 0: p#first, length: 1, context:..., selector: "#first" } // 检测是否有获取到元素可以通过返回值[jQuery数组对象]的length属性来观察 console.log($("#first").length); // 1 console.log($("#abc").length); // 0 表示文档中不存在id为abc的元素 // 获取id为first元素的内容 console.log($("#first").html()); // 这是一个段落 // 注意，因为$()函数获取到的元素返回值是一个类似数组的jQuery对象，而不是JS那样的一个元素对象 // 因此不具备JS元素的操作方法，比如这样就不行 console.log($("#first").innerHTML); // undifined </script> <ul class="list"> <li class="num1">第一个列表</li> <li class="num2">第二个列表</li> <li class="num2">第三个列表</li> </ul> <script> // 获取类元素的方法：$(".类名") console.log($(".list")); // Object { 0: ul.list, length: 1, prevObject: {…}, context: ..., selector: ".list" } console.log($(".list").html()); // <li class="num1">第一个列表</li> // <li class="num2">第二个列表</li> // <li class="num3">第三个列表</li> // 可以获取多个同类名元素 console.log($(".num2")); // Object { 0: li.num2, 1: li.num2, length: 2, prevObject: {…}, context: ..., selector: ".num2" } // 如果jQuery获取的是多个元素，如果这样写只会获取第一个成员的内容 console.log($(".num2").html()); // 第二个列表 // 为了获取所有成员的内容，使用数组的遍历 for (let i = 0; i < $(".num2").length; i++) { console.log($(".num2").eq(i).html()); } // 第二个列表 // 第三个列表 // 另外，注意这里的ea(i)的用法 </script> <div class="list2"> <p class="num3">第一段内容</p> <p class="num4">第二段内容</p> <p class="num4">第三段内容</p> </div> <p class="num4">第四段内容</p> <script> // 使用标签名选择器：$("标签名") console.log($("div")); // Object { 0: div.list2, length: 1, prevObject: {…}, context: ..., selector: "div" } // 一般使用层级选择器 console.log($(".list2.num3")); console.log($(".list2.num4")); </script> <style> input[name=idcard] { border: 1px solid red; } </style> <input type="text" name="username" /> <input type="text" name="address" /> <input type="text" name="idcard" /> <script> // 属性选择器 console.log($("input")); console.log($("input[name=idcard]")); // Object { 0: input, length: 1, prevObject: {…}, context: ..., selector: "input[name=idcard]" } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <ul class="list"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> // 获取所有.list下面的li console.log($(".list li")); // Object { 0: li, 1: li, 2: li, 3: li, 4: li, length: 5, prevObject: {…}, context: ..., selector: ".list li" } // 获取所有.list下的索引下标为奇数的li console.log($(".list li:odd")); // 获取所有.list下的索引下标为偶数的li console.log($(".list li:even")); // 扩展：实现换色效果 $(".list li:odd").css({ color: "red", backgroundColor: "gray", }) </script> <ul> <li><input type="checkbox" checked></li> <li><input type="checkbox"></li> <li><input type="checkbox" checked></li> <li><input type="checkbox"></li> </ul> <script> // 获取多选框中具有勾选状态的所有标签 // 一般用于全选、反选或取消 console.log($("li input:checked")); </script> </body> </html>
四. jQuery提供了以下过滤元素的方法
$("div").has("p"); // 选择包含p元素的所有div元素
$("div").not(".myClass") // 选择class不等于myClass的所有div元素
$("div").eq(5); // 选择所有div元素中下标为5的div元素(因此可以用在循环中)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <ul class="list"> <li>1</li> <li class="last num">2</li> <li class="last">3</li> <li class="last num"></li> </ul> <script> // 获取所有元素为li的第二个[索引下标为1] console.log($(".list li")); console.log($(".list li").eq(1)); // eq表示从查询结果的数组提取指定下标的成员 // 获取除了指定元素外的其他所有元素：not() console.log($(".list li").not(".last").html()); // 1 </script> <ul class="list2"> <li><a href="">第0个</a></li> <li><a href="" class="link">第1个</a></li> <li><a href="">第2个</a></li> <li><a href="" class="link">第3个</a></li> <li><a href="">第4个</a></li> </ul> <script> // 在所有li元素中找出内部具有.link类名的元素：has() console.log($(".list2 li").has(".link")); // 注意是返回元素 </script> </body> </html>
五. 选择器的关系操作
jQuery中提供了允许通过标签之间的关系来选中目标的其他关系元素,通过指定元素获取其所有子元素等。
在jQuery中除了可以使用选择器来获取元素以外
还可以利用标签之间的嵌套[父子]关系或者并列[兄弟]关系来操作元素
$('#box').prev(); // 选择#box元素前面紧挨的同辈元素
$('#box').prevAll(); // 选择#box元素之前所有的同辈元素
$('#box').next(); // 选择#box元素后面紧挨的同辈元素
$('#box').nextAll(); // 选择#box元素后面所有的同辈元素
$('#box').parent(); // 选择#box元素的父元素
$('#box').children(); // 选择#box元素的所有子元素
$('#box').siblings(); // 选择#box的元素的同级元素
$('#box').find('.myClass'); // 选择#box的元素内的class等于myClass的子孙元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <p>第1个文本</p> <p class="p2">第2个文本</p> <div class="box"> <p class="p3">第3个文本</p> <a href="">链接</a> </div> <a href="">链接</a> <script> // 获取div所有的兄弟元素：siblings console.log($(".box").siblings()); // Object { 0: p, 1: p.p2, 2: a, 3: script, length: 4...} // 获取div元素前面的所有兄弟元素：prevAll() console.log($(".box").prevAll()); // 获取div元素后面的所有兄弟元素：nextAll() console.log($(".box").nextAll()); // 获取div元素前面的一个兄弟元素：prev() console.log($(".box").prev()); // 获取div元素后面的一个兄弟元素：next() console.log($(".box").next()); // 获取后面的第二个兄弟元素：next().next() // 获取当前元素自身下标：index() console.log($(".box").index()); // 2 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <p>第一个文本</p> <p class="p2">第二个文本</p> <div class="box"> <p class="p3">第三个文本 <span> <a href="" class="move"></a> </span> </p> <a href="">链接</a> </div> <a href="">链接</a> <script> // 获取指定元素的父元素：parent() console.log($(".box").parent()); // Object { 0: body, length: 1...} console.log($(".box").parent().parent()); // Object { 0: html, length: 1...} // 获取指定元素的所有父系元素：parents() console.log($(".p3").parents()); // Object { 0: div.box, 1: body, 2: html, length: 3...} // 获取指定元素的所有子元素：children() console.log($("body").children()); // 获取指定元素的所有孙子元素：children().children() console.log($("body").children().children()); // 查找指定选择器的子孙元素：find() console.log($(".box").find(".move")); </script> </body> </html>
六.
获取元素的属性
$("#img1").attr("src"); // 1.6版本以下使用这个，1.6以上操作表单的时候，需要换成prop
$("#img1").prop("src");
$("#fav").prop("checked"); // 用于单选框或者复选框
设置元素的属性值
$('#img1').attr("src","test.jpg"); // 1.6版本以下使用这个
$('#img1').prop("src","test.jpg");
$('#img1').prop({"src": "test.jpg", "alt": "Test Image" });
总结：
1. 获取属性，需要传递一个属性名称参数传递到prop方法中，否则jQuery不清楚我们要获取哪个属性。
2. 设置如果是设置一个属性，可以给prop传递两个参数：
prop("属性名","属性值");
设置多个属性，只需要传递一个js对象参数
prop({"属性1":"属性值1","属性2":"属性值2",.....});
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <img src="jquery/images/1.png" alt=""> <p>第一个文本</p> <form action=""> 账号：<input type="text" value="admin" /><br /> 密码：<input type="password" name="password" /><br /> </form> <script> // html网页中只有双标签内容，单标签只有属性和值 // html()只能获取双标签的内容 console.log($("p").html()); // 第一个文本 // html()还可以修改元素的内容，把要修改后的内容作为参数传入html() // 如果要清空内容，直接使用空白字符串 $("p").html("<a href=''>这里把文本内容变成一个链接了</a>"); // 查看网页显示结果 // 对于表单来说，获取表单元素的值：value()；修改内容：value(参数) console.log($("input[type=text]").val()); // admin console.log($("input[type=text]").val("user")); console.log($("input[type=text]").val()); // user // 获取纯文本内容，使用text()，标签代码会被剔除 console.log($("body").text()); // 这里把文本内容变成一个链接了 // // 账号： // 密码： // // // // html网页中只有双标签内容，单标签只有属性和值 // // html()只能获取双标签的内容 // console.log($("p").html()); // 第一个文本 // // // html()还可以修改元素的内容，把要修改后的内容作为参数传入html() // // 如果要清空内容，直接使用空白字符串 // $("p").html("<a href=''>这里把文本内容变成一个链接了</a>"); // // 查看网页显示结果 // // // 对于表单来说，获取表单元素的值：value()；修改内容：value(参数) // console.log($("input[type=text]").val()); // admin // console.log($("input[type=text]").val("user")); // console.log($("input[type=text]").val()); // user // // // 获取纯文本内容，使用text()，标签代码会被剔除 // console.log($("body").text()); // // body里面的所有内容都显示出来了 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <img src="jquery/images/1.png" alt=""> <p>第一个文本</p> <form action=""> 账号：<input type="text" value="admin" /><br /> 密码：<input type="password" name="password" /><br /> 爱好：<input type="checkbox" name="love" value="aa">aa <input type="checkbox" name="love" value="bb">bb <input type="checkbox" name="love" value="cc">cc </form> <script> // 通过attr来获取元素指定属性的值 console.log($("img").attr("src")); // jquery/images/1.png // 设置(修改)元素指定属性的值[设置单个属性值] $("img").attr("src", "jquery/images/2.png"); // 设置多个属性值，参数是json对象，即{键1: 值, 键2: 值...} // 注意，alt的值只有当图片不显示时才会显示在网页中 $("img").attr({"src": "2.png", "alt": "这是一张图片"}); // 还可以在修改属性的时候，传入匿名函数 $("img").attr("src", function () { let num = parseInt(Math.random()*2 + 1); return "images/" + num + ".png"; }); // 在html元素中，有些元素的属性和值是同名的，比如 // checked = "checked" // selected = "selected" // disabled = "disabled" // 在JS中修改状态可以使用布尔值来处理 $("input[name=love]").attr("checked", false); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/js/jquery-1.12.4.js"></script> </head> <body> <ul> <li><input type="checkbox" name="love" /></li> <li><input type="checkbox" name="love" /></li> <li><input type="checkbox" name="love" /></li> <li><input type="checkbox" name="love" /></li> <li><input type="checkbox" name="love" /></li> <li><input type="checkbox" name="love" /></li> </ul> 全选 <input type="checkbox" name="all" /> 反选 <input type="checkbox" name="rev" /> <script> // 绑定事件 // js jQ jQ简写]常用 // onclick $("控制器").click(function(){}); $("控制器").on("click",function(){}) // onchange $("控制器").change(function(){}); $("控制器").on("change",function(){}) // 全选 $("input[name=all]").change(function () { // 如果在jQuery元素绑定的事件中，表示当前jQuery元素需要使用$(this) // 而this代表的是当前事件的JS元素，因此无法使用jQuery提供的方法 if ($(this).prop("checked") == true) { // 如果当前全选状态没有被定义属性checked，或属性checked的值不是true,则使用全选 $("li input").prop("checked", true); } else { $("li input").prop("checked", false); } }); // 反选 $("input[name=rev]").change(function () { $("li input").prop("checked", function () { console.log($(this)); // $(this)代表的是调用prop对象，即input console.log($(this).prop("checked")); // 获取当前元素对象的checked值 // 把当前元素的checked属性取反，返回 return !$(this).prop("checked"); }) }) </script> </body> </html>
七. jQuery操作元素的样式
获取元素的css样式
$("div").css("width");
设置元素的css样式
$("div").css("width","30px");
$("div").css("height","30px").css("background","red");
$("div").css({"font-size":"30px","color":"red"}); // 同时设置多个样式属性
jQuery操作样式类名改变元素的样式
$("#div1").addClass("divClass2") // 为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass") // 移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") // 移除多个样式
$("#div1").toggleClass("anotherClass") // 重复切换anotherClass样式
总结：
1. jQuery提供了css方法和addClass等给我们操作元素的样式属性。
2. css的使用
获取元素的外观样式 css("样式名称");
设置元素的外观样式 css("样式名称","样式值");
css({"样式名称1":"样式1的值","样式名称2":"样式2的值",...})
添加样式类名 addClass("样式类名1 样式类名2");
移除样式类名 removeClass("样式类名1 样式类名2");
切换样式类名 toggleClass("样式类名");
3. css()不仅可以获取行内样式，还可以获取嵌入式或外链式的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> <style> .first { color: red; font-size: 32px; } .last { border: 1px solid blue; background-color: orange; } .bg { background-color: #aaaaaa; } </style> </head> <body> <ul> <li class="first">第1</li> <li>第2</li> <li>第3</li> </ul> <script> // 获取元素的指定样式：css() console.log($(".first").css("color")); console.log($(".first").css("font-size")); // 设置元素的指定样式[一个样式] $(".first").css("background-color", "pink"); // 设置多个样式 $(".first").next().css({ "background-color": "yellow", "border": "1px solid red", }); // 设置多个样式时还可以使用addClass和removeClass // 注意这里的eq(-1)的用法 $("ul li").eq(-1).addClass("last"); // 移除类名 $("ul li").eq(0).removeClass("first"); </script> <button class="btn">开灯</button> <script> $(".btn").click(function () { // 执行toggleClass时，当前元素如果有对相应的类名，则被删除，如果没有，则自动添加 $("body").toggleClass("bg"); }) </script> </body> </html>
八. jQuery的链式编程
在jQuery中，如果一直对同一个元素或元素的其他关系元素（兄弟元素，父子元素）
进行操作，那么可以使用 .语法(点语法)，一直写下去。
$("#box").css("background", "pink").css("font-size":"29px");
$("#box").siblings().css("background", "");
可以写成：
$("#box").css("background", "pink").siblings().css("background", "red");
链式编程的实现原理
jQuery可以让我们开发者一直使用点语法调用自身方法的原理
主要原因是jQuery内部利用了js的对象来实现。
在python中，我们知道self在方法内部表示当前对象自身
同理，js的方法中也有一个this表示当前对象。
// js中，声明一个对象
var obj = {
name:"小明",
desc: function(){
console.log(this); // 打印当前自身对象
console.log(this.name); // 调用自身对象的属性
return this; // 实现链式编程的原理，就是在调用方法后，方法本身返回对象。
},
say: function(){
console.log("hello!");
return this;
}
}
总结：
1. 实现链式编程的核心，是对象中的每一个方法都会返回当前对象。
var 对象 = {
方法名:function(){
// .....
return this; // 实现链式编程的核心
}
}
2. 在方法中，js提供一个this的关键字，表示当前对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <body> <ul> <li class="first">第1</li> <li>第2</li> <li>第3</li> </ul> <script> // 给某个元素添加两个CSS样式的方法 $(".first").css("color", "red").css("font-size", "32px"); console.log($(".first")); console.log($(".first").css("color", "red")); console.log($(".first").css("color", "red").css("font-size", "32px")); console.log($(".first").css("font-weight", "blod").prop("little", "提示文本").html("hello")); // 链式编程 // 在对象每次调用自身方法的时候，如果返回值是自己当前对象，这种思想就是链式编程 // 使用原生的JS来编写一个对象，实现这种链式编程 let obj = { css: function () { console.log("执行了CSS"); // 实现链式编程的核心就是return this return this; }, html: function () { return this; } }; console.log(obj.css().css().html()); </script> </body> </html>
九.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <body> <form action=""> 账号：<input type="text" name="username" /><span></span><br /> 密码：<input type="text" name="password"><br /> 确认密码：<input type="text" name="password2"><br /> <input type="submit" value="注册"> </form> <script> // 账号只能6-10位长度 // onblur $("input[name=username]").on("blur", function () { // 获取账号值的长度，注意在input中是val(),不是html() usernameLen = $(this).val().length; if (usernameLen > 6 && usernameLen < 10) { // 这里对应span标签 $(this).next.html("账号长度合法"); } else { $(this).next.html("账号长度不合法"); } }); $("input[type=submit]").on("click", function () { let usernameLen = $("input[name=username]").val().length; if (usernameLen > 6 && usernameLen < 10) { $(this).next.html("账号长度合法"); } else { $(this).next.html("账号长度不合法"); // 阻止表单提交 return false; } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> <style> .level2 { display: none; } </style> </head> <body> <ul class="nav"> <li><a href="">首页</a></li> <li> <a href="">商品列表</a> <ul class="level2"> <li><a href="">皮鞋</a></li> <li><a href="">男装</a></li> <li><a href="">皮衣</a></li> </ul> </li> <li> <a href="">商品列表</a> <ul class="level2"> <li><a href="">皮鞋</a></li> <li><a href="">男装</a></li> <li><a href="">皮衣</a></li> </ul> </li> </ul> <script> console.log($(".nav").children()); $(".nav").children().hover(function () { // 鼠标移入 $(this).find(".level2").css("display", "block"); }, function () { // 鼠标移出 $(this).find(".level2").css("display", "none"); }); </script> </body> </html>