jQuery基础 设置属性和属性值

获取元素固定属性

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’’,这样就可以获取到了,也可以进行修改.