美文网首页视觉艺术JS+TS
jQuery 学习笔记(二)

jQuery 学习笔记(二)

作者: 青年心路 | 来源:发表于2020-06-24 19:25 被阅读0次

    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>
    

    相关文章

      网友评论

        本文标题:jQuery 学习笔记(二)

        本文链接:https://www.haomeiwen.com/subject/eordfktx.html