jQuery过滤选择器
要点:
基本过滤器 内容过滤器 可见性过滤器 子元素过滤器 其他方法一、基本过滤器
item1 item2 item3 item4 item5 item6
1.获取ul下的第一个li,等价方法first()
$("ul li:first").css("color", "red"); $("ul li").first().css("color", "blue");
2.获取ul下的最后一个li,等价方法last()
$("ul li:last").css("color", "red"); $("ul li").last().css("color", "blue");
3.获取ul下的class不等于item3的li,等价方法not()
$("ul li:not(.item3)").css("color", "red"); $("ul li").not(".item3").css("color", "blue");
4.获取ul下索引值为奇数的li
$("ul li:odd").css("color", "red");
5.获取ul下指定索引值的li
$("ul li:eq(0)").css("color", "red");
6.获取ul下大于指定索引值的li
$("ul li:gt(2)").css("color", "red");
7.获取ul下小于指定索引值的li
$("ul li:lt(2)").css("color", "red");
8.匹配h1~h6的h标签
h1 h2 h5 $(":header").css("color", "red");
9.获取网页初始状态已经被激活焦点的元素,不能是鼠标点击或者是tab键入
$("#txt").get(0).focus(); $(":focus").css("background", "red");
二、内容过滤器
1.内容过滤器的过滤规则主要是包含的子元素或者是文本内容上
选取含有”lamport”文本的元素
lamport1
abclamport
asdfllamportsdf $(":contains(lamport)").css("color", "red");2.匹配不包含子元素或者是任何文本的元素
alert($("h3:empty").get(0).tagName); // H3
3.选取包含子元素为class=red的元素,即返回的元素是父元素,等价方法为has()
item1 item2 item3 alert($("ul:has(.red)").get(0).innerHTML); $("ul").has(".red").css("background", "blue");
4.匹配包含子元素或者文本内容的元素
alert($(".red:parent").get(0).tagName); // LI, 返回class为red且包含子元素或者文本内容的元素
5.parent()与:parent属性类似,但返回的是元素的父节点
alert($(".red").parent().get(0).tagName); // UL
6.parents()方法,返回的是元素的父节点以及祖先
var ele = $(".red").parents(); for(var i = 0, len = ele.length; i < len; i++) { alert(ele.get(i).tagName); // UL BODY HTML }
7.parentsUntil()方法,返回的是元素的父节点以及祖先,直到遇到指定的父元素为止
var ele = $(".red").parentsUntil("html"); for(var i = 0, len = ele.length; i < len; i++) { alert(ele.get(i).tagName); // UL BODY }
三、可见性过滤器
可见性过滤器是根据元素的可见性与不可见性来选取元素
item1 item2 item3 alert($("ul li:hidden").get(0).innerHTML); // item1 alert($("ul li:visible").size()); // 2
四、子元素过滤器
过滤规则:通过父元素和子元素之间的关系
li1 li2 li3 only-one li4 li5 li6
1.匹配每一个li元素的父元素的第一个子元素
$("ul li:first-child").css("color", "red");
2.匹配每一个li元素的父元素的最后一个子元素
$("ul li:last-child").css("color", "red");
3.匹配只有一个元素的元素
$("ul li:only-child").css("color", "red");
4.匹配每一个li元素的父元素的第几个元素,索引值从1开始
$("ul li:nth-child(1)").css("color", "red");
五.其他方法
1.判断选择器is
li1 li2 li3 alert($(".red").is("li")); // true, 判断class为red的元素是否为li元素
同时,is可以包含匿名函数为参数
alert($('.red').is(function () { //true,方法,同上 return $(this).get(0).innerText == 'li2'; //可以自定义各种判断 }));
2.hasClass,判读某个元素是否包含每个class
alert($("ul li:nth-child(2)").hasClass("red")); // true slice(start, end), 选取从start到end的元素,索引值从0开始,选取范围[start, end) $("ul li").slice(0, 2).css("color", "red"); // 第一个和第二个,不包括第三个
3.获取某个元素下的所有元素节点包括文本节点(空白文本)
alert($("ul").contents().size()); // 7
filter()过滤方法,和is()方法都可以接受一个function参数
首先选取ul下的li元素,接着用filter()方法过滤得到最后一个子元素
$("ul li").filter(':last').css("color", "red");
4.end(),获取当前元素的前一次状态
This is H1
This is p
$("#test").click(function () { // 首先获取#test下的p,使其隐藏 // 接着接受本次引用,返回的是#test // 最后又调用了一次hide(),使得整个DIV都被隐藏掉 $(this).find("p").hide().end().hide(); });推荐阅读
-
读jQuery之十三 添加事件和删除事件的核心方法_jquery
-
jQuery EasyUI API 中文文档 - Pagination分页_jquery
-
thinkphp模型过滤查询字段,表达式方法_PHP教程
-
基于jQuery的为attr添加id title等效果的实现代码_jquery
-
jQuery过滤选择器
-
AJAX的跨域与JSONP(为文章自动添加短址的功能)_jquery
-
multiSteps 基于Jquery的多步骤滑动切换插件_jquery
-
jQuery中delegate与undelegate实例详解
-
使用 Jquery+Ajax+xml制作中国地区选择三级联动菜单
-
jquery高效反选具体实现_jquery