jQuery 学习笔记（二）_jquery获取元素属性attr和p-CSDN博客

本文链接：https://blog.csdn.net/luyi980521/article/details/106911057

1.jQuery 属性操作

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

1.1 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 <a> 元素里面的 href 属性，比如 <input> 元素里面的 type。
在这里插入图片描述
注意： prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected等。

1.2 元素自定义属性 attr()

用户自己给定元素添加的属性，我们称为自定义属性。比如给 div 添加 index="1" 等。
在这里插入图片描述注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

1.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
在这里插入图片描述
注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

演示代码：

<a href="http://www.baidu.com" title="百度">百度</a>
<input type="checkbox" checked>
<div index="1" data-index="2">我是 div</div>
<span>123</span>
<script>
    $(function() {
        // 1.element.prop("属性名")  获取元素固有的属性值
        console.log($("a").prop("href"));
        $("a").prop("title", "百度百度");
        $("input").change(function() {
            console.log($(this).prop("checked"));
        })
        
        // 2.自定义属性需要使用 attr()
        console.log($("div").index("index"));   // -1
        console.log($("div").attr("index"));    // 1
        console.log($("div").attr("data-index"));    // 2
        
        // 3.数据缓存 data() 这个里面的数据是放在元素的内存里
        $("span").data("uname", "lyman");   // 在 DOM 节点中不会显示
        console.log($('span').data("uname"));   // lyman
        // 获取 data-xxx 属性，可以不写 data-
        console.log($("div").data("index"));    // 2
    })
</script>

2.jQuery 文本属性值

jQuery 的文本属性值常见操作有三种：html() / text() / val()。分别对应 JS 中的 innerHTML、innerText 和 value 属性。
在这里插入图片描述
注意：html() 可识别标签，text() 不识别标签。
演示代码：

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

3.jQuery 元素操作

jQuery 元素操作主要讲的是用 jQuery 方法，操作标签的遍历、创建、添加、删除等操作。

3.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作，如果要想给同类元素做不同操作，就需要用到遍历。
在这里插入图片描述
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换

注意：此方法用于 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

3.2 创建、添加、删除元素

jQuery 方法操作元素的创建、添加、删除方法很多，重点使用部分如下：
在这里插入图片描述
注意：以上只是元素的创建、添加、删除方法的常用方法，其它方法请参考 API。

示例代码：

<ul>
    <li>原先的 li</li>
</ul>
<div class="test">我是原先的 div</div>
<script>
    $(function() {
        // 1.创建元素
        var li = $("<li>我是后来创建的 li </li>");

        // 2.添加元素
        // (1) 内部添加
        $("ul").append(li); // 添加在最后面
        $("ul").prepend(li);    // 添加在最前面
        // (2) 外部添加
        var div = $("<div>我是后妈生的 div</div>");
        $(".test").after(div);
        $(".test").before(div);
        // 3.删除元素
        // $("ul").remove(); // 删除自己（自杀）
        // $("ul").empty(); // 删除匹配元素里面的子节点
        $("ul").html("");   // 删除匹配元素里面的子节点
    })
</script>

4.jQuery 尺寸、位置操作

jQuery 中分别为我们提供了两套快速获取和设置元素尺寸和位置的 API，方便易用，内容如下：

4.1 jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的 API 对应不一样的盒子模型。
在这里插入图片描述
演示代码：

<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>

注意：有了这套 API 我们将可以快速获取和设置宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

4.2 jQuery 位置操作

jQuery 的位置操作主要有 3 个：offset()、position()、scrollTop()/scrollLeft()，具体介绍如下：
在这里插入图片描述

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回顶部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>