Details of the attributes filter selector of the jquery selector

  • 2020-03-30 01:34:46
  • OfStack


<style type="text/css">
  
  .highlight{   
   background-color: gray
  }
 </style>


<body>
   <div>
      <p>Hello</p>
   </div>
   <div id="test">ID for test the DIV</div>
   <input type="checkbox" id="s1" name="football" value=" football " /> football 
   <input type="checkbox" name="volleyball" value=" volleyball " /> volleyball 
   <input type="checkbox" id="s3" name="basketball" value=" basketball " /> basketball 
   <input type="checkbox" id="s4" name="other" value=" other " /> other 
  </body>

1. [attribute] usage
Definition: matches an element that contains a given attribute

$("div[id]").addClass("highlight"); //Find all div elements that have an ID attribute

2. [attribute = value] usage
Definition: an element that matches a given attribute with a particular value

$("input[name='basketball']").attr("checked",true);   //The name attribute is selected for the input element of basketball

3. The usage/attribute! = value
Definition: an element that matches a given attribute is one that does not contain a particular value

$("input[name!='basketball']").attr("checked",true);   //The name attribute value is not selected for basketball's input element
//This selector is equivalent to :not([attr=value]) to match an element with a specific attribute but not a specific value, use [attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute ^ = value] usage
Definition: an element that matches a given attribute starting with some value

$("input[name^='foot']").attr("checked",true);  //Find all input elements whose name begins with 'foot'

5. [$= value attribute] usage
Definition: matches an element whose given attribute ends with some value

$("input[name$='ball']").attr("checked",true); //Find all input elements whose names end in 'ball'

6. [attribute * = value] usage
Definition: an element that contains some value that matches a given attribute

$("input[name*='sket']").attr("checked",true);  //Find all input elements whose name contains 'sket'

7. [selector1] [selector2] [selectorN] usage
Definition: compound property selector, used when more than one condition needs to be met at the same time

$("input[id][name$='ball']").attr("checked",true);  //Find all the attributes that have an id, and its name attribute ends in ball

Related articles: