masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

penapis atribut jQuery

Pemilih atribut membolehkan anda menyasarkan elemen berdasarkan atribut. Anda boleh menentukan hanya atribut tertentu elemen, supaya semua elemen yang menggunakan atribut itu tanpa mengira nilainya. Anda juga boleh menjadi lebih spesifik dan menyasarkan elemen yang menggunakan nilai khusus pada atribut ini paparan pemilih kuasa mereka.

diterangkan seperti berikut:


QQ截图20161022102442.png

<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>
rrree

1 [atribut] Penggunaan
Definisi : Padanan elemen yang mengandungi atribut yang diberikan

Kodnya adalah seperti berikut:

<body>
   <div>
      <p>Hello</p>
   </div>
   <div id="test">ID为test的DIV</div>
   <input type="checkbox" id="s1" name="football" value="足球" />足球
   <input type="checkbox" name="volleyball" value="排球" />排球
   <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
   <input type="checkbox" id="s4" name="other" value="其他" />其他
  </body>

2 [attribute=value] Penggunaan
Definisi: Padankan Atribut yang diberikan ialah elemen dengan nilai tertentu

Kodnya adalah seperti berikut:

$("div[id]").addClass("highlight"); //查找所有含有ID属性的div元素

3 [attribute!=value] Penggunaan
Definisi: Padankan yang diberikan Atribut ialah elemen yang tidak mengandungi nilai tertentu

Kodnya adalah seperti berikut:

$("input[name='basketball']").attr("checked",true);   //name属性值为basketball的input元素选中

4 value] Penggunaan
takrif: Kod untuk memadankan atribut yang diberikan ialah elemen yang bermula dengan beberapa nilai

seperti berikut: 

$("input[name!='basketball']").attr("checked",true);   //name属性值不为basketball的input元素选中 
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

5. attribute$=value] Penggunaan
Definisi: Padankan atribut yang diberi yang berakhir dengan beberapa nilai

Kodnya adalah seperti berikut:

$("input[name^='foot']").attr("checked",true);  //查找所有 name 以 'foot' 开始的 input 元素

6. [attribute*=value] Penggunaan
Definisi: Memadankan atribut yang diberikan ialah elemen yang mengandungi nilai tertentu

Kodnya adalah seperti berikut:

$("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 结尾的 input 元素

7. [selector1][selector2][selectorN] Penggunaan
takrif: pemilih atribut majmuk, gunakan

apabila berbilang syarat perlu dipenuhi pada masa yang sama adalah seperti berikut: 

$("input[name*='sket']").attr("checked",true);  //查找所有 name 包含 'sket' 的 input 元素
Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .left { width: auto; height: 120px; } .left div { width: 100px; height: 70px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } .bottom { width: 800px; } .bottom div, .bottom span { display: block; width: 80px; height: 80px; margin: 5px; background: #bbffaa; float: left; font-size: 14px; } .bottom .small { width: 60px; height: 25px; font-size: 12px; background: #fab; } </style> </head> <body> <h2>属性筛选选择器</h2> <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3> <div class="left" testattr="true" > <div class="div" testattr="true" name='p1'> <a>[att=val]</a> </div> <div class="div" testattr="true" p2> <a>[att]</a> </div> <div class="div" testattr="true" name="a-b"> <a>[att|=val]</a> </div> <div class="div" testattr="true" name="a b"> <a>[att~=val]</a> </div> </div> <script type="text/javascript"> //查找所有div中，属性name=p1的div元素 $('div[name=p1]').css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，有属性p2的div元素 $('div[p2]').css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“-”的div元素 $('div[name|="a"]').css("border", "3px groove #00FF09"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个连字符“空”的div元素 $('div[name~="a"]').css("border", "3px groove #668B8B"); </script> <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3> <div class="left" testattr="true" > <div class="div" testattr="true" name='php-aaorn'> <a>[att^=val]</a> </div> <div class="div" testattr="true" name='aaorn-php'> <a>[att$=val]</a> </div> <div class="div" testattr="true" name="attr-test-selector"> <a>[att*=val]</a> </div> <div class="div" name="a b"> <a>[att!=val]</a> </div> </div> <script type="text/javascript"> //查找所有div中，属性name的值是用php开头的 $('div[name^=php]').css("border", "3px groove red"); </script> <script type="text/javascript"> //查找所有div中，属性name的值是用php结尾的 $('div[name$=php]').css("border", "3px groove blue"); </script> <script type="text/javascript"> //查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[name*="test"]').css("border", "3px groove #00FF00"); </script> <script type="text/javascript"> //查找所有div中，有属性testattr中的值没有包含"true"的div $('div[testattr!="true"]').css("border", "3px groove #668B8B"); </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492873 permainan