jQuery中获取元素的常用方式和DOM中获取元素的常用方式

最新推荐文章于 2025-12-25 08:56:57 发布
原创 最新推荐文章于 2025-12-25 08:56:57 发布 · 792 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
jQuery

当前文章被收录于：

jQuery
15 篇文章 1 人学习
订阅专栏 查看详情
这篇博客探讨了在DOM和jQuery中获取元素的常见方法。在DOM中，包括通过id、标签名、name属性、类样式和选择器来获取元素。而在jQuery中，涉及了id选择器、类选择器、标签选择器以及更复杂的交集、并集、层次和奇偶集选择器等获取元素的方式。

1.DOM中获取元素的常用方式

  • DOM中获取元素的方式
    • 根据id获取元素
    • document.getElementById(“id属性值”)
    • 根据标签名字获取元素
    • document.getElementsByTagName(“标签名字”)
    • 根据name属性获取元素
    • document.getElementsByName(“name属性值”)
    • 根据类样式的名字获取元素
    • document.getElementsByClassName(“类样式的名字”)
    • 根据选择器获取元素
    • document.querySelector(“选择器”);---->id选择器，类选择器，标签选择器
    • document.querySelectorAll(“选择器”)

2.jQuery中获取元素的常用方式

* jQuery中获取元素的方式
* $("选择器")---->jQuery对象
  • 通过id选择器获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.1.js"></script>
</head>
<body>
<input type="button" id="btn" value="点击">
<script>
    $(function () {
        $("#btn").click(function () {
            console.log($(this).val());
            $(this).val("I believe");
        });
    });
</script>
</body>
</html>
  • 通过类选择器获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cls{
            width: 100px;
            height: 100px;
            background-color: blue ;
        }
    </style>
    <script>
        /*
        * .css("属性","值");---->设置某个属性的css样式，只适合单个属性的设置
        * */
    </script>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $(".cls").css("backgroundColor","green");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="点击">
<div class="cls">雏菊</div>
<div class="cls">代表着</div>
<div class="cls">深藏心底的爱</div>
</body>
</html>
  • 通过标签选择器获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        /*
        * text()方法相当于DOM中的innerText属性
        * 对象.text()获得该对象的文本内容
        * 对象.text("文本内容")设置该对象的文本内容
        * 代码本身没有循环操作，jQuery内部帮助我进行循环操作---->隐式迭代
        * */
    </script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p").text("深埋心底的爱");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="点击">
<p>I believe</p>
<p>I believe</p>
<p>雏菊</p>
<p>深埋心底的爱</p>
</body>
</html>
  • 通过交集选择器获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("p#flower").css("backgroundColor","blue");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="点击">
<div>
    <p>I believe</p>
    <p id="flower">雏菊</p>
    <p>深藏心底的爱</p>
</div>
</body>
</html>
  • 通过并集选择器获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        /*
        * 交集选择器:标签名.类样式的名字[#id值]
        * 并集选择器:选择器,选择器,选择器...
        * */
    </script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("div,#love,.flower").css("backgroundColor","green");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="点击">
<div>雏菊</div>
<span id="love">深藏心底的爱</span>
<p class="flower">I believe</p>
</body>
</html>
  • 通过层次集选择器获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //$("#dv span").css("backgroundColor","green");//获取的是div这个父级元素所有的子代span标签(包括直接和间接)
                $("#dv>span").css("backgroundColor","green");//获取的是div这个父级元素直接子代span标签
                //$("#dv~span").css("backgroundColor","green");//获取的是div这个父级元素后面所有的兄弟元素
                //$("#dv+span").css("backgroundColor","green");//获取的是div这个父级元素后面的直接兄弟元素
            });
        });
    </script>
</head>
<body>
<input type="button" id="btn" value="点击">
<br/>
<span>哈哈哈</span>
<div id="dv">
    <span>第一个span标签</span>
    <ul>
        <li>雏菊</li>
        <span>第二个span标签</span>
        <li>雏菊</li>
    </ul>
    <span>第三个span标签</span>
    <span>第四个span标签</span>
</div>
<span>哈哈哈</span>
<span>哈哈哈</span>
</body>
</html>
  • 通过奇偶集选择器获取元素
//效果-->隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;

        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
       $(function () {
           $("#btn").click(function () {
               $("#uu li:odd").css("backgroundColor","green");
               $("#uu li:even").css("backgroundColor","blue");
           });
       });
    </script>
</head>
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
    <li>乔峰:降龙十八掌</li>
    <li>张无忌:乾坤大挪移</li>
    <li>段誉:鳞波微步</li>
    <li>丁棚:天外流星贱</li>
    <li>张三丰:太极掌</li>
    <li>段飞:极乐神功</li>
    <li>云飞扬:天馋功</li>
    <li>杨过:黯然销魂掌</li>
    <li>那谁谁:如来神掌</li>
    <li>孟星魂:流星蝴蝶剑</li>
    <li>楠哥:少女萌萌拳</li>
</ul>
</body>
</html>
  • 通过下标值获取元素
