从零开始，学习web前端之jQuery

XeonYu 2017-03-28 09:54:57

1577

分类专栏：从零开始，学习web前端文章标签： jquery web前端 javascript

本文链接：https://blog.csdn.net/yuzhiqiang_1993/article/details/65628471

版权

什么是jQuery

jquery是一个javascript函数库。封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

如何使用jQuery

想要使用jquery，我们需要引入jquery文件。可以去jquery官网下载。需要注意的是，在引入jquery文件时，要放在其他引入的js文件的上面。

注意：2.x版本之后的jquery不再兼容IE678。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
</head>
<body>
</body>
</html>

jQuery入口函数

在原生js中我们的入口函数只能有一个，如果写多个，后面的会覆盖前面的。而在jquery中我们可以写多个入口函数，且不会被覆盖。

语法：

    <script>
        /*入口函数的两种写法*/
        
        /*第一种*/
        $(document).ready(function () {

        });
        
        /*第二种*/
        $(function () {

        });

    </script>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
        window.onload=function () {
            alert("原生js入口函数1")
        }

        window.onload=function () {
            alert("原生js入口函数2")
        }

        $(document).ready(function () {
            alert("jquery入口函数1")
        });
        $(function () {
            alert("jquery入口函数2")
        });
    </script>
</head>
<body>
</body>
</html>

这里写图片描述

可以看到原生js后面的入口函数前面的入口函数给覆盖掉了，而jquery的入口函数都执行了。

jQuery中的$符号

我们在使用jQuery时经常会用到$这个符号，那这个$符号到底是个什么呢？
首先我们先看看jQuery中的$符号是什么东西

打印jQuery中的$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
     window.onload=function () {
         console.log($);
     }
    </script>
</head>
<body>

</body>
</html>

这里写图片描述


我们可以看到，其实jQuery中的$就是一个函数，这个函数根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。一般我们使用$()函数来获取页面上的元素。

