jquery的选择器

最新推荐文章于 2024-08-27 13:38:21 发布
最新推荐文章于 2024-08-27 13:38:21 发布
阅读量81 收藏
点赞数
分类专栏： # jQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46048542/article/details/125504466
版权

原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元索统一标准。
$( "选择器”) //里面选择器直接写CSS选择器即可，但是要加引号
请添加图片描述

层级选择器

请添加图片描述

隐式迭代

请添加图片描述
遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>111</div>
    <div>111</div>
    <div>111</div>
    <div>111</div>
    <ul>
        <li>222</li>
        <li>222</li>
        <li>222</li>
    </ul>
    <script>
        //1、获取四个div元素
        console.log($("div"));
        //2、给四个div设置背景颜色为粉色 jquery对象不能使用style
        $("div").css("background","pink");
        //3、隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加CSS这个方法
        $("ul li").css("color","red");
    </script>
</body>
</html>

请添加图片描述

筛选选择器

请添加图片描述

这类选择器都带冒号

请添加图片描述
请添加图片描述

筛选选择器(方法)

请添加图片描述
请添加图片描述
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ol>
        <li>111</li>
        <li>111</li>
        <li class="item">111111</li>
        <li>111</li>
    </ol>
    <ul>
        <li>2222</li>
        <li>2222</li>
        <li>2222</li>
        <li>2222</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;
            $("ul li").eq(index).css("color","blue");
            //3、判断是否有某个类名
            console.log($("div:first").hasClass("current"));
        })
    </script>
</body>
</html>

请添加图片描述

jquery的排他思想

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function(){
            //1、隐式迭代，给所有的按钮都绑定了点击事件
            $("button").click(function(){
                //2、当前的元素变化背景颜色
                $(this).css("background","red");
                //3、其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background","");
            });
        })
    </script>
</body>
</html>

请添加图片描述

jquery的链式编程

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    我的
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function(){
            //1、隐式迭代，给所有的按钮都绑定了点击事件
            $("button").click(function(){
                //1、我的颜色为红色，我的兄弟颜色为空
                $(this).css("color","red").siblings().css("color","");
                //2、我的兄弟变为红色，我本身不变颜色
                $(this).siblings().css("color","red");
                //3、给我的兄弟的爸爸body变化颜色
                $(this).siblings().parent().css("color","blue");
            });
        })
    </script>
</body>
</html>
九阈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery选择器
m0_57774967的博客
06-16 4666
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery的常见选择器和筛选器
weixin_42943920的博客
01-20 1665
关于jQuery是前端方法库 特点： 1 优质的选择器和筛选方法 2 好用的饮食迭代 3 强大的链式编程 jQuery向外暴露两个变量：jQuery和$ (jQuery === $) 选择器 // jQuery选择器 $(选择器) 返回元素集合 // id选择器 console.log($('#li3')); // jQuery.fn.init(1) // 类选择器 console.log($('.c1')); // 标签选择器 console.log($('li')); /
判断jQuery选择器结果为空
likingsn的技术专栏
11-27 6969
jQuery选择器获取到的是一个对象，所以无论页面上存在或者不存在元素，这个对象都不为空。因此，如果要使用jQuery检查元素再给某个页面上是否存在的时候，应该通过获取到的元素的长度来判断，使用下面的代码： if ($("#tt").lenght > 0) { //do sth } 或者通过转换成JavaScript对象的方式来进行处理，代码如下： if ($("#tt")[0]
JQuery_ JQuery选择器 JQuery判断相应的节点是否存在
热门推荐
迎难而上
05-10 1万+
有时候我们需要用选择器获取JQuery对象，并判断是否有满足条件的DOM节点存在 但是需要注意一点 由于 $(selector)  不论什么情况都会返回JQuery 对象， 所以不能按照以下的方式 判断节点是否存在 if($('#tt')){ console.log("不能以 if($('#tt')) 这种方式判断DOM是否存在");
jQuery选择器$()获取不到对象的坑
法克瓜的博客
08-17 7045
最近在写一个webRTC的功能，发现用$()是获取不到对象的。 原因是因为document.getElementById()返回的是一个[object HTMLDivElement] 而$()返回的则是一个jQuery对象数组。 所以，要访问$()选择器中的对象要使用数组下标$()[0]。 参考：cnbolg....
如何判断jquery选择器选择结果是否存在
u014771464的博客
03-25 3756
jquery选择器选择后，怎么知道里面有没有元素？ jquery 选择器获取element 无论element 是否存在都将返回一个对象 var my_element=$("#myId"); 这里无论元素"myid"是否存在，my_element 始终是一个object 使用下面的方法判断"myid"元素是否存在 if(my_element.length>0)){ alert("exist");
JQuery选择器超级详细
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jquery选择器以及案例
m0_59745705的博客
11-03 1129
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery选择器分类
weixin_45753617的博客
08-19 1157
jQuery选择器分类
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
jQuery选择器及jquery案例详解(必看)
10-22
本文将重点介绍jQuery选择器的种类和使用，以及通过具体的案例来深入理解jQuery选择器的应用。 首先，jQuery选择器是jQuery库的核心部分之一，它允许开发者通过不同的语法来选择页面上的元素。选择器可以分为几大类...
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 1937
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
vue ref和reactive区别
灰海
08-25 899
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
jQuery基础——DOM基础
最新发布
m0_54066656的博客
08-27 567
JQ基础——DOM操作
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 450
npm。
2024前端面试题-js篇
FormAda的博客
08-22 1036
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值