【jQuery】常用API——jQuery选择器

news2024/12/29 1:40:52

一、 jQuery基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使荻取元素统一标准。

$(“选择器”); //里面选择器直接写CSS选择器即可，但是要加号 
    <script src="../jquery.min.js"></script>
</head>
<body>
    <div class="nav">我是nav div</div>

    <script>
        $(function(){
            // 基础选择器获取元素方法：（以类选择器为例）
            $('.nav');
            console.log($('.nav'));
        })
    </script>
</body>

二、jQuery层级选择器

    <script src="../jquery.min.js"></script>
</head>
<body>
    <ol>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li>我是ol的</li>
        <li>我是ol的</li>
    </ol>
    <ul>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>

    <script>
        $(function(){
            // 层级选择器获取元素方法：ul中所有li
            $('ul li');
            console.log($('ul li'));
        })
    </script>

三、隐式迭代（重点）

jQuery设置样式：

$('div').css('属性','值')

隐式迭代：遍历内部 DOM元素（伪数组形式存储）的过程。

简单理解∶给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

    <script src="../jquery.min.js"></script>
</head>
<body>
    <div>这是一个idv</div>
    <div>这是一个idv</div>
    <div>这是一个idv</div>
    <div>这是一个idv</div>

    <ul>
        <li>必须是相同操作</li>
        <li>必须是相同操作</li>
        <li>必须是相同操作</li>
    </ul>

    <script>
        // 1. 获得四个div元素
        $('div');
        console.log($('div'));

        // 2. 给四个idv设置背景颜色为粉色
        // 注意：jquery对象不能使用style
        // jquery设置样式方法：
        $('div').css('background','pink');
        $('ul li').css('color','red');

        // 3. 隐式迭代：把匹配到的所有元素内部都进行遍历循环，给每一个元素添加css这个方法(相同方法时可以使用)
    </script>
</body>

四、jQuery筛选选择器

    <script src="../jquery.min.js"></script>
</head>

<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 () {
            // 获取第一个li元素
            $("ul li:first").css("color", "red");
            // 获取最后一个li元素
            $("ul li:last").css("color", "yellow");
            // 获取到的li元素中，选择索引号为2的元素（索引号Index从0开始）
            $("ul li:eq(2)").css("color", "blue");
            // 获取到的li元素中，选择索引号为基数的元素
            $("ol li:odd").css("color", "skyblue");
            // 获得到的li元素中，选择索引号为偶数的元素
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

五、jQuery筛选方法（重点）

重点掌握：parent() children() find() siblings() eq()

    <script src="../jquery.min.js"></script>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <!-- div的儿子 -->
        <p>我是屁</p> 
        <div>
            <!-- div的孙子 -->
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法 带括号
        $(function () {
            // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
            $(".son").parent();
            console.log($(".son").parent());

            // 2. 子
            // (1) 亲儿子 children()  类似子代选择器  ul > li
            // $(".nav").children("p").css("color", "red");
            // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
            $(".nav").find("p").css("color", "red");
        });
    </script>
</body>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <!-- 1. 选出item的所有兄弟元素 -->
        <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中的排他思想

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

    <script src="../jquery.min.js"></script>
</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function () {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

七、链式编程

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

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

使用链式编程一定注意是哪个对象执行样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery.min.js"></script>
</head>

<body>
    woshi body 的文字
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            // 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function () {
                // 链式编程
                
                // 我的颜色为红色, 我的兄弟的颜色为空
                $(this).css("color", "red").siblings().css("color", "");
                // 我的兄弟变为红色  ,我本身不变颜色
                // $(this).siblings().css('color', 'red');
                // 最后是给我的兄弟的爸爸 body 变化颜色 
                // $(this).siblings().parent().css('color', 'blue');
            });
        })
    </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/148226.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Ubuntu18.04系统 部署python3.9.0 源码编译安装及pip配置全过程记录

Ubuntu18.04系统 部署python3.9.0 源码编译安装及pip配置全过程记录

1.Ubuntu系统镜像下载和基本配置 1.1 镜像下载 镜像下载&#xff1a;https://cn.ubuntu.com/download/desktop 1.2 配置静态IP 配置固定IP方式&#xff1a; Ubuntu18之前在/etc/network/interfaces进行配置&#xff0c;Ubuntu18及之后版本在/etc/netplan/*.yaml进行配置&am…
阅读更多...
Node.JS(1)

Node.JS(1)