$(document）.ready(function(){}); // 调用入口函数
$(function(){}); // 调用入口函数
$(“#btnShow”) // 获取id属性为btnShow的元素
$(“div”) // 获取所有的div元素

注意:jQuery函数和$函数是完全一样的，也就是说，我们可以用JQuery代替$.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
     window.onload=function () {
       console.log(jQuery===$);
     }
    </script>
</head>
<body>
</body>
</html>

这里写图片描述

jQuery对象和dom对象

上面我们说到通过 $() 这个函数返回的是一个jQuery对象。那么jQuery对象和dom对象有什么样的区别呢？

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <script>
        $(function () {
            /*通过原生js查找的DOM对象*/
            var jsDivByTagName = document.getElementsByTagName("div");
            var jsDivByClass = document.getElementsByClassName("box");
            var jsDivById = document.getElementById("box");

            console.log(jsDivByTagName);
            console.log(jsDivByClass);
            console.log(jsDivById);

            console.log("---------------------------------------")

            /*通过$函数获取的是jQuery对象*/
            console.log($("div"));
            console.log($(".box"));
            console.log($("#box"));
        });
    </script>
</head>
<body>


<div>1111</div>
<div>1111</div>
<div class="box">2222</div>
<div class="box">2222</div>

<div id="box">333</div>


</body>
</html>

这里写图片描述

实际上JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；

注意: jQuery对象是个数组对象。也就是说通过$()返回的都是数组，即使传进去的参数是id。而原生js通过id获取的是单个dom。

jQuery对象和dom对象的互转

jQuery对象转dom对象
两种方法：[index]或get[index];
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
        $(function () {
            /*通过$函数获取的是jquery对象*/
            console.log($("div")[0]);//jQuery对象转dom对象
            console.log($("div").get(1));//jQuery对象转dom对象
        });

    </script>
</head>
<body>
<div>1111</div>
<div>222</div>
</body>
</html>

这里写图片描述

jquery对象转换为dom对象后即可使用dom提供的方法。

dom对象转jQuery对象

dom对象转jquery对象很简单，只需要用$()将dom包起来即可。

示例:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
        $(function () {
            /*通过原生js查找的DOM对象*/
            var jsDivByTagName = document.getElementsByTagName("div");
            console.log($(jsDivByTagName));//将dom对象转换为jquery对象
        });
    </script>
</head>
<body>
<div>1111</div>
<div>2222</div>
</body>
</html>

这里写图片描述

dom对象转换为jQuery对象后可以使用jQuery提供的方法。

jQuery选择器

jQuery参考网站

原生js本身提供给我们了选择元素的方法。但是数量很少，考虑浏览器兼容性的话只有两个

document.getElementById();
document.getElementsByTagName();

而jQuery提供给我们更多，更强大的选择器供我们使用。
jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。
各种选择器之间可以相互代替，所以，平时真正用到的只是最常用的选择器。

基本选择器

标签选择器

 $("div");  //选择标签名为div的所有元素

多标签选择器

$("div","li","p");//将每一个选择器匹配到的元素合并后一起返回。

ID选择器

$("#box");  //选择id为box的元素

class选择器

$(".box");// 选择class为box的所有元素

层级选择器

后代选择器

$("#box li"); //选择id为box的元素的所有后代元素为li的元素。

子代选择器

$("#box>li");//选择id为box的元素的所有子代元素为li的元素

基本过滤选择器

在匹配的集合中选择索引值为index的元素。
：eq(index)

$("div:eq(0)");

选择所引值为偶数的元素，从 0 开始计数。
:even


$("tr:even");//选择索引值为偶数的tr

选择索引值为奇数元素，从 0 开始计数。
：odd


$("tr:odd");//选择索引值为奇数的tr

这里写图片描述

可以看到jQuery的选择器有很多，我们只需要记住常用的怎么用即可，有些选择器不是很常用，记不住的话直接上网查就是了。

通过jQuery提供的方法获取元素

我们既可以通过选择器获取元素，也可以通过jQuery对象提供的方法来获取元素。实际上我们完全可以使用方法来替代除基本选择器外的其他选择器。

推荐使用方法来获取元素。提高代码可读性和性能。

常用的方法：

.eq(index);
类似选择器中的:eq(index);

$("div:eq(0));
$("div").eq(1));

.find( selector )
筛选出符合选择器条件的后代元素
类似于：后代选择器

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <style>
        ul {

            list-style: none;
        }
        li {
            width: 300px;
            line-height: 50px;
        }
    </style>

    <script>
        $(function () {
            $("#box").find("li:even").css("background", "red");
        });
    </script>
</head>
<body>
<ul id="box">
    <li>11</li>
    <li>22</li>
    <ul>
        <li>221</li>
        <li>222</li>
        <li>223</li>
    </ul>
    <li>33</li>
    <li>44</li>
    <li>55</li>
    <li>66</li>
    <li>77</li>
    <li>88</li>
</ul>
</body>
</html>

这里写图片描述

.children( [selector ] )
筛选出符合选择器条件的子代元素

注意：这里跟.find()有所区别，find是筛选所有后代元素，children是只获取子代元素。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <style>
        ul {

            list-style: none;
        }
        li {
            width: 300px;
            line-height: 50px;
        }
    </style>

    <script>
        $(function () {
            $("#box").children("li:even").css("background", "red");
        });
    </script>
</head>
<body>
<ul id="box">
    <li>11</li>
    <li>22</li>
    <ul>
        <li>221</li>
        <li>222</li>
        <li>223</li>
    </ul>
    <li>33</li>
    <li>44</li>
    <li>55</li>
    <li>66</li>
    <li>77</li>
    <li>88</li>
</ul>
</body>
</html>

这里写图片描述

.parents( [selector ] )
获取该元素节点符合筛选条件的所有祖先元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
        $(function () {
           console.log($("#box").parents("div")) ;
        });
    </script>
</head>
<body>
<div>
    <div>
        <div id="box"></div>
    </div>
</div>
</body>
</html>

这里写图片描述

可以看到，获取的所有的标签名为div的父元素。

.parent( [selector ] )；
.parent( [selector ] ）跟.parents( [selector ] )类似，都是查找祖先元素，但是parent只会往上查找一层，也就是说只会获取其符合条件的父元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
        $(function () {
           console.log($("#box").parent("div")) ;
        });
    </script>
</head>
<body>
<div>
    <div>
        <div id="box"></div>
    </div>
</div>
</body>
</html>

这里写图片描述

可以看到，只获取到他的父元素。

.siblings( [selector ] )；
获取其兄弟节点，不包括本身。
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <style>
        ul{
            list-style: none;

        }
        li{
            width: 100px;
            line-height: 35px;
        }
    </style>
    <script>
        $(function () {
          $("ul").children("li").eq(2).siblings("li").css("background","red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
</body>
</html>

这里写图片描述

.each()
遍历元素

$( "li" ).each(function( index ) {
  console.log( index + ": "" + $(this).text() );
});

还有很多其他的方法去获取元素，我们一般常用的也就这几个，其他的在用的时候可以上网去查。

jQuery操作dom

我们一般找到dom节点就是为对dom进行操作，而jQuery也给我们提供了强大的api去操作dom。
下面我们来看看一些常用的api。

属性

.attr()
获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。

根据传入的参数实现不同的功能

.attr( attributeName )
只传一个属性名,是获取匹配的元素集合中的第一个元素的属性的值。如果元素没有设置这个属性的话返回undefined。如果有这个属性的话返回该属性的值。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <script>
        $(function () {
            console.log($("img").attr("width"));
            console.log( $("img").eq(1).attr("width"));
        });
    </script>
</head>
<body>
<img src="../img/34.jpg" width="400">
<img src="../img/34.jpg">
</body>
</html>

这里写图片描述

.attr( attributeName, value )

设置每一个匹配元素的一个或多个属性。

当我们传进去的是属性名和值的话，就是更改每一个匹配元素的属性值。
如果传进去的属性值为null的话，就是删除该属性。
我们可以一次性更改多个属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <script>
      $(function () {      
          $("img").attr("width","600");//给img设置单个属性
          /*给img设置多个属性*/
          $("img").attr({
              "alt":"小狗",
              "title":"小狗"
          });
          $("img").eq(0).attr("alt",null);//移除第一个img的alt属性
   
      });
    </script>
</head>
<body>
<img src="../img/34.jpg" >
<img src="../img/34.jpg" width="300">
</body>
</html>

这里写图片描述

.removeAttr( attributeName )
为匹配的元素集合中的每个元素中移除一个属性（attribute）。

示例：

 $("img").removeAttr("alt");

.prop( )

获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。
.prop()方法的用法和.attr()的用法非常类似。

上面的attr()也可以获取属性并且修改属性，那么，这两个有什么区别呢？

attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。attributes和properties之间的差异在特定情况下是很重要的。

property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性：id，title，lang，dir，className。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。

attribute：特性，区别于property，attribute只能是字符串，大小写不敏感，出现在innerHTML中，通过类数组attributes可以罗列所有的attribute。

jQuery 1.6之前，.attr()方法在取某些 attribute 的值时，会返回 property 的值，这就导致了结果的不一致。从 jQuery 1.6 开始， .prop()方法方法返回 property 的值,而 .attr() 方法返回 attributes 的值。

这些区别在表单元素上体现的更加明确。比如checked属性。
在w3c规范中，checked属性是一个布尔属性，他实际上是dom中的属性（property），而在这里，特性（attribute）实际对应的是defaultChecked属性（property），而且仅用于设置复选框最初的值。checked特性（attribute）值不会因为复选框的状态而改变，而checked属性（property）会因为复选框的状态而改变。因此, 跨浏览器兼容的方法来确定一个复选框是否被选中，是使用property。

.prop( propertyName )
获取匹配的元素集中第一个元素的属性（property）值

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <script>
        $(function () {
            console.log($("input").attr("checked"));//checked
            console.log($("input").prop("checked"));//true
            console.log($("input").eq(1).attr("checked"));//undefined
            console.log($("input").eq(1).prop("checked"));//false
        });
    </script>
</head>
<body>
<input type="checkbox" checked>
<input type="checkbox" >
</body>
</html>

上面的代码可以看见，而通过prop方法返回的值为才是checked属性值。而在实际工作中，我们一般是要操作checked这个属性。这个时候，就要用.prop()方法了。

.prop( propertyName, value )
为匹配的元素设置一个或多个属性（properties）。

 $("input").prop("checked",false);

总结，能用prop方法就用prop方法。

.removeProp( propertyName )
为集合中匹配的元素删除一个属性（property）。
这个方法一般用于删除自定义的属性。不要使用此方法来删除原生的属性（ property ），比如checked, disabled, 或者 selected。这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用.prop()来设置这些属性设置为false代替。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <script>
        $(function () {
            var aaa = $("input").prop("aaa", "yzq");//添加属性
            console.log(aaa.prop("aaa"));
            aaa.removeProp("aaa");//移除属性
            console.log(aaa.prop("aaa"));
        });
    </script>
</head>
<body>
<input type="checkbox">

</body>
</html>

这里写图片描述

.val()
获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。
用法跟attr和prop类似，.val()不传参是获取值，传参是设置值.
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <script>
        $(function () {
            $("button")[0].onclick = function () {
                var val = $("input").val();//获取值
                console.log(val);
            };
            $("button")[1].onclick = function () {
                $("input").val("yzq");//设置值
            }
        });
    </script>
</head>
<body>
<input type="text">

<button>获取值</button>
<button>设置值为yzq</button>

</body>
</html>

样式
.css();
设置一个或多个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>
    <script>
        $(function () {
            $("button").css("background", "red");//设置一个样式
            /*设置多个样式*/
            $("button").css({
                background: "green",
                width: "200px"
            });
        });
    </script>
</head>
<body>
<button>获取值</button>
<button>设置值为yzq</button>
</body>
</html>

这里写图片描述

.addClass( className )
为每个匹配元素所要增加的一个或多个样式名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <style>

        .btn {
            width: 100px;
            height: 100px;
            background: red;
        }

        .btn2 {
            color: white;
            font-size: 20px;
        }
    </style>
    <script>
        $(function () {
            $("button").eq(0).addClass("btn");//添加一个样式
            /*添加多个样式*/
            $("button").eq(1).addClass("btn btn2");
        });
    </script>
</head>
<body>
<button>获取值</button>
<button>设置值为yzq</button>
</body>
</html>

这里写图片描述

.hasClass( className )
如果匹配元素上有指定的样式，那么.hasClass() 方法将返回 true ，即使元素上可能还有其他样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <style>

        .btn {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script>
        $(function () {
            console.log($("button").eq(0).hasClass("btn"));//true
            console.log($("button").eq(1).hasClass("btn"));//false
        });
    </script>
</head>
<body>
<button class="btn">获取值</button>
<button>设置值为yzq</button>
</body>
</html>

.removeClass( [className ] )
移除指定的样式，如果什么都不传，则移除所有样式

    <script>
        $(function () {
            $("button").eq(0).removeClass();//移除所有样式
            $("button").eq(1).removeClass("btn");//移除指定样式
        });
    </script>

.toggleClass( className )
切换样式，如果元素包含该样式则移除，否则添加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <style>

        .show {

            background: red;
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        $(function () {
            $("button")[0].onclick = function () {
                $("div").toggleClass("show");//切换样式
            }
        });
    </script>
</head>
<body>
<button>切换样式</button>
<div>
</div>

</body>
</html>

尺寸

.height()
获取元素的高度或给元素设置高度

//带参数表示设置高度
$(selector).height(200);
//不带参数获取高度
$(selector).height();

.css(‘height’) 和 .height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的高度需要数学计算的时候推荐使用.height() 方法。

.width()
获取元素的宽度或设置元素的宽度

//带参数表示设置宽度
$(selector).width(200);
//不带参数获取高度
$(selector).width();

.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法。

位置

offset()
获取或设置元素相对于文档的位置

// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置
$(selector).offset();
// 有参数表示设置，参数推荐使用数值类型
$(selector).offset({left:100, top: 150});

注意：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative

.position()
获取相对于其最近的具有定位的父元素的位置。

// 获取，返回值为对象：{left:num, top:num}
$(selector).position();

注意：只能获取，不能设置。

scrollTop()

作用：获取或者设置元素垂直方向滚动的位置
// 无参数表示获取偏移
$(selector).scrollTop();
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);

scrollLeft()

作用：获取或者设置元素水平方向滚动的位置
// 无参数表示获取偏移
$(selector).scrollLeft();
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollLeft(100);

节点

.html()
置或返回所选元素的html内容（包括 HTML 标记）

设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同

// 动态创建元素
$(selector).html(‘<span>传智播客</span>’);
// 获取html内容
$(selector).html();

append()
在被选元素内部的最后一个子元素（或内容）后面插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <script>
        $(function () {
            var spanNode=$("<span>我是span节点</span>");//创建节点
                $("div").append(spanNode);//追加
        });
    </script>
</head>
<body>
<div>
    <p>我是p标签</p>
</div>
</body>
</html>

这里写图片描述

appendTo()

同append()，区别是：把$(selector)追加到node中去
$(selector).appendTo(node);

prepend()

在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);

after()

在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);

before()

在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);

.empty()
这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。
跟html("")效果一样。

$(selector).empty();
$(selector).html("");

.remove()

把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();

.clone()

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

$(selector).clone();

jQuery动画

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

显示与隐藏

show();
显示元素

// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000即2秒钟显示完毕 */
$(selector).show(2000);

// 用法二：
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);

// 用法三：
// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});

// 用法四：
// 不带参数，作用等同于 css(“display”, ”block”)
/* 注意：此时没有动画效果 */
$(selector).show();

这里写图片描述

hide（）
隐藏元素
用法跟show方法类似

$(selector).hide(1000); 
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();

.toggle( [duration ] [, complete ] )
切换元素的显示与隐藏

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <style>

        div {
            width: 100px;
            height: 100px;
            background: red;
            display: none;
        }
    </style>

    <script>
        $(function () {
            var btn = $("button").eq(0);
            btn.on("click", function () {
                $("div").toggle(500, function () {
                    alert("动画完成");
                });
            });
        });


    </script>
</head>
<body>

<button>切换</button>
<div>

</div>
</body>
</html>

这里写图片描述

滑入滑出

滑入动画
.slideDown()
让元素以下拉动画效果展示出来

$(selector).slideDown(speed,callback);

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

滑出动画
.slideUp()
让元素以上拉动画效果隐藏起来

$(selector).slideUp(speed,callback);

滑入滑出切换动画
.slideToggle()

$(selector).slideToggle(speed,callback);

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.0.js"></script>

    <style>

        div {
            width: 100px;
            height: 100px;
            background: red;
            display: none;
        }
    </style>

    <script>
        $(function () {
            var btn = $("button").eq(0);
            btn.on("click", function () {
                $("div").slideToggle(500, function () {
                    alert("动画完成");
                });
            });
        });


    </script>
</head>
<body>

<button>切换</button>
<div>

</div>
</body>
</html>

这里写图片描述

渐变（淡入淡出）

fadeIn
淡入

$(selector).fadeIn(speed, callback);

fadeOut
淡出

$(selector).fadeOut(1000);

fadeToggle
淡入淡出切换
通过改变透明度，切换匹配元素的显示或隐藏状态

$(selector).fadeToggle('fast',function(){});

这里写图片描述

fadeTo
改变透明度到某个值
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

用法有别于其他动画效果
第一个参数表示：时长
第二个参数表示：不透明度值，取值范围：0-1
第一个参数为0，此时作用相当于：.css(“opacity”, .5);

$(selector).fadeTo(1000, .5); //  0全透，1全不透

这里写图片描述

自定义动画

除了jQuery提供给我们的三组动画，我们还可以自定义动画。

.animate( properties [, duration ] [, easing ] [, complete ] )

示例：


<!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: pink;
        }
    </style>
    <script src="jquery-3.2.0.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width":300,"height":300,"left":300,"top": 100,"border-radius":100};//动画1
                var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};//动画2

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


            })
        })
    </script>
