jQuery常用API-上

qq_52822043

已于 2022-03-30 15:04:55 修改

阅读量1.1k

点赞数

文章标签： jquery javascript 前端

于 2022-03-29 20:51:21 首次发布

本文链接：https://blog.csdn.net/qq_52822043/article/details/123818394

版权

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

1. jQuery选择器

1）jQuery基础选择器

2）jQuery层级选择器

jQuery设置样式：

3）隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。

给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

    <script src="jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <ul>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
    </ul>
    <script>
        console.log($("div"));
        //jQuery设置样式
        //隐式迭代：给匹配到的所有元素进行循环遍历，执行相应的方法，不用我们自行去循环
        $("div").css("background", "pink");
        $('ul li').css('color', 'green');

    </script>
</body>

结果为：

4）jQuery筛选选择器

    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>01jQuery筛选选择器</li>
        <li>02jQuery筛选选择器</li>
        <li>03jQuery筛选选择器</li>
        <li>04jQuery筛选选择器</li>
        <li>05jQuery筛选选择器</li>
        <li>06jQuery筛选选择器</li>
    </ul>
    <ol>
        <li>01jQuery筛选选择器</li>
        <li>02jQuery筛选选择器</li>
        <li>03jQuery筛选选择器</li>
        <li>04jQuery筛选选择器</li>
        <li>05jQuery筛选选择器</li>
        <li>06jQuery筛选选择器</li>
    </ol>
    <script>
        $(function() {
            //获取第一个元素
            $("ul li:first").css("color","red");
            //获取最后一个元素
            $("ul li:last").css("color","blue");
            //获取第1个元素，索引号index从0开始
            $("ul li:eq(1)").css("color","green");

            //获取索引号为奇数的元素
            $("ol li:odd").css("color", "pink");
            // 获取索引号为偶数的元素
            $("ol li:even").css("color", "skyblue");
        })
    </script>
</body>

结果为：

5） jQuery筛选方法

parents('选择器')：可以返回祖先元素

    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
    <div class="nav">
        <p>我是亲生的儿子</p>
        <div>
            <p>我是曾孙子</p>
        </div>
    </div>
    <script>
        $(function() {
            //1.父
            //parent():返回最近一级的父级元素->亲生父亲
            console.log($(".son").parent());
            //2.子
            //1）children():只选择亲儿子，类似于自带选择器ul>li
            // $(".nav").children("p").css("color", "red");
            //2)find():选择所有的孩子，包括儿子和孙子，类似于后代选择器
            $(".nav").find("p").css("color", "red");

        })
    </script>
</body>

结果为：

    <script src="jquery.min.js"></script>
</head>
<body>
    <ol>
        <li>01jQuery筛选方法</li>
        <li class="item">02jQuery筛选方法</li>
        <li>03jQuery筛选方法</li>
        <li>04jQuery筛选方法</li>
        <li>05jQuery筛选方法</li>
        <li>06jQuery筛选方法</li>
    </ol>
    <ul>
        <li class="now">1.jQuery筛选方法</li>
        <li>2.jQuery筛选方法</li>
        <li>3.jQuery筛选方法</li>
        <li>4.jQuery筛选方法</li>
        <li>5.jQuery筛选方法</li>
        <li>6.jQuery筛选方法</li>
    </ul>

    <script>
        $(function() {
            //3.兄
            //1）siblings():兄弟元素，除了自身元素之外所有的亲兄弟
            $("ol .item").siblings("li").css("color", "red");
            //2)eq():选择选择器的方式
            // $("ul li:eq(2)").css("color", "blue");
            $("ul li").eq(2).css("color", "blue");
            //3)hasClass():判断是否有某个类名
            console.log($("ul>li:first").hasClass("now"));
            console.log($("ul>li:last").hasClass("now"));
        });
    </script>
</body>

结果为：

6） jQuery里面的排他思想

多选一的效果：排他思想，当前元素设置样式，其余的兄弟元素清除样式。

   <script src="jquery.min.js"></script>
</head>
<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>

    <script>
        $(function() {
            //1.隐式迭代，给所有的按钮都绑定了点击事件
            $("button").click(function() {
                //2.当前的元素改变样式
                $(this).css("background", "pink");
                 //3.其余的元素去掉样式
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

结果为：

7）链式编程

为了节省代码量，看起来更优雅。

使用链式编程一定要注意是哪个对象执行样式。

    <script src="jquery.min.js"></script>
</head>
<body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>

    <script>
        $(function() {
            //1.隐式迭代，给所有的按钮都绑定了点击事件
            $("button").click(function() {
                //2.当前的元素改变样式
                // $(this).css("background", "pink");
                 //3.其余的元素去掉样式
                // $(this).siblings("button").css("background", "");
                //链式编程
                $(this).css("background", "pink").siblings().css("background", "");

                //自己本身不改变颜色，其余兄弟元素都变成红色
                // $(this).siblings().css("color", "red");

                //是给兄弟的父元素body改变颜色
                $(this).siblings().parent().css("color","red");
            });
        })
    </script>
</body>

结果为：

2. jQuery样式操作

1）操作css方法

jQuery可以使用css方法来修改简单元素样式，也可以操作类，修改多个样式。

1. 参数只写属性名，则是返回属性值

2. 参数是属性名，属性值，逗号分隔，属性必须加引号，值如果是数字可以不用加单位和引号

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

    <script>
        $(function() {
            //1.参数只写属性名，则是返回属性值
            console.log($('div').css('width'));
            //2.参数是属性名，属性值，逗号分隔，属性必须加引号，值如果是数字可以不用加单位和引号
            $('div').css('color', 'blue');
            $('div').css('margin', 100);
            //3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
            $('div').css({
                width: 300,
                height: 300,
                backgroundColor: 'skyblue'
            });

        })
    </script>
</head>
<body>
    <div>123</div>
</body>

结果为：

2）设置类样式方法

作用等同于classList，可以操作类样式，注意操作类里面的参数不要加点。

1. 添加类

2. 移除类

3. 切换类

    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .current {
            background-color: antiquewhite;
        }
    </style>
    <script>
        $(function() {
            //1.添加类:addClass('类名')  注意类名不加 .
            $('div').click(function() {
                $(this).addClass('current');
            });
            //2.删除类:removeClass
            $('div').mouseover(function() {
                $(this).removeClass('one');
            });
            //3.切换类:toggleClass
            // $('div').click(function() {
            //     $(this).toggleClass('current');
            // });
        })
    </script>
</head>
<body>
    <div class="one"></div>
</body>

结果为：

3）类操作与className区别

原生JS中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

3. jQuery效果

jQuery封装了很多动画效果，最常见的如下：

1）显示隐藏效果

1. 显示语法规范

2. 隐藏语法规范

3. 切换语法规范

4. 参数

参数都可以省略，无动画直接显示
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            //1.显示
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            });
            //2.隐藏
            // $("button").eq(1).click(function() {
            //     $("div").hide(1000, function() {
            //         alert(1);
            //     })
            // });
            // 3.切换
            // $("button").eq(2).click(function() {
            //     $("div").toggle(1000);
            // });
        
        })

        
    </script>
</body>

结果为：

2）滑动效果

1. 下滑效果语法规范

2.上滑效果语法规范

3. 滑动切换效果语法规范

4. 参数

参数都可以省略
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn在动画完成时执行的函数，每个元素执行一次。

   <style>
        div {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>下滑</button>
    <button>上滑</button>
    <button>滑动切换</button>
    <div></div>
    <script>
        $(function() {
            //1.下滑
            $("button").eq(0).click(function() {
                $("div").slideDown(1000, function() {
                    alert(1);
                });
            });
            // 2.上滑
            // $("button").eq(1).click(function() {
            //     $("div").sliderUp(1000, function() {
            //         alert(1);
            //     })
            // });
            // 3.滑动切换
            // $("button").eq(2).click(function() {
            //     $("div").sliderToggle(1000);
            // });
        })
    </script>
</body>

结果为：

3）事件切换

over：鼠标移到元素上要触发的函数（相当于mouseenter）
out：鼠标移出元素要出发的函数（相当于mouseleave）

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>

    <script src="jquery.min.js"></script>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">私信</a>
                </li>
            </ul>
        </li>
    </ul>

    <script>
        $(function() {
            // $(".nav>li").mouseover(function() {
            //     //$(this) 表示当前这个元素不用加引号
            //     $(this).children("ul").slideDown(200);
            // });
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // })

            //1.事件切换：hover，就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // },function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2.如果只写一个函数，那么鼠标经过和离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop()写到动画或者效果的前面，相当于停止结束上一次的动画
                $(this).children("ul").stop().slideToggle(200);
            });
        })
    </script>
</body>

结果为：

4）动画队列及其停止排队方法

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
停止排队：stop()用于停止动画或效果
注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

5）淡入淡出效果

1. 淡入效果语法规范

2. 淡出效果语法规范

3. 淡入淡出效果语法规范

4. 参数

参数都可以省略
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

5. 渐进方式调整到指定的不透明度

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)，必须写

opacity:一个0至1之间表示透明度的数字。

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

    <style>
        div {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出效果</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            //1.淡入效果
            $("button").eq(0).click(function() {
                $("div").fadeIn(1000);
            });
            // 2.淡出效果
            $("button").eq(1).click(function() {
                $("div").fadeOut(1000);
            });
            // 3.淡入淡出效果
            $("button").eq(2).click(function() {
                $("div").fadeToggle(1000);
            });
            //4.修改透明度 速度和透明度必须要写
            $("button").eq(2).click(function() {
                $("div").fadeTo(1000, 0.6);
            });
        })
    </script>
</body>

结果为：

6）自定义动画animate

1. 语法

2. 参数

params:一组包含作为动画属性和终值的样式属性和及其值的集合。想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是符合属性则需要采用驼峰命名法borderLeft。其余参数可以省略。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>点击</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    width: 300,
                    height: 300
                },500);
            });
        })
    </script>
</body>

结果为：

qq_52822043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用API-上

目录jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm1. jQuery选择器1）jQuery基础选择器2）jQuery层级选择器3）隐式迭代4）jQuery筛选选择器5） jQuery筛选方法6） jQuery里面的排他思想7）链式编程2. jQuery样式操作1）操作css方法2）设置类样式方法3）类操作与className区别3. jQuer..
复制链接

扫一扫