jQuery 选择器
RiemannHypothesis 人气:0基础选择器
All Selector ("*")
选择所有元素,此选择器使用要慎重,其速度是极其慢的
<!DOCTYPE html> <html> <head> <style> h3 { margin: 0; } div,span,p { width: 80px; height: 40px; float:left; padding: 10px; margin: 10px; background-color: #EEEEEE; } #test { width: auto; height: auto; background-color: transparent; } </style> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <div id="test"> <div>DIV</div> <span>SPAN</span> <p>P <button>Button</button></p> </div> <script> var elementCount = $("#test").find("*").css("border","3px solid red").length; $("body").prepend("<h3>" + elementCount + " elements found</h3>");</script> </body> </html>
Class Selector (".class")
选择给定样式类名的所有元素。
<!DOCTYPE html> <html> <head> <style> div,span { width: 100px; height: 40px; float:left; padding: 10px; margin: 10px; background-color: #EEEEEE; } </style> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span> <script>$(".myClass").css("border","3px solid red");</script> </body> </html>
Element Selector ("element")
根据给定(html)标记名称选择所有的元素。
<!DOCTYPE html> <html> <head> <style> div,span { width: 60px; height: 60px; float:left; padding: 10px; margin: 10px; background-color: #EEEEEE; } </style> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <div>DIV1</div> <div>DIV2</div> <span>SPAN</span> <script>$("div").css("border","9px solid red");</script> </body> </html>
ID Selector ("#id")
选择一个具有给定id属性的单个元素。
<!DOCTYPE html> <html> <head> <style> div { width: 90px; height: 90px; float:left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <div id="notMe"><p>id="notMe"</p></div> <div id="myDiv">id="myDiv"</div> <script>$("#myDiv").css("border","3px solid red");</script> </body> </html>
Child Selector ("parent > child")
选择所有指定“parent”元素中指定的"child"的直接子元素。
<!DOCTYPE html> <html> <head> <style> body { font-size:14px; } </style> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <ul class="topnav"> <li>Item 1</li> <li>Item 2 <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul> </li> <li>Item 3</li> </ul> <script>$("ul.topnav > li").css("border", "3px double red");</script> </body> </html>
属性选择器
Attribute Selector [name="value"]
选择指定属性是给定值的元素。
- attribute: 一个属性名.
- value: 一个属性值,可以是一个不带引号的一个单词或带一个引号的字符串。
<!DOCTYPE html> <html> <head> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <div> <label> <input type="radio" name="newsletter" value="name" /> <span>name</span> </label> </div> <div> <label> <input type="radio" name="newsletter" value="age" /> <span>age</span> </label> </div> <div> <label> <input type="radio" name="newsletter" value="age" /> <span>sex</span> </label> </div> <script>$('input[value="name"]').next().text("username");</script> </body> </html>
Attribute Selector [name|="value"]
选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-” )的元素。
<!DOCTYPE html> <html> <head> <style> a { display: inline-block; } </style> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <a href="example.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" hreflang="en">Some text</a> <a href="example.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" hreflang="en-UK">Some other text</a> <a href="example.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" hreflang="english">will not be outlined</a> <script> $('a[hreflang|="en"]').css('border','3px dotted green'); </script> </body> </html>
Attribute [name*="value"]
选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值的元素)
<!DOCTYPE html> <html> <head> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" /> <script>$('input[name*="man"]').val('has man in it!');</script> </body> </html>
Attribute Selector [name~="value"]
选择指定属性用空格分隔的值中包含一个给定值的元素。
<!DOCTYPE html> <html> <head> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <input name="man-news" /> <input name="milk man" /> <input name="letterman2" /> <input name="newmilk" /> <script>$('input[name~="man"]').val('mr. man is in it!');</script> </body> </html>
Attribute Selector [name$="value"]
选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。
<!DOCTYPE html> <html> <head> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> <script>$('input[name$="letter"]').val('a letter');</script> </body> </html>
Attribute Selector [name^="value"]
选择指定属性是以给定字符串开始的元素
<!DOCTYPE html> <html> <head> <script src="./jquery-3.6.0.min.js"></script> </head> <body> <input name="newsletter" /> <input name="milkman" /> <input name="newsboy" /> <script>$('input[name^="news"]').val('news here!');</script> </body> </html>
加载全部内容