jQuery traversal - filtering
Range of search elements
The three most basic filtering methods are: first(), last() and eq(), which allow you to select a specific element based on its position within a set of elements. Elements.
Other filtering methods, such as filter() and not() allow you to select elements that match or do not match a specified criterion.
first() method
first() method returns the first element of the selected element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").first().css("background-color","blue");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>Select the first <p> element inside the first <div> element.
last() method
last() method returns the last element of the selected elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color","red");
});
</script>
</head>
<body>
<div>
<p>段落1</p>
</div>
<div>
<p>段落2</p>
</div>
<p>段落3</p>
</body>
</html>Selects the last <p> element within the last <div> element.
eq() method
eq() method returns the element with the specified index number among the selected elements.
The index number starts from 0, so the index number of the first element is 0 instead of 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").eq(1).css("background-color","green");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p>//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>
</body>
</html>Selects the second <p> element (index 1).
filter() method
The filter() method allows you to specify a criterion. Elements that do not match this criterion are removed from the collection, and matching elements are returned.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Returns all <p> elements with class name "url".
not() method
not() method returns all elements that do not match the criteria.
Tip: The not() method is the opposite of filter().
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").not(".url").css("background-color","gray");
});
</script>
</head>
<body>
<p>php中文网 (index 0).</p>
<p class="url">//m.sbmmt.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
</body>
</html>Returns all <p> elements without the class name "url".
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~ 