jQuery的操作属性详解

2024-09-29 21:01:16

一、操作属性

1、读取属性值：attr(属性名)

取得以第一匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回undefined

2、修改属性值

（1）attr(key,value)

为所有匹配的元素设置一个属性值

（2）attr(key,fn)

'key'：表示属性名

'fn'：表示函数,将函数的属性值作为key代表的属性的值

为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值

（3）attr({属性名1：属性值，属性名2：属性值})

3、删除属性：removeAttr(属性名)

从每一个匹配的元素中删除一个属性

<!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="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <a href="https://www.baidu.com">去百度</a>
    <br><br>
    <input type="text">
    <div></div>

    <script>
        $(function(){
            let str = $('a').attr('href');//选中a标签把href的属性赋给str
            console.log(str)

            // $('input').attr('value','123')
            $('input').attr('value',function(){//将函数的值赋给value，注意函数必须有返回值
                let s = 0;
                for(let i=1;i<=10;i++){
                    s+=i;
                }
                return s;
            })
        })
    </script>
</body>
</html>

value为55，输出的是href属性的值

二、操作类（class）

1、添加class属性：addClass(class属性)

为每个匹配的元素添加指定的类名

2、删除class属性：removeClass(属性名)

从所有匹配的元素中删除全部或指定的类

3、交替添加/删除class属性：toggleClass(class属性)

如果存在（不存在）就删除（添加）一个类

<!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="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安邮电大学</p>
    <button id='btn1'>变色</button>
    <button id="btn2">取消</button>
    <button id="btn3">交替</button>
    <button id="btn4">单击三次</button>
    <div></div>

    <script>
        $(function(){
            $('#btn1').click(function(){
                $('p').addClass('ok')
            })
            $('#btn2').click(function(){
                $('p').removeClass('ok')
            })
            $('#btn3').click(function(){
                $('p').toggleClass('ok')
            })
            var count = 0;
            $('#btn4').click(function(){
                $('p').toggleClass('ok',++count % 3 ===0)
                //如果值为0，那么就添加css样式
            })
        })
    </script>
</body>
</html>

点击变色：变成红色
点击取消：变成原来的颜色
点击交替：颜色交替变换
点击单击三次：每点击第三次都会变色

三、操作css

1、获取CSS样式属性值：css('样式属性名')

访问第一个匹配元素的样式属性

2、设置样式属性--采用'key/value'

css({'属性名','属性值','属性名','属性值'})

把一个"名/值对"对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式

3、一次设置一个属性：css('属性名','值')

在所有匹配的元素中，设置一个样式属性的值

<!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="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安邮电大学</p>
    <div></div>

    <script>
        $(function(){
            let c = $('p').css('color');
            let f = $('p').css('font-size');

            console.log(c)
            console.log(f)

        })
    </script>
</body>
</html>

开发者工具的控制台输出的是rgb(0, 0, 0)和16px

四、设置、获取元素的width和height

1、获取width：width()

取得第一个匹配元素当前计算的宽度值（px）

2、设置width：width(val)

为每个匹配的元素设置css宽度（width）属性的值

3、获取height：height()

4、设置height：height(val)

<!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="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安邮电大学</p>
    <div></div>

    <script>
        $(function(){
            let c = $('p').css('color');
            let f = $('p').css('font-size');

            console.log(c)
            console.log(f)

        })
    </script>
</body>
</html>

五、操作元素内容

1、获取内容

html() ---innerHTML

2、设置内容

html(val)

<!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="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <p>西安邮电大学</p>
    <div></div>

    <script>
        $(function(){
            let c = $('p').css('color');
            let f = $('p').css('font-size');

            console.log(c)
            console.log(f)

        })
    </script>
</body>
</html>

六、操作值--操作元素的value属性

1、获取值：val()

2、设置值：val(值)

<!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="../jq/jquery.js"></script>
</head>
<style>
    .ok{
        color: red;
    }
</style>
<body>
    <input type="text">

    <script>
        $(function(){
            $('input').val('AAAAA')
        })
    </script>
</body>
</html>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

jQuery操作属性和样式详解

• 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",
JQuery节点元素属性操作方法

本文实例讲述了JQuery节点元素属性操作方法.分享给大家供大家参考.具体分析如下: 在JQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性. 获取属性和设置属性如果要获取p元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称. var $para = $("p"); //获取<p>节点 var p_txt = $para.attr("title"); //获取<p>元素节
JQuery属性操作与循环用法示例

本文实例讲述了JQuery属性操作与循环用法.分享给大家供大家参考,具体如下: 取出或者设置html内容 var $htm= $("#div").html 取出 $("#div").html("<span>文字</span>") 设置取出或者设置某个属性的值 var $src=$('#img1').prop('src') 取出 $('#img1').prop({src:'test.jpg',alt:"te
jquery属性,遍历,HTML操作方法详解

Jquery属性遍历.HTML操作. Jquery拥有可操作HTML元素和属性的强大方法. 下面是我整理的一些jquery遍历函数: .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQ
详解jQuery中的元素的属性和相关操作

元素属性元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are
jQuery的操作属性详解

目录一.操作属性 1.读取属性值:attr(属性名) 2.修改属性值 (1)attr(key,value) (2)attr(key,fn) (3)attr({属性名1:属性值,属性名2:属性值}) 3.删除属性:removeAttr(属性名) 二.操作类(class) 1.添加class属性:addClass(class属性) 2.删除class属性:removeClass(属性名) 3.交替添加/删除class属性:toggleClass(class属性) 三.操作css 1.获取CSS样式
jQuery stop()用法实例详解

近期查看前辈的代码,发现在使用animate()的时候前面需要加上stop(),来防止移进移出的闪动问题,但却不知道stop()里面参数的真正意思,今天查了下stop()中参数的意义和具体使用方法,分享给大家. stop(true)等价于stop(true,false): 停止被选元素的所有加入队列的动画. stop(true,true):停止被选元素的所有加入队列的动画,但允许完成当前动画. stop()等价于stop(false,false):停止被选元素当前的动画,但允许完成以后队列的所有
[jQuery] 事件和动画详解

1. 事件 1.1 加载DOM 在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件.在JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法.$(document).ready()方法和window.onload方法有相似的功能,但是在执行时机方面是有区别的.window.onload方法是在网页中所有的元素完全加载到浏览器后才执行,而$(document).ready()方法注册的事件处理程
angularJs关于指令的一些冷门属性详解

我们使用ng的时候,经常会使用到指令,大家所熟知的属性我在这里就不介绍了,讲讲大家没怎么留意的属性 1.multiElement 这是指定指令作用区间的功能,最常用的就是ng-repeat-start和ng-repeat-end了. 2.priority 指令优先级,优先级越高,指令越早执行. 3.terminal 是否允许优先级低的指令起作用,如果是true,那么只有比当前指令或跟当前指令等级相同的指令才可以执行.最典型的就是ngIf 4.templateNamespace 声明模板的格式有三
JavaScript对Json的增删改属性详解

使用JS对Json数据的处理,项目遇到需要对Json数据进行相关操作,比如增删改操作,本以为会比较难,网上搜索下,发现还是比较简单的,贴一段代码: <script type="text/javascript"> var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中存在age属性 json["age"] = 30; alert(
jQuery Validate验证框架详解(推荐)

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src=&qu
微信小程序增、删、改、查操作实例详解

微信小程序增.删.改.查操作实例详解 1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <form bindsubmit="addSubmit"> <view class="consignee"> <text class="consignee-tit&q
Mybatis中的resultType和resultMap查询操作实例详解

resultType和resultMap只能有一个成立,resultType是直接表示返回类型的,而resultMap则是对外部ResultMap的引用,resultMap解决复杂查询是的映射问题.比如:列名和对象属性名不一致时可以使用resultMap来配置:还有查询的对象中包含其他的对象等. MyBatisConfig.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configura
Java中Properties类的操作实例详解

Java中Properties类的操作实例详解知识学而不用,就等于没用,到真正用到的时候还得重新再学.最近在看几款开源模拟器的源码,里面涉及到了很多关于Properties类的引用,由于Java已经好久没用了,而这些模拟器大多用Java来写,外加一些脚本语言Python,Perl之类的,不得已,又得重新拾起.本文通过看<Java编程思想>和一些网友的博客总结而来,只为简单介绍Properties类的相关操作. 一.Java Properties类 Java中有个比较重要的类Properti
IOS 基本文件操作实例详解

IOS 基本文件操作实例详解在iOS的App沙盒中,Documents和Library/Preferences都会被备份到iCloud,因此只适合放置一些记录文件,例如plist.数据库文件.缓存一般放置到Library/Caches,tmp文件夹会被系统随机清除,不适宜防止数据. [图片缓存的清除] 在使用SDWebImage时,图片被大量的缓存,有时需要获取缓存的大小以及清除缓存. 要获取缓存大小,使用SDImageCache单例的getSize方法拿到byte为单位的缓存大小,注意计算时