a毛 jquery 学习记 4过滤选择器2_第4关:过滤选择器 (二)-CSDN博客

本文链接：https://blog.csdn.net/pymxb1991/article/details/51120712

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

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

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

index.html 页面内容跟上次内容一样；

<body> 
	 <ul >
		<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>
         <ul>
         <li>列表1</li>
      </ul>
 </body>

4．子元素过滤器

先来看下表了解一下

先回忆一下 :first和:last的用法

dom.js

$(function(){
   $('li:first').css('background','#ccc'); //将列表第一个li元素加背景颜色
   $('li:last').css('background','#ccc'); //       最后一个li元素加背景颜色
 });

如果要给列表第一个li元素第一个列表的最后一个li元素加背景颜色应该怎么做，（有什么方法，哪个大神看到望给个评论）

用之前学到的一个函数
 $('li:first,ul li:eq(5)').css('background','#ccc'); //直接定位到第5个

怎么样把两个ul的第一个li元素增加背景颜色，如下dom.js

  $(function(){
	   $('li:first-child').css('background','#ccc'); //获取每个父元素的第一个元素 
	   $('li:last-child').css('background','#ccc'); // 获取每个父元素的最后一个元素 
           $('li:only-child').css('background','#ccc'); //获取只有一个子元素的元素
           $('li:nth-child(odd)').css('background','#ccc');  //获取每个li元素的奇数元素
        $('li:nth-child(even)').css('background','#ccc'); //               偶数 
           $('li:nth-child(4)').css('background','#ccc')  //获取每个li元素的第4个元素   注意索引是从1 开始的

     //   $('li:nth-child(索引值)').css('background','#ccc')  注意这里的索引值可以是2n ,3n如下操作
            $('li:nth-child(2n)').css('background','#ccc');   
        $('li:nth-child(3n)').css('background','#ccc');

});

5.其它选择器

jQuery在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。看下表；

is 示例如下

	$(function(){
		alert($('li').is('.red'));
		//is :判断某一个元素是不是指定的元素
		alert($('.red').is('li'))//red是不是li的选择器
		alert($('.red').is('div'))//red是不是div的选择器
		//is里面还可以放jQuery对象如下
		alert($('.red').is($('li')));  //含意同上
		alert($('.red').is($('div'))); //含意同上
                alert($('.red').is($('li').eq(2))); //red是不是li选择器的第三个元素
                //is 里面还可以放Dom对象 如下
         alert($('.red').is($('li').get(2)));
      
         //着重看一下最后一种情况
              alert($('.red').is(function(){            
            //return $(this);   //注意 $(this) == $('.red')
            //打印看一下他们的DOM结构
            //alert($(this).get(0)); alert($('.red').get(0));   //他们两个打印的结构都一样；
            return $(this).attr('title')== '列表3'
        }));
 });

hasClass

	$(function(){
		$('li').eq(2).hasClass('red'); //判断li元素的第三个是不是含有red
	});

since

	$(function(){
		//alert($('li').eq(2).hasClass('red')); //判断li元素的第三个是不是含有red
		$('li').slice(0,2).css('background','#ccc'); //选择从第0个到第3个位置加背景颜色
		$('li').slice(0,4).css('background','#ccc'); //选择从第0个到第5个位置加背景颜色
		$('li').slice(2,4).css('background','#ccc');//选择从第3个到第5个位置加背景颜色
		//要选择第列表4，5 怎么选呢，看如下
		$('li').slice(3,4).css('background','#ccc');
               $('li').slice(3).css('background','#ccc'); //从第四个位置开始到最后全部加背景颜色
               $('li').slice(0,-2).css('background','#ccc'); //从倒数第三个开始向前选定所有加背景
               $('li').slice(2,-2).css('background','#ccc'); //前两个和末尾两个未选定,其它加背景颜色
 });

end

修改 index.html如下

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

$(function(){

		//返回当前元素的前一个元素的状态 
		alert($('#box').find('li').end().get(0)); //注意这里的前一个元素不是指父元素，而是跟他相邻的前一个
	});

contents

修改一下index.html增加如下内容

<div> 
   我的家
	<strong>314 </strong>
   在山西 sx
  </div>

$(function(){
		//alert($('div:first').children().size()); //查看div下有几个子节点
		alert($('div:first').contents().size()); //查看div下有几个子节点包括文本的数量
		
	});

filter

    $(function(){
		$('li').filter('.red').css('background','#ccc');//选定li下面有red的元素
		$('li').filter('.red,:first,:last').css('background','#ccc');//选定li下面有red的元素,并增加首尾选择
		


	});

 $(function(){
        $('li').filter(function(){
            return $(this).attr('class') == 'red' && $(this).attr('title')=='列表3'  选定li下面有red的元素,且title为列表3的增加背景颜色
        }).css('background','#ccc');