Jquery 获取元素的方法

news/2024/4/26 14:38:23/文章来源:https://blog.csdn.net/zheshihuahua/article/details/130359408

Jquery 获取元素的方法分为两种:jQuery选择器、jQuery遍历函数。

1、获取本身:

 1.1.jQuery选择器

选择器          实例                       说明
 #Id               $('#myId')              ID选择器: 可以获取到ID为“myId”的元素,区分大小写

1.2.多种jQuery选择器组合

1.2.1.jQuery选择器

选择器                 实例                                              说明
.class                  $('.myClass')                     类选择器:可以获取到class为‘myClass’的所有元素
element              $('p')                                  获取所有的<p>元素
:header               $(':header')                       获取所有的标题元素:<h1> ~ <h6>
:animated           $(':animated')                    获取所有的动画元素


:contains(text)     $('p:contains(Hello)')        获取所有包含文本为Hello的<p>元素,中间的文本区分大小写


:hidden                 $(':hidden')                      获取所有的隐藏元素:width和height为0 、display:none、type=hidden、


[attribute]              $('[href]')                          属性选择器:获取所有含有属性为href的元素


[attribute=value]    $('[href=a.html]')   

=   获取所有带有属性href,并且值为a.html的元素

!=  获取所有带有属性href,并且值不等于为a.html的元素

$=  获取所有带有属性href,并且值以a.html结尾的元素

^=  获取所有带有属性href,并且值以a.html开头的元素

~=  获取所有带有属性href,并且值包含单词”a.html“的元素

*=  获取所有带有属性href,并且值包含文本”a.html“的元素

:input                $(':input')                                  获取所有input元素
:radio                $(':radio')                                  所有带有 type="radio" 的 input 元素

相似的有:

:text、:chexbox、:password、:submit、:reset、:button、:file

:enabled             $(':enabled')              所有启用的input元素。 :disabled  则相反
:checked            $(':checked')              所有选中的input选择(单选框、复选框)
:gt(index)            $('p:gt(2)')                 index从0开始,获取index大于(不包含)2的所有<p>元素
:lt(index)             $('p:lt(2)')                  index从0开始,获取index小于(不包含)2的所有<p>元素
:even                  $('tr:even')                所有偶数<tr>元素
:odd                    $('tr:odd')                  所有奇数<tr>元素

2.jQuery选择器jQuery遍历函数混合

选择器                        实例                                      说明
:first                         $('p:first')                          第一个<p>元素
:last                         $('p:last')                          最后一个<p>元素
:eq(index)                $("p:eq(1)")                     第二个<p>元素,index从0开始


3.jQuery遍历函数

 方法                                               描述
 eq()                               返回带有被选元素的指定索引号的元素
 first()                             返回被选元素的第一个元素
 last()                             返回被选元素的最后一个元素

 4、选择同级元素

     jQuery选择器

           $('div + p') 每个div相邻的下一个<p>元素
           $('div ~ p') 获取跟div同级的所有的<p>元素

 4.1   jQuery遍历函数

         next() 返回被选元素的后一个同级元素
         nextAll() 返回被选元素之后的所有同级元素
         prev() 返回被选元素的前一个同级元素
         prevAll() 返回被选元素之前的所有同级元素

5、获取父级元素

            jQuery选择器

      $("p:parent")获取所有p元素的父级元素

             jQuery遍历函数

    parent() 获取被选元素的父级元素
    parents() 获取被选元素的所有祖先元素

6.获取子级元素

         jQuery选择器

    $('div > p') 获取div直接子元素的所有<p>元素
    $('div p') 获取div所有后代的<p>元素

         jQuery遍历函数

    children() 返回被选元素的所有直接子元素
    contents() 返回被选元素的所有直接子元素(包含文本和注释节点)
    find() 返回被选元素的后代元素

  


  
 

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

界面开发框架Qt新手入门 - 自定义排序/筛选模型示例(一)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 自定义排序/筛选模型…

记一次某应用虚拟化系统远程代码执行

