jQuery002：jQuery中的28种选择器

最新推荐文章于 2023-03-21 17:02:08 发布

一个码农

最新推荐文章于 2023-03-21 17:02:08 发布

阅读量138

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44699728/article/details/93196871

版权

基本选择器：

标签选择器，类选择器，id选择器和js中的相同，*代表选择所有标签（这个不常用）。
$(选择器1，选择器2)，选择连个选择器的并集！
$(“Div font”) 选中所有在div中的后代font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.0.2.js"></script>
</head>
<body>
<script>
        $(function (){
       $("div").css("color","red");//标签
       $("#dd").css("color","red");//id选择器
       $(".ss").css("color","red");//类选择去
       $("*").css("color","red");//选中所有
       $("div,a").css("color","red");//并集
       $(".ss div").css("color","red");//子代
        })
</script>
<div class="ss">
    <div>
        1111111111
    </div>
</div>
<div id="dd">非志无以成学</div>
<div class="ss">好大的雨</div>
<a>aaaaaaaaaaa</a>
</body>
</html>

层次选择器：

注意,如果想访问某个节点的父节点,则使用parent方法即可
1，$(“Div font”) 选中所有在div中的后代font

此时1和2变红

2，$(“div>font”) 只选择div中的儿子font
在这里插入图片描述
此时只有2变红
3，
$(“div+font”)选中紧跟在div后面的font（注意是紧跟，不是只要是后面的就控制）

此时只有4变红
4，
$(“div~font”)选中div后面的兄弟font

此时4和5变红

过滤选择器
过滤选择器分为三种：基本过滤选择器，内容过滤选择器，属性过滤选择器
基本过滤选择器：

先看first，last，eq()注意这里eq返回一个集合，他是从0开始的。

：not表示取反，not表示非，就是不是这一项的选择

Odd表示下标为奇数的元素
Even表示下标为偶数的元素（这里的奇偶是下标从0开始算的）

gt表示大于
lt表示小于（下标）
内容过滤选择器：

1，contains：

内容包含王的变红

2，empty

选择空标签

3，has(selector) 有某个选择器的元素

4，parent：给为人父的div加样式，最终过滤的还是div，不是Marquee
属性过滤选择器
属性过滤选择器和一般的选择器有不同，它不是以:开头，而是以[]括起来的。
通过元素的属性来获取相应的元素

1，[attribute]
*=表示包含
^=表示以什么开头
$=表示以什么结尾
!=表示不等于

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.0.2.js"></script>
</head>
<body>
<script>
        $(function (){
           $("a[href*='2']").css("font-size","50px");
            $("a[href^='2']").css("font-size","50px");
            $("a[href$='2']").css("font-size","50px");
            $("a[href!='2']").css("font-size","50px");
        })
</script>
<a>爱奇艺</a>
<a href="12.html">百度</a>
<a href="2.html">华为</a>
<a href="3.html">腾讯</a>
<a target="_blank">阿里</a>
</body>
</html>

在这里插入图片描述