Jquery(7)-过滤选择器(1)

最新推荐文章于 2023-07-22 08:43:01 发布

msirene

最新推荐文章于 2023-07-22 08:43:01 发布

阅读量169

点赞数

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

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
<html>    
  <head>    
    <title>jquey007.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="js007/demo.js"></script>    
    <link rel="stylesheet" href="js007/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>

/*
学习要点：
1.基本过滤器
2.内容过滤器
3.可见性过滤器

过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与CSS3
(http://t.mb5u.com/css3/)里的伪类，可以让不支持CSS3 的低版本浏览器也能支持。和常规
选择器一样，jQuery 为了更方便开发者使用，提供了很多独有的过滤器。
一．基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的DOM 元素，和CSS 中的伪类的语法类
似：使用冒号(:)开头。
过滤器名	jQuery 			语法说明				返回
:first 		$('li:first') 		选取第一个元素				单个元素
:last 		$('li:last') 		选取最后一个元素			单个元素
:not(selector) 	$('li:not(.red)') 	选取class 不是red的li元素		集合元素
:even 		$('li.even') 		选择索引(0 开始)是偶数的所有元素	集合元素
:odd 		$('li:odd') 		选择索引(0 开始)是奇数的所有元素	集合元素
:eq(index) 	$('li:eq(2)') 		选择索引(0 开始)等于index 的元素	单个元素
:gt(index) 	$('li:gt(2)') 		选择索引(0 开始)大于index 的元素	集合元素
:lt(index) 	$('li.lt(2)') 		选择索引(0 开始)小于index 的元素	集合元素
:header 	$(':header') 		选择标题元素，h1 ~ h6 			集合元素
:animated 	$(':animated') 		选择正在执行动画的元素			集合元素
:focus 		$(':focus') 		选择当前被焦点的元素			集合元素
$('li:first').css('background', '#ccc'); //第一个元素
$('li:last).css('background', '#ccc'); //最后一个元素
$('li:not(.red)).css('background', '#ccc'); //非class 为red 的元素
$('li:even').css('background', '#ccc'); //索引为偶数的元素
$('li:odd).css('background', '#ccc'); //索引为奇数的元素
$('li:eq(2)).css('background', '#ccc'); //指定索引值的元素
$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素
$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素
$(':header').css('background', '#ccc'); //页面所有h1 ~ h6 元素
注意：:focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。
而不是鼠标点击或者Tab 键盘敲击激活的。
$('input').get(0).focus(); //先初始化激活一个元素焦点
$(':focus').css('background', 'red'); //被焦点的元素
jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：
$('li').eq(2).css('background', '#ccc'); //元素li 的第三个元素，负数从后开始
$('li').first().css('background', '#ccc'); //元素li 的第一个元素
$('li').last().css('background', '#ccc'); //元素li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素li 不含class 为red 的元素
注意：:first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候，first 会
实现第一个父元素的第一个子元素，last 会实现最后一个父元素的最后一个子元素。所以，
如果需要明确是哪个父元素，需要指明：
$('#box li:last').css('background', '#ccc'); //#box 元素的最后一个li
//或
$('#box li).last().css('background', '#ccc'); //同上
二．内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上。
过滤器名		jQuery 				语法说明			返回
:contains(text)		$(':contains("ycku.com")')	选取含有"ycku.com"文本的元素	元素集合
:empty 			$(':empty') 			选取不包含子元素或空文本的元素	元素集合
:has(selector) 		$(':has(.red)') 		选取含有class 是red 的元素	元素集合
:parent 		$(':parent') 			选取含有子元素或文本的元素	元素集合
//选择元素文本节点含有ycku.com 文本的元素
$('div:contains("ycku.com")').css('background', '#ccc');
$('div:empty').css('background', '#ccc'); //选择空元素
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素
$(':parent').css('background', '#ccc'); //选择非空元素
jQuery 提供了一个has()方法来提高:has 过滤器的性能：
$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素
jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本
的元素，而是获取当前元素的父元素，返回的是元素集合。
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止
三．可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
过滤器名	jQuery 语法	说明			返回
:hidden 	$(':hidden') 	选取所有不可见元素	集合元素
:visible 	$(':visible') 	选取所有可见元素	集合元素
$('p:hidden).size(); //元素p 隐藏的元素
$('p:visible').size(); //元素p 显示的元素
注意：:hidden 过滤器一般是包含的内容为：CSS 样式为display:none、input 表单类型为
type="hidden"和visibility:hidden 的元素。

$(function () {
	
	//$('li:first').css('background', '#ccc');
	//$('li:last').css('background', '#ccc');
	//$('#box li:last').css('background', '#ccc');
	//$('ul:first li:last').css('background', '#ccc');
	//$('li:not(.red)').css('background', '#ccc');
	//$('li:even').css('background', '#ccc');
	//$('li:odd').css('background', '#ccc');
	//$('li:eq(2)').css('background', '#ccc');
	//$('li:eq(-2)').css('background', '#ccc');
	//$('li:gt(3)').css('background', '#ccc');
	//$('li:lt(2)').css('background', '#ccc');
	//$('div :header').css('background', '#ccc');
	//$('input').get(0).focus();
	//$(':focus').css('background', 'red');
	
	//$('li').first().css('background', '#ccc');
	//$('li').last().css('background', '#ccc');
	//$('li').not('.red').css('background', '#ccc');
	//$('li').eq(2).css('background', '#ccc');
	//$('div:contains("ycku.com")').css('background', '#ccc');
	//$('div:empty').css('background', '#ccc').css('height','20px');
	//$('ul:has(.red)').css('background', '#ccc');
	//$('div:parent').css('background', '#ccc');
	//$('ul').has('.red').css('background', '#ccc');
	
	//alert($('li').parent().size());
	//alert($('li').parent().get(0));
	//$('li').parent().css('background', '#ccc');
	//$('li').parents().css('background', '#ccc');
	//$('li').parentsUntil('body').css('background', '#ccc');
	
	//alert($('div:hidden').size());
	//$('div:hidden').css('background', '#ccc').show(1000);
	//alert($('div:visible').size());
	
	
});
*/