首页 > 代码库 > jQuery学习之路（四）之过滤选择器
jQuery学习之路（四）之过滤选择器
今天是第四课主要学习过滤选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson4 过滤选择器</title> <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"css/lesson.css" >>$(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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。