目录 命令行窗口&#xff08;cmd窗口、小黑屏、终端、shell&#xff09; 环境变量 命令行窗口&#xff08;cmd窗口、小黑屏、终端、shell&#xff09; winR快捷键-->cmd 常用指令 dir 列出当前目录下的所有文件 cd 目录名 进入到指定的目录 md 目录名 创建一个文件…
阅读更多...
redis安装和使用说明

redis安装和使用说明

Redis安装说明大多数企业都是基于Linux服务器来部署项目&#xff0c;而且Redis官方也没有提供Windows版本的安装包。因此课程中我们会基于Linux系统来安装Redis.此处选择的Linux版本为CentOS 7.Redis的官方网站地址&#xff1a;https://redis.io/1.单机安装Redis1.1.安装Redis依…
阅读更多...
数字验证学习笔记——SystemVerilog芯片验证23 ——数据采样

数字验证学习笔记——SystemVerilog芯片验证23 ——数据采样

一、数据采样 当你coverpoint指定采样一个变量或表达式时&#xff0c;SV会创建很多“仓&#xff08;bin&#xff09;”来记录每个数值被捕捉到的次数。这些bin是衡量功能覆盖率的基本单位。covergroup中可以定义多个coverpoint&#xff0c;coverpoint中可以自定义多个cover bi…
阅读更多...
SAP灵活工作流场景模板创建

SAP灵活工作流场景模板创建

目录 1. 创建流程对象容器 2. 编辑模板中的灵活块 3. 设置工作流启动事件 4. 设置工作流运行时事件 5. 设置工作流输出结果&#xff08;可选&#xff09; 6. 工作流控制类 7. 创建流程活动 8. 创建流程条件 9. 代理规则 9. 值帮助 10. 参考时间 11. 电子邮件模版 …
阅读更多...
[ AWS - SAA ] 解决方案架构师之设计弹性架构 - 选择可靠的弹性存储（如何选择 SSD vs. HDD）

[ AWS - SAA ] 解决方案架构师之设计弹性架构 - 选择可靠的弹性存储（如何选择 SSD vs. HDD）

本系列博文会围绕AWS Well-Architected 和六大支柱进行讲解&#xff0c;这些领域的内容对成为AWS亚马逊云科技上的 解决方案架构师&#xff08;SAA&#xff09; 非常重要。 本文主要介绍AWS亚马逊云中&#xff0c;关于弹性架构设计中存储设备的一些讲解。 本文的部分内容适用于…
阅读更多...
哈希切割 + 位图 + 布隆过滤器 —— 海量数据面试题

哈希切割 + 位图 + 布隆过滤器 —— 海量数据面试题

目录 题目一&#xff1a;给一个超过100G大小的log file, log中存着IP地址, 设计算法找到出现次数最多的IP地址&#xff1f; 哈希切割 题目二&#xff1a;给定100亿个整数&#xff0c;设计算法找到只出现一次的整数&#xff1f; 解法一&#xff1a;哈希切割 解法二&#xf…
阅读更多...
【论文精读】Guided-MVS

【论文精读】Guided-MVS

今天读的是一篇发表在IROS2022上的MVS文章&#xff1a;Multi-View Guided Multi-View Stereo&#xff0c;作者是来自于意大利University of Bologna的Matteo Poggi。 论文链接&#xff1a;arxiv 代码链接&#xff1a;https://github.com/andreaconti/multi-view-guided-multi-v…
阅读更多...
SpringCloud Netflix复习之OpenFeign

SpringCloud Netflix复习之OpenFeign

文章目录写作背景Feign核心组件介绍Encoder和DecoderLoggerContractFeign.Builder上手实战开启FeignClient调用请求日志给FeignClient注入自定义拦截器Feign支持文件上传配置Feign开启Gzip压缩Feign配置超时时间Feign整合Ribbon支持负载均衡核心源码部分FeignClient注入到Sprin…
阅读更多...
【Qt】通过创建ui界面类成员变量的方式显示窗体

【Qt】通过创建ui界面类成员变量的方式显示窗体

【Qt】通过创建ui界面类成员变量的方式显示窗体1、背景2、实例3、验证1、背景 将.ui 文件转化为.h 头文件参考&#xff1a; 【Qt】将QtDesigner生成的.ui文件转化为.h头文件 https://jn10010537.blog.csdn.net/article/details/128589666其生成的.h头文件的显示&#xff0c;如…
阅读更多...
HQChart实战教程56-限制指标周期

HQChart实战教程56-限制指标周期

