Detailed explanation of the attribute filter selector of the jquery selector

This article mainly introduces the attribute filtering selector of the jquery selector. Friends who need it can come and refer to it. I hope it will be helpful to you.

code show as below:

Copy the code The code is as follows:

<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] usage
Definition: Match elements that contain the given attribute

code show as below:

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

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

code show as below:

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

3. [attribute!=value] Usage
Definition: Matching a given attribute is an element that does not contain a specific value

code show as below:

$("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] usage
Definition: match the given attribute is an element that starts with some value

code show as below:

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

5. [attribute$=value] Usage
Definition: Matches elements whose given attribute ends with some value

code show as below:

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

6. [attribute*=value] Usage
Definition: Matching the given attribute is an element that contains some value

Copy the code The code is as follows:

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

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

code show as below:

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

7. Find elements whose style is not none

//方式1:
$menu.find('.menu-item[style!="display: none"]');
//方式2:如果元素的style还含有其他的样式,那么上面的就不合适了,可以如下:style中不包含有
$menu.find('.menu-item:not([style*="display: none"])');//注:not过滤选择器后面必须带()

Detailed explanation of the attribute filter selector of the jquery selector

7. Find elements whose style is not none

Guess you like