jQuery 操作元素及属性

最新推荐文章于 2023-06-26 10:07:38 发布
最新推荐文章于 2023-06-26 10:07:38 发布
阅读量321 收藏 1
点赞数 1
分类专栏： jQuery 前端 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UserPython/article/details/105843545
版权
这篇博客详细介绍了jQuery如何操作元素内容、设置属性、添加删除切换类名、获取或设置value值、遍历元素、处理单选复选框、管理CSS样式、调整宽高、计算偏移量以及获取鼠标位置等。通过这些方法，可以高效地进行DOM操作。
摘要由CSDN通过智能技术生成

jQuery中文开发文档

获取或设置元素内容

  • $(selector).html()：获取或设置元素的内容，包括标签
  • $(selector).text()：获取或设置元素的文本内容，不包括标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
       #box{
    
           width: 200px; height: 200px; border: 1px solid black;
           margin: 50px auto; text-align: center;
       }
       button{
    
           width: 200px; height: 50px; margin: 0 auto; display: block;
       }
    </style>
    <script>
        $(function(){
    
            // 1、获取元素内容，返回内容包含标签
            // $("button").click(function(){
    
            //     console.log($("#box").html());
            // })

            // 2、设置元素内容，重写所有元素内容
            // $("button").click(function(){
    
            //     $("#box").html("<b>重写内容</b>");
            // })

            // 3、获取元素文本内容，返回不包含标签的文本内容
            // $("button").click(function(){
    
            //     console.log($("#box").text());
            // })

            // 4、设置元素文本内容，重写所有元素的文本内容
            $("button").click(function(){
    
                // $("#box").text("<b>重写内容</b>");//标签不会被解析
                $("#box").text("重写文本内容");
            })
        })
    </script>
</head>
<body>
    <div id="box">
        <p>获取或设置元素内容1</p>
        <span>获取或设置元素内容2</span>
    </div>
    <button>点击</button>
</body>
</html>

获取或设置元素属性

  • $(selector).attr(attribute)：获取元素属性值

  • $(selector).attr(attribute, value)：设置元素属性和属性值

  • $(selector).removeAttr(attribute)：移除元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
       #box{
    
           width: 200px; height: 200px; border: 1px solid black;
           margin: 50px auto; text-align: center;
       }
       button{
    
           width: 200px; height: 50px; margin: 0 auto; display: block;
       }
       .ppp{
    font-size: 30px;}
       .ppp1{
    color:red}
       .ppp2{
    font-weight: 700;}
    </style>
    <script>
        $(function(){
    
            // 1、获取元素属性值
            // $("button").click(function(){
    
            //     // var attr = $("#box p").attr("class");
            //     var attr = $("#box p").attr("title");
            //     console.log(attr);
            // })

            // 2、设置元素属性值
            // $("button").click(function(){
    
            //     var attr = $("#box p").attr("class", "ppp1");
            //     var attr = $("#box p").attr("title", "p_title");
            //     同时设置或添加多个属性
            //     var attr = $("#box p").attr({
    
            //         class:"ppp1",
            //         title:"p_title",
            //         id:"p_id"
            //     });

            // 使用函数设置属性值，返回一个新的属性值
            //     var attr = $("#box p").attr("title", function(index, value){
    
            //         return value + "添加的";
            //     });
            //     console.log(attr);
            // })

            // 3、删除元素属性，必须要传参
            $("button").click(function(){
    
                // $("#box span").removeAttr("title");  
                // $("#box span").removeAttr("id"); 
                // 同时删除多个属性 
                $("#box span").removeAttr("title id");  
            })

            // 4、删除元素类名
            // $("button").click(function(){
    
                // $("#box span").removeClass("c_span1");
                // $("#box span").removeClass("c_span1 c_span3");
                // 删除全部
                // $("#box span").removeClass();
            // })
        })
    </script>
</head>
<body>
    <div id="box">
        <p class="ppp" title="p_title">获取或设置元素内容1</p>
        <span class="c_span1 c_span2 c_span3" title="s_title" id="s_id">获取或设置元素内容2</span>
    </div>
    <button>点击</button>