HQChart实战教程56-限制指标周期 指标周期范围效果图增加周期限制步骤1. 创建系统指标Condition.PeriodCONDITION_PERIOD 枚举说明提示信息提示信息配色实例源码指标周期范围 有些指标我们需要限制它的周期， 如指标A它只能对日线周期有效， 分时周期时无效的， 所有在切换到分…
阅读更多...
Apache Hive 使用

Apache Hive 使用

Apache Hive 使用使用beeline 连接Apache Hive查看数据库使用或进入数据库创建表查看数据表上传数据数据操纵语言&#xff08;DML&#xff09;查询语句函数数学函数条件函数) 使用beeline 连接Apache Hive /export/server/apache-hive-3.1.2-bin/bin/beelinebeeline> ! co…
阅读更多...
C51单片机基础之4G模块

C51单片机基础之4G模块

一、4G模块初识EC03-DNC是亿佰特公司推出的 LTE CAT1 数传模块产品&#xff0c; 该产品软件功能完善&#xff0c; 覆盖绝大多数常规应用场景&#xff0c; EC03-DNC 是为实现串口设备与网络服务&#xff0c;通过网络相互传输数据而开发的产品 &#xff0c; 该产品是一款带分集接…
阅读更多...
Linux 计算机网络 从 ping 来初窥计算机网络

Linux 计算机网络 从 ping 来初窥计算机网络

Linux 计算机网络 从 ping 来初窥计算机网络 在上一章节《计算机网络从零到一》我们重点讲解了整个网络的形成&#xff0c;以及物理层、数据链路层、网络层这三层的形成以及他们所解决的问题&#xff0c;而本章节主要讲解 ping 命令在 Linux 中到底发生了一些什么。 ping 简介…
阅读更多...
学习open62541 --- [73] 数据源造成无法监测变量的问题解决

学习open62541 --- [73] 数据源造成无法监测变量的问题解决

本人最近遇到一个问题&#xff1a;给一个变量添加数据源后&#xff0c;使用监测项去监测变量变化&#xff0c;如果采样时间为0&#xff0c;会发现无法监测到变量的变化。 本文讲述这种情况的发生原因以及解决办法。 一 Server例子 首先准备server例子&#xff0c;如下&#x…
阅读更多...
WSL 下载服务器加速

WSL 下载服务器加速

网络下载加速&#xff0c;这里使用修改 hosts 文件 &#xff0c;地址映射 方法&#xff0c;所有网址适用&#xff0c;这里以 WSL 下载服务器为例子 命令 wsl -l -o 访问的地址&#xff1a; https://raw.githubusercontent.com/microsoft/WSL/master/distributions/Distributi…
阅读更多...
Java设计模式中组合模式是什么/树形结构怎么组合或显示存储，编程怎么实现树形结构

Java设计模式中组合模式是什么/树形结构怎么组合或显示存储，编程怎么实现树形结构

继续整理记录这段时间来的收获&#xff0c;详细代码可在我的Gitee仓库SpringBoot克隆下载学习使用&#xff01; 5.7 组合模式 5.7.1 概述 又名整体模式&#xff0c;是用于把一组相似的对象当作一个单一的对象依据树形结构来组合对象&#xff0c;用来表示部分以及整体层次属于…
阅读更多...
基于asp.net+vbscript+wsc编写网站

基于asp.net+vbscript+wsc编写网站

1、前言 asp大家应该都比较熟悉&#xff0c;就是一个动态服务器页面&#xff0c;有点类似于jsp。只是不同的是asp可以在IIS服务器上创建&#xff0c;并且如果配置了.net环境的话&#xff0c;那么就可以在asp里面<%%>写vbscript。vbscript是一种脚本语言&#xff0c;其实就…
阅读更多...
因果推断5--DML（个人笔记）

因果推断5--DML（个人笔记）

目录 1论文介绍 1.1论文 1.2摘要 1.3DML思路 2价格需求曲线 2.1价格需求弹性 2.2价格需求弹性计算DML代码 2.3价格需求弹性例子--数据集 2.4建模过程 2.5回归结果 1论文介绍 1.1论文 V. Chernozhukov, D. Chetverikov, M. Demirer, E. Duflo, C. Hansen, and a. W.…
阅读更多...
(强制)类型转换方法

(强制)类型转换方法

目录 一、C语言中的类型转换 二、C中的强制类型转换 2.1 static_cast 2.2 reinterpret_cast 2.3 const_cast 2.4 dynamic_cast 2.5 总结 一、C语言中的类型转换 在C语言中&#xff0c;若赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#xff0c;或…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023