今天是第四课主要学习过滤选择器 <!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>