jQuery语法遍历（过滤）

最新推荐文章于 2024-08-12 06:06:08 发布

糖糖糖果88

最新推荐文章于 2024-08-12 06:06:08 发布

阅读量876

点赞数 16

分类专栏： jQuery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_59329828/article/details/135815291

版权

jQuery 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1、.eq（）:

减少匹配元素的集合为指定的索的哪一个元素。（定位一个元素）

法一

   <script>
       $(document).ready(function(){
           $("li").eq(1).css("background","red");
       })
   </script>

法二

    <script>
       $(document).ready(function(){
           $("li").eq(-3).css("background","red");
       })
   </script>

2、.filter（）:

筛选元素集合中匹配表达式或通过传递函数测试的那些元素集合（定位多个元素）

例一：（even、odd）

    <script>
       $(document).ready(function(){
           $("li").filter(":even").css("background","red");
           // $("li").filter(":odd").css("background","red");
       })
   </script>

例二：通过类筛选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
		<style>
			div{
				width: 50px;
				height: 50px;
				background-color: green;
				float: left;    /* 排成一排 */
				margin-left: 10px; 
			}
		</style>
	</head>
	<body>	
<!-- 	<ul>
		<li> li 1</li>
		<li> li 2</li>
		<li> li 3</li>
		<li> li 4</li>
	</ul> -->
	<div>123</div>
	<div class="middle">123</div>
	<div>123</div>
	<div>123</div>
	</body>
	<script>
		$(document).ready(function(){
			$("div").filter(".middle").css("background","red");
			// $("li").filter(":odd").css("background","red");
		})
	</script>
</html>

例三：函数

   <script>
       $(document).ready(function(){

           $("li").filter(function(){
               return $("strong",this).length==1
           }).css("background-color","yellow");

       })
   </script>

3、.frst（）:

获取匹配元素集合中第一个元素。不接受任何参数

$("li").first().css("background-color","yellow");

4、.last（）:

获取匹配元素集合中最后一个元素。

$("li").last().css("background-color","yellow");

5、.has（）:

筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

   <script>
       $(document).ready(function(){

           $("li").has("strong").css("background-color","yellow");

       })
   </script>

6、is（）:

判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者iQuery对象，如

果这些元素至少一个匹配给定的参数，那么返回true。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jQuery.js"></script>
	</head>
	<body>	
<ul>
	<li>list <strong>item 1 </strong></li>
	<li>list <span>list item 2</span></li>
	<li>list item 3</li>
</ul>
	</body>
	<script>
		$(document).ready(function(){
			
			$("ul").click(function(event){
				var target=$(event.target);
				if(target.is("li")){
					target.css("background","yellow")
				}
			})
			
		})
	</script>
</html>

is方法

7、.not（）:

从匹配的元素集合中移除指定的元素。

接收一个参数，可以是元素，对象，选择器等

   <script>
       $(document).ready(function(){

           $("li").not(":odd").css("background-color","yellow")

       })
   </script>

8、.map（）:

通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象

例一：

   <script>
       $(document).ready(function(){

           $("div").map(function(){
               console.log(this.id)
               })

       })
   </script>

例二：

   <script>
       $(document).ready(function(){

           var arr=[0,1,2];
           console.log(arr.map(function(n){
               return n+4;
           }))

       })
   </script>

9、.slice（）:

根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery 对象。

   <script>
       $(document).ready(function(){

           $("li").slice(1,4).css("background-color","yellow");
               // start:起始下标为0
               // end：终止下标包含首不包含尾
       })
   </script>