Home >Web Front-end >JS Tutorial >Detailed explanation of attribute filter selector in jquery

Detailed explanation of attribute filter selector in jquery

巴扎黑Original: 2017-06-20 17:02:131321browse

This article mainly introduces the attributes of the jqueryselectorfilter selector. Friends who need it can come and refer to it. I hope it will be helpful to everyone

The code is as follows:

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

The code is as follows:

<body>
   <p>
      <p>Hello</p>
   </p>
   <p id="test">ID为test的p</p>
   <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] Usage
Definition: Match elements containing the given attribute

The code is as follows:

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

2. [attribute=value] Usage
Definition: Match elements whose given attribute is a specific value

The code is as follows:

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

3. [attribute!=value] Usage
Definition: Match the given attribute if it does not contain a specific The code of the value element

is as follows:

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

4. [attribute^=value] Usage
Definition: Matching the given attribute is based on a certain The code for elements starting with these values

is as follows:

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

5. [attribute$=value] Usage
Definition: Match the given attribute is The code for elements ending with certain values

is as follows:

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

6. [attribute*=value] Usage
Definition: Match the given Attributes are elements containing certain values

The code is as follows:

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

7. [selector1][selector2][selectorN] Usage
Definition : Composite attribute selector, used when multiple conditions need to be met at the same time

The code is as follows:

$("input[id][name$=&#39;ball&#39;]").attr("checked",true);  //找到所有含有 id属性，并且它的 name属性是以 ball结尾的

The above is the detailed content of Detailed explanation of attribute filter selector in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Discuss in detail the difference and relationship between id selector and class selector in JQueryNext article：Discuss in detail the difference and relationship between id selector and class selector in JQuery

See more

Detailed explanation of attribute filter selector in jquery

Related articles