伪类选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> </head> <body> <h1>欢迎来到北京大学</h1> <ul> <li>烟台大学</li> <li>鲁东大学</li> <li>山东大学</li> <li>清华大学</li> <li>北京大学</li> </ul> 爱好：<input type="checkbox">篮球 <input type="checkbox">足球 <br> <button id="run">Run</button> <span style="position: relative">qwer</span> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*获取第一个元素*/ /*first伪类和first()方法获取的元素一样的。*/ console.log($("li:first")); /*当作选择器来使用*/ console.log($("li").first()); /*当作一个方法使用*/ /*获取最后一个元素*/ console.log($("li:last")); console.log($("li").last()); /*取非选择器*/ console.log($("input:not(:checked)")); console.log($("input:checked")); /*索引值为偶数的元素 实际返回奇数行的元素，因为索引开始为0*/ console.log($("li:even")); /*索引值为奇数的元素 实际返回偶数行的元素，因为索引开始为0*/ console.log($("li:odd")); /*获取指定索引值得元素*/ console.log($("li:eq(3)")); /*获取索引值大于指定值得元素 直到最后一个（不包括索引值本身）*/ console.log($("li:gt(2)")); /*获取索引值小于指定值得元素 直到第一个（不包括索引值本身）*/ console.log($("li:lt(2)")); /*获取所有的标题元素*/ console.log($(":header").css("color", "red")); /*获取所有包含动画的元素*/ $("#run").click(function () { $("span:not(:animated)").animate({"left": "+=20"}, 1000); }); </script> </html>
结果图:
内容选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>内容选择器</title> </head> <body> <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn </div> <div> <p>杰瑞教育</p> </div> <div></div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*查找所有包含指定文本的元素*/ console.log($("div:contains('John')")); /*查找所有没有子元素或内容的元素*/ console.log($("div:not(:empty)")); /*查找所有包含指定元素的元素*/ console.log($("div:has(p)")); /*查找包含子元素或内容的元素*/ console.log($("div:parent")); </script> </html>
结果图:
可见性
<html lang="en"> <head> <meta charset="UTF-8"> <title>可见性</title> </head> <body> <div>烟台大学</div> <div style="display: none">杰瑞教育</div> <div> <input type="text" value="烟台大学"> <input type="hidden" value="杰瑞教育"> </div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*查找所有隐藏或者type类型等于hidden的元素*/ console.log($("div:hidden")); console.log($("input:hidden")); </script> </html><html lang="en"> <head> <meta charset="UTF-8"> <title>可见性</title> </head> <body> <div>烟台大学</div> <div style="display: none">杰瑞教育</div> <div> <input type="text" value="烟台大学"> <input type="hidden" value="杰瑞教育"> </div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*查找所有隐藏或者type类型等于hidden的元素*/ console.log($("div:hidden")); console.log($("input:hidden")); </script> </html>
结果图:
属性选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> <div id="div5">div5</div> <div id="div51">div51</div> <div class="div6">div6</div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*查找所有包含id属性的元素*/ console.log($("div[id]")); /*查找所有属性值的等于某个值的元素*/ console.log($("div[id=div2]")); /*查找所有属性值的不等于某个值的元素*/ console.log($("div[id!=div2]")); /*查找属性值以某个值开头的元素*/ console.log($("div[id^=div]")); /*查找所有属性值以某个值结尾的元素**/ console.log($("div[id$=1]")); /*查找所有属性值包含某个值的元素**/ console.log($("div[id*=5]")); /*复合选择器*/ console.log($("div[id][id!=div2]")); </script> </html>
结果图:
子元素选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>子元素选择器</title> </head> <body> <ul> <li>烟台大学</li> <li>鲁东大学</li> <li>山东工商学院</li> <li>北京大学</li> </ul> <div> <p>123</p> </div> <div> <p>345</p> <p>345</p> </div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*返回符合条件的子元素*/ console.log($("li:nth-child(1)")); /*返回第一个子元素*/ console.log($("li:first-child")); /*返回最后一个子元素*/ console.log($("li:last-child")); /*返回独生子*/ console.log($("p:only-child")); </script> </html>
结果图:
表单选择器
<html lang="en"> <head> <meta charset="UTF-8"> <title>表单选择器</title> </head> <body> <form> <input type="button" value="Input Button"/><br> <input type="checkbox"/><br> <input type="file"/><br> <input type="hidden"/><br> <input type="image"/><br> <input type="password"/><br> <input type="radio"/><br> <input type="reset"/><br> <input type="submit"/><br> <input type="text"/><br> <select> <option>Option1</option> <option>Option2</option> </select> <textarea></textarea> <button>Button</button> </form> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*返回表单里的所有元素: input texttarea button select*/ console.log($(":input")); /*返回type类型为button的和button标签元素*/ console.log($(":button")); console.log($(":text")); console.log($(":checkbox")); console.log($(":radio")); console.log($(":image")); console.log($(":password")); console.log($(":reset")); console.log($(":submit")); </script> </html>
结果图:
表单对象属性
<html lang="en"> <head> <meta charset="UTF-8"> <title>表单对象属性</title> </head> <body> <form> <input name="email" disabled="disabled" /><br> <input name="id" /><br> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /><br> <input type="checkbox" name="newsletter" value="Weekly" /><br> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /><br> <select> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </select> </form> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> console.log($("input:enabled")); console.log($("input:disabled")); console.log($("input:checked")); console.log($("select option:selected")); </script> </html>
结果图:
属性操作
<html lang="en"> <head> <meta charset="UTF-8"> <title>属性操作</title> </head> <body> <img src="../img/tu4.png" alt="图4" id="img" title="NB的安卓"> <button onclick="changeImg()">换图</button> <button onclick="deleteAlt()">移除提示</button> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*js提供的方法*/ // /*1:getAttribute*/ // var src = document.getElementById("img").getAttribute("src"); // /*2:点符号法*/ // var src = document.getElementById("img").src; /*jQuery提供获取属性的方法*/ var src = $("#img").attr("src"); console.log(src); /*jQuery提供修改属性的方法*/ /*方法1:键值对方法 比较慢 属性需要一个一个修改*/ // $("#img").attr("src", "../img/tu1.png"); // $("#img").attr("alt", "图1"); /*方法2:对象方法*/ function changeImg() { var img = { src: "../img/tu1.png", alt: "图1" }; $("#img").attr(img) } /*jQuery提供移除属性的方法*/ function deleteAlt() { $("#img").removeAttr("alt"); } </script> </html>
结果图:
分别给不同的元素添加不同的属性
<html lang="en"> <head> <meta charset="UTF-8"> <title>分别给不同的元素添加不同的属性</title> </head> <body> <ul> <li id="l1">烟台大学</li> <li id="l2">烟台大学2</li> <li>烟台大学3</li> <li>烟台大学4</li> </ul> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> $("li").attr("id",function (index,att) { /*1:index:元素的索引 * 2:att:某元素属性原来的值*/ console.log(att); return "li"+(index+1); }) </script> </html>
结果图:
样式类
<html lang="en"> <head> <meta charset="UTF-8"> <style> .h1{ color: red; text-align: center; font-family: 宋体; } .h2{ color: yellow; text-align: center; font-family: 宋体; } .h3{ color: darkorange; text-align: center; font-family: 宋体; } .h4{ color: blue; text-align: center; font-family: 宋体; } </style> <title>样式类</title> </head> <body> <h1 class="title">欢迎大家来烟台</h1> <ul> <li>烟台大学</li> <li>烟台大学2</li> <li>烟台大学3</li> <li>烟台大学4</li> </ul> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*方法1:attr属性方法实现*/ // $(".title").attr("style","color:red","text-align: center","font-family: 宋体") /*方法2:添加样式类*/ // $(".title").addClass("h1"); $("li").addClass(function (index) { return "h"+(index+1); }); </script> </html>
结果图:
移除和切换样式类
<html lang="en"> <head> <meta charset="UTF-8"> <style> .jereh{ color: red; font-size: 50px; text-align: center; } </style> <title>移除和切换样式类</title> </head> <body> <div class="jereh" id="jredu">杰瑞教育</div> <button onclick="toggleCss()" >切换样式类</button> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*移除样式类*/ // $(".jereh").removeClass("jereh"); /*切换样式类 没有就添加 有就删除*/ function toggleCss() { $("#jredu").toggleClass("jereh"); } /*切换样式 没有就添加 有就不变了*/ // function toggleCss() { $("#jredu").toggleClass("jereh",true); // } </script> </html>
结果图:
html
<html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> </head> <body> <div>杰瑞教育</div> <div>杰瑞教育2</div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*获取所有匹配元素中第一个元素的内容*/ console.log($("div").html()); /*修改所有匹配元素的内容*/ $("div").html("<h1>燕大</h1>"); /*分别给不同的元素返回不同的结果*/ $("div").html(function (index,val) { return val+(index+1); }) </script> </html>
结果图:
text
<html lang="en"> <head> <meta charset="UTF-8"> <title>text</title> </head> <body> <div>杰瑞教育1</div> <div>杰瑞教育2</div> </body> <script src="../js/jquery-3.2.1.min.js"></script> <script> /*获取所有匹配元素的内容*/ console.log($("div").text("")); /*设置所有匹配元素的内容*/ // ($("div").text("烟大")); $("div").text(function(index,val){ return val +"hh"; }); /*html和text不同点总结: * 1:html不能使用于xml ,但是text可以. * 2:html有解析标签的能力, 但是text不可以. * 3:html只获取第一个匹配元素的值,text获取全部匹配元素的内容*/ </script> </html>
结果图:
