jQuery的操作属性你真的了解吗

2024-07-29 13:10:04

一、操作属性

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>
    <div></div>

    <script>
        $(function(){
            $('div').width(300);
            $('div').height(200);
            $('div').css('backgroundColor','red')
        })
    </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(){

            $('div').width(300);
            $('div').height(200);
            $('div').css('backgroundColor','red')

            console.log($('p').html())

            $('div').html('<b>西游记</b>')
        })
    </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 HTML设置内容和属性操作实例分析

目录 jQuery-设置内容和属性设置内容-text().html()以及val() text().html()以及val()的回调函数设置属性-attr() attr()的回调函数本文实例讲述了jQuery HTML设置内容和属性操作.分享给大家供大家参考,具体如下: jQuery - 设置内容和属性设置内容 - text().html() 以及 val() 将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素
jquery更改元素属性attr()方法操作示例

本文实例讲述了jquery更改元素属性attr()方法.分享给大家供大家参考,具体如下: jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写, 是js中setAttribute()和getAttribute()的简化最基本常用的用法: $("img").attr("src","img/a.jpg"); $("img").attr("width","1
jQuery HTML获取内容和属性操作实例分析

目录获取内容和属性获得内容 - text().html() 以及 val() 获取属性 - attr() 本文实例讲述了jQuery HTML获取内容和属性操作.分享给大家供大家参考,具体如下: 获取内容和属性获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值下面的例子
jquery选择器和属性对象的操作实例分析

本文实例讲述了jquery选择器和属性对象的操作.分享给大家供大家参考,具体如下: <html> <head> <title>jQuery-选择器</title> <meta charset="UTF-8"/> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script typ
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属性的获取/设置及样式添加/删除操作技巧分析

本文实例讲述了Jquery属性的获取/设置及样式添加/删除操作技巧.分享给大家供大家参考,具体如下: Jquery属性的获取与设置 //找到第一个input,通过attr设置属性value的值 $("input:first").attr('value','新设值'); //同时为多个属性赋值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一个input,通过使用removeAttr删除属性
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操作属性和样式详解

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

在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果. 首先定义两个class: 复制代码代码如下: .controlOff{ display:inline-block; width:130px; height:36px; cursor:pointer; background-image:url("../iclass/images/teach_off.png"); background-repeat: no-repeat; } .controlOn{ displa
jQuery 常见操作实现方式和常用函数方法总结

jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中控件 $("#ID #ID") // 通过控件ID取其中的控件 $("标签.class样式名") /
jQuery选择器之属性筛选选择器用法详解

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <
解决IE7中使用jQuery动态操作name问题

问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就不能调试,就不能知道改了后还会不会有这样的问题. 想想可能与客户环境唯一不同就只有可能是js缓存问题了,然后把所有的js文件引用的地方都加上一个当前时间参数,然问题依然存在. 本来规定的版本就是IE8,所以也没有想过会有版本兼容问题,在说了咱用的是jquery,jqeruy的出现不就是号称为了解决浏
JavaScript jQuery 中定义数组与操作及jquery数组操作

首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组声明有10个元素的数组复制代码代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如