漏洞简介 微步在线漏洞团队通过“X漏洞奖励计划”获取到瑞友天翼应用虚拟化系统远程代码执行漏洞情报(0day)&#xff0c;攻击者可以通过该漏洞执行任意代码&#xff0c;导致系统被攻击与控制。瑞友天翼应用虚拟化系统是基于服务器计算架构的应用虚拟化平台&#xff0c;它将用户…

原理这就是索引下推呀

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 索引下推是之前面试的时候遇到的一个面试题&#xff0c;当时没有答上来&#xff0c;今天来学习一下。 介绍索引下推之前先看一下MySQL基…

【AI炼丹术】写深度学习代码的一些心得体会

写深度学习代码的一些心得体会 体会1体会2体会3总结内容来源 一般情况下&#xff0c;拿到一批数据之后&#xff0c;首先会根据任务先用领域内经典的Model作为baseline跑通&#xff0c;然后再在这个框架内加入自己设计的Model&#xff0c;微调代码以及修改一些超参数即可。总体流…

汇编语言(第3版) - 学习笔记 - 实验8 分析一个奇怪的程序

实验8 分析一个奇怪的程序 题目解析顺序执行查看反汇编测试一下 题目 分析下面的程序&#xff0c;在运行前思考:这个程序可以正确返回吗? 运行后再思考:为什么是这种结果? 通过这个程序加深对相关内容的理解。 assume cs:codesg codesg segmentmov ax, 4c00h int 21h …

JavaWeb-Tomcat

目录 1.什么是Tomcat 2.Tomcat 概述 3.Tomcat基本使用 1.什么是Tomcat Tomcat官网&#xff1a;Apache Tomcat - Welcome! 【摘自百度百科】 Tomcat是Apache 软件基金会&#xff08;Apache Software Foundation&#xff09;的Jakarta 项目中的一个核心项目&#xff0c;由Apac…

MySQL: 数据类型之整数型、浮点数、时间日期

目录 前言&#xff1a; 数据类型&#xff1a; 整数型&#xff1a; 浮点数与定点数&#xff1a; 浮点数&#xff1a; 定点数&#xff1a; 日期与时间&#xff1a; DATATIME: DATE&#xff1a; TIMESTAMP: ​编辑 YEAR: TIME: 前言&#xff1a; 前面的几篇写了如何创…

2023年主流的选择仍是Feign, http客户端Feign还能再战

&#x1f473;我亲爱的各位大佬们好&#x1f618;&#x1f618;&#x1f618; ♨️本篇文章记录的为 微服务组件之http客户端Feign 相关内容&#xff0c;适合在学Java的小白,帮助新手快速上手,也适合复习中&#xff0c;面试中的大佬&#x1f649;&#x1f649;&#x1f649;。 …

音视频开发面试题大盘点:掌握这些基础知识,你就能轻松应对面试

前言 音视频开发作为一种高技术含量的领域&#xff0c;随着人们对数字媒体的需求不断增加&#xff0c;其前景非常广阔。预计在2023年&#xff0c;音视频开发领域仍将继续保持快速发展的态势&#xff0c;尤其是在移动互联网、物联网、虚拟现实、增强现实等领域。 根据BOSS招聘…

Jenkins Kubernetes

Kubernetes集成Harbor Harbor 私服配置 在Kubernetes的master和所有worker节点上加上harbor配置&#xff0c;修改daemon.json&#xff0c;支持Docker仓库&#xff0c;并重启Docker。 sudo vim /etc/docker/daemon.json {"registry-mirrors": ["https://jrabv…

微信小程序 开发中的问题(simba_wx)

