jQuery 常用API

jQuery 二 属性操作, 数据缓存data() ,内容文本值,元素遍历、创建、添加和删除操作,尺寸、位置操作, 1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 元素里面的 href ,比如 元素里面的 type。 1. 获取属性语法 2. 设置属性语法 element.prop("属性名") 1.获取元素固有的属性值 console.log($("a").prop("href")); element.prop("属性名", 阅读详情

jQuery 常用API

Date: January 19, 2023
Sum: jQuery选择器、样式操作、效果、属性操作、文本属性值、元素操作、尺寸、位置操作


目标:

能够写出常用的 jQuery 选择器

能够操作 jQuery 样式

能够写出常用的 jQuery 动画

能够操作 jQuery 属性

能够操作 jQuery 元素

能够操作 jQuery 元素尺寸、位置




jQuery 选择器

jQuery 基础选择器

原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。

$(“选择器”)   //  里面选择器直接写 CSS 选择器即可,但是要加引号

Untitled



jQuery 层级选择器

Untitled

jQuery 设置样式

$('div').css('属性', '值')


隐式迭代(重要)

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

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再

进行循环,简化我们的操作,方便我们调用。

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <div>惊喜不,意外不</div>
        <div>惊喜不,意外不</div>
        <div>惊喜不,意外不</div>
        <div>惊喜不,意外不</div>
        <ul>
            <li>相同的操作</li>
            <li>相同的操作</li>
            <li>相同的操作</li>
        </ul>
        <script>
            // 1. 获取四个div元素 
            console.log($("div"));
    
            // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
            $("div").css("background", "pink");
            // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环,给每一个元素添加css这个方法
            $("ul li").css("color", "red");
        </script>
    </body>
    
    </html>
    


jQuery 筛选选择器

Untitled

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <ul>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
        </ul>
        <ol>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
            <li>多个里面筛选几个</li>
        </ol>
        <script>
            $(function() {
                $("ul li:first").css("color", "red");
                $("ul li:eq(2)").css("color", "blue");
                $("ol li:odd").css("color", "skyblue");
                $("ol li:even").css("color", "pink");
            })
        </script>
    </body>
    
    </html>
    


jQuery 筛选方法(重点)

Untitled

重点记住: parent() children() find() siblings() eq()

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <div class="yeye">
            <div class="father">
                <div class="son">儿子</div>
            </div>
        </div>
    
        <div class="nav">
            <p>我是屁</p>
            <div>
                <p>我是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");
                // 3. 兄
            });
        </script>
    </body>
    
    </html>
    


案例:新浪下拉菜单:

Untitled

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <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>
        </ul>
        <script>
            $(function() {
                // 鼠标经过
                $(".nav>li").mouseover(function() {
                    // $(this) jQuery 当前元素  this不要加引号
                    // show() 显示元素  hide() 隐藏元素
                    $(this).children("ul").show();
                });
                // 鼠标离开
                $(".nav>li").mouseout(function() {
                    $(this).children("ul").hide();
                })
            })
        </script>
    </body>
    
    </html>
    


jQuery 里面的排他思想

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

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <button>快速</button>
        <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>
    
    </html>
    


案例:淘宝服饰精品案例

Untitled

  1. 核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。
  2. 需要得到当前小li 的索引号,就可以显示对应索引号的图片
  3. jQuery 得到当前元素索引号 $(this).index()
  4. 中间对应的图片,可以通过 eq(index) 方法去选择
  5. 显示元素 show() 隐藏元素 hide()
  • Code:
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                // 4. 让其余的图片(就是其他的兄弟)隐藏起来
                // $("#content div").eq(index).siblings().hide();
                // 链式编程
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>
</body>

</html>


链式编程

链式编程是为了节省代码量,看起来更优雅。

$(this).css('color', 'red').sibling().css('color', '');

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

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        woshi body 的文字
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <button>快速</button>
        <script>
            $(function() {
                // 1. 隐式迭代 给所有的按钮都绑定了点击事件
                $("button").click(function() {
                    // 2. 让当前元素颜色变为红色
                    // $(this).css("color", "red");
                    // 3. 让其余的姐妹元素不变色 
                    // $(this).siblings().css("color", "");
                    // 链式编程
                    // $(this).css("color", "red").siblings().css("color", "");
                    // 我的颜色为红色, 我的兄弟的颜色为空
                    // $(this).siblings().css('color', 'red');
                    // 我的兄弟变为红色  ,我本身不变颜色
                    $(this).siblings().parent().css('color', 'blue');
                    // 最后是给我的兄弟的爸爸 body 变化颜色 
    
                });
            })
        </script>
    </body>
    
    </html>
    



jQuery 样式操作

操作 css 方法

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

  1. 参数只写属性名,则是返回属性值
$(this).css(''color'');
  1. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
  1. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号,
$(this).css({ "color":"white","font-size":"20px"});
  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery.min.js"></script>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <div></div>
        <script>
            // 操作样式之css方法
            $(function() {
                console.log($("div").css("width"));
                // $("div").css("width", "300px");
                // $("div").css("width", 300);
                // $("div").css(height, "300px"); 属性名一定要加引号
                $("div").css({
                    width: 400,
                    height: 400,
                    backgroundColor: "red"
                        // 如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号
                })
            })
        </script>
    </body>
    
    </html>
    


设置类样式方法

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

  1. 添加类
$(“div”).addClass(''current'');
  1. 移除类
$(“div”).removeClass(''current'');
  1. 切换类
$(“div”).toggleClass(''current'');

