a毛 jquery 学习记 4过滤选择器1_s("#box li").css('background","red"); s(""#box li.-优快云博客

本文链接：https://blog.youkuaiyun.com/pymxb1991/article/details/51088988

本文详细介绍了jQuery中的过滤选择器，包括基本过滤选择器、内容过滤选择器和可见性过滤选择器等内容，并提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery 学习四(1) 过滤选择器

参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、

做法跟前面一样，复制前面的文件夹到'4过滤选择器1'中，

index.html页面内容如下：

<body> 
	 <ul id='box'>
		<li>列表1</li>
		<li>列表2</li>
		<li>列表3</li>
		<li>列表4</li>
		<li>列表5</li>
		<li>列表6</li>
	 </ul>
	 <ul>
		<li>列表1</li>
		<li>列表2</li>
		<li>列表3</li>
		<li>列表4</li>
		<li>列表5</li>
		<li>列表6</li>
	 </ul>
 </body>

1、基本过滤选择器

先了解一下如下表：

dom.js

$(function(){
    $('li:first').css('background',"#ccc");        //将列表li的第一个加背景颜色；
    $("li:last").css('background',"#ccc");        //将列表li的最后一个加背景颜色；
    $("#box li:last").css('background',"#ccc");  //将列表id为box的li的最后一个加背景颜色
    $('ul:first li:last').css('background',"#ccc");  //ul第一个,li的最后一个加背景颜色
    $('li:not(.pox)').css('background',"#ccc");   //将class不是 pox 的 li元素加背景颜色
   $('li:even').css('background',"#ccc");   //  将 索引是偶数的 li元素添加背景颜色
   $('li:odd').css('background',"#ccc");    // 将 索引是奇数的 li元素添加背景颜色
    $("li:eq(2)").css('background',"#ccc");    //将选中的第3 个li元素添加背景颜色 (注意是以0开始数，所以这里是第3个)
    $("li:eq(-2)").css('background',"#ccc");   //将选中的倒数第2 个li元素添加背景颜色 
    $("li:gt(2)").css('background',"#ccc");   //将第3 个li之后的元素添加背景颜色 
    $("li:gt(-2)").css('background',"#ccc");   //将倒数第2 个li之后的元素添加背景颜色 
    $("li:lt(2)").css('background',"#ccc"); //将第2个以上的li元素加背景颜色

$(':header').css('background',"#ccc"); //将标题元素加背景颜色   （h1~h6） 

        //焦点过滤器，注意：
       $(':focus').css('background',"red");   //当我们直接写这行代码的时候不能变颜色，这是为什么呢
       //这是 因为刷新时，焦点不在上面，而我点进去时，触发了一个事件 ， 触发的事件不能激活我们上面的样式
    //所以，必须在网页刷新加载的时候就存在激活状态，它之前加这样一行代码 
       $('input').get(0).focus();//取出input的DOM元素，默认情况下给它加上焦点 
  });

jQuery为最常用的过滤器添加了专用的方法，已达到提高性能和效率的作用；

如first,last,not,eq 测试如下

$(function(){
		 //  $('li').first().css('background',"#ccc");
		 //$('li').last().css('background',"#ccc");
		// $('li').not('red').css('background',"#ccc");
		// $('li').eq(2).css('background',"#ccc");
		 
	});

有方法的尽量用方法，这样可提高效率，速度；
2、内容过滤选择器

先了解一下如下表

index.html 修改增加如下代码：

 
    <div> 我的家在黄土高坡 gp</div>
    <div> 我的家在山西 sx</div>
    <div>  </div>.

dom.js

	$(function(){
		 $('div:contains("gp")').css('background',"#ccc"); //将div下有'gp'内容的增加背景颜色
		 
	});

第二个为空的试验了好多次没有出现想要的效果，不知道为什么：代码如下哪位大神可以看出来帮忙纠正一下

        $(function(){		
		$('div:empty').css('background','#ccc').css('height','20px');
	});

	$(function(){		
		$('ul:has(.pox)').css('background','#ccc'); //注意，这里是 选择子元素含有 class 是pox 的元素  所以是这样写
	});

	$(function(){		
		$('ul:parent').css('background','#ccc');  //将含有子元素的'ul'元素，增加背景颜色
	});

jQuery 提供了一个 has()方法来提高:has 过滤器的性能：

$('ul').has('.pox').css('background', '#ccc'); //选择子元素含有 class 是 pox 的元素

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

1、parent();

$(function(){		
		$('li').parent().css('background','#ccc');  ////选择当前元素的父元素
		alert($('li').parent().size());  //查看li有几个父元素 
	});

2、parents();

	$(function(){		
		$('li').parents().css('background','#ccc');  ////选择当前元素的父元素及祖先元素
		alert($('li').parents().size());  //查看li有几个父元素及祖先元素
		for(var i = 0; i<$('li').parents().size() ;i++){  //查看他父元素及祖先元素是些啥
			alert($('li').parents().get(i));  
		}
	});

3、parentsUntil

	$(function(){
		  $('li').parentsUntil('body').css('background', '#ccc');  //选择当前元素遇到'body'父元素停止
	});

3、可见性过滤选择器
先了解一下如下表

$(function(){
	
		 $('div:hidden').css('background', '#ccc').show(1000);  //将隐藏的元素，添加背景颜色1秒钟之后慢慢的显示出来
			 alert($('div:visible').size());
		$('div:visible').css('background', '#ccc') 
	});

$('p:hidden).size(); //元素 p 隐藏的元素
$('p:visible').size(); //元素 p 显示的元素
注意：:hidden 过滤器一般是包含的内容为：CSS 样式为 display:none、input 表单类型为 type="hidden"和 visibility:hidden 的元素。