</head>
<body>
<button>动画</button>
<div></div>
</body>
</html>

这里写图片描述

stop();
停止动画

$(selector).stop();

jQuery事件

jQuery事件是对javascript中DOM事件的封装。让我们用起来更方便，且兼容性更好。
jQuery事件也分为简单事件，事件绑定和事件解绑。

简单事件

resize(handler)
一般用于窗口大小发生变化时

  $(window).resize(function () {
                
            });

scroll(handler)
一般用于窗口滚动时

$(window).scroll(function () {
 
});

其他事件：

click(handler) 				单击事件
blur(handler) 				失去焦点事件
mouseenter(handler) 		鼠标进入事件
mouseleave(handler)			鼠标离开事件
dbclick(handler) 			双击事件
change(handler) 			改变事件，如：文本框值改变，下来列表值改变等
focus(handler) 				获得焦点事件
keydown(handler) 			键盘按下事件

事件绑定
之前jQuery绑定用的是bind，delegate这些方法绑定，但是都存在一些问题。后来jQuery推出了on方法绑定事件。
强烈推荐使用on方法绑定事件。所以bind和delegate就不在本文介绍了，感兴趣的可以自己去了解。

bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件

$("p").bind("click mouseenter", function(e){
    //事件响应方法
});

比简单事件绑定方式的优势：
可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”, function(){})
缺点：要绑定事件的元素必须存在文档中。

delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！

on方式（最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用的方式）

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件
$(selector).on( "click",“span”, function() {});

// 绑定多个事件
// 表示给$(selector)匹配的元素绑定单击和鼠标进入事件
$(selector).on(“click mouseenter”, function(){});

也就是说再实际开发中我们就用on方法绑定事件，其他的最好不要用

事件解绑

unbind()
解绑 bind方式绑定的事件

$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件

undelegate()
解绑delegate方式绑定的事件

$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off解绑on方式绑定的事件（重点）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑 
$(selector).off( “click”, “**” );

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>

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

    <style>

        ul {
            margin: 0;
            padding: 0;
            width: 100px;
            list-style: none;
        }

        li {
            line-height: 35px;
            background: red;
            text-align: center;
            color: white;
            border-bottom: 1px solid white;

        }
    </style>

    <script>
        $(function () {
            $("ul").on("click", "li", function () {
                alert($(this).text());
            });
        });

    </script>

</head>
<body>


<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>

这里写图片描述

jQuery事件对象介绍

event.data 					传递给事件处理程序的额外数据
event.currentTarget 		等同于this，当前DOM对象
event.pageX 				鼠标相对于文档左部边缘的位置
event.target 				触发事件源，不一定===this
event.stopPropagation()；	阻止事件冒泡
event.preventDefault(); 	阻止默认行为
event.type 					事件类型：click，dbclick…
event.which 				鼠标的按键类型：左1 中2 右3
event.keyCode				键盘按键代码

    <script>
        $(function () {
            $(document).on("click", {},function (e) {
                console.log(e.data);
                console.log(e.currentTarget );
                console.log(e.target );
                console.log(e.pageX );
                console.log(e.type );
                console.log(e.which );
                console.log(e.keyCode);
            });
        })
    </script>