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>