</body>
</html>

添加删除切换元素类名

  • $(selector).addClass()：添加元素类名

  • $(selector).removeClass()：删除元素类名

  • $(selector).toggleClass()：切换元素类名，有类名时删除，无类名时添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style type="text/css">
       #box{
    
           width: 200px; height: 200px; border: 1px solid black;
           margin: 50px auto; text-align: center;
       }
       button{
    
           width: 200px; height: 50px; margin: 0 auto; display: block;
       }
       .ppp{
    font-size: 25px;}
       .ppp1{
    color:red}
       .ppp2{
    font-weight: 700;}
    </style>
    <script>
        $(function(){
    
            // 1、添加元素类名
            $("button").click(function(){
    
                // 添加一个类名
                // $("#box p").addClass("ppp1");
                // 添加多个类名，用空格隔开
                // $("#box p").addClass("ppp1 ppp2");
            })

            // 2、删除元素类名
            $("button").click(function(){
    
                // 删除一个类名
                // $("#box span").removeClass("ppp");
                // 删除多个类名
                // $("#box span").removeClass("ppp ppp2");
                // 删除全部
                // $("#box span").removeClass();
            })

            // 3、切换元素类名，有类名时删除，无类名时添加
            $("button").click(function(){
    
                // $("#box p").toggleClass();
                // $("#box p").toggleClass("ppp");
最低0.47元/天 解锁文章
苦涩2020
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery节点元素属性操作方法
10-24
主要介绍了JQuery节点元素属性操作方法,实例分析了attr与removeAttr方法操作节点元素属性的相关使用技巧,需要的朋友可以参考下
jQuery 操作 HTML 元素和属性的方法
10-17
主要介绍了jQuery 操作 HTML 元素和属性的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery操作元素的属性
aqzengkuasheng的博客
02-17 185
操作元素的属性包含：获取属性、设置属性值、删除属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 元素属性的分类： 1.固有属性：元素本身就有的属性（id,name,class,style） 2.返回值是boolean的属性：checked
jQuery-02
Sole_Memory1的博客
09-02 325
day02 - jQuery 1.1. jQuery 属性操作 ​ jQuery 常用属性操作有三种：prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() ​ 所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。 语法 ​ 注意：prop() 除...
Jquery学习之路004操作元素属性
laoyuanwailk的博客
06-26 86
操作元素的属性， attr()方法和prop()方法
jQuery属性概述
橘猫吃不胖的博客
01-08 988
jQuery属性1 操作元素属性1.1 读取属性1.2 修改属性1.3 删除属性2 操作样式类2.1 添加类2.1 判断类2.3 移除类2.4 交替类3 操作CSS3.1 操作CSS样式3.2 操作宽和高4 操作页面内容4.1 操作HTML代码4.2 操作文本内容4.3 操作值5 查找与筛选元素5.1 过滤（Filtering）函数5.2 查找（Finding）函数5.3 链式操作 1 操作元素属性 1.1 读取属性 对于页面上的各个元素，jQuery可以很方便的得到元素的各个属性。读取属性的函数时attr
jQuery 获取与设置 元素属性【一篇文章轻松拿下】
weixin_52212950的博客
04-25 5961
hello大家好呀！此篇文章带领大家熟练掌握 jQuery 的属性方面的操作，包括固有属性的获取与设置，自定义属性的获取与设置等等，走进 jQuery 的更深层次阶段 一：固有属性的设置与获取 prop 什么是固有属性？固有属性即标签本身具有的属性，例如 a 标签的 href 属性，input 标签的 type 属性，这些就叫做元素的固有属性，此版块我们要学会获取与设置其固有属性。 1.1 固有属性的获取 element.prop('属性名') <b...
jQuery学习3：操作元素属性和特性
12-09
<a>//www.jb51.net</a>现在要得到a标签的属性id。有如下方法： 代码如下: jQuery(“#easy”).click(function() {  alert(document.getElementById(“easy”).id); //1  alert(this.id); //2  ...
jQuery：设置获取属性、遍历添加删除元素、尺寸、位置
qi341500的博客
10-07 2386
一、设置或获取元素属性值 1、设置或获取元素固有属性值 2、设置或获取元素自定义属性值attr() 3、数据缓存data() 二、获取元素内容 三、jQuery对元素操作 1、遍历元素 2、创建元素 3、删除元素 四、jQuery 尺寸 五、jQuery位置
jQuery - 操作元素的style属性——最全
wwppp987的博客
10-19 1万+
一、获取、修改 css 样式属性 1，使用 css() 方法获取元素的样式属性 比如下面代码可以获取 p 元素的文字颜色（color）。无论该属性是从外部 CSS 导入，还是直接拼接在 HTML 元素里（内联），css() 方法都可以获取到 style 里的值。 $("p").css("color"); //获取p元素的文字颜色 2，css() 方法也可以用来设置元素的样式 （1）比如设置某个元素的单个样式。 $("p").css("color","orange"); //将p元素的文字颜色设置为红色
jquery day02
chauncyluo的博客
12-13 179
数据缓存 data() data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。 注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。 jQuery 元素操作 <body> <div>1</div> <div&g...
jQuery技能点--获取元素内容、值、属性
程序员大阳
11-22 4184
获取元素内容、值、属性
JQuery设置元素属性和内容
零怀念的博客
08-27 1万+
普通属性 1.设置属性： 设置单个属性：$(选择器).attr("属性名","属性值") 设置多个属性：$(选择器).attr({属性名:"属性值",属性名:"属性值"…})  这里的属性名可加引号也可不加引号 2.获取属性： $(选择器).attr("属性名") 3.删除属性： $(选择器).removeAttr("属性名") 示例： &lt;!DOCTYPE ht
jQuery属性操作
weixin_73667562的博客
10-21 375
用户自己给元然添加的属性，我们称为自定义属性，比如给 div添加index=1”
jQuery 操作元素的常用方法
yan_gogo的博客
07-10 1788
操作元素样式:&lt;1&gt;.设置单个样式jQuery对象.css("属性","属性值")&lt;2&gt;.设置多个样式(以对象的方式传入参数)jQuery对象.css( {"属性","属性值"....} )&lt;3&gt;.获取行内样式jQuery对象.css("属性名")操作class样式的方式:&lt;1&gt; 添加样式:jQ
jQuery 判断是否包含某个属性
qq_40897648的博客
08-31 6182
jQuery 判断是否包含某个属性 来源：https://www.cnblogs.com/yunspider/p/5084191.html 1、Get the attribute, check the value var attr = $(this).attr('name'); // For some browsers, `attr` is undefined; for others, ...
jquery获取当前元素的子元素的自定义属性值
giveMe_Five的博客
03-31 1万+
1.获取自定义属性值简单 直接可以$.attr("data-id");2.获取当前元素的子元素$("id").children()可以返回所有的子元素,孙子,重孙子一级的都不会获取.$("id").find() 会将所有的子级包含 孙子级都获取 ,所有不建议使用 ;3.获取元素的子元素的自定义属性值呢?&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&
JS操作DOM元素属性和方法
热门推荐
力求改变，给自己多一点，再多一点的挑战！
03-24 2万+
<br /><br />Dom元素基本操作方法API，先记录下，方便以后使用。 <br /> <br />　　W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访<br /> <br />问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档<br /> <br />中的每个元素都是DOM的一部分，这就使得JavaScript可以
jQuery常用属性和方法有哪些？
weixin_30361641的博客
11-25 252
属性： 获得标签：$("#id")获得标签内的代码：.html()获得标签内的文本：.text()修改标签内的代码：.html("内容");修改标签内的文本：.html("内容"); 获得标签属性：.attr("属性");修改标签属性：attr("属性","属性值"); 添加样式：addClass("样式名");动态切换样式：toggleClass("样式名");获取样式：css 添加元素...
JQUERY操作元素
最新发布
07-28
下面是一些常见的jQuery操作元素的示例： 1. 选择元素： - 通过元素标签名选择：`$('tagname')` - 通过类名选择：`$('.classname')` - 通过ID选择：`$('#idname')` - 通过属性选择：`$('[attribute=value]')` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值