一、样式操作
1、css样式
<body> <div class="c1">111</div> <script src="jquery-3.2.1.min.js"></script> <script> //css赋值操作 $(".c1").css("color","red"); $(".c1").css("border","10px solid green"); $(".c1").css({"font-size":"36px","background-color":"blue"}); //获取css值 console.log($(".c1").css("color")) </script> </body>
2、样式类
总共包含如下四种方式控制标签样式：
addClass() ---添加指定的CSS类名
removeClass() ---移除指定的CSS类名
hasClass() --- 判断样式存不存在
toggleClass() ---切换CSS类名，如果有就移除，如果没有就添加
模拟开关灯实例：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c3{ background: yellow; } </style> </head> <body> <button class="c1">开关按钮</button> <div class="c2" style=" 100px;height: 100px;border-radius: 50%"></div> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").on("click",function () { $(".c2").toggleClass("c3") //如果 $(".c2")的class样式类中有c3样式，则删除此样式，若没有添加此样式 }) </script> </body>
3、位置操作
offset()和position()：
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100px; height: 100px; background-color: #396bb3; position: relative; top: 100px; left: 100px; } .c2{ width: 100px; height: 100px; background-color: #cccccc; position: absolute; top: 50px; left: 50px; } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> <script src="jquery-3.2.1.min.js"></script> <script> //获取位置参数 var $a=$(".c2").offset(); // 获取匹配元素在当前视口的相对偏移 console.log($a); //{top: 158, left: 158} var $b=$(".c2").position(); // 获取匹配元素相对已定位父元素的偏移 console.log($b) //{top: 50, left: 50} //设置位置参数 $(".c2").offset({"top":1000,"left":1000}); //数字不需要加引号和px </script> </body>
scrollTop() ：获取匹配元素相对滚动条顶部的偏移；$(window).scroll() ： 滚动触发，具体应用见如下返回顶部的实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100%; height: 2000px; background-color: #cccccc; } .hide{ display: none; } .c2{ position: fixed; bottom: 10px; right: 10px; background-color: #e59373; } </style> </head> <body> <div class="c1"></div> <button class="c2 hide">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> $(window).scroll(function () { //$(window).scroll() --> 滚动触发 if($(window).scrollTop()>100){ //scrollTop() --> 获取窗口滚动距离 $(".c2").removeClass("hide") } else { $(".c2").addClass("hide") } }); $(".c2").on("click",function () { $(window).scrollTop(0) //scrollTop(0) --> 设置窗口滚动距离为0
4、尺寸操作
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 50px; height: 50px; padding: 20px; border: 10px solid coral; background-color: #cccccc; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.2.1.min.js"></script> <script> //内容区本体设置的宽度 console.log( $(".c1").width()); //50 console.log( $(".c1").height()); //50 //内容区本体设置的宽度+padding的区域宽度 console.log( $(".c1").innerWidth()); //90 console.log( $(".c1").innerHeight()); //90 //内容区本体设置的宽度+padding的区域宽度+border宽度 console.log( $(".c1").outerWidth()); //110 console.log( $(".c1").outerHeight()); //110 </script> </body>
二、文本操作
1、html()与text()
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"><div>111</div></div> <div class="c1">222</div> <div class="c2">333<div>444</div></div> <div class="c2">555</div> <script src="jquery-3.2.1.min.js"></script> <script> //html $(".c1").html(); //取值---得标签下所有内容：<div>111</div>，若有多个class=c1标签，则取第一个 $(".c1").html("<span>aaa</span>"); //赋值--将标签下所有内容都清空，标签有效，若有多个同样标签，均会重新被赋值 //text $(".c2").text(); //取值---取得标签下的纯文本内容，即使有多个也会都取出来：333444555 $(".c2").text("<span>aaa</span>") //赋值---将标签下的所有内容都清空，标签无效，作为文本显示，若有多个同样标签，均会重新被赋值 </script> </body>
2、val()文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" class="c1" value="world"> <input type="checkbox" name="checkboxname" value="v1"/> check1 <input type="checkbox" name="checkboxname" value="v2"/> check2 <div> <input type="radio" name="r" value="r1"/> radio1 <input type="radio" name="r" value="r2"/> radio2 <input type="radio" name="r" value="r3"/> radio3 </div> <select name="" id="d1"> <option value="1">option1</option> <option value="2">option2</option> <option value="3">option3</option> </select> <select name="" id="d2" multiple="multiple"> <option value="4">option4</option> <option value="5">option5</option> <option value="6">option6</option> </select> <script src="jquery-3.2.1.min.js"></script> <script> //input--text $(".c1").val(); //获取输入框内的值 $(".c1").val("hell0"); //给输入框重新赋值 //input--checkbox $(":checkbox").val(); //只会显示第一个对应的value值v1 $(":checkbox:checked").val(); //若有多个被选中，则只会显示第一个对应的value //非数组形式--修改value值 $(":checkbox").val("k1"); //将全部标签的value改为k1 $(":checkbox").val("k1","k2"); //按照第一个值，将全部标签的value改为k1 $(":checkbox:checked").val("k1"); //将选中的标签对应value改为k1 //数组形式--勾选选项 $(":checkbox").val(["v1","v2"]); //通过选项value值选勾选应的选项，value值以数组的形式写,即使选一个也必须为数组形式 //input--ratio $(":radio").val(); //只会显示第一个对应的value值r1 $(":radio:checked").val(); //显示被选中项对应的value值 //非数组形式--修改value值 $(":radio").val("k1"); //把所有的对应的单选框的值改为k1 $(":radio:checked").val("k1"); //把选中的对应的单选框的值改为k1 //数组形式--勾选选项 $(":radio").val(["r1"]); //通过选项value值选勾选应的选项，value值以数组的形式写 //select单选 $("#d1").val(); //获取被选中的选项对应value值 $("#d1").val("2"); //通过选项value值选取对应的选项，结果option2被选中 //select多选 $("#d2").val(); //获取被选中项对应的value值，结果以数组形式显示，即使只选中一个 $("#d2").val(["4","5"]); //通过选项value值选取对应的选项，value值以数组的形式写 $("#d2").val("5") //如果是选一个可以不用数组的形式 </script> </body> </html>
三、属性操作
attr()与prop():
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1" k1="v1"></div> <input type="checkbox"> <input type="radio"> <script src="jquery-3.2.1.min.js"></script> <script> //attr console.log($(".c1").attr("k1")); //查询属性值：v1 $(".c1").attr("k2","v2"); //设置单个属性 $(".c1").attr({"k3":"v3","k4":"v4"}); //设置多个属性 $(".c1").removeAttr("k4"); //删除属性 //prop:适用于checkbox和radio;返回值是true或false //查询属性值： $(":checkbox").prop("checked"); //如果勾选了此，返回true,否则返回false $(":radio").prop("checked"); //如果勾选了此，返回true,否则返回false //设置属性值： $(":checkbox").prop("checked",true); //设置为勾选了此框 $(":checkbox").prop("checked",false); //设置为不勾选了此框 </script> </body> </html>
四、应用实例
下述为全选、反选、取消应用实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px" cellspacing="10" cellpadding="5"> <tr> <th>#</th> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> <tr> <td><input type="checkbox" class="input" value="c1"></td> <td>egon</td> <td>73</td> <td>吃鸡</td> </tr> <tr> <td><input type="checkbox" class="input" value="c2"></td> <td>alex</td> <td>84</td> <td>吹逼</td> </tr> <tr> <td><input type="checkbox" class="input" value="c3"></td> <td>wusir</td> <td>26</td> <td>装死</td> </tr> </table> <button class="selectall">全选</button> <button class="cancel">取消</button> <button class="reverse">反选</button> <script src="jquery-3.2.1.min.js"></script> <script> $(".selectall").on("click",function () { $(":checkbox").prop("checked",true) }); $(".cancel").on("click",function () { $(":checkbox").prop("checked",false) }); $(".reverse").on("click",function () { $(":checkbox").each(function (){ if($(this).prop("checked")){ $(this).prop("checked",false) } else{ $(this).prop("checked",true) } }) }) </script> </body> </html>