jQuery 基礎選擇器與屬性選擇器

Posted on by

基礎選擇器

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>

到此這篇關於jQuery 基礎選擇器與屬性選擇器的文章就介紹到這瞭,更多相關jQuery 選擇器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：