欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery过滤选择器

程序员文章站 2023-12-31 20:16:10
要点: 基本过滤器 内容过滤器 可见性过滤器 子元素过滤器 其他方法 一、基本过滤器 item1 item2 item3 item4 item5 ite...

要点:

基本过滤器 内容过滤器 可见性过滤器 子元素过滤器 其他方法

一、基本过滤器



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(); });

上一篇:

下一篇: