day29-jQuery2

最新推荐文章于 2024-04-23 15:19:32 发布

土豆沙发

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量69

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/kuangjianming/article/details/115468067

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

01.补充css方法

css（）方法的参数
还可以是数组，数组中写css的属性
返回值：一个对象，把你要获取的元素样式以对象的形式返回
第二个参数还可以为函数：
- 函数的返回值就是给这个属性设置的值
- 函数中有两个参数 index value
  - index：表示元素在jQuery集合中的索引
  - value：这个元素对应的属性的默认值

            // console.log(box.css(['width','color']));
            // box.css('width',400)

            // let res = box.css("width", function (index, value) {
            //     console.log(index, value);
            //     return parseInt(value) * 2;
            // });

            // box.css({
            //     width: function (index, value) {
            //         if (index == 1) {
            //             return parseInt(value) / 2;
            //         }
            //     },
            //     height: function (index, value) {
            //         return parseInt(value) * 2;
            //     },
            // });

            box.html(function (index) {
                if (index == 0) {
                    return "我是jQuery添加的内容";
                }
            });

02.操作dom元素

创建元素
$(<div></div>)
把元素添加到页面
父.append(子)
在父元素中的最后一个位置追加一个子元素
返回值：父元素的jQuery集合
子.appendTo(父)
把子元素追加到父元素的最后面
返回值：子元素 jquery 集合
父.prepend(子)
在父元素中的最前面追加一个子元素
返回值：父元素 jquery 集合
子.prependTo(父)
把子元素追加到父元素的最前面
返回值：子元素 jquery 集合
a.after(b)
把 b 元添加在 a 元素后面的位置，a 在页面中已经存在的元素
返回值：a 元素 jquery 集合
b.insertAfter(a)
把 b 元添加在 a 元素后面的位置，a 在页面中已经存在的元素
返回值：b 元素 jquery 集合
a.before(b)
把 b 元素添加到 a 元素的前面，a 元素在页面中已经存在的元素
返回值：a 元素 jquery 集合
b.insertBefore(a)
把 b 元素添加到 a 元素前面，a 元素在页面中已经存在的元素
返回值：b 元素 jquery 集合
修改元素（替换元素）
a.replaceWith(b)
用 b 元素来替换 a 元素
返回值：a 元素的 jquery 集合，但是会警告该节点在页面中找不到
b.replaceAll(a)
用 b 元素替换 a 元素
返回值：b 元素 jquery 集合
删除元素
empty()
把标签中的内容全部删除，让自己变成一个空标签
返回值：当前元素的 jquery 集合
remove()
移出元素，自己也会移出
返回值：
父.find(子).remove()
移出父元素中某个子元素
克隆元素
clone()
默认会把所有的子元素克隆

接收两个参数：
- 参数 1：布尔值，表示是否把元素身上的事件克隆下来默认值为 false
- 参数 2：布尔值，子元素身上的事件是否被克隆下来，默认跟随第一个参数的值

03.元素的尺寸

height() 获取或设置元素的高度
width() 获取或设置元素的宽度
innerHeight() 获取元素的宽度 + 左右的padding
- 不能设置只能获取
innerWidth() 获取元素的高度 + 上下的padding
- 不能设置只能获取
outerHeight() 获取元素的宽度 + 左右的padding + 左右的border
outerWidth() 获取元素的高度 + 上下的padding + 上下的border
- outerHeight 和 outerWidth 是可以传递参数的
- 默认是 false，可以传递 true，true 表示获取的宽高包括 margin

            let box = $(".box");
            // let w = box.width();
            // // let h = box.height(300);

            // let h = box.height(function(index,value){
            //     if(index == 0){
            //         return 400;
            //     }
            // })
            // console.log(h);
            // console.log(w);

            // let w = box.innerWidth();
            // let h = box.innerHeight();
            // console.log(w);

            // let w = box.outerWidth();
            let h = box.outerHeight(true);
            console.log(h);

05.元素的位置

            /* 
                offset() 获取或者设置 元素 到文档最左边和上面的距离
                    当元素没有定位的时候 给元素设置了 offset() 那么会自动添加定位属性

                position() 获取元素定位的left 和top值，只能获取不能设置
                    返回值：以对象的形式把值返回

                scrollTop() 获取滚动条的垂直位置 和设置滚动条
                    如果这个元素不存在滚动条 设置没有效果
                scrollLeft()  获取滚动条的水平位置 和设置滚动条
            */
            let box = $(".box div");
            // let w = box.offset();
            // box.offset({ left: 0, top: 20 });

            // console.log(w);
            // let res = box.position();

            // let res = box.scrollTop(100);
            // box.scrollLeft(100);
            // console.log(res);

            // let res = $(document).scrollTop(200);
            // console.log(res);

            // 给document绑定一个滚动事件
            $(document).scroll(function () {
                // 获取页面被卷去的高度
                let res = $(document).scrollTop();
                if (res >= 2000) {
                    $(document).scrollTop(0);
                }
            });

06.动画

show()
- 让元素显示
- 参数：【选填】
  - 参数 1：时间，单位秒
  - 参数 2：运动曲线 linear
  - 参数 3：回调函数，运动结束之后触发
hide()
- 让元素隐藏
- 参数：【选填】
  - 参数 1：时间，单位秒
  - 参数 2：运动曲线 linear
  - 参数 3：回调函数，运动结束之后触发
toggle()
- 切换动画（如果当前是显示，那么就隐藏，如果当前是隐藏，那么就显示）
slideDown()
- 让元素下拉显示
slideUp()
- 让元素上拉隐藏
slideToggle()
- 切换显示和隐藏
fadeIn()
- 渐渐的显示
fadeOut()
- 渐渐的隐藏
fadeToggle()
- 渐隐渐显
fadeTo(速度,指定的透明度,回调函数)
- 速度：show,normal,fast，1000
- 透明度的取值：0-1
- 回调函数：动画执行完成之后执行
- 渐渐的到一个你指定的透明度

        <script>
            // $("#btn1").click(function () {
            //     $("div").show();
            // });
            // $("#btn2").click(function () {
            //     $("div").hide();
            // });
            // $("#btn").click(() => {
            //     $("div").toggle();
            // });

            // $("#btn1").click(() => {
            //     $("div").slideDown();
            // });
            // $('#btn2').click(()=>{
            //     $('div').slideUp();
            // })
            // $("#btn").click(() => {
            //     $("div").slideToggle();
            // });

            // $("#btn1").click(() => {
            //     $("div").fadeIn("slow");
            // });
            // $("#btn2").click(() => {
            //     $("div").fadeOut("slow");
            // });
            $("#btn").click(() => {

                // $('div').fadeToggle();

                // 设置到执行的透明度
                // 第一个参数为执行这个动画的时间
                // 第二个参数 为目标透明度
                $("div").fadeTo(1000, 0.3);
            });

07.自定义的动画

animate(参数1，参数2，参数3，参数4)
- 参数：
  - 参数 1【必填】：是一个对象，需要运动的属性和目标值
  - 参数 2：运动的时间
  - 参数 3：运动的曲线（linear||swing）
  - 参数 4：运动回调函数

08.回到顶部的案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body {
                height: 4000px;
            }
            button {
                position: fixed;
                bottom: 200px;
                right: 50px;
                display: none;
            }
        </style>

        <script src="./jquery/jquery.min.js"></script>
    </head>
    <body>
        <button>回到顶部</button>
        <script>
            $(document).scroll(() => {
                let h = $(document).scrollTop();
                if (h >= 1200) {
                    $("button").fadeIn();
                } else {
                    $("button").fadeOut();
                }
            });

            $("button").click(() => {
                // $(document).scrollTop(0);
                $("html").animate({ scrollTop: 0 }, 1000);
            });
        </script>
    </body>
</html>

09.停止动画

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: pink;
            }
        </style>
        <script src="./jquery/jquery.min.js"></script>
    </head>
    <body>
        <button id="start">开始动画</button>
        <button id="stop">停止动画</button>
        <button id="finsh">结束动画</button>
        <div></div>

        <script>
            $("#start").click(() => {
                $("div").animate({ width: 600 }, 3000);
            });

            $("#stop").click(() => {
                // 停止动画 
                // 元素的属性的 停止在运动的这个位置
                // 暂停动画
                $("div").stop();
            });

            $("#finsh").click(() => {
                // 会把元素的属性 设置到目标值的位置
                // 表示提前结束动画
                $("div").finish();
            });
        </script>
    </body>
</html>

10.end方法

let res=$(this)   //res的值得到的是当前点击的jQuery集合
let res=$(this).siblings()   //res得到的是当前这个元素的所有兄弟元素jQuery
let res=$(this).siblings().end()   //res得到的是当前点击的jQuery集合

end（）叫做返回上一级的jQuery集合

土豆沙发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day29-jQuery2

01.补充css方法css（）方法的参数还可以是数组，数组中写css的属性返回值：一个对象，把你要获取的元素样式以对象的形式返回第二个参数还可以为函数：函数的返回值就是给这个属性设置的值函数中有两个参数 index valueindex：表示元素在jQuery集合中的索引value：这个元素对应的属性的默认值 // console.log(box.css(['width','color'])); // box.css('wi
复制链接

扫一扫

专栏目录