JQuery

时间 2019-11-17

标签 jquery 栏目 JQuery 繁體版

原文原文链接

一 . jQuery 的介绍

　　1.1 jQuery是什么 ? javascript

［1］ jQuery由美国人John Resig建立，至今已吸引了来自世界各地的众多 javascript高手加入其team。css

［2］ jQuery是继prototype以后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!html

［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各类浏览器java

［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，而且方便地为网站提供AJAX交互。jquery

［5］ jQuery还有一个比较大的优点是，它的文档说明很全，并且各类应用也说得很详细，同时还有许多成熟的插件可供选择。编程

[ 6 ] jQuery 是 js 的一个库，封装了咱们开发过程当中经常使用的一些功能，方便咱们调用，提升开发效率。json

js库是把咱们经常使用的功能放到一个单独的文件中，咱们用的时候，直接引用到页面里便可。api

关于jQuery的相关资料：数组

官网：http://jquery.com/浏览器
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/

　　1.2 为何要使用jQuery

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

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

可是jQuery的出现完美的解决了这些问题.

　　1.3 jQuery 的带一个代码

用原生 js 来实现下面代码效果 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementsByTagName('button')[0];
            var divArr = document.getElementsByTagName('div');
            oBtn.onclick = function () {
                        for (var i = 0; i < divArr.length; i++) {
                            divArr[i].style.display = "block";
                            divArr[i].innerHTML = "赵云";
                            }
             }
        }
    </script>
    
</head>
<body>
    
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    

</body>
</html>

若是用 jQuery 来写 ,保持其余的代码不变 ,<script> 部分的代码修改成 : (须要提早引入)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 获取dom元素
            var oBtn = $('button'); //根据标签名获取元素
            var oDiv = $('div'); //根据标签名获取元素
            oBtn.click(function(){
                oDiv.show(1000);//显示盒子
                oDiv.html('赵云'); // 设置内容
            });//事件是经过方法绑定的
        })
    </script>
    
</body>
</html>

　　1.4 jQuery 的两大特色

(1) . 链式编程 : 好比 .show() 和 .html() 能够连写成 .show().html()

(2) . 隐式迭代 : 隐式对应的就是显式 . 隐式迭代的意识就是 : 在方法内部进行循环遍历,而不是用咱们本身在进行循环,简化咱们的操做,方便咱们使用.

二 . jQuery 的使用

　　1 . 使用jQuery 的基本步骤

　　(1) . 引包

　　 (2) . 入口函数

(3) . 功能实现代码(事件处理)

如图 :

注意 : 导包的代码必定要放在 js 代码的最上面

jQuery 的版本

jQuery 有两个大版本：

1.x版本：最新版为 v1.11.3。
2.x版本：最新版为 v2.1.4（再也不支持IE六、七、8）。
3.x版本。

下载jQuery包以后里面会有两个文件，一个是jquery-3.3.1.js，一个是jquery-3.3.1.min.js

它们的区别是：

第一个是未压缩版，第二个是压缩版。
平时开发过程当中，可使用任意一个版本；可是，项目上线的时候，推荐使用压缩版。

　　2 . jQuery 的入口函数和 $ 符号

入口函数********

原生 js 的入口函数指的是 : window.onload = funcction(){}; 以下 :

//原生 js 的入口函数.页面上全部的内容加载完毕 , 才执行.
//不只要等文本加载完毕,并且要等图片也要加载完毕 ,才执行函数

window.onload = function(){
       alert(1);  
}

可是 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 .当咱们子代码中打印他们俩的时候 :

<script src = "jquery-3.3.1.js"></script>
    <script>
        
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);

    </script>

打印结果 :

从打印结果能够看出 $ 表明的就是 jQuery.

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

    $(); // 调用上面咱们自定义的函数$

    $(document）.ready(function(){}); // 调用入口函数

    $(function(){}); // 调用入口函数

    $(“#btnShow”) // 获取id属性为btnShow的元素

    $(“div”) // 获取全部的div标签元素

如上方所示，jQuery 里面的 $ 函数，根据传入参数的不一样，进行不一样的调用，实现不一样的功能。返回的是jQuery对象。

jQuery这个js库，除了$ 以外，还提供了另一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。

　　3 . js中的DOM对象和 jQuery对象比较 ********

两者的区别

经过 jQuery 获取的元素是一个数组 , 数组中包含着原生 JS 中的DOM 对象 :

例如 :

<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'));

设置当前4个div的样式 :

　　　　　　$('div').css({
                'width': '200px',
                'height': '200px',
                "background-color":'red',
                'margin-top':'20px'
            })

因为 jQuery 自带了 css() 方法 ,咱们还能够直接给代码中的 div 设置 css 属性.

总结 : jQuery 就是把DOM 树对象从新包装了一下,让其具备了 jQuery 方法.

两者的相互转换

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';

总结 : 若是想要那种方式设置属性或者方法 ,必须转换成该类型.

三 . jQuery 的选择器

　　1 . jQuery 的基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');

            //操做标签选择器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);


            //操做类选择器(隐式迭代，不用一个一个设置)
                    jqBox2.css("background", "green");
                    jqBox2.text('哈哈哈')

                    //操做id选择器
                    jqBox1.css("background", "yellow");
                   
        })
    </script>
    
</body>
</html>

　　2 . 层级选择器

示例 :

<!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>

　　3 . 基本过滤选择器

解释 :

示例 :

<!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>

效果 :

　　4 . 属性选择器

