jQuery的基本使用二

作者: 赫丹 | 来源:发表于2020-04-27 17:29 被阅读0次

JQuery基本使用二
jQuery的基本使用二
前端基础入门五（掌握jQuery的常用api，实现动态效果）
jQuery 的基本使用
jQuery笔记
jQuery基本使用
JQuery基本使用
jQuery
07-JQuery插件应用
jQuery的基本使用

1 jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

1.1 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href ，比如 <input> 元素里面的 type。
语法

prop.png

1.2 元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。
语法

attr.png

1.3 数据缓存 data()

语法
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

data.png
演示代码

<body>
<a href="http://www.baidu.com" title="哈喽">百度</a>
<input type="checkbox" checked>
<div index="1" data-index="2">div</div>
<span>111</span>
    <script>
        $(function () {
            //获取固有属性值
            console.log($('a').prop('href'));
            $('input').change(function () {
                console.log($(this).prop('checked'));
            });
            //修改属性值
            $('a').prop('title', '我们都挺好');
            //元素自定义属性通过attr获取和修改
            console.log($('div').attr('index'));
            console.log($('div').attr('data-index'));
            $('div').attr('index','3');
            console.log($('div').attr('index'));
            //数据缓存 data() 这个里面的数据是存放在元素的内存里面的
            $('span').data('username','ithedan');
            console.log($('span').data('username'));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($('div').data('index'));
        });
    </script>
</body>

2 jQuery 文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
语法

html.png
注意：html() 可识别标签，text() 不识别标签。
演示代码

<body>
<div>
    <span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
    //获取设置元素内容html()
    console.log($('div').html());
    // $('div').html(123);
    //获取设置元素的文本内容
    console.log($('div').text());
    $('div').text(456);
    //获取设置表单值
    console.log($('input').val());
    $('input').val('我我我我');
</script>
</body>