js進階 10-6 jquery中的屬性選擇器有哪些

時間 2020-05-22

標籤進階 jquery 屬性選擇器哪些欄目 JavaScript 简体版

原文原文鏈接

js進階 10-6 jquery中的屬性選擇器有哪些

1、總結

一句話總結：

一、第一遍能學會麼？

一遍是確定學不會的，要多學幾遍，因此想着怎麼加快速度，減小學習的遍數css

二、屬性選擇器是幹嗎的？

選擇屬性的，什麼是屬性，就是那些屬性啊，class，id，value。html

三、屬性選擇是什麼符號？

中括號jquery

四、jquery中的屬性選擇器有哪些？

6種，有屬性，有特定屬性，沒有特定屬性，包含屬性，以開頭，以結尾學習

五、屬性選擇器中屬性的值要加什麼符號？

引號，並且要注意和外層的引號要不同。spa

六、$('div [class!=intro]').css('color','green') 表示什麼意思？

div的後代中，class屬性值不爲intro的，直接使用 [class!=intro] 達不到目標，由於最外層的div也不是code

2、js進階 10-6 jquery中的屬性選擇器有哪些

一、相關知識

屬性選擇器

HTML元素一般包含不少屬性，JQuery的屬性選擇器就是把各類屬性做爲選擇器。htm

$("selector[attr]")選擇包含給定屬性的元素
$("selector[attr='value']")選擇給定的屬性是某個特定值的元素
$("selector[attr!='value']")選擇全部含有指定的屬性,但屬性不等於特定值的元素
$("selector[attr*='value']")選擇給定的屬性是以包含某些值的元素
$("selector[attr^='value']")選擇給定的屬性是以某些值開始的元素(比較少用)
$("selector[attr $= 'value']") 選擇給定的屬性是以某些值結尾的元素（比較少用）

二、代碼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文檔</title>
 6     <script src="jquery-3.1.1.min.js"></script>
 7 </head>
 8 <body>
 9     <div>
10         <h4 id="attr">屬性選擇器</h4>
11         <p class="intro">HTML元素一般包含不少屬性,jQuery的屬性選擇器就是把各類屬性做爲選擇器。</p>
12         <ul>
13             <li class="sel-1">$("selector[attr]")    選擇包含給定屬性的元素</li>
14             <li class="sel-1">$("selector[attr='value']")    選擇給定的屬性是某個特定值的元素</li>
15             <li class="_sel">$("selector[attr != 'value']")    選擇全部含有指定的屬性，但屬性不等於特定值的元素</li>
16             <li class="_sel">$("selector[attr *= 'value']")    選擇給定的屬性是以包含某些值的元素</li>
17             <li class="_sel2">$("selector[attr ^= 'value']")    選擇給定的屬性是以某些值開始的元素（比較少用）</li>
18             <li class="_sel2">$("selector[attr $= 'value']")    選擇給定的屬性是以某些值結尾的元素（比較少用）</li>
19         </ul>
20     </div>
21     <script>
22     //選擇含有class屬性的元素。
23     //$('li[class]').css('color','red')
24     //class屬性值爲intro的元素
25 
26     //如下兩種表達單方式是等價的
27     //$('[class=intro]').css('color','green')
28     //$('.intro').css('color','blue')
29 
30     //$('[class=intro]').css('color','green')
31     //$('div [class!=intro]').css('color','green')
32 
33     //選擇class屬性是以包含'sel'的元素
34     //$("[class*='sel']").css('color','red')
35 
36  $("[class^='sel']").css('color','blue') 37 
38  $("[class$='sel']").css('color','red') 39     </script>
40 </body>
41 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。