//效果-->根据鼠标的指向动态改变图片的显示
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .wrapper {
      width: 298px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      overflow: hidden;
    }

    #left, #center, #right {
      float: left;
    }

    #left li, #right li {
      background: url(images/lili.jpg) repeat-x;
    }

    #left li a, #right li a {
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }

    #left li a:hover, #right li a:hover {
      background-image: url(images/abg.gif);
    }

    #center {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>
    /*
    * index()---->获取当前这个元素的索引
    * eq(索引值)---->获取对应的索引的元素
    * */
    $(function () {
      $("#left>li").mouseenter(function () {
        //先获取当前li的索引值
        var index=$(this).index();
        //先隐藏所有的li
        $("#center>li").hide();
        //显示当前的li
        $("#center>li:eq("+index+")").show();
      });
      $("#right>li").mouseenter(function () {
        //先获取当前li的索引值
        var index=$(this).index()+9;
        //先隐藏所有的li
        $("#center>li").hide();
        //显示当前的li
        $("#center>li:eq("+index+")").show();
      });
    });
  </script>
</head>
<body>
<div class="wrapper">
  <ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    <li><a href="#">冬裙</a></li>
    <li><a href="#">呢大衣</a></li>
    <li><a href="#">毛衣</a></li>
    <li><a href="#">棉服</a></li>
    <li><a href="#">女裤</a></li>
    <li><a href="#">羽绒服</a></li>
    <li><a href="#">牛仔裤</a></li>
  </ul>
  <ul id="center">
    <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
  </ul>
  <ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男包</a></li>
    <li><a href="#">登山鞋</a></li>
    <li><a href="#">皮带</a></li>
    <li><a href="#">围巾</a></li>
    <li><a href="#">皮衣</a></li>
    <li><a href="#">男毛衣</a></li>
    <li><a href="#">男棉服</a></li>
    <li><a href="#">男靴</a></li>
  </ul>
</div>
</body>
</html>

在这里插入图片描述

CCS8.1 导入CCS3.3工程方法
热门推荐
11-06 1万+
    CCS3.3作为开发人员使用最广开发工具，研究人员手上存在不少该版本的建立的程序版本，然而随着TI公司推出高级版本的CCS平台，在新的平台上集成了更加丰富的功能和优点。利用新版本的平台在开发和编译旧版本工程上可以节省大量时间和精力。在使用新版本开发3.3版本工程时，首要解决的就是加载3.3的工程文件，现将加载过程记录如下： 第一步：Project-&gt;Import Legacy CC...
