jQuery学习之路（四）之过滤选择器
浏览数：29 /
时间：2015年06月09日
今天是第四课主要学习过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lesson4 过滤选择器</title>
<link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/lesson.js"></script>
</head>
<body>
<h1>这是第四课</h1>
<h2>这是第四课</h2>
<h3>这是第四课</h3>
<h4>这是第四课</h4>
<h5>这是第四课</h5>
<ul>
<li><a href="#">#######</a></li>
<li class='aaa'><a href="#">aaaaaaaaa0</a></li>
<li class='aaa'><a href="#">aaaaaaaaa1</a></li>
<li ><a href="#">aaaaaaaaa2</a></li>
<li><a href="#">aaaaaaaaa3</a></li>
</ul>
<ul>
<li><a href="#">#######</a></li>
<li class='aaa'><a href="#">aaaaaaaaa1</a></li>
<li><a href="#">aaaaaaaaa2</a></li>
<li class='aaa'><a href="#">aaaaaaaaa3</a></li>
<li><a href="#">aaaaaaaaa4</a></li>
</ul>
<input type='text' />
<div id="div1">
这是隐藏内容！
<input type='text' hidden="hidden" />
</div>
<div id="div2">
这是隐藏内容！
<input type='text' hidden="hidden" />
</div>
</body>
</html>
<pre name=css" class="plain">
#div1{
display:none;
}
#div2{
visibility:hidden;
}$(function(){
/*过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与 CSS3
*(t.mb5u.com/css3/)里的伪类，可以让不支持 CSS3 的低版本浏览器也能支持。和常规
*选择器一样，jQuery 为了更方便开发者使用，提供了很多独有的过滤器。
*/
//$("li:first").css("background-color","red"); //选取第一个元素
//$("li:last").css("background-color","red"); //选取最后一个元素
//$("li:not(.aaa)").css("background-color","red"); //选取calss不是aaa的li元素
//$("li:even").css("background-color","red"); //选取索引是偶数的li元素
//$("li:odd").css("background-color","red"); //选取索引值为奇数的li元素
//$("li:eq(2)").css("background-color","red"); //选取第三个li元素
//$("li:gt(2)").css("background-color","red"); //选取从第三个元素开始后的所有元素(即四到最后一个)
//$("li:lt(2)").css("background-color","red"); //选取从第一个元素到第三个元素（不包含第三个元素）
//alert($(":header").get(0)); //返回[object HTMLHeadingElement]
//$(":header").css("background-color","red"); //选取h1-h6的标题元素
//alert($("div:hidden").get(0).firstChild.nodeValue); //:hidden 包含<input type='hidden' />
//alert($(":visible").size()); //获取所有可见元素
/*for(var i in $("document")){
document.write(i+'<br>');
}*/
/*alert($("input:hidden").size()); //:hidden 包含<input type='hidden' />visibility:hidden;和display：none;
$("div:hidden").show("2000",function(){
$(this).css("display","block"); //this指向div：hidden 所选取的元素
});
$("div:animated").css("background-color","red"); //选取正在执行动画的元素
*/
/*$("input").focus(); //注意只有为input绑定focus事件后才能才能用$("input:focus")获取到元素
$("input:focus").css("background-color","red");*/
//$("li:first-child").css("background-color","red"); //获取每个父元素的第一个子元素
//$("li:last-child").css("background-color","red"); //获取每个父元素的最后一个子元素
//$(":only-child").css("background-color","red"); //获取只有一个子元素的元素
//$('li:nth-child(even)').css("background-color","red"); //获取自定义的子元素的元素odd/even/eq(index)
/*alert($("li").is(function(){
return $(this).hasClass("aaa");
}));*/
//$("li").slice(0,2).css("background-color","red");
//$("ul").filter('.aaa').end().css("background-color","red");
alert($('div').contents().length);
/*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，则可以查找文本内容 集合元素
*/
});
/*
*过滤器名 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') 选择当前被焦点的元素 集合元素
*:hidden $(':hidden') 选取所有不可见元素 集合元素
*:visible $(':visible') 选取所有可见元素 集合元素
*子元素过滤器名 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)') 获取每个自定义子元素的元素(索引值从 1 开始计算) 集合元素
*/
<span style="font-size:18px;color:#FF0000;">未完待续。。。。。。。。</span>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
