jQuery?基礎(chǔ)選擇器與屬性選擇器
更新時(shí)間：2022年08月31日 08:31:20 作者：RiemannHypothesis???????
這篇文章主要介紹了jQuery?基礎(chǔ)選擇器與屬性選擇器，選擇所有元素,此選擇器使用要慎重，其速度是極其慢的，詳細(xì)介紹內(nèi)容需要的小伙伴可以參考一下下面文章內(nèi)容
基礎(chǔ)選擇器
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")
根據(jù)給定（html）標(biāo)記名稱選擇所有的元素。
<!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")
選擇一個(gè)具有給定id屬性的單個(gè)元素。
<!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: 一個(gè)屬性名.
- value: 一個(gè)屬性值，可以是一個(gè)不帶引號(hào)的一個(gè)單詞或帶一個(gè)引號(hào)的字符串。
<!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"]
選擇指定屬性值等于給定字符串或以該字符串為前綴（該字符串后跟一個(gè)連字符“-” ）的元素。
<!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"]
選擇指定屬性具有包含一個(gè)給定的子字符串的元素。（選擇給定的屬性是以包含某些值的元素）
<!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"]
選擇指定屬性用空格分隔的值中包含一個(gè)給定值的元素。
<!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"]
選擇指定屬性是以給定值結(jié)尾的元素。這個(gè)比較是區(qū)分大小寫的。
<!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>到此這篇關(guān)于jQuery 基礎(chǔ)選擇器與屬性選擇器的文章就介紹到這了,更多相關(guān)jQuery 選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
jquery使用ajax實(shí)現(xiàn)微信自動(dòng)回復(fù)插件
這篇文章主要介紹了jquery使用ajax實(shí)現(xiàn)微信自動(dòng)回復(fù)插件,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery復(fù)合事件用法,結(jié)合具體實(shí)例形式分析了jQuery復(fù)合事件的簡單定義與使用方法,需要的朋友可以參考下2017-06-06
基于EasyUI的基礎(chǔ)之上實(shí)現(xiàn)樹形功能菜單
這篇文章主要介紹了基于EasyUI的基礎(chǔ)之上實(shí)現(xiàn)樹形功能菜單,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
jquery Tab 選項(xiàng)卡通用函數(shù)
用類作為選擇符雖然效率低點(diǎn)但是 可以多次重用 這個(gè)性質(zhì)不錯(cuò)2010-04-04
想必大家對(duì)于jQuery這個(gè)最流行的javascript類庫都不陌生，而且只要是前端開發(fā)人員肯定或多或少的使用或者接觸過，在這篇文章中，參考了一些資料及實(shí)際使用效率，將介紹一些書寫高質(zhì)量jQuery代碼的原則，不單單會(huì)告訴你如何去書寫，也會(huì)告訴你為什么這樣書寫，希望大家會(huì)覺得有所幫助2014-03-03
Jquery實(shí)現(xiàn)由下向上展開效果的例子
這篇文章主要介紹了Jquery實(shí)現(xiàn)由下向上展開效果的例子,本文同時(shí)講解了向下展開的例子,需要的朋友可以參考下2014-12-12
jQuery插件HighCharts繪制2D金字塔圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D金字塔圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件繪制金字塔圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個(gè)，用來在線生成二維碼2013-08-08
這篇文章主要介紹了jQuery 仿百度輸入標(biāo)簽插件的具體實(shí)現(xiàn),需要的朋友可以參考下2014-07-07
jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)合并/追加數(shù)組并去除重復(fù)項(xiàng)的方法,可實(shí)現(xiàn)合并兩個(gè)數(shù)組并出去重復(fù)項(xiàng)的功能,涉及數(shù)組的遍歷、判斷、追加等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04