基于射频技术的校园无人超市管理系统_360
最新发布
12-25 330
本设计实现了一种基于射频技术的校园无人超市管理系统，系统集成了环境监测与商品管理两大核心模块。在环境监测部分，采用DHT11温湿度传感器与MQ2烟雾传感器对超市内部环境进行实时监测，结合温控与报警机制，实现自动通风与烟雾报警功能，并通过1.44寸SPI LCD显示屏进行本地信息显示。商品管理部分基于RC522-RFID读卡器完成商品识别，结合Qt上位机软件实现顾客自助选购与结算，同时支持管理员进行商品入库与会员卡管理等操作。系统采用STM32F103RCT6为主控核心，结合串口通信方式与Qt开发的上位机进行
jquery 常见的方法有哪些？
weixin_59519449的博客
04-09 2327
（1）get（）取得所有匹配的DOM元素集合。 （2）get（index）取得其中一个匹配的元素。index表示取得第几个匹配的元素。 （3）append（content）向每个匹配的元素内部追加内容。 （4）after（content）每个匹配的元素之后插入内容。 （5）html（）/html（var）取得或设置匹配元素的html内容。 （6）find（expr）搜索所有与指定表达式匹配的元素。 （7）bind（type,[data],fn）为每个匹配元素的特定事件绑定事件处理函数。 （8）
OPC Core Components Redistributable (x86 x64).7z
Win7 64位安装KEPServerEX 6.4开发环境下，遇到CoCreateInstance返回错误安装OPC Core Components Redistributable (x64) 3.00.108.msi
jQuery中的DOM遍历方法
杨欢博的博客
07-14 4038
一、向上遍历 1. parent() 获取元素的直接父元素 $("span").parent().css({ "color":"red", "border":"1px solid red" }) 2. parents() 获取元素的祖先元素，直到根元素html $("span").parents().css({ "color":"red", "border":"1px solid red" }) 3. parentsUntil() 向上查找直到遇见某个祖先元素为止 $("span").pa
jQuery中DOM基础操作
一名在校学习前端的小白
09-13 1300
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。下面我们来看一下 W3C 上的 dom 树。
JQuery获取DOM元素
weixin_34060741的博客
01-17 559
jQuery获得的对象并不和我们平时使用getElementById获得的对象一样。所以一些新手就很迷惑，为什么${”#Element”}不能直接innerHTML，这就是原因所在。 两种方法获取DOM元素。 取出集合中的某一项，或者直接get方法 jQuery对象与DOM对象的转换 只有jQuery对象才能使用jQuery定义的方法。注意DOM对象和jQuery对象是有区别的，调用方法时...
JqueryDOM操作-jquery查找属性节点
hd001wlf奋斗！
11-10 561
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> Jquery_demo .i{ font-size:24px; font-weight:800; color:red; background-color:blue; width:25
【你也能从零基础学会网站开发】Web建站之jQuery进阶篇 jQuery常见属性和方法概述与使用
极客小俊
03-17 1126
有了jQuery我少做很多事情，可以划水了!
JQuery元素获取
iteye_8003的博客
09-04 239
前言：这是本类别博文JQuery即用即查开篇。 因为查手册太麻烦，而且有时候需要深入命令所在详细页面才能了解此命令的具体作用是什么。 写这几篇文章就是为了，工作遇到问题时，一看这几篇文章就可以查到哪个命令的作用正好符合，然后自己再深入手册进行具体学习用法。 写的都是常用的一些，前提是你对jquery命令有一定了解，且有jquery手册。 第一篇：JQuery元素获取常见用法 1、利用...
获取节点的方式（dom节点，jquery）
我太懒了，懒得起名字
12-24 508
可以直接获取指定ID的DOM元素。可以获取所有包含指定类名的元素。可以获取指定标签名的所有元素。选择包含特定文本的元素。可以获取具有特定属性值的元素。选择特定位置的元素。js中使用jquery获取节点的方式。针对表单元素提供快捷选择器，如。支持CSS层级选择器（如空格、属性获取所有子节点，或通过。对已获取的节点集合使用。
[乐意黎转载]从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
打杂人-aerchi
11-25 690
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习.   二.前言 通过前面几章我们已经能够完全控制jQuery包装集了,  无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式.   三. 区分DOM属性和元素属性 一个im
DOM中的元素获取方式、事件以及属性操作
qq_63946637的博客
10-15 1912
本文旨在帮助大家学习DOM中元素的获取方式、事件以及属性操作
jQuery获取dom元素
dywtsh的博客
05-05 1595
可以根据确定的jQuery对象，利用遍历函数查询目标dom元素。方法直接定位目标dom元素组。目标元素是被选元素的祖先。目标元素是被选元素的后代。目标元素是被选元素的同辈。
总结的一些jquery获取更改dom元素常用方法
ynztpwl的专栏
04-21 2575
总结的一些jquery获取更改dom元素常用方法
Vue获取DOM节点方式
qq_45829293的博客
03-08 7397
文章目录Vue获取DOM节点1、原生js获取节点的方式2、在vue项目中引入jquery3、ref属性4、直接使用DOM API寻找元素 Vue获取DOM节点 1、原生js获取节点的方式 document.getElementById() – 使用id获取方式较少 document.getElementByClassName() – 类名 document.getElementByTagName() – 标签名 document.getElementByName() – name属性，使用少
[jQuery]：jQuery的DOM元素操作方法
我只是个程序员。
09-27 2003
jQuery的DOM操作：创建节点、添加节点、删除节点、复制节点、替换节点和包裹节点。也就是对文档中的元素节点、属性节点和文本节点进行增删改查，只不过在原生JS基础上进行封装和增加了许多方法，所以能够更方便的操作DOM。 获取元素节点        jQuery获取DOM元素是使用选择器，至于选择器的使用这里就不介绍了，请戳jQuery选择器总结。 如果有时候为了提高运行效率，可以先用原生JS
在Jquery中如何获取并设置Dom元素的值
bug处理进行时
09-13 1706
jquery的强大之处在于对dom元素的操作，所谓的dom元素就是document object model（文本对象模型）。在对dom操作中主要包含 获取、设置dom元素的值和属性 动态的添加、删除dom元素 动态的设置dom的css样式 获取dom的尺寸等 一、获取设置dom的值 获取/设置dom值的方法有三种: text() – 主要用于对普通文本的设置和获取 html() –...
jQuery选择元素下标以及通过元素下标获得dom
圆圆的 JavaScript 博客
11-20 2515
jQuery选择元素下标 $(this).index() //注：本文的两个方法index值均从0开始； 使用如下 <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul> $(document).ready(function(){ $(...
JQuery学习之路Part5：DOM元素内容和属性值的获取和设置
"✧treasure mountain✧"
03-08 7215
一、获取/设置内容 1、text() 获取所选元素的文本内容 获取双标签文本内容 不往方法里传入参数 即为获取 例： $("#btn1").click(function(){ alert("Text: " + $("#test1").text()); }); 设置所选元素的文本内容 设置双标签文本内容 往方法里传入要设置的文本内容 例： $("#btn1").click(function(){...
jQuery捕获-获取DOM元素内容和属性
firstcode666的博客
01-19 1945
一、获取内容 　　1.text()-设置或返回所选元素的文本内容 　　2.html()-设置或返回所选元素的内容（包括HTML标记） 　　3.val()-设置或 返回表单字段的值 1 $(document).ready(function(){ 2 $("#btn1").click(function(){ 3 alert("Text: " + $("#test").text()); 4 }); 5 $("#btn2").click(function(..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值