注:如果有这个类,点击就把它去了,如果没有,点击就把它加上。

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 150px;
                background-color: pink;
                margin: 100px auto;
                transition: all 0.5s;
            }
            
            .current {
                background-color: red;
                transform: rotate(360deg);
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <div class="current"></div>
        <script>
            $(function() {
                // 1. 添加类 addClass()
                // $("div").click(function() {
                //     // $(this).addClass("current");
                // });
                // 2. 删除类 removeClass()
                // $("div").click(function() {
                //     $(this).removeClass("current");
                // });
                // 3. 切换类 toggleClass()
                $("div").click(function() {
                    $(this).toggleClass("current");
                });
            })
        </script>
    </body>
    
    </html>
    


案例:tab 栏切换

步骤:

  1. 点击上部的li,当前li 添加current类,其余兄弟移除类。
  2. 点击的同时,得到当前li 的索引号
  3. 让下部里面相应索引号的item显示,其余的item隐藏

Untitled

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item_info {
                padding: 20px 0 0 20px;
            }
            
            .item {
                display: none;
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <div class="tab">
            <div class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(50000)</li>
                    <li>手机社区</li>
                </ul>
            </div>
            <div class="tab_con">
                <div class="item" style="display: block;">
                    商品介绍模块内容
                </div>
                <div class="item">
                    规格与包装模块内容
                </div>
                <div class="item">
                    售后保障模块内容
                </div>
                <div class="item">
                    商品评价(50000)模块内容
                </div>
                <div class="item">
                    手机社区模块内容
                </div>
    
            </div>
        </div>
        <script>
            $(function() {
                // 1.点击上部的li,当前li 添加current类,其余兄弟移除类
                $(".tab_list li").click(function() {
                    // 链式编程操作
                    $(this).addClass("current").siblings().removeClass("current");
                    // 2.点击的同时,得到当前li 的索引号
                    var index = $(this).index();
                    console.log(index);
                    // 3.让下部里面相应索引号的item显示,其余的item隐藏
                    $(".tab_con .item").eq(index).show().siblings().hide();
                });
            })
        </script>
    </body>
    
    </html>
    


类操作与className区别

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

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

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .one {
                width: 200px;
                height: 200px;
                background-color: pink;
                transition: all .3s;
            }
            
            .two {
                transform: rotate(720deg);
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <div class="one two"></div>
        <script>
            // var one = document.querySelector(".one");
            // one.className = "two";
            // $(".one").addClass("two");  这个addClass相当于追加类名 不影响以前的类名
            $(".one").removeClass("two");
        </script>
    </body>
    
    </html>
    



jQuery 效果

jQuery 给我们封装了很多动画效果,最为常见的如下:

Untitled



显示隐藏效果

  1. 显示语法规范
show([speed,[easing],[fn]])
  1. 显示参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

  1. 隐藏语法规范
hide([speed,[easing],[fn]])
  1. 隐藏参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

  1. 切换语法规范
toggle([speed,[easing],[fn]])
  1. 切换参数

(1)参数都可以省略, 无动画直接显示。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

建议:平时一般不带参数,直接显示隐藏即可。

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 300px;
                background-color: pink;
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <div></div>
        <script>
            $(function() {
                $("button").eq(0).click(function() {
                    $("div").show(1000, function() {
                        alert(1);
                    });
                })
                $("button").eq(1).click(function() {
                    $("div").hide(1000, function() {
                        alert(1);
                    });
                })
                $("button").eq(2).click(function() {
                        $("div").toggle(1000);
                    })
                    // 一般情况下,我们都不加参数直接显示隐藏就可以了
            });
        </script>
    </body>
    
    </html>
    


滑动效果

  1. 下滑效果语法规范
slideDown([speed,[easing],[fn]])
  1. 下滑效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画

时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参

数“linear”。

(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。


  1. 上滑效果语法规范
slideUp([speed,[easing],[fn]])
  1. 上滑效果参数

(1)参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。


  1. 滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
  1. 滑动切换效果参数

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

案例:

Untitled

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 300px;
                background-color: pink;
                display: none;
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <button>下拉滑动</button>
        <button>上拉滑动</button>
        <button>切换滑动</button>
        <div></div>
        <script>
            $(function() {
                $("button").eq(0).click(function() {
                    // 下滑动 slideDown()
                    $("div").slideDown();
                })
                $("button").eq(1).click(function() {
                    // 上滑动 slideUp()
                    $("div").slideUp(500);
                })
                $("button").eq(2).click(function() {
                    // 滑动切换 slideToggle()
                    $("div").slideToggle(500);
                });
            });
        </script>
    </body>
    
    </html>
    


事件切换

hover([over,]out)

(1)over:鼠标移到元素上要触发的函数(相当于mouseenter)

(2)out:鼠标移出元素要触发的函数(相当于mouseleave)

(3)如果只写一个函数,则鼠标经过和离开都会触发它



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

1. 动画或效果队列

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

2. 停止排队

stop()

(1)stop() 方法用于停止动画或效果。

(2) 注意: stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <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>
        </ul>
        <script>
            $(function() {
                // 鼠标经过
                // $(".nav>li").mouseover(function() {
                //     // $(this) jQuery 当前元素  this不要加引号
                //     // show() 显示元素  hide() 隐藏元素
                //     $(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. 事件切换 hover  如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
                $(".nav>li").hover(function() {
                    // stop 方法必须写到动画的前面
                    $(this).children("ul").stop().slideToggle();
                });
            })
        </script>
    </body>
    
    </html>
    


淡入淡出效果

1. 淡入效果语法规范

fadeIn([speed,[easing],[fn]])

2. 淡入效果参数

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


1. 淡出效果语法规范

fadeOut([speed,[easing],[fn]])

2. 淡出效果参数

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


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

fadeTo([[speed],opacity,[easing],[fn]])

2. 效果参数

(1)opacity 透明度必须写,取值 0~1 之间。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 150px;
                height: 300px;
                background-color: pink;
                display: none;
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>
    
    <body>
        <button>淡入效果</button>
        <button>淡出效果</button>
        <button>淡入淡出切换</button>
        <button>修改透明度</button>
        <div></div>
        <script>
            $(function() {
                $("button").eq(0).click(function() {
                    // 淡入 fadeIn()
                    $("div").fadeIn(1000);
                })
                $("button").eq(1).click(function() {
                    // 淡出 fadeOut()
                    $("div").fadeOut(1000);
    
                })
                $("button").eq(2).click(function() {
                    // 淡入淡出切换 fadeToggle()
                    $("div").fadeToggle(1000);
    
                });
                $("button").eq(3).click(function() {
                    //  修改透明度 fadeTo() 这个速度和透明度要必须写
                    $("div").fadeTo(1000, 0.5);
    
                });
    
            });
        </script>
    </body>
    
    </html>
    


自定义动画 animate

1. 语法

animate(params,[speed],[easing],[fn])

2. 参数

(1)params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。

(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。

(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。

  • Code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="jquery.min.js"></script>
        <style>
            div {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    
    <body>
        <button>动起来</button>
        <div></div>
        <script>
            $(function() {
                $("button").click(function() {
                    $("div").animate({
                        left: 500,
                        top: 300,
                        opacity: .4,
                        width: 500
                    }, 500);
                })
            })
        </script>
    </body>
    
    </html>
    


案例:王者荣耀手风琴效果

  1. 鼠标经过某个小li 有两步操作:
  2. 当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
  3. 其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出

Untitled

  • Code:

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>手风琴案例</title>
    
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            img {
                display: block;
            }
            
            ul {
                list-style: none;
            }
            
            .king {
                width: 852px;
                margin: 100px auto;
                background: url(images/bg.png) no-repeat;
                overflow: hidden;
                padding: 10px;
            }
            
            .king ul {
                overflow: hidden;
            }
            
            .king li {
                position: relative;
                float: left;
                width: 69px;
                height: 69px;
                margin-right: 10px;
            }
            
            .king li.current {
                width: 224px;
            }
            
            .king li.current .big {
                display: block;
            }
            
            .king li.current .small {
                display: none;
            }
            
            .big {
                width: 224px;
                display: none;
            }
            
            .small {
                position: absolute;
                top: 0;
                left: 0;
                width: 69px;
                height: 69px;
                border-radius: 5px;
            }
        </style>
    
    </head>
    
    <body>
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                // 鼠标经过某个小li 有两步操作:
                $(".king li").mouseenter(function() {
                    // 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
                    $(this).stop().animate({
                        width: 224
                    }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                    // 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
                    $(this).siblings("li").stop().animate({
                        width: 69
                    }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
                })
    
            });
        </script>
        <div class="king">
            <ul>
                <li class="current">
                    <a href="#">
                        <img src="images/m1.jpg" alt="" class="small">
                        <img src="images/m.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/l1.jpg" alt="" class="small">
                        <img src="images/l.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/c1.jpg" alt="" class="small">
                        <img src="images/c.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/w1.jpg" alt="" class="small">
                        <img src="images/w.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/z1.jpg" alt="" class="small">
                        <img src="images/z.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/h1.jpg" alt="" class="small">
                        <img src="images/h.png" alt="" class="big">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/t1.jpg" alt="" class="small">
                        <img src="images/t.png" alt="" class="big">
                    </a>
                </li>
            </ul>
    
        </div>
    
    </body>
    
    </html>
    
SquareLine Studio汉化版安装激活全攻略:LVGL嵌入式UI设计从入门到出代码 嵌入式GUI开发中,LVGL作为轻量级开源图形库,广泛应用于STM32、ESP32等MCU平台。可视化设计器通过拖拽生成LVGL代码,大幅提升UI开发效率。SquareLine Studio正是这类工具的代表,支持界面设计、事件绑定与代码导出。其安装、汉化与激活是初学者常见门槛,尤其涉及LVGL版本匹配、字体配置及FreeRTOS移植等关键环节。本文围绕汉化版安装、一个月免费激活码使用及最小可用流程展开,帮助开发者快速上手LVGL界面设计,规避常见环境与集成问题。 阅读详情

相关推荐

STK传感器约束设置保姆级教程:从方位角到传播延迟,手把手教你避开新手常见坑

本文详细解析了STK传感器约束设置的关键技巧,涵盖方位角、仰角、高度及传播延迟等核心参数。通过实战案例和代码示例,指导用户避开常见误区,优化卫星通信和航天任务仿真精度,特别适合STK新手和需要提升传感器配置效率的工程师。

weixin_33701294的博客 392

jQuery常用API(吐血!!!超全整理)

语法参数params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如:1000)。easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。fn:回调函数,在动画完成时执行的函数,每个元素执行一次。

GaoshangD1209的博客 2119

OpenTCS打造移动机器人交通管制系统(四)

先分析下OpenTCS的一些策略方面的东西,这是OpenTCS的基础。 首先需要先明确下OpenTCS内核中的三个概念: 路由(Route) : 决定了车辆通过什么样的方式和算法来获得一段路径,未来车辆将沿着此路径运行。 派遣(Dispacher): 决定了一个订单应该关联哪一辆小车,即为订单分配车辆和为车辆分配订单。 调度(schedule):狭义上的调度,交通管制的核心,决定了何时分配...

白色冰激凌的技术专栏 5272

jQuery——常用API

JavaScript 库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。 简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。 ......

@一只躺平的猪@的博客 1085

phaser3适配微信小游戏

phaser3适配微信小游戏

SilenzioX的博客 1803

Arcgis 10.3 与 ArcGIS Engine 10.3 安装与破解

Arcgis 10.3 与 ArcGIS Engine 10.3 安装与破解

weixin_52127098的博客 4725

jQuery入门与常用API

1️⃣ 语法2️⃣ 参数params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略;speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000);easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”;fn: 回调函数,在动画完成时执行的函数,每个元素执行一次;

2301_79055083的博客 868

UE5在Ubuntu22.04.4下的高效开发环境配置指南

本文详细介绍了在Ubuntu 22.04.4系统上配置UE5高效开发环境的完整指南,包括系统准备、显卡驱动安装、UE5引擎编译与配置、开发工具链设置以及性能优化技巧。通过逐步指导,帮助开发者快速搭建稳定的UE5开发环境,解决常见问题,提升开发效率。

weixin_29251131的博客 383

【jQuery】常用API

1. 参数params: 想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号, 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。left: 500,

2301_80636070的博客 778

【AI智能体】Coze 搭建个人旅游规划助手实战详解

本文将详细介绍如何使用Coze平台搭建个人旅游规划助手。首先概述了AI智能体如何简化传统复杂任务的开发流程,然后重点介绍了Coze工作流的作用和核心节点类型(包括大模型、插件、知识库等)。通过实际操作演示,从创建智能体到配置多级工作流,逐步实现旅游规划功能:解析用户输入时间地点、查询必玩景点、获取景点详细信息等。该教程展示了如何利用Coze的可视化编排能力,即使非技术人员也能快速构建专业级AI应用。最终呈现的旅游助手可提供天气查询、行程建议等一站式服务。

Hello, New World! 2113

海思Hi3516DV300实战:从yolov5模型训练到Sort跟踪算法的完整部署流程

本文详细介绍了在海思Hi3516DV300芯片上部署YOLOv5目标检测与Sort多目标跟踪算法的完整流程。内容涵盖从特定场景数据训练YOLOv5模型、模型格式转换(PyTorch到ONNX再到Caffe),到利用海思NNIE引擎生成WK模型并进行端侧集成与优化的全链路实战经验,旨在解决嵌入式设备上实时人流量统计等实际应用挑战。

weixin_29034963的博客 337

jQuery常用API

jQuery常用API前言一、代码示例 前言 有前面的基础,敲就完事了. 一、代码示例 //常用选择器 $("#div1") $("span") $("p span")//后代节点 $("p>span")//子代节点 $(".red") $("*") $("div,span,p.cls")//选择所有div,span及class为p的一级元素 //基本选择器 $("span:first") $("span:last") $("td:even")//

high32的博客 185

RT-DETR改进策略【模型轻量化】| 替换骨干网络为EfficientNet v1 高效的移动倒置瓶颈结构

本文记录的是基于。采用了创新性的方法,通过精心平衡网络和来提升性能。本文将的设计优势融入RT-DETR中,提升RT-DETR的性能与效率,使其在目标检测任务中表现更为出色。本文配置了原模型中的共种不同大小的模型结构,以满足不同的需求。

Limiiiing的博客 532

【web前端 | jQuery】jQuery常用的API

jQuery常用的API 1:jQuery的选择器 $(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号 属性 描述 使用 ID选择器 获取指定ID的元素 $("#id") 全选选择器 匹配所有元素 $("*’) 类选择器 获取同一类class的元素 $(".class") 标签选择器 获取同一类标签的所有元素 $(“div”) 并集选择器 选取多个元素 s(“div,p,li”) 交集选择器 交集元素 $(“Ii.current”) 子代

小赵不忙的博客 192

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

jQuery常用API及jQuery事件

jQuery基本概述请戳:jQuery概述及基本使用 一、jQuery常用API 1、jQuery选择器 $('选择器') (1)基本选择器: ID选择器:$("#id"); 全选:* 类:. 标签:div 并集:div, span 交集:li.current (2)层级选择器: 子代:$("ul>li"); 后代:$("ul li"); (3)隐式迭代(重要) 遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代,简单理解就是,给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们自

weixin_45375510的博客 591

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

jQuery常用API汇总

平常开发基本要用的API都在这里了 收藏回家慢慢看! 选择器 $('input:not(:checked)') //查找所有未选中的 input 元素 $("tr:gt(0)") //匹配所有大于给定索引值的元素 $(":header") //匹配如 h1, h2, h3之类的标题元素 $(":animated") //匹配所有正在执行动画效果的元素 $(":root") //选择该文档的根元素。 $(":contains('文本')") //匹配包含给定文本的元素 $(":empt..

weixin_41596078的博客 481

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

jQuery常用api

本文列举一些常用的jQuery的api。 $('selector').on() <ul> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> <li id="4">4</li> <l...

weixin_34034261的博客 265

jquery常用的api

最近项目用到jquery,整理了一些常用的发出来 ’### 选择器 jQuery 有着相当强大的选择器 // 按照 id 获取页面中的元素 const ele = jQuery('#box') const ele = $('#box') 上面两个都可以按照 id 来获取元素 // 按照类名来选择 const eles = jQuery('.a') const eles = $('.a') 上面就是按照类名来选择元素,可以获取到一组元素 const lis = jQuery('li') co

sss_s_s_的博客 283

JQuery基本使用和JQuery常用API

文章目录一,JQuery的概述二,JQuery的基本使用三,JQuery常用API四,JQuery选择器五,JQuery样式操作六,JQuery效果七,JQuery属性操作八,JQuery文本属性值九,JQuery元素操作十,JQuery位置尺寸操作 一,JQuery的概述 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。 二,JQuery的基本使用 三,JQuery常用API 四,JQuer

weixin_46076151的博客 712

keyup常用事件_jQuery常用API

jQueryjQuery是一个快速、简洁的JavaScript框架,是最长寿和使用范围最广的js库,从2006年沿用至今,有超过80%的网站使用过jQuery。[1]常用API选择网页元素。选择某个网页元素,然后对其进行某种操作CSS选择器$(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class...

weixin_39863759的博客 257

jquery中最常用的API有哪些

jquery中最常用的API有哪些 一、总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法   1、jQuery Object Accessors有哪些方法? jQuery.index(element),返回该jQuery对象在集合中的索引 jQuery.each(function),遍历jQuery对象集合,在每个对象上...

weixin_34112900的博客 231
上一篇: JavaScript 高级2 :构造函数和原型
下一篇: jQuery 属性操作
CaptainDrake
博客等级 码龄6年 5363粉丝 187原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值