史上最全的jQuery选择器

Posted 2020-10-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了史上最全的jQuery选择器相关的知识，希望对你有一定的参考价值。

jQuery选择器的优势

　　1.简洁的写法

　　　　$()函数在很多javascript类库中都被作为一个选择器函数来使用，在jQuery中也不例外。其中$("#ID")用来代替document.getElementById()函数，即通过ID获取元素。

　　2.支持CSS1到CSS3选择器

　　　　jQuery选择器的写法与CSS选择器的写法十分相似，只不过两者的作用效果不同，CSS选择器是找到元素后添加样式，而jQuery选择器是找到元素后添加行为。

　　3.完善的处理机制

　　　　使用jQuery选择器不仅简洁，而且还能避免很多错误。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
    <div>test</div>
    <script>
        document.getElementById("tt").style.color="red";
    </script>
</body>
</html>

　　　　运行以上代码，浏览器会因为网页中没有id为"tt"的元素而报错，因此，必须修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
    <div>test</div>
    <script>
        if(document.getElementById("tt")){
            document.getElementById("tt").style.color="red";
        }
    </script>
</body>
</html>

　　　　但是如果我们需要操作很多元素，那么需要对每一个元素都进行一次判断，还太麻烦了吧！！

　　　　这个时候jQuery站了出来，其在这方面的问题上处理的非常不错，即便页面不存在该元素也不会报错哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="myScript/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
    <div>test</div>
    <script>
        $("#tt").css("color","red");
    </script>
</body>
</html>

　　　　但是需要注意的是，$("#tt")获取的永远都是对象，即便是网页上没有这个元素，因此当要用jQuery来检查某个元素在网页上是否存在时，不能使用以下代码：

if ( $("#tt") ){
    //do something
}

　　　　而应该根据获取到元素的长度来判断

if ( $("#tt").length > 0 ){
    //do something
}

　　　　或者转化成DOM对象来判断

if ( $("#tt")[0] ){
    //do something
}

选择器

1.基本选择器	描述	返回	示例
#id	根据给定的id匹配一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名匹配元素	集合元素	$(".test")选取所有class为test的元素
element	根据给定元素名匹配元素	集合元素	$("p")选取的p标签
*	匹配所有元素	集合元素	$("*")选取所有元素
seletor1,....,seletorN	将每一个选择器匹配到的元素合并后一起返回	集合元素	$("div,span,p.myClass")选取所有div,span,和拥有myClass类的p标签合并成一组元素

功能	代码	执行按钮
改变id为one的元素的背景色	$("#one").css("background","#bbffaa");
改变class为mini的所有元素的背景色	$(".mini").css("background","#bbffaa");
改变div标签的背景色	$("div").css("background","#bbffaa");
改变所有元素的背景色	$("*").css("background","#bbffaa");
改变所有的span标签和id为two的元素的背景色	$("#span,#two").css("background","#bbffaa");

#one,.one

.mini

#two,.one,title=test

.mini
t=other

.mini
t=test

.mini

.mini
t=tesst

正在执行动画的span元素.

2.层次选择器	描述	返回	示例
$("祖先后代")	选取祖先元素里面的所有后代元素	集合元素	$("div span")选取div里的所有span元素
$("parent > child")	选取父亲元素里面的孩子元素	集合元素	$("div > span")选取div元素下名为span的子元素
$("prev + next") $(".prev").next("next")	选取紧接在prev元素后的next元素	集合元素	$(".one + div")选取class为one的下一个div的同辈元素 $(".one").next("div")
$("prev ~ siblings") $("prev").nextAll("siblings")	选取prev元素之后的所有siblings元素	集合元素	$("#two~div")选取id为two的元素后面的所有div同辈元素 $("#two").nextAll("div")

功能	代码	执行按钮
改变body内所有div的背景色	$("body div").css("background","#bbffaa");
改变body内子div的背景色	$("body > div").css("background","#bbffaa");
改变class为one的下一个div同辈元素背景色	$(".one + div").css("background","#bbffaa");
改变id为two的元素后面的所有div同辈元素的背景色	$("#two ~ div").css("background","#bbffaa");