Some common methods in jQuery Summary of of recommendations

  • 2021-06-28 10:26:34
  • OfStack

1. filter() and not() methods

filter() and not() are a pair of inverse methods, and filter() is a filter.

The filter() method is for the element itself. (Is different from the has() method)


<script type="text/javascript" src="jquery-1.12.3.min.js"></script> 
<script> 
/*filter():  filter  
not():filter Antonyms <BR>*/
$(function(){ 
  //$('div').filter('.box').css('background','red');  <SPAN style="COLOR: #ff0000">// take div Medium with class= ' box' Of div Change background color to red </SPAN> 
  $('div').not('.box').css('background','red');    <SPAN style="COLOR: #ff0000">// take div Medium except with class= ' box' Of div Other div Set background color to red </SPAN> 
?
1 }); </script> <BR></head> <BR><body> <BR><div class="box">div</div><BR> <div>div2</div> <BR></body> <BR></html> 

2. has() method

The has () method represents the meaning of inclusion, which is different from the filter () method.The has() method has a parent-child relationship. 


<script type="text/javascript" src="jquery-1.12.3.min.js"></script> 
<script> 
/*filter():  filter  
not():filter Antonyms  
has(): Contain  */
$(function(){ 
  //$('div').has('span').css('background','red'); <SPAN style="COLOR: #ff0000">// Only contains span Labeled div( Parent ) Red background </SPAN> 
  $('div').has('.box').css('background','red');  <SPAN style="COLOR: #ff0000">// Only included Tags class Value is box Of div( Parent ) Red background </SPAN> 
  }); 
</script> 
</head> 
 
<body> 
<div> div 
  <span class="box"> 
  span 
  </span> 
</div> 
<div class="box">div2</div> 
<div class="haha">div3</div> 
</body> 
</html> 

3. next(), prev(), find(), eq() methods

The next(), prev() methods are to find the next sibling node and the first sibling node.

find() method: finding

eq(): Index


<script type="text/javascript" src="jquery-1.12.3.min.js"></script> 
<script> 
/*next(): lower 1 Brothers Node  
prev(): upper 1 Brothers Node  
find(): Seek  
eq(): Indexes  
*/
$(function(){ 
  //$('div').find('h2').css('background','red');   <SPAN style="COLOR: #ff0000">// Only for div All under h2 Set background color to red </SPAN> 
  $('div').find('h2').eq(0).css('background','red');  <SPAN style="COLOR: #ff0000">// to div The following 1 individual h2 Set background to red </SPAN> 
  }); 
</script> 
</head> 
 
<body> 
<div> 
 * <h3>h3</h3> 
  <h2>h2</h2> 
  <h2>h2</h2> 
  <h1>h1</h1> 
</div> 
<h2>haha</h2>  // Will not turn red  
 
</body> 
</html>

4. index() method


<script> 
/* 
index(): Index is the position of the current element in all sibling nodes  
*/
$(function(){ 
  alert($('#h').index()); <SPAN style="COLOR: #ff0000"> // Index is the position of the current element in all sibling nodes </SPAN> 
              // Eject Yes 3 
  }); 
</script> 
</head> 
 
<body> 
<div> 
  <h3>h3</h3> 
  <h2>h2</h2> 
  <h2>h2</h2> 
  <h3 id="h">h3</h3> 
  <h1>h1</h1> 
</div> 
<h2>haha</h2> 
 
</body> 
</html>

4. attr() method


<script type="text/javascript" src="jquery-1.12.3.min.js"></script> 
<script> 
/* 
attr(): Property Settings  
*/
$(function(){ 
  alert($('div').attr('title')); <SPAN style="COLOR: #ff0000">// get attribute title Value of </SPAN> 
  $('div').attr('title','456');  <SPAN style="COLOR: #ff0000">// Set up title The value of the property is 456</SPAN> 
  $('div').attr('class','box'); <SPAN style="COLOR: #ff0000"> // to div Set up class Attribute, value is box</SPAN> 
  }); 
</script> 
</head> 
 
<body> 
<div title="123">div</div> 
</body> 
</html> 

Related articles: