一、jQuery内容选择器（选择器部分可参考jQuery文档查询）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-jQuery内容选择器</title> <style> div{ width: 50px; height: 100px; background: red; margin-top: 5px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 // :empty 作用:找到既没有文本内容也没有子元素的指定元素 // var $div = $("div:empty"); // console.log($div); // :parent 作用: 找到有文本内容或有子元素的指定元素 // var $div = $("div:parent"); // console.log($div); // :contains(text) 作用: 找到包含指定文本内容的指定元素 // var $div = $("div:contains('我是div')"); // console.log($div); // :has(selector) 作用: 找到包含指定子元素的指定元素 var $div = $("div:has('span')"); console.log($div); }); </script> </head> <body> <div></div> <div>我是div</div> <div>他们我是div123</div> <div><span></span></div> <div><p></p></div> </body> </html>
二、jQuery的attr方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-jQuery的attr方法</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 1.attr(name|pro|key,val|fn) 作用: 获取或者设置属性节点的值 可以传递一个参数, 也可以传递两个参数 如果传递一个参数, 代表获取属性节点的值 如果传递两个参数, 代表设置属性节点的值 注意点: 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值 如果是设置:找到多少个元素就会设置多少个元素 如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增 2.removeAttr(name) 删除属性节点 注意点: 会删除所有找到元素指定的属性节点 */ // console.log($("span").attr("class")); $("span").attr("class", "box"); // $("span").attr("abc", "123"); // $("span").removeAttr("class name"); }); </script> </head> <body> <span class="span1" name="it666"></span> <span class="span2" name="lnj"></span> </body> </html>
三、jQuery的prop方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17-jQuery的prop方法</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 1.prop方法 特点和attr方法一致 2.removeProp方法 特点和removeAttr方法一致 */ /* $("span").eq(0).prop("demo", "it666"); $("span").eq(1).prop("demo", "lnj"); console.log($("span").prop("demo")); $("span").removeProp("demo"); */ /* 注意点: prop方法不仅能够操作属性, 他还能操作属性节点 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() */ // console.log($("span").prop("class")); // $("span").prop("class", "box"); console.log($("input").prop("checked")); // true / false console.log($("input").attr("checked")); // checked / undefined }); </script> </head> <body> <span class="span1" name="it666"></span> <span class="span2" name="lnj"></span> <input type="checkbox"> </body> </html>
四、jQuery操作类（修改class属性）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-jQuery操作类相关的方法</title> <style> *{ margin: 0; padding: 0; } .class1{ width: 100px; height: 100px; background: red; } .class2{ border: 10px solid #000; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 1.addClass(class|fn) 作用: 添加一个类 如果要添加多个, 多个类名之间用空格隔开即可 2.removeClass([class|fn]) 作用: 删除一个类 如果想删除多个, 多个类名之间用空格隔开即可 3.toggleClass(class|fn[,sw]) 作用: 切换类 有就删除, 没有就添加 */ var btns = document.getElementsByTagName("button"); btns[0].onclick = function () { // $("div").addClass("class1"); $("div").addClass("class1 class2"); } btns[1].onclick = function () { // $("div").removeClass("class2"); $("div").removeClass("class2 class1"); } btns[2].onclick = function () { $("div").toggleClass("class2 class1"); } }); </script> </head> <body> <button>添加类</button> <button>删除类</button> <button>切换类</button> <div></div> </body> </html>
五、jQuery操作html，操作文本，操作value的相关方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20-jQuery文本值相关的方法</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; border: 1px solid #000; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 1.html([val|fn]) 和原生JS中的innerHTML一模一样 2.text([val|fn]) 和原生JS中的innerText一模一样 3.val([val|fn|arr]) */ var btns = document.getElementsByTagName("button"); btns[0].onclick = function () { $("div").html("<p>我是段落<span>我是span</span></p>"); } btns[1].onclick = function () { console.log($("div").html()); } btns[2].onclick = function () { $("div").text("<p>我是段落<span>我是span</span></p>"); } btns[3].onclick = function () { console.log($("div").text()); } btns[4].onclick = function () { $("input").val("请输入内容"); } btns[5].onclick = function () { console.log($("input").val());; } }); </script> </head> <body> <button>设置html</button> <button>获取html</button> <button>设置text</button> <button>获取text</button> <button>设置value</button> <button>获取value</button> <div></div> <input type="text"> </body> </html>
六、jQuery操作css样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-jQuery操作CSS样式的方法</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 // 1.逐个设置 $("div").css("width", "100px"); $("div").css("height", "100px"); $("div").css("background", "red"); // 2.链式设置 // 注意点: 链式操作如果大于3步, 建议分开 $("div").css("width", "100px").css("height", "100px").css("background", "blue"); // 3.批量设置 $("div").css({ "100px", height: "100px", background: "red" }); // 4.获取CSS样式值 console.log($("div").css("background"));; }); </script> </head> <body> <div></div> </body> </html>
七、jQuery操作尺寸和位置的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>22-jQuery位置和尺寸操作的方法</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; border: 50px solid #000; margin-left: 50px; position: relative; } .son{ width: 100px; height: 100px; background: blue; position: absolute; left: 50px; top: 50px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 var btns = document.getElementsByTagName("button"); // 监听获取 btns[0].onclick = function () { // 获取元素的宽度 // console.log($(".father").width()); // offset([coordinates]) // 作用: 获取元素距离窗口的偏移位 // console.log($(".son").offset().left); // position() // 作用: 获取元素距离定位元素的偏移位 console.log($(".son").position().left); } // 监听设置 btns[1].onclick = function () { // 设置元素的宽度 // $(".father").width("500px") // $(".son").offset({ // left: 10 // }); // 注意点: position方法只能获取不能设置 // $(".son").position({ // left: 10 // }); $(".son").css({ left: "10px" }); } }); </script> </head> <body> <div class="father"> <div class="son"></div> </div> <button>获取</button> <button>设置</button> </body> </html>
八、jQuery中scrollTop方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>23-jQuery的scrollTop方法</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 100px; height: 200px; border: 1px solid #000; overflow: auto; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 var btns = document.getElementsByTagName("button"); // 监听获取 btns[0].onclick = function () { // 获取滚动的偏移位 // console.log($(".scroll").scrollTop()); // 获取网页滚动的偏移位 // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法 console.log($("body").scrollTop()+$("html").scrollTop()); } btns[1].onclick = function () { // 设置滚动的偏移位 $(".scroll").scrollTop(300); // 设置网页滚动偏移位 // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法 $("html,body").scrollTop(300); } }); </script> </head> <body> <div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div> <button>获取</button> <button>设置</button> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br> </body> </html>