正文

jquery(代码片段)

hexiaorui123  hexiaorui123  2023-03-09  732

关键词：

为什么要使用jQuery

在用js写代码时，会遇到一些问题：

window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。

jQuery的出现，可以解决以上问题。

DOM文档加载的步骤

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。
加载图片等外部文件。
页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

简化写法不同

window.onload没有简化写法

$(document).ready(function())可以简写成$(function());

使用 jQuery 的基本步骤

(1）引包

（2）入口函数

（3）功能实现代码（事件处理）

jquery文件的引入

<script src="jquery-3.3.1.js"></script>

jquery的入口函数

写法一：

//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () 
           alert(1);
       )

写法二：（写法一的简洁版）
 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(function () 
           alert(1);
       );

写法三：

写法三：
  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () 
           alert(1);
       )

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery的`$`符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery

$ 实际上表示的是一个函数名

jQuery函数跟 $ 函数的关系：jQuery === $。

js中的DOM对象和 jQuery对象比较

区别

举例子：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
---------------------------

通过原生 js 获取这些元素节点的方式是：

    var myBox = document.getElementById("app");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组


通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

  //获取的是数组，里面包含着原生 JS 中的DOM对象。
　　console.log($(‘#app‘));
　　console.log($(‘.box‘));
　　console.log($(‘div‘));

由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

JQuery对象和JS对象的互相转换

1、 DOM 对象转为 jQuery对象：

$(js对象);

2、jQuery对象转为 DOM 对象：

jquery对象[index];      //方式1（推荐）

  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$(‘div‘)[1].style.backgroundColor = ‘yellow‘;
$(‘div‘)[3].style.backgroundColor = ‘green‘;

如果想要用哪种方式设置属性或方法，必须转换成该类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box
            width:100px;
            height:100px;
            background-color:red;
        
    </style>
</head>
<body>
    <div class="box"></div>
    <div id="box2"></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () 
            //获取jquery对象
            console.log($(‘#box2‘));
            console.log($(‘#box2‘));
            console.log($(‘#box2‘));
            console.log($(‘#box2‘));
            console.log($(‘.box‘));

            //获取js对象
            var oDiv2 = document.getElementById(‘box2‘);
            var oDiv2 = document.getElementById(‘box2‘);
            console.log(oDiv2);

            //jquery对象 转化  js对象
            console.log($(‘#box2‘)[0]);
            console.log($(‘#box2‘).get(0));

            //js对象转 jquery对象，$(js对象)
            console.log($(oDiv2));

            //如果是js对象，更加希望转化成jquery  再操作简便的dom
            //因为js包含jquery，而jquery只是封装了（dom、 事件、ajax动画）。如果涉及其他方法等，就要将jquery对象 转化为js对象
            //是什么对象，就用什么对象的属性和方法，被混淆
            //jquery大部分都是api方法，length和索引 是它的属性
            
        );

    </script>

</body>
</html>

jQuery如何操作DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div
            margin-top:10px;
            width:100px;
            height:100px;
            background-color:red;
        
    </style>
</head>
<body>
    <div class="box">wusir</div>
    <div id="box">yuan</div>
    <div>alex</div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function()
            //事件三步走：事件源  事件  事件驱动程序
            // jquery如何获取dom

            //jquery的标签选择器
            console.log($(‘div‘));

            //js对象
            $(‘div‘)[0].onclick

            //jquery内部自己遍历每一个对象
             $(‘div‘).click(function()
                alert(1);

                //this 指的是js对象
                 console.log(this.innerHTML);
                 console.log($(this).text())//这个是将this这个js对象转化为jquery对象，再调用text()方法
                 $(this).hide(300);//让盒子在300hs中消失
             );



            //2.类选择器
            console.log($(‘.box‘));

            //3.id选择器
            console.log($(‘#box‘));
        )


    </script>
</body>
</html>

jQuery 的基本选择器

技术图片

// 基本选择器
        // 1.id选择器
        $(‘#brother‘).css(‘color‘,‘black‘);
        // 2.标签选择器
        $(‘a‘).css(‘color‘,‘yellow‘)

        // 3.类选择器
        $(‘.item‘).css(‘background‘,‘#FC4708‘)

        // 4.通配符选择器
        // console.log($(‘*‘).html())
        console.log($(‘a‘).val())

层级选择器

技术图片

// 后代选择器
        console.log($(‘div p‘))
        $(‘div p‘).css(‘color‘,‘red‘)

        // 子代选择器
        $(‘div >p‘).css(‘background‘,‘green‘)

        // 毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素
        $(‘#brother+ li‘).css(‘color‘,‘yellow‘)

        // 兄弟选择器
        // 匹配所有#brother之后的所有兄弟姐妹元素
        $(‘#brother~li‘).css(‘background‘,‘#996633‘)

        // :first  获取第一个元素
        $(‘li:first‘).text(‘真的吗？‘)
        // :last 获取最后一个元素
        $(‘li:last‘).html(‘真的吗？‘)



        //一个给定索引值的元素
        console.log($(‘p:eq(3)‘).text())

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () 
            //获取ul中的li设置为粉色
            //后代：儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        );
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

基本过滤选择器

技术图片

//:first  获取第一个元素
        $(‘li:first‘).text(‘真的吗？‘)
        //:last 获取最后一个元素
        $(‘li:last‘).html(‘我是最后一个元素？‘)

        //:odd 匹配所有索引值为奇数的元素，从0开始计数
        $(‘li:odd‘).css(‘color‘,‘green‘);

        //:even 匹配所有索引值为偶数的元素，从0开始计数
        $(‘li:even‘).css(‘color‘,‘red‘)

        //:eq(index) 获取给定索引值的元素 从0开始计数
        $(‘li:eq(1)‘).css(‘font-size‘,‘30px‘)

        //:gt(index)匹配所有大于给定索引值的元素
        $(‘li:gt(1)‘).css(‘font-size‘,‘40px‘)

        //:lt(index) 匹配所有小于给定索引值的元素
        $(‘li:lt(1)‘).css(‘font-size‘,‘40px‘)

        //一个给定索引值的元素
        console.log($(‘p:eq(3)‘).text())

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function()
            //获取第一个 :first ,获取最后一个 :last
            
            //奇数
            $(‘li:odd‘).css(‘color‘,‘red‘);
            //偶数
            $(‘li:even‘).css(‘color‘,‘green‘);
            
            //选中索引值为1的元素 *
            $(‘li:eq(1)‘).css(‘font-size‘,‘30px‘);
            
            //大于索引值1
            $(‘li:gt(1)‘).css(‘font-size‘,‘50px‘);
            
            //小于索引值1
            $(‘li:lt(1)‘).css(‘font-size‘,‘12px‘);
            
        )
        
        
    </script>
</html>

属性选择器

技术图片

//属性选择器

        //标签名[属性名] 查找所有含有id属性的该标签名的元素
        $("li[id]").css(‘color‘,‘red‘)

        //[attr=value] 匹配给定的属性是某个特定值的元素
        $(‘li[class=what]‘).css(‘font-size‘,‘30px‘)

        //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
        $(‘li[class!=what]‘).css(‘color‘,‘darkgreen‘)

        //匹配给定的属性是以某些值开始的元素
        $(‘input[name^=username]‘).css(‘background‘,‘red‘)

        //匹配给定的属性是以某些值结尾的元素
        $(‘input[name$=222]‘).css(‘background‘,‘yellow‘)
        //匹配给定的属性是以包含某些值的元素
        $("button[class*=‘btn‘]").css(‘background‘,‘#0000FF‘)

<div id="box">
            <h2 class="title">属性元素器</h2>
            <p class="p1">我是一个段落</p>
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type=‘text‘ value="1" checked="checked"></input>
                <input name="username1111" type=‘text‘ value="1"></input>
                <input name="username2222" type=‘text‘ value="1"></input>
                <input name="username3333" type=‘text‘ value="1"></input>
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮1</button>
                <button class="btn-success">按钮1</button>
                <button class="btn-danger">按钮1</button>


            </form>
        </div>

筛选选择器

技术图片

//获取第n个元素 数值从0开始
        $(‘span‘).eq(0).css(‘font-size‘,‘30px‘)

        //first()获取第一个元素
        $(‘span‘).first().css(‘background‘,‘red‘)

        //last()获取最后一个元素

        //.parent() 选择父亲元素
        $(‘span‘).parent(‘.p1‘).css(width:‘300px‘,height:‘300px‘,background:‘yellow‘)


        //.siblings()选择所有的兄弟元素
        $(‘.list‘).siblings(‘li‘).css(‘color‘,‘red‘)

        //.find()
        //查找所有的后代元素
        $(‘div‘).find(‘button‘).css(‘background‘,‘#313131‘)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一个span标签</span>
                <span>我是第二个span标签</span>
                <span>我是第三个span标签</span>
            </p>
            <button>按钮</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //获取第n个元素 数值从0开始
        $(‘span‘).eq(1).css(‘color‘,‘#FF0000‘);
        
        //获取第一个元素 :first :last    点语法  ：get方法 和set方法
        $(‘span‘).last().css(‘color‘,‘greenyellow‘);
        $(‘span‘).first().css(‘color‘,‘greenyellow‘);
        
        //查找span标签的父元素（亲的）
        $(‘span‘).parent(‘.p1‘).css("width":‘200px‘,‘height‘:‘200px‘,"background":‘red‘);
        
        //选择所有的兄弟元素（不包括自己）
                  $(‘.list‘).siblings(‘li‘).css(‘color‘,‘red‘);

                  
                //查找所有的后代元素
                   $(‘div‘).find(‘button‘).css(‘background‘,‘yellow‘);

                
                //不写参数代表获取所有子元素。
                   $(‘ul‘).children().css("background", "green");
                   $(‘ul‘).children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>

siblings选择器方法的基本使用

查找所有兄弟元素（不包括自己）

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *
            padding: 0;
            margin: 0;
        
        ul
            width: 400px;
            height: 100px;
            overflow: hidden;
        
        ul li
            list-style: none;
            float: left;
            width: 80px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: red;
            margin-right: 10px;

        
        ul li a
            padding: 20px;
            /*background-color: green;*/
            color:#fff;
        
        p
            display: none;
        
        p.active
            display: block;
        
    </style>
<body>
    <ul>
        <li>
            <a href="javascript:void(0)">
                alex1
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex2
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex3
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex4
            </a>
        </li>
    </ul>
    <p>alex1</p>
    <p>alex2</p>
    <p>alex3</p>
    <p>alex4</p>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function()
            $(‘ul li a‘).click(function() 
                // 选项卡的完整版
                $(this).css(‘background‘,‘green‘).parent(‘li‘).siblings(‘li‘).find(‘a‘).css(‘background‘,‘transparent‘);

                // 得获取到点击的 dom的索引 通过 index()方法获取  注意 这个要找的是有兄弟元素的索引
                var i = $(this).parent(‘li‘).index();
                // addClass()  removeClass()
                $(‘p‘).eq(i).addClass(‘active‘).siblings(‘p‘).removeClass(‘active‘);
            );
        )
    </script>
    
    
</body>
</html>

jQuery动画

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

显示动画

方式一：

  $("div").show();
解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

$(‘div‘).show(3000);
解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

 $("div").show("slow");
参数可以是：

slow 慢：600ms

normal 正常：400ms

fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

 //show(毫秒值，回调函数;
    $("div").show(5000,function () 
        alert("动画执行完毕！");
    );
解释：动画执行完后，立即执行回调函数。

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

隐藏动画

方式参照上面的show()方法的方式。如下：

$(selector).hide();

$(selector).hide(1000); 

$(selector).hide("slow");

$(selector).hide(1000, function());

点击盒子，实现显示隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box
                width: 200px;
                height: 200px;
                background-color: green;
                border: 1px solid red;
                display: none;
            
        </style>
    </head>
    <body>
        <div id="box">        
        </div>
        <button id="btn">隐藏</button>    
    </body>
    <script src="jquery-3.3.1.js"></script>
    
    <script type="text/javascript">
        
        //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
        var isShow = true;
        $(‘#btn‘).click(function()
            if(isShow)
                $(‘#box‘).show(‘slow‘,function()
                    $(this).text(‘盒子出来了‘);            
                    $(‘#btn‘).text(‘显示‘);
                    isShow = false;
                )
            else
                $(‘#box‘).hide(2000,function()
                    $(this).text(‘‘);    
                    $(‘#btn‘).text(‘隐藏‘);
                    isShow = true;
                    
                )
            
        )
    
        
    </script>
</html>

开关式显示隐藏动画

$(‘#box‘).toggle(3000,function());

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

$(‘#btn‘).click(function()
            $(‘#box‘).toggle(3000,function()
                $(this).text(‘盒子出来了‘);    
                if ($(‘#btn‘).text()==‘隐藏‘) 
                    $(‘#btn‘).text(‘显示‘);    
                else
                    $(‘#btn‘).text(‘隐藏‘);    
                
            );
        )

滑入和滑出（卷帘门效果）

1、滑入动画效果：

$(selector).slideDown(speed, 回调函数);
解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2、滑出动画效果： 

 $(selector).slideUp(speed, 回调函数);
解释：上拉动画，隐藏元素。

3、滑入滑出切换动画效果：

 $(selector).slideToggle(speed, 回调函数);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div 
            width: 300px;
            height: 300px;
            display: none;
            background-color: green;
        
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () 
            //点击按钮后产生动画
            $("button:eq(0)").click(function () 

                //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
                $("div").slideDown(2000, function () 
                    alert("动画执行完毕！");
                );
            )

            //滑出动画
            $("button:eq(1)").click(function () 

                //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
                $("div").slideUp(2000, function () 
                    alert("动画执行完毕！");
                );
            )

            $("button:eq(2)").click(function () 
                //滑入滑出切换（同样有四种用法）
                $("div").slideToggle(1000);
            )

        )
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>

</body>
</html>

淡入淡出动画

1、淡入动画效果：

 $(selector).fadeIn(speed, callback);
作用：让元素以淡淡的进入视线的方式展示出来。

 

2、淡出动画效果：

$(selector).fadeOut(1000);
作用：让元素以渐渐消失的方式隐藏起来

 

3、淡入淡出切换动画效果：

 $(selector).fadeToggle(‘fast‘, callback);
作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div 
            width: 300px;
            height: 300px;
            display: none;
            /*透明度*/
            opacity: 0.5;
            background-color: red;
        
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () 
            //点击按钮后产生动画
            $("button:eq(0)").click(function () 

//                //淡入动画用法1:   fadeIn();   不加参数
                $("div").fadeIn();

//                //淡入动画用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通过控制  透明度和display

                //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeIn(5000,function () 
//                    alert("动画执行完毕！");
//                );
            )

            //滑出动画
            $("button:eq(1)").click(function () 
//                //滑出动画用法1:   fadeOut();   不加参数
               $("div").fadeOut();

//                //滑出动画用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
//                //通过控制  透明度和display

                //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeOut(2000,function () 
//                    alert("动画执行完毕！");
//                );
            )

            $("button:eq(2)").click(function () 
                //滑入滑出切换
                //同样有四种用法
                $("div").fadeToggle(1000);
            )

            $("button:eq(3)").click(function () 
                //改透明度
                //同样有四种用法
                $("div").fadeTo(1000, 0.5, function () 
                    alert(1);
                );
            )
        )
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>

</body>
</html>

自定义动画

语法：

 $(selector).animate(params, speed, callback);

作用：执行一组CSS属性的自定义动画。

第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div 
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        jQuery(function () 
            $("button").click(function () 
                var json = "width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100;
                var json2 = 
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                ;

                //自定义动画
                $("div").animate(json, 1000, function () 
                    $("div").animate(json2, 1000, function () 
                        alert("动画执行完毕！");
                    );
                );

            )
        )
    </script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>

停止动画

$(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

true：后续动画不执行。
false：后续动画会执行。

第二个参数：

true：立即执行完成当前动画。
false：立即停止当前动画。

参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * 
            margin: 0;
            padding: 0;
        

        ul 
            list-style: none;
        

        .wrap 
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        

        .wrap li 
            background-color: green;
        

        .wrap > ul > li 
            float: left;
            margin-right: 10px;
            position: relative;
        

        .wrap a 
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        

        .wrap li ul 
            position: absolute;
            top: 30px;
            display: none;
        
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函数
        $(document).ready(function () 
            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
            var jqli = $(".wrap>ul>li");

            //绑定事件
            jqli.mouseenter(function () 
                $(this).children("ul").stop().slideDown(1000);
            );

            //绑定事件(移开隐藏)
            jqli.mouseleave(function () 
                $(this).children("ul").stop().slideUp(1000);
            );
        );
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">三级菜单2</a></li>
                <li><a href="javascript:void(0);">三级菜单3</a></li>
                <li><a href="javascript:void(0);">三级菜单4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

javascript:void(0); //跟javascript:;效果一样

jquery的属性操作

四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值
        var id = $(‘div‘).attr(‘id‘)
        console.log(id)
        var cla = $(‘div‘).attr(‘class‘)
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $(‘div‘).attr(‘class‘,‘box‘)
        //2.设置多个值，参数为对象，键值对存储
        $(‘div‘).attr(name:‘hahaha‘,class:‘happy‘)

jquery(代码片段)

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:$(“#test”).html();jquery的基础语法：$(selector).action()... 查看详情

textaccordian（jquery）(代码片段)

查看详情

学习jquery(代码片段)

jQuery学习本篇主要参考菜鸟教程jQuery安装BootCDN<scriptsrc="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">百度<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">jQuery语法通过jQuery,可以选查看详情

markdown在wordpress中使用jquery代码片段(代码片段)

查看详情

jquery(代码片段)

jQuery对象jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。虽然jQuery对象是包装DOM对象... 查看详情

jquery快速入门(代码片段)

知识内容：1.jQuery大致了解2.jQuery基础语法3.jQuery事件4.jQuery动画效果5.jQuery补充参考：http://www.cnblogs.com/liwenzhou/p/8178806.htmljQuery官网：https://jquery.com/jQuery中文文档：http://jquery.cuishifeng.cn/ &nbs 查看详情

jquery插件扩展方法(代码片段)

jQuery为扩展插件提拱了两个方法，分别是：jQuery.extend(object) —— 给jQuery对象添加方法。jQuery.fn.extend(object)—— 为扩展jQuery类本身.为类添加新的方法； fn表示什么呢？下面代码是jQuery源代码中定义的fn：jQuery.... 查看详情

jquery(代码片段)

1.为什么使用jQuery使用js写代码时，会遇到一些问题1.window.onload事件有事件覆盖的问题，因此只能写一个事件。2.代码容错性能差。3.浏览器兼容性问题。4.书写繁琐，代码量多。5.代码很乱，各个页面到处都是。6.动画效果很难实... 查看详情

jquery简介(代码片段)

jQueryjQuery简介jQuery特点jQuery的使用方式jQuery与JavaScript的区别jQuery中的加载事件jQuery对象jQuery简介jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“writeless，domore”，倡导用更少的代码，做更多的事情。jQuery特... 查看详情

前端—jquery(代码片段)

什么是jQuery?jQuery是一个工具，简单方便实现DOM操作，python里可以叫模块，但在前端叫“类库“”jQUery我们在声明一个jQuery对象变量的时候在变量名前面加上$：var$variable=jQuery对像varvariable=DOM对象$variable[0]//jQuery对象转成D... 查看详情

jquery的安装(代码片段)

一.jQuery的安装下载jQuery有两个版本的jQuery可供下载：Productionversion-用于实际的网站中，已被精简和压缩。Developmentversion-用于测试和开发（未压缩，是可读的代码）以上两个版本都可以从 jquery.com 中下载。（https://jquery.com... 查看详情

jquery(代码片段)

jQuery为什么要用jQueryjs书写代码时,会遇到一些问题window.onload事件有事件覆盖的问题,因此只能写一个事件代码容错性差浏览器兼容性问题书写很繁琐,代码量多代码量乱,各个页面到处都是动画效果难以实现jQuery是什么jQuery是js的一... 查看详情

jquery总结(代码片段)

1.什么是jQuery？　　jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“writeLess，DoMore”，即写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作(DOM)... 查看详情

jquery入门(代码片段)

jQuery简介jQuery是一个快速、简洁的JavaScript框架jQuery设计的宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做更多的事情它封装JavaScript常用的功能代码，优化HTML文档操作、事件处理、动画设计和Ajax交互导入方式本地文件<scri... 查看详情

javascriptwpwrapper中的jquery(代码片段)

查看详情

jquery(代码片段)

whatisjQuery?jQueryisafast,small,andfeature-richJavaScriptlibrary.ItmakesthingslikeHTMLdocumenttraversalandmanipulation,eventhandling,animation,andAjaxmuchsimplerwithaneasy-to-useAPIthatworksacrossamu 查看详情

markdowngistembed示例：jquery(代码片段)

查看详情

html使用jquery(代码片段)

查看详情

正文

jquery(代码片段)

为什么要使用jQuery

DOM文档加载的步骤

执行时间不同

编写个数不同

简化写法不同

使用 jQuery 的基本步骤

jquery文件的引入

jquery的入口函数

jQuery的$符号

js中的DOM对象 和 jQuery对象 比较

区别

JQuery对象和JS对象的互相转换

jQuery 的基本选择器

层级选择器

基本过滤选择器

属性选择器

筛选选择器

siblings选择器方法的基本使用

jQuery动画

显示动画

隐藏动画

点击盒子，实现显示隐藏

开关式显示隐藏动画

滑入和滑出（卷帘门效果）

淡入淡出动画

自定义动画

停止动画

jquery的属性操作

attr()

jquery(代码片段)

textaccordian（jquery）(代码片段)

学习jquery(代码片段)

markdown在wordpress中使用jquery代码片段(代码片段)

jquery(代码片段)

jquery快速入门(代码片段)

jquery插件扩展方法(代码片段)

jquery(代码片段)

jquery简介(代码片段)

前端—jquery(代码片段)

jquery的安装(代码片段)

jquery(代码片段)

jquery总结(代码片段)

jquery入门(代码片段)

javascriptwpwrapper中的jquery(代码片段)

jquery(代码片段)

markdowngistembed示例：jquery(代码片段)

html使用jquery(代码片段)

jQuery的`$`符号

js中的DOM对象和 jQuery对象比较