目录 一、[将 proto 文件转成 json 文件](https://blog.csdn.net/wzxzRoad/article/details/129300513)二、[使用 test.json 文件](https://blog.csdn.net/wzxzRoad/article/details/129300513)三、[微信小程序插件网址](https://ext.dcloud.net.cn/)四、[vant-weapp网址](http…

从0搭建Vue3组件库(八):使用 release-it 实现自动管理发布组件库

使用 release-it 实现自动管理发布组件库 上一篇文章已经打包好我们的组件库了,而本篇文章将介绍如何发布一个组件库。当然本篇文章介绍的肯定不单单只是发布那么简单。 组件库发布 我们要发布的包名为打包后的 easyest,因此在 easyest 下执行pnpm init生成package.json {&…

本地缓存解决方案Caffeine | Spring Cloud 38

一、Caffeine简介 Caffeine是一款高性能、最优缓存库。Caffeine是受Google guava启发的本地缓存&#xff08;青出于蓝而胜于蓝&#xff09;&#xff0c;在Cafeine的改进设计中借鉴了 Guava 缓存和 ConcurrentLinkedHashMap&#xff0c;Guava缓存可以参考上篇&#xff1a;本地缓…

【Springcloud Alibaba微服务分布式架构 | Spring Cloud】之学习笔记(九)Nacos+Sentinel+Seata

NacosSentinelSeata 9/9 1、SpringCloud Alibaba简介1.1 主要功能1.2 具体组件 2、SpringCloud Alibaba Nacos服务注册和配置中心2.1 Nacos介绍2.2 Nacos下载安装2.3 使用Nacos作为注册中心2.3.1 在父工程的pom文件中引入springcloudalibaba依赖2.3.2 创建cloudalibaba-provide…

适合学生党的蓝牙耳机品牌有哪些?性价比高的无线耳机推荐

相较于有线耳机&#xff0c;蓝牙耳机的受欢迎程度可谓是越来越高&#xff0c;当然&#xff0c;这也离不开部分手机取消耳机孔的设计。最近看到很多网友问&#xff0c;适合学生党的蓝牙耳机品牌有哪些&#xff1f;针对这个问题&#xff0c;我来给大家推荐几款性价比高的无线耳机…

static_cast、dynamic_cast和reinterpret_cast区别和联系

其实网上相关的资料不少&#xff0c;但是能够说清楚明白这个问题的也不多。 于是&#xff0c;我尝试着问了一下AI&#xff0c;感觉回答还可以&#xff0c;但是需要更多的资料验证。 让我们先看看AI是怎么回答这个问题的。 static_cast、dynamic_cast和reinterpret_cast都是C中…

视频音频提取器推荐:快速提取视频中的音频!

视频中的音频可以用于很多用途&#xff0c;比如制作配乐、音频剪辑等。但是&#xff0c;许多人并不知道如何将视频中的音频提取出来。如果您也是这样的情况&#xff0c;那么本文为您介绍一个简单易用的视频音频提取器&#xff1a;。 它是一个免费的在线工具&#xff0c;可以帮…

如何在Web上实现激光点云数据在线浏览和展示?

无人机激光雷达测量是一项综合性较强的应用系统&#xff0c;具有数据精度高、层次细节丰富、全天候作业等优势&#xff0c;能够精确测量三维现实世界&#xff0c;为各个行业提供了丰富有效的数据信息。但无人机激光雷达测量产生的点云数据需要占用大量的存储空间&#xff0c;甚…

DataGridView 真·列头不高亮 真·列头合并

高亮BUG VB.Net&#xff0c;在 .NET Framework 4.8 的 WinForm 下(即不是 WPF 的绘图模式、也不是 Core 或 Mono 的开发框架)&#xff0c;使用 DataGridView 行模式&#xff0c;还是有个列头表现为高亮显示&#xff1a; 查找各种解决方式: 设置 ColumnHeadersDefaultCellSty…

YOLOv1代码复现2:数据加载器构建

YOLOv1代码复现2&#xff1a;数据加载器构建 前言 ​ 在经历了Faster-RCNN代码解读的摧残后&#xff0c;下决心要搞点简单的&#xff0c;于是便有了本系列的博客。如果你苦于没有博客详细告诉你如何自己去实现YOLOv1&#xff0c;那么可以看看本系列的博客&#xff0c;也许可以帮…