Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

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' 结尾的 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结尾的
Continuing Learning
new file
<!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>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
Free Learn jQuery at your fingertips
Free Learn HTML+CSS at your fingertips
Free Learn PHP programming at your fingertips
Free Tutorial to learn JavaScript at your fingertips
¥ 29 Learn HTML video tutorials at your fingertips
¥ 29 Video tutorial to learn CSS at your fingertips
Free ECMAScript new features in-depth video tutorial
Free Detailed video tutorial on Ajax principles
Free React basics in-depth video tutorial
Free React routing in-depth video tutorial
Free React Native basics video tutorial
Free PHP Fun Breakthrough Class
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496446
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)