示例 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <h2 class="title">属性元素器</h2>
            <!--<p class="p1">我是一个段落</p>-->
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what" id="li2">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

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

                <input name="username" type='text' value="1" checked="checked" />
                <input name="username1111" type='text' value="1" />
                <input name="username2222" type='text' value="1" />
                <input name="username3333" type='text' value="1" />
                <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>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //标签名[属性名] 查找全部含有id属性的该标签名的元素
            $('li[id]').css('color','red');
            
            //匹配给定的属性是what值得元素
            $('li[class=what]').css('font-size','30px');
            //[attr!=value] 匹配全部不含有指定的属性，或者属性不等于特定值的元素
            $('li[class!=what]').css('font-size','50px');
            
            //匹配给定的属性是以某些值开始的元素
            $('input[name^=username]').css('background','gray');
            //匹配给定的属性是以某些值结尾的元素
            $('input[name$=222]').css('background','greenyellow');
            
            //匹配给定的属性是以包含某些值的元素
            $('button[class*=btn]').css('background','red')
        
            
        })
    
    </script>
</html>

效果 :

　　5 . 筛选选择器

示例 :

<!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>

　　　效果　：　

四 . jQuery 的动画效果

　　显示动画

方式一 :

$("div").show();

解释 : 无参数,表示让指定的元素直接显示出来.其实这个方法的底层就是经过 display:block; 实现的.

方式二 :

$("div").show(3000);

解释 : 经过控制元素的宽高 , 透明度 , display属性 , 逐渐显示 , 2秒后显示完毕.

方式三 :

$("div").show("show");

参数能够是 :

　　　　● slow 慢 : 600ms

　　　　● normal 正常 : 400ms

　　　　● fast 快 : 200ms

解释 : 和方式二相似 , 也是经过控制元素的宽高,透明度 ,display属性 ,逐渐显示.

方式四 :

 //show(毫秒值，回调函数;
    $("div").show(5000,function () {
        alert("动画执行完毕！");
    });

解释 : 动画执行后,当即调用回调函数.

总结 : 参数能够有两个,第一个是动画执行的时长,第二个是动画执行结束后执行回调函数.

　　隐藏动画

    $(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, 回调函数);

解释 : 下拉动画,显示元素.

注意：省略参数或者传入不合法

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:;效果同样

上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉以前的动画。

五 . jQuery 的属性操做

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'})

　　removeAttr()

移除属性 :

// 删除单个属性

$("#box") .removeAttr("name");
$("#box") .removeAttr("class");

//删除多个属性

$("#box") .removeAttr("name class");

　　prop()

prop() 方法设置或者返回被选元素的属性和值.

　当该方法用于返回属性值时,则返回第一个匹配元素的值.

当该方法用于设置属性值时,则为匹配元素集合设置一个或者多个属性/值对.

语法 :

返回属性的值 :

$(selector).prop(property)

返回属性和值:

$(selector).prop(property,value)

设置多个属性和值:

$(selector).prop({property:value, property:value,...})

　　关于 attr() 和 prop() 的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取第一个input
            var el = $('input').first();
            //undefined  由于attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，天然输出undefined
            console.log(el.attr('style'));
            // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具备原生的style对象属性的，因此输出了style对象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

注意 : 当有 true , false 两个属性时使用--prop(),不然使用attr().

　　类样式操做

1 . addClass() : 添加多个类名

为每一个匹配的元素添加指定的类名 :

$('div').addClass("box");//追加一个类名到原有的类名

为匹配的元素添加多个类名

$('div').addClass("box box2");//追加多个类名

2 . removeClass()

从全部匹配的元素中删除所有或者指定的类

移除指定的类(一个或多个)

$('div').removeClass('box')；

　　移除所有的类

$('div').removeClass();

能够经过添加删除类名,来实现元素的显示隐藏.

示例 :

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

案例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

3 .toggleClass()

若是存在(不存在) 就删除(添加) 一个类 .

语法 : toggleClass("box")

$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})

　　值操做

1 . html

获取值 :

语法 :

html() 是获取选中标签元素中全部的内容

$('#box').html();

设置值 : 设置该元素的全部内容会替换掉标签中原来的内容.

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

2 . text

　　text() 获取匹配元素中包含的文本内容

语法 :

$('#box').text();

　　设置值 : 设置该全部的文本内容.

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

　　注意 : 值为标签的时候不会被渲染为镖旗属性,只会被当成值渲染到浏览器中.

3 . val

　　获取值

　　 val() 用于表单控件中获取值,好比 : input , textarea , select

　　设置值 :

$('input').val('设置了表单控件中的值')；

4. 使用jQuery 操做 input 的 value 值

　　　　点击 --- >>> ○○○○○○

JQuery

一 . jQuery 的介绍

二 . jQuery 的使用

1 . 使用jQuery 的基本步骤

2 . jQuery 的入口函数和 $ 符号

3 . js中的DOM对象 和 jQuery对象 比较 ********

三 . jQuery 的选择器

1 . jQuery 的基本选择器

2 . 层级选择器

3 . 基本过滤选择器

4 . 属性选择器

5 . 筛选选择器

四 . jQuery 的动画效果

显示动画

隐藏动画

开关式显示隐藏动画

滑入和滑出

淡入淡出动画

自定义动画 *********

中止动画

五 . jQuery 的属性操做

attr()

removeAttr()

prop()

关于 attr() 和 prop() 的区别

类样式操做

值操做

　　1 . 使用jQuery 的基本步骤

　　2 . jQuery 的入口函数和 $ 符号

　　3 . js中的DOM对象和 jQuery对象比较 ********

　　1 . jQuery 的基本选择器

　　2 . 层级选择器

　　3 . 基本过滤选择器

　　4 . 属性选择器

　　5 . 筛选选择器

　　显示动画

　　隐藏动画

　　开关式显示隐藏动画

　　滑入和滑出

　　淡入淡出动画

　　自定义动画 *********

　　中止动画　　　

　　attr()

　　removeAttr()

　　prop()

　　关于 attr() 和 prop() 的区别

　　类样式操做

　　值操做