层级关系选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级关系选择器</title> </head> <body> <ul id="university"> <li>烟台大学 <ul> <li id="math">数学院</li> <li>法学院</li> <li>航海学院</li> </ul> </li> <li>青岛理工大学</li> <li>山东科技大学</li> </ul> </body> <script src="../js/jquery.min.js"></script> <script> /*后代选择器*/ /*var result = $("#university li"); console.log(result);*/ /*子代选择器*/ /*var result = $("#university > li"); console.log(result);*/ /*相邻选择器*/ var result = $("#math + li"); console.log(result); </script> </html>
伪类选择器
<!DOCTYPE html> <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.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>
内容选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内容选择器</title> </head> <body> <div> <div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. Ohn</div> <div> <p>jieruijiaoyu</p> </div> </div> <div></div> </body> <script src="../js/jquery.min.js"></script> <script> /*查找所有包含指定文本的元素*/ console.log($("div:contains('John')")); /*查找所有没有子元素或内容的元素*/ console.log($("div:empty")); /*非空*/ console.log($("div:not(empty)")); /*查找所有包含指定元素的元素*/ console.log($("div:has(p)")); /*查找含有子元素或内容得元素*/ console.log($("div:parent")); </script> </html>
可见性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可见性</title> </head> <body> <div>烟台大学</div> <div style="display: none">杰瑞教育</div> <input type="text" value="烟台大学"> <input type="hidden" value="杰瑞教育"> </body> <script src="../js/jquery.min.js"></script> <script> /*查找所有隐藏或者type类型等于hidden的类型*/ console.log($("div:hidden")); console.log($("input:hidden")); </script> </html>
属性选择器
<!DOCTYPE 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.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$=5]")); /*查找所有属性值包含某个值的元素*/ console.log($("div[id*=5]")); /*复合选择器*/ console.log($("div[id][id!=div2]")); </script> </html>
子元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子元素选择器</title> </head> <body> <ul> <li>北京大学</li> <li>清华大学</li> <li>山东大学</li> <li>复旦大学</li> <li>香港大学</li> </ul> <div> <p>123</p> </div> <div> <p>123</p> <p>123</p> </div> </body> <script src="../js/jquery.min.js"></script> <script> /*返回符合条件的子元素*/ console.log($("li:nth-child(odd)")); console.log($("li:nth-child(even)")); /*返回第一个字元素*/ console.log($("li:first-child")); /*返回最后一个字元素*/ console.log($("li:last-child")); /*返回只有一个资源的元素 独生子*/ console.log($("p:only-child")); </script> </html>
表单选择器
<!DOCTYPE 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> <option>Option3</option> </select> <textarea></textarea> <button>Button</button> </form> </body> <script src="../js/jquery.min.js"></script> <script> /*返回表单里的所有元素：input textarea 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>