JQuery 选择器

最新推荐文章于 2023-05-09 21:15:00 发布

MichstaBe-IMUT

最新推荐文章于 2023-05-09 21:15:00 发布

阅读量300

点赞数

分类专栏： # JQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/108565717

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JQuery选择器

基本选择器

标签选择器（元素选择器）
语法： $(“html标签名”) 获得所有匹配标签名称的元素

$("p")

id选择器
语法： $("#id的属性值") 获得与指定id属性值匹配的元素

$("#btn")

类选择器
语法： $(".class的属性值") 获得与指定的class属性值匹配的元素

$(".cls")

多条件选择器：
语法： $(“选择器1,选择器2…”) 获取多个选择器选中的元素之和

$("span,li,div,")

全部选择器
语法： $("*") 获取此页面中的所有元素

$("*")

标签+类样式选择器

$("li.cls")

层级选择器

后代选择
语法： $("A B ") 选择A元素内部的所有B元素

$("ul li")

子选择器
语法： $(“A > B”) 选择A元素内部的所有直接子元素B

$("ul> li")

亲弟弟选择器
语法： $("A + B ") 选择紧接在A元素之后同级B元素
弟弟选择器
语法： $(“A ~ B”) 选择A元素之后的所有同级B元素

筛选选择器

在这里插入图片描述

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

筛选方法

在这里插入图片描述

<script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul>li
            // $(".nav").children("p").css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color", "red");
            // 3. 兄
        });
    </script>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">有current</div>
    <div>木有current</div>
    <script>
        // 注意一下都是方法 带括号
        $(function() {
            // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            // 2. 第n个元素
            var index = 2;
            // (1) 我们可以利用选择器的方式选择
            $("ul li:eq(2)").css("color", "blue");
            $("ul li:eq(" + index + ")").css("color", "blue");
            // (2) 我们可以利用选择方法的方式选择 更推荐这种写法
            $("ul li").eq(2).css("color", "blue");
            $("ul li").eq(index).css("color", "blue");
            // 3. 判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));


        });
    </script>
</body>

jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,” ”);

链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css('color', 'red').sibling().css('color', '');

表单选择器

        1.    :input
        2.    :text
        3.    :password
        4.    :radio
        5.    :checkbox
        6.    :submit
        7.    :image
        8.    :reset
        9.    :button
        10.   :file

表单过滤选择器

        1. 可用元素选择器
            * 语法： :enabled 获得可用元素
        2. 不可用元素选择器
            * 语法： :disabled 获得不可用元素
        3. 选中选择器
            * 语法： :checked 获得单选/复选框选中的元素
        4. 选中选择器
            * 语法： :selected 获得下拉框选中的option元素

属性选择器

1. 属性名称选择器
语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
可选关系运算符：
!=  :属性值不等于该值
^=  :属性值以该值开头
$=  :属性值以该值结尾
*=  :属性值中包含该值

可见性选择器

:hidden：表示查询所有隐蔽的标签
:visible：表示查询所有显示的标签

MichstaBe-IMUT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 选择器

JQuery选择器基本选择器标签选择器（元素选择器）语法： $(“html标签名”) 获得所有匹配标签名称的元素$("p")id选择器语法： $("#id的属性值") 获得与指定id属性值匹配的元素$("#btn") //例子而已类选择器语法： $(".class的属性值") 获得与指定的class属性值匹配的元素$(".cls") //例子而已多条件选择器：语法： $(“选择器1,选择器2…”) 获取多个选择器选中的元素之和$("span,li,div,")
复制链接

扫一扫

专栏目录