JQuery的使用教程
jQuery介绍
- jQuery 是一个 JavaScript 库。
- 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
- jQuery 官网：https://www.jquery.com
基本语法
js对象与jq对象的转化
-
jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而javaScript对象也是不能使用jq对象的方法，两者的方法不能混合使用；所有就涉及到了这两个对象的相互转换。
-
JS 的 DOM 对象转换成 jQuery 对象
格式：$(js的DOM对象); -> 加钱就能转
-
jQuery 对象转换成 JS 对象
格式：jq对象[索引] -> 索引为0就能取出
-
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div">不知火舞</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //js获取对象 let jsDiv = document.getElementById("div"); //jq获取对象 let jqDiv = $("#div"); //输出对象 console.log(jsDiv); console.log("-----------------"); console.log(jqDiv); //将js对象转化为jq对象 ->加钱 let div1 = $(jsDiv); console.log(div1); //将jq对象转化为js对象 let div2 = jqDiv[0]; console.log(div2); </script> </html>
事件的使用
-
常用事件
事件名 说明 onload 某个页面或图像被完成加载 onsubmit 当表单提交时触发该事件 onclick 鼠标单击事件 ondblclick 鼠标双击事件 onblur 元素失去焦点 onfocus 元素获得焦点 onchange 用户改变域的内容 -
在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 on 。
事件的绑定与解绑
-
绑定事件
语法：jQuery 对象.on(事件名称,执行的功能);
-
解绑事件
语法：jQuery 对象.off(事件名称);
注意：如果不指定事件名称，则会把该对象绑定的所有事件都解绑。
-
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="button" id="btn1" value="点我"> <input type="button" id="btn2" value="解绑"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //设置"点我"按钮的单击事件 $("#btn1").on("click", function() { alert("请尽情呵护妲己！"); }); //设置"解绑"按钮的单击事件 $("#btn2").on("click", function() { //解绑"点我"按钮的单击事件 $("#btn1").off("click"); }); </script> </html>
遍历
-
方式一：普通for循环
for(let i = 0; i < 容器对象长度; i++){
执行功能;
} -
方式二：增强for循环
for(ele of 容器对象){
执行功能;
} -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="button" id="btn" value="遍历列表项"> <ul> <li>传智播客</li> <li>黑马程序员</li> <li>传智专修学院</li> </ul> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //获取li集合 let lis = $("li"); //为按钮绑定点击事件 $("#btn").click(function () { //普通for循环遍历方式 for (let i = 0; i < lis.length; i++) { console.log(i + ":" + lis[i].innerText); } }); //为按钮绑定点击事件 $("#btn").click(function() { //使用增强for循环进行遍历 for(let ele of lis) { console.log(ele); } }); </script> </html>其它时间的使用基本都差不多。
jQuery选择器
- 选择器：类似于 CSS 的选择器，可以帮助我们获取元素例如：id 选择器、类选择器、元素选择器、属性选择器
- jQuery 中选择器的语法：$();
基本选择器
-
语法
选择器 语法 作用 元素选择器 $(“元素名称”) 根据元素名称获取元素对象们 id 选择器 $(“id属性的值”) 根据id属性值获取元素对象 类选择器 $(".class的属性值") 根据class属性值获取元素对象们 -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div1">div1</div> <div class="cls">div2</div> <div class="cls">div3</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //标签选择器 let ele1 = $("div"); console.log(ele1); //id选择器 let ele2 = $("#div1"); console.log(ele2); //类选择器 let ele3 = $(".cls"); console.log(ele3); </script> </html>
层级选择器
-
语法
选择器 语法 作用 后代选择器 $(“A B”) 获取A标签下的所有B标签(包括B标签的子级) 子选择器 $(A > B) 获取A标签下所有的B标签(不包括B的子级) 兄弟选择器 $(A + B) 获取A标签同级的下一个B标签 兄弟选择器 $(A ~ B) 获取A标签同级的所有B标签 -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <span>s1 <span>s1-1</span> <span>s1-2</span> </span> <span>s2</span> </div> <div></div> <p>p1</p> <p>p2</p> <a href="">呵呵</a> <p>p3</p> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //获取div下的所有span let spans1 = $("div span"); console.log(spans1); //获取div下的子span let spans2 = $("div > span"); console.log(spans2); //获取div同级的下一个p let ps1 = $("div + p"); console.log(ps1); //获取div同级的所有p let ps2 = $("div ~ p"); console.log(ps2); </script> </html>
属性选择器(关键字符 [ ] )
-
语法：
选择器 语法 作用 属性名选择器 $(“元素名[属性名]”) 根据指定属性名获取元素对象们 属性值选择器 $(“元素名[属性名=‘属性值’]”) 根据和指定的属性名和属性值获取元素对象们 -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text"> <input type="password"> <input type="password"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //获取包含了type属性的元素 let inputs1 = $("input[type]"); console.log(inputs1); //获取包含了type属性的元素，并且属性名要为password let inputs2 = $("input[type='password']"); console.log(inputs2); </script> </html>
过滤选择器(关键字符 : )
-
语法
选择器 语法 作用 首元素选择器 $(“A:first”); 获得选择元素中的第一个元素 尾元素选择器 $(“A:last”) 获得选择元素中的最后一个元素 非元素选择器 $(A:not(B)) 不包括指定内容的元素 偶数选择器 $(A:even) 获取A元素上偶数位的元素，从0为偶数 奇数选择器 $(A:odd) 获取A元素上奇偶位的元素，从0开始计数 等于索引选择器 $(“A:eq(index)”) 获取指定索引位的元素 大于索引选择器 $(“A:gt(index)”) 获取大于指定索引的元素 小于索引选择器 $(“A:lt(index)”) 获取小于指定索引的元素 -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>div1</div> <div id="div2">div2</div> <div>div3</div> <div>div4</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //首元素选择器 let div1 = $("div:first"); console.log(div1); //尾元素选择器 let div2 = $("div:last"); console.log(div2); //非元素选择器 let divs1 = $("div:not(#div2)"); console.log(divs1); //偶数选择器 let divs2 = $("div:even"); console.log(divs2); //奇数选择器 let divs3 = $("div:odd"); console.log(divs3); //等于索引选择器 let div3 = $("div:eq(2)"); console.log(div3); //大于索引选择器 let divs4 = $("div:gt(1)"); console.log(divs4); //小于索引选择器 let divs5 = $("div:lt(2)"); console.log(divs5); </script> </html>
表单属性选择器
-
语法
选择器 语法 作用 可用元素选择器 $(“A:enabled”) 获取可用的A元素 不可用元素选择器 $(“A:disabled”) 获取不可用的A元素 单选/复选框被选中的元素 $(“A:checked”) 获取单选/复选框选中的元素 下拉框被选中的元素 $(“A:selected”) 获取下拉列表框中被选中的元素 -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" disabled> <input type="text"> <input type="radio" name="gender" value="men" checked>男 <input type="radio" name="gender" value="women">女 <input type="checkbox" name="hobby" value="study" checked>学习 <input type="checkbox" name="hobby" value="sleep" checked>睡觉 <select> <option>---请选择---</option> <option selected>本科</option> <option>专科</option> </select> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1.可用元素选择器 $("A:enabled"); let ins1 = $("input:enabled"); console.log(ins1); // 2.不可用元素选择器 $("A:disabled"); let ins2 = $("input:disabled"); console.log(ins2); // 3.单选/复选框被选中的元素 $("A:checked"); let ches1 = $("input:checked"); console.log(ches1); // 4.下拉框被选中的元素 $("A:selected"); let sel1 = $("select option:selected"); console.log(sel1); </script> </html>
jQuery DOM(文档对象模型)
操作文本
-
语法
方法 作用 html([value]) 没有参数就是获取元素的文本，有参数就是设置元素的文本内容(解析标签) text([value]) 没有参数就是获取元素的文本，有参数就是设置元素的文本内容(不解析标签) -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div">我是div</div> <input type="button" id="btn1" value="获取div的文本"> <input type="button" id="btn2" value="设置div的文本"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //获取元素文本 $("#btn1").click(function() { let value = $("#div").html(); console.log(value); }); //设置元素文本 $("#btn2").click(function() { $("#div").html("<b>不知火舞</b>"); }); //获取元素文本 $("#btn1").click(function() { let value = $("#div").text(); console.log(value); }); //设置元素文本 $("#btn2").click(function() { $("#div").text("<b>不知火舞</b>"); }); </script> </html>
操作对象
-
语法
方法 作用 $(“元素”) 创建指定元素 append(element) 添加成最后一个子元素，由添加者对象调用 appendTo(element) 添加成最后一个子元素，由被添加者对象调用 prepend(element) 添加成第一个子元素，由添加者对象调用 prependTo(element) 添加成第一个子元素，由被添加者对象调用 before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 remove() 删除指定元素(自己移除自己) empty() 清空指定元素的所有子元素 -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div"></div> <input type="button" id="btn1" value="添加一个span到div"> <br><br><br> <input type="button" id="btn2" value="将加油添加到城市列表最下方"> <input type="button" id="btn3" value="将加油添加到城市列表最上方"> <input type="button" id="btn4" value="将雄起添加到上海下方"> <input type="button" id="btn5" value="将雄起添加到上海上方"> <ul id="city"> <li id="bj">北京</li> <li id="sh">上海</li> <li id="gz">广州</li> <li id="sz">深圳</li> </ul> <ul id="desc"> <li id="jy">加油</li> <li id="xq">雄起</li> </ul> <br><br><br> <input type="button" id="btn6" value="将雄起删除"> <input type="button" id="btn7" value="将描述列表全部删除"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 1. $("元素") 创建指定元素 $("#btn1").click(function () { //创建元素 let span = $("<span>不知火舞</span>"); //添加到div中 $("#div").append(span); }); // 2. append(element) 添加成最后一个子元素，由添加者对象调用 $("#btn2").click(function () { //获取加油元素 let jy = $("#jy"); console.log(jy); //添加到城市ul中 $("#city").append(jy); }); // 3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用 $("#btn3").click(function () { //获取加油元素 let jy = $("#jy"); console.log(jy); //将加油添到城市ul中 jy.appendTo($("#city")); }); // 4. prepend(element) 添加成第一个子元素，由添加者对象调用 $("#btn2").click(function () { //获取加油元素 let jy = $("#jy"); //添加到城市ul中 $("#city").prepend(jy); }); // 5. prependTo(element) 添加成第一个子元素，由被添加者对象调用 $("#btn3").click(function () { //获取加油元素 let jy = $("#jy"); //将加油元素添加到城市ul中 jy.prependTo($("#city")) }); // 6. after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 $("#btn4").click(function () { //获取雄起元素 let xq = $("#xq"); //将雄起元素添加到上海元素的下方 $("#sh").after(xq); }); // 7. before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 $("#btn5").click(function () { //获取雄起元素 let xq = $("#xq"); //将雄起元素添加到上海元素的上方 $("#sh").before(xq); }); // 8. remove() 删除指定元素(自己移除自己) $("#btn6").click(function () { //移出雄起元素 $("#xq").remove(); }); // 9. empty() 清空指定元素的所有子元素 $("#btn7").click(function () { //所有描述元素 $("#desc").empty() }); </script> </html>
操作样式
-
语法
方法 作用 css(name) 根据样式名称获取css样式 css(name, value) 设置指定的css样式 addClass(value) 给元素添加指定的class属性的值(通过类名结合css给元素设置样式) removeClass(value) 删除元素的class属性值 toggleClass(value) 如果没有class属性，则添加。如果有，则删除 -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作样式</title> <style> .cls1 { background: pink; height: 30px; } </style> </head> <body> <div style="border: 1px solid red;" id="div">我是div</div> <input type="button" id="btn1" value="获取div的样式"> <input type="button" id="btn2" value="设置div的背景色为蓝色"> <br><br><br> <input type="button" id="btn3" value="给div设置cls1样式"> <input type="button" id="btn4" value="给div删除cls1样式"> <input type="button" id="btn5" value="给div设置或删除cls1样式"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //创建按钮的单击事件，获取div的样式。 $("#btn1").click(function () { //使用css()方法，获取元素的样式 let result = $("#div").css("border"); console.log(result); }); //创建按钮单击事件，设置div的背景颜色 $("#btn2").click(function () { $("#div").css("background", "blue"); }); //创建按钮单击事件，给div设置class样式，起始就是设置div的class属性 $("#btn3").click(function() { $("#div").addClass("cls1"); }); //创建按钮单击事件，删除div的class样式 $("#btn4").click(function() { $("#div").removeClass(); }); //删除或设置div的样式 $("#btn5").click(function() { $("#div").toggleClass("cls1"); }); </script> </html>
操作属性
-
语法
方法 作用 attr(name, [value]) 只有name就是获取属性值，name和value都有就是设置属性及属性值 prop(name,[value]) 作用跟上面的方法相同，但是多用于设置属性值为布尔值的属性，如(checked，selected) -
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="username"> <br> <input type="button" id="btn1" value="获取输入框的id属性"> <input type="button" id="btn2" value="给输入框设置value属性"> <br><br> <input type="radio" id="gender1" name="gender">男 <input type="radio" id="gender2" name="gender">女 <br> <input type="button" id="btn3" value="选中女"> <br><br> <select> <option>---请选择---</option> <option id="bk">本科</option> <option id="zk">专科</option> </select> <br> <input type="button" id="btn4" value="选中本科"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //创建按钮的单击事件，获取文本输入框的点击事件 $("#btn1").click(function () { let result = $("#username").attr("id"); console.log(result); }); //创建按钮单击事件，给文本输入框的value属性设置值 $("#btn2").click(function () { $("#username").attr("value", "鲁班七号"); }); //创建按钮单击事件，当点击按钮的时候，选中单选框"女" $("#btn3").click(function () { //设置单选框的checked属性为true $("#gender2").prop("checked", true); }); //创建按钮单击事件，当点击按钮的时候，选中下拉列表框的本科 $("#btn4").click(function() { //设置拉下列表框的option标签的属性selected为true $("#bk").prop("selected", true); }); </script> </html>
扫一扫
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
