Jquery(8)-过滤选择器(2)

最新推荐文章于 2024-09-06 10:19:06 发布

msirene

最新推荐文章于 2024-09-06 10:19:06 发布

阅读量132

点赞数

本文链接：https://blog.csdn.net/msirene/article/details/24694953

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
<html>    
  <head>    
    <title>jquey008.html</title>    
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    
    <meta http-equiv="description" content="this is my page">    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
        
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>    
    <!-- <script type="text/javascript" src="js/jquery-2.1.0.js"></script> -->        
    <script type="text/javascript" src="js00/demo.js"></script>    
    <link rel="stylesheet" href="js008/style.css" type="text/css" />
  </head>
  
<body>
	<div style="display: none;">我们的新域名为：ycku.com</div>
	<div>我们的旧域名为：yc60.com</div>
	<div></div>
	<div></div>
	<ul>
		<li>列表1</li>
		<li>列表2</li>
		<li class="red">列表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>
	<input type="text" />
	<h3>我是标题</h3>
</body>
</html>

/*
学习要点：
4.子元素过滤器
5.其他方法

四．子元素过滤器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。
过滤器名			jQuery 语法		说明				返回
:first-child 			$('li:first-child') 	获取每个父元素的第一个子元素	集合元素
:last-child 			$('li:last-child') 	获取每个父元素的最后一个子元素	集合元素
:only-child 			$('li:only-child') 	获取只有一个子元素的元素	集合元素
:nth-child(odd/even/eq(index)) 	$('li:nth-child(even)') 获取每个自定义子元素的元素	集合元素
$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素
五．其他方法
jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。
方法名			jQuery 语法			说明										返回
is(s/o/e/f) 		$('li').is('.red') 		传递选择器、DOM、jquery 对象或是函数来匹配元素结合				集合元素
hasClass(class)		$('li').eq(2).hasClass('red')	其实就是is("." + class) 							集合元素
slice(start, end) 	$('li').slice(0,2)		选择从start 到end 位置的元素，如果是负数，则从后开始				集合元素
filter(s/o/e/f) 	$('li').filter('.red')
end()			$('div').find('p').end()	获取当前元素前一次状态								集合元素
contents() 		$('div').contents()		获取某元素下面所有元素节点，包括文本节点，如果是iframe，则可以查找文本内容	集合元素
$('.red').is('li'); //true，选择器，检测class 为是否为red
$('.red').is($('li')); //true，jQuery 对象集合，同上
$('.red').is($('li').eq(2)); //true，jQuery 对象单个，同上
$('.red').is($('li').get(2)); //true，DOM 对象，同上
$('.red').is(function () { //true，方法，同上
return $(this).attr('title') == '列表3'; //可以自定义各种判断
}));
$('li').eq(2).hasClass('red'); //和is 一样，只不过只能传递class
$('li').slice(0,2).css('color', 'red'); //前三个变成红色
注意：这个参数有多种传法和JavaScript 的slice 方法是一样的比如：slice(2)，从第三个
开始到最后选定；slice(2,4)，第三和第四被选定；slice(0,-2)，从倒数第三个位置，向前选定
所有；slice(2,-2)，前两个和末尾两个未选定。
$("div").find("p").end().get(0); //返回div 的原生DOM
$('div').contents().size(); //返回子节点(包括文本)数量
$('li').filter('.red').css('background','#ccc'); //选择li 的class 为red 的元素
$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择
//特殊要求函数返回
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc');

$(function () {
	
	//$('li:first-child').css('background', '#ccc');
	//$('li:last-child').css('background', '#ccc');
	//$('li:only-child').css('background', '#ccc');
	//$('li:nth-child(even)').css('background', '#ccc');
	//$('li:nth-child(odd)').css('background', '#ccc');
	//$('li:nth-child(5n)').css('background', '#ccc');
	//$('li:nth-child(4n+1)').css('background', '#ccc');
	
	//alert($('.red').is('li'));
	//alert($('.red').is('div'));
	//alert($('.red').is($('li')));
	//alert($('.red').is($('div')));
	//alert($('.red').is($('li').get(2)));
	//alert($('.red').is($('li').eq(2)));
	
	//alert($('.red').is(function () {
	//	return $(this).attr('title') == '列表3';
	//}));
	
	//注意，必须使用$(this)来表示要判断的元素，否则，不管function里面是否返回true或false都和调用的元素无关了
	
	//alert($('li').eq(2).hasClass('red'));
	
	//$('li').slice(5,7).css('background', '#ccc');
	//$('li').slice(2).css('background', '#ccc');
	//$('li').slice(0, -2).css('background', '#ccc');
	//$('li').slice(2, -2).css('background', '#ccc');
	
	//alert($('#box').find('li').end().get(0));
	//alert($('#box').find('li').parent().get(0));
	
	//$('#box').next('ul').end().css('background', '#ccc');
	
	//alert($('div:first').children().size());
	//alert($('div:first').contents().size());
	
	//$('li').filter('.red, :first-child, :last-child').css('background', '#ccc');
	
	$('li').filter(function () {
		return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
	}).css('background', '#ccc');
	
});

*/