亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery attribute filter

Attribute selectors allow you to locate an element based on attributes. You can specify only a certain attribute of the element, so that all elements that use that attribute regardless of its value will be located. You can also be more specific and target elements that use specific values ??on these attributes. This is the attribute selector display. place of their power.

The description is as follows:


QQ截圖20161022102442.png##

<style type="text/css">
  /*高亮顯示*/
  .highlight{   
   background-color: gray
  }
 </style>
<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>

1. [attribute] usageDefinition : Match elements containing the given attribute

The code is as follows:

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

2. [attribute=value] UsageDefinition: Match the given The attribute is an element with a specific value

The code is as follows:

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

3. [attribute!=value] UsageDefinition: Match the given The attribute is an element that does not contain a specific value

The code is as follows:

$("input[name!='basketball']").attr("checked",true);   //name屬性值不為basketball的input元素選中 
//此選擇器等價于:not([attr=value])要匹配含有特定屬性但不等于特定值的元素，請使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute^=value] usageDefinition: Matches elements where the given attribute starts with a certain value

The code is as follows:

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

5. [attribute$=value] Usage Definition: Match the given attribute that ends with some value.

The code is as follows:

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

6. [attribute*=value] UsageDefinition: Matching a given attribute is an element containing a certain value

The code is as follows: 

$("input[name*='sket']").attr("checked",true);  //查找所有 name 包含 'sket' 的 input 元素

7. [selector1][selector2][selectorN] UsageDefinition: Composite attribute selector, use it when multiple conditions need to be met at the same time

The code is as follows:

$("input[id][name$='ball']").attr("checked",true);  //找到所有含有 id屬性，并且它的 name屬性是以 ball結(jié)尾的
Continuing Learning
||
<!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結(jié)尾的 $('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>
submitReset Code