jQuery基础设置属性和属性值

我就是我 2023-07-08 09:24 17阅读 0赞

## 获取元素固定属性 ##

**element.prop(‘属性名’)**  
这个方法就是**获取元素固有的属性值**  
比如

<a href="http://www.baidu.com" title="百度一下">百度</a>
        <script>
            $(function() { 
                console.log($('a').prop('href'));
            })
        </script>

这样就获取到了a标签的href属性.

## 设置元素固定属性 ##

**element.prop(‘属性名’, ‘属性值’)**  
给两个参数就是**设置元素固有的属性值**  
比如

<a href="http://www.baidu.com" title="百度一下">百度</a>
        <script>
            $(function() { 
                console.log($('a').prop('title', '不想百度'));
            })
        </script>

这样我就修改了a标签的固有属性title的值了

**注意element.prop();这个方法只能设置和修改元素固有的属性值,如果是自定义的属性是获取和修改不了的.**

当然,如果你想设置和修改自定义属性的话,就可以用  
**attr()方法**

## 获取元素自定义属性 ##

**attr(‘属性’)**

<div index = 1></div>
        <script>
            $(function() { 
                console.log($('div').attr('index'));
            })
        </script>

这样我就获取到了div的自定义属性的index的值为1.

## 修改自定义属性值 ##

**attr(‘属性’, ‘属性值’)**  
比如

<div index = 1></div>
        <script>
            $(function() { 
                console.log($('div').attr('index','2'));
            })
        </script>

添加两个参数就是修改自定义属性的值  
这里我就修改改成了2.  
**当然 attr()方法也可以获取和修改H5的自定义属性**

## 数据缓存 ##

**data( )**  
data()方法可以在指定的元素上存取数据,但是不会修改DOM元素结构,  
如果页面刷新,那么之前存放的数据都会被移除  
举个例子

<span>123</span>
    <script>
     $('span').data('name', '小明')
                console.log($('span').data('name'));
    <script>

这样我在span元素中存了一个name属性,值为’小明’,  
**这个方法也可以获取H5的自定义属性,**  
举个例子

<div data-index="2"></div>
    <script>
      console.log($('div').data('index'));
    </script>

我就获取了H5的自定义属性, 值得**注意的是用了data()方法,里面就不必加上 '‘data-’'了,直接 ‘‘index’’,这样就可以获取到了,也可以进行修改.**