08-jQuery学习与使用

为甚嚒要学习jQuery？

因为JS中有很多痛点：

window.onload事件只能出现一次，如果出现多次，后面的事件会覆盖掉前面的事件；
代码容错性差，如果获取标签发生错误，会影响后续代码执行；
浏览器兼容性问题：如innerText等；
简单功能实现很繁琐，如渐变的动画效果。

jQuery是什么？

jQuery描述（理解）

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率；
Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

学习jQuery，主要学习什么内容？

目前这个阶段，主要学习如何来使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能方法，这些方法叫做API（Application Programming Interface应用程序编程接口）。
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。

jQuery网站

jQuery特点

链式编程；
隐式迭代（遍历）。

如何使用jQuery`重点`

三个步骤：

引包

<script src="XXX"></script>

入口函数
功能实现代码（事件处理）

$(document).ready(function (){  //入口函数
    //功能实现代码（事件处理）
    //获取元素和绑定事件（通过方法实现）
    事件源.事件(function(){
        //事件处理程序
    });
});

体验：

<script src="jquery-1.11.1.js"></script>  //引包
<script type="text/javascript">
    $(document).ready(function () { //入口函数
        //使用$获取元素，通过标签获取直接写标签名；通过类名获取写.XXX；通过id获取写#XXX。
        var jqBtn = $("button");
        var jqDiv = $("div");

        jqBtn.click(function () {
            jqDiv.show(1000);   //可以设置开始显示到结束显示的时间间隔
            jqDiv.html(12345);  //设置显示内容
        });
    });
</script>

入口函数

入口函数一：文档加载完毕，图片没有加载时就可以调用：

$(document).ready(function () {
    //code;
});

入口函数二：是入口函数一的简写，作用和入口函数一相同：

$(fucntion (){
    //code
});

入口函数三：文档加载完毕，图片也加载完毕时候执行：

$(window).ready(function (){
    //code;
});

原生js入口函数，页面上所有内容加载完毕时候执行（不仅文本加载完毕，而且图片也要加载完毕时候才执行函数）：

window.onload = function (){
    //code;
};

jQuery入口函数和js入口函数的区别（理解）
书写个数不同：js入口函数只能出现一次，出现多次会存在事件覆盖的问题（其它函数也都会出现覆盖的问题，除了addEventListener、attachEvent方法）；jQuery的入口函数可以出现任意多次，并不会存在事件覆盖问题。
执行时机不同：js入口函数是在所有的文件资源加载完成后，才执行（这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等）；jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成，如果想要所有的资源都加载完毕后再执行就用入口函数三。

jQuery的$符号`重点`

js命名规范允许出现的字符有：数字、字母、下划线、$（不能以数字开头）；
jQuery中$是一个函数，和jQuery的值基本一样$===jQuery的值为true；
jQuery中使用$的原因：书写简洁，相对于其它字符更容易被记住。
怎么理解jQuery中的$符号：
$实际上是一个函数名；

$(); //调用我们自定义的函数$
$(document).ready(function(){});    //调用入口函数
$(function(){});    //调用入口函数
$(window).ready(function(){});  //调用入口函数
$("#btnStyle"); //获取id属性为btnStyle的元素
$("div");   //获取所有的div元素
$(".content");  //获取类名为content(包含即可)的元素

jQuery对象(jQuery中的DOM对象)和js中的DOM对象的区别和联系`重点！！！难点`

jQuery对象是一个数组，数组中包含着原生js中的DOM对象；
jQuery中有css()方法，原生js没有，因为jQuery有一层功能皮肤，jqDiv.css({"width":100});;
jQuery中DOM对象和js中DOM对象的转换：
js中DOM对象转换为jQuery中DOM对象，使其皮肤上有功能，然后可以直接使用相应方法，使用$就可以实现转换：$(js对象)，如：box = $(box);；
jQuery对象转换为js对象：通过索引值就可以进行转换：
- 方法一：jQuery对象[索引值];，如：jqDiv[0].style.backgroundColor = "red";
- 方法二：jQuery对象.get(索引值);，如：jqDiv.get(3).style.backgroundColor = "pink";
如果想要使用哪种方式(jQuery或者js)设置属性或者方法，必须转换成对应的类型(jQuery类型或者js类型)才能调用。
练习：
隔行变色；

<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>
    <li>马老大今天很漂亮---9---贼老美啦</li>
    <li>马老大今天很漂亮---10---贼老美啦</li>
</ul>

<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">

    $(function () {
        var jqLi = $("li");
        for(var i=0; i<jqLi.length; i++){
            if (i%2===0){
                jqLi[i].style.backgroundColor = "green";
            }else {
                jqLi.get(i).style.backgroundColor = "pink";
            }
        }
    });

</script>
</body>

<body>
<!--开关灯-->
<input type="button" value="开灯">
<input type="button" value="关灯">
<div>
    ![](images/coder.jpg)
</div>

<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
    //通过js获取
    var btns = document.getElementsByTagName("input");
    //通过js获取
    var bd = $("body");
    $(btns[0]).click(function () {
        bd[0].style.backgroundColor = "white";
    });
    $(btns[1]).click(function () {
        bd.get(0).style.backgroundColor = "rgba(0,0,0,0.3)";
    });

</script>
</body>

jQuery版本

v1.11.3和v2.1.4是两个大版本的最新版；
版本一：1.x版本；版本二：2.x版本；
两个版本的最大区别：2.x版本不再支持IE678。

选择器

基本选择器`重点`

id选择器：$("#id名")；
类选择器：$(".类名")；
标签选择器：$("标签名")；
jqDiv.css(参数1,参数2);：如果只有一个参数是获取属性值，如果有两个参数是设置属性值。

层级选择器`重点`，基本过滤选择器

层级选择器

空格：后代选择器（所有后代选择器，可以隔代），用法：$("#jiang li").css("background-color","red");，选择id为jiang的元素的所有后代元素li；
>：子代选择器，只能是直接下一代。

基本过滤选择器

:eq(index)：选择匹配到的元素中索引号为index的一个元素，index从0开始；
:odd：选择匹配到的元素中索引号为奇数的所有元素；
:even：选择匹配到的元素中索引号为偶数的所有元素；
其它的有：:first/:last/:not()/...

筛选选择器（方法）`重点`

元素.find(selector)：查找指定元素的所有后代元素（子子孙孙），必须指定参数，如$("#jiang").find("li").css("color","red");：设置id为jiang的元素的所有后代元素li的颜色；
children()：查找指定元素的所有直接子元素（亲儿子元素），如$("jiang").children("ul").css("color","red");；
siblings()：查找所有兄弟元素（不包括自己），如$("jiang").siblings().css("color","red");；
parent()：查找亲父亲元素；
eq(index)：查找指定元素的第index个元素，如$("li").eq(2).css("color","red");：选择所有li元素中的第2个；
next()：该元素的下一个兄弟元素。
练习：
下拉菜单（this）；
- jQuery对象绑定的事件中的this也代指js中的对象。

<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 340px;
            height: 30px;
            margin: 80px auto 0;
            background-image: url("images/bg.jpg");
        }
        .wrap li{
            background-image: url("images/libg.jpg");
        }
        .wrap>ul>li{
            float: left;
            margin-left: 10px;
            position: relative;
        }
        ul,li{
            list-style: none;
        }
        .wrap a {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
        }
        .wrap>ul>li>ul{
            position: absolute;
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul>
            <li><a href="">一级标签1</a>
                <ul>
                    <li><a href="">二级标签11</a></li>
                    <li><a href="">二级标签12</a></li>
                    <li><a href="">二级标签13</a></li>
                </ul>
            </li>

            <li><a href="">一级标签2</a>
                <ul>
                    <li><a href="">二级标签21</a></li>
                    <li><a href="">二级标签22</a></li>
                    <li><a href="">二级标签23</a></li>
                </ul>
            </li>

            <li><a href="">一级标签3</a>
                <ul>
                    <li><a href="">二级标签31</a></li>
                    <li><a href="">二级标签32</a></li>
                    <li><a href="">二级标签33</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var jqLi = $(".wrap>ul>li");
            jqLi.mouseover(function () {
                console.log(this);
                $(this).children("ul").show();
            });
            jqLi.mouseout(function () {
                $(this).children("ul").hide();
            });
        });
    </script>
</body>

鼠标进入高亮，离开恢复（隔行变色）；

<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 350px;
            background-color: #999;
            margin: 60px auto ;
        }
        li{
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
            <li>今天天气真好，我和马老大去放风筝</li>
        </ul>
    </div>

    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //获取奇数行
            var jqLiOdd = $("ul li:odd");
            //获取偶数行
            var jqLiEven = $("ul li:even");
            jqLiEven.css("background-color","red");
            jqLiOdd.css("background-color","green");

            var jqLi = $("li");
            var color = "";
            jqLi.mouseenter(function () {
                color = this.style.backgroundColor;
                this.style.backgroundColor = "yellow";
            });
            jqLi.mouseout(function () {
                this.style.backgroundColor = color;
            });
        });

    </script>
</body>

突出展示案例；

<head>
    <meta charset="UTF-8">
    <title>练习</title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #333;
        }
        .wrap{
            width: 630px;
            height: 598px;
            margin: 60px auto 0;
            border: 1px solid #ffffff;
            padding: 10px 10px 0 0;
        }
        li{
            list-style: none;
            float: left;
            margin: 0 0 10px 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul>
            <li><a href="">![](images/01.jpg)</a></li>
            <li><a href="">![](images/02.jpg)</a></li>
            <li><a href="">![](images/03.jpg)</a></li>
            <li><a href="">![](images/04.jpg)</a></li>
            <li><a href="">![](images/05.jpg)</a></li>
            <li><a href="">![](images/06.jpg)</a></li>
            <li><a href="">![](images/03.jpg)</a></li>
            <li><a href="">![](images/02.jpg)</a></li>
            <li><a href="">![](images/01.jpg)</a></li>
        </ul>
    </div>

    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        //为每一个li元素绑定方法
        $(".wrap").find("li").mouseover(function () {
            $(this).css("opacity",1).siblings().css("opacity",0.3);
        });
        //当鼠标离开时，全部li为全透明
        $(".wrap").mouseleave(function () {
            $(this).find("li").css("opacity",1);
        });
    </script>
</body>

手风琴；
淘宝精品服饰。

jQuery操作DOM

为甚嚒要使用jQuery操作DOM

对比js操作DOM和jQuery操作DOM发现，使用jQuery的方式来操作DOM更加的简洁、方便，统一的调用方式方便我们学习，降低我们的学习成本。

重点内容

样式和类的操作；
jQuery动画；
节点操作。

样式操作

样式属性操作`.css()`

作用：设置或获取元素的样式属性值；
设置样式属性操作：
设置单个样式：

$("div").css("background-color","red");

- 第一个参数表示样式属性名称；
- 第二个参数表示样式属性值。

设置多个样式：（此种方式也可以用来设置单个）

$("div").css({"background-color":"red","margin":"10px"});

- 参数是{}(`对象`)。

获取样式属性值的操作：

$("div").css("background-color");

参数表示要获取的样式属性名称。

类操作

添加类样式：addClass(className)
为指定元素添加类className：

$(selector).addClass("liItem");

注意：此处类名不带点，所有类操作的方法类名都不带点;
移除类样式：
removeClass(className)
为指定元素移除类 className:
- 指定参数（类名）：

$(selector).removeClass(“liItem”);

- 不指定参数：表示移除被选中元素的所有类：

$(selector).removeClass();

判断有没有类样式：
hasClass(calssName)
判断指定元素是否包含类 className

$("div").hasClass(“liItem”);

此时，会返回true或false;
有一个div有liItem时就返回true，只有所有的div都没有类liItem时才返回false。
练习：切换背景色（点击一次变换一下，再次点击恢复，可判断也可用toggle实现）。
切换类样式：
toggleClass(className):
为指定元素切换类 className，该元素有类则移除，没有指定类则添加:

$(selector).toggleClass(“liItem”);

注意点：
操作类样式的时候，所有的类名，都不带点（.）;
经验：
操作的样式非常少，那么可以通过.css()这个方法来操作;
操作的样式很多，那么要通过使用类的方式来操作;
如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）。
前面内容特色总结：简约、“粗暴”、干净利落、直截了当
案例：图片京东Table栏

jQuery动画

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

隐藏显示动画（通过改变宽高和透明度display来实现）

show方法：让匹配的方法展示出来
用法一：参数为数值类型，表示执行动画时长（从开始到结束的时间）（底层是改变宽高和透明度）；

$("div").show(2000);    //从开始展示到展示结束花费2秒时间（）

用法二：参数是字符串类型，是jQuery预设的值，共有三个，分别为：slow(600ms)、normal(400ms)、fast(200ms)，如果传入其它字符串默认为normal；

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

用法三：参数一可以是数值类型或者字符串类型表示动画执行时间，参数二表示动画执行完毕之后立刻执行的回调函数；

$("div").show(1000,function (){});

用法四：不带参数，作用等同于css("display","block");（底层是通过改变display:block来实现的），此时没有动画效果

$("div").show();

hide方法：使得匹配元素隐藏
四种用法如下：

//方法一
$("div").hide(1000);
//方法二
$("div").hide("slow");
//方法三
$("div").hide("normal",function (){});
//方法四
$("div").hide();

显示隐藏进行切换toggle，用法完全一致。

滑入滑出动画（通过改变高度display来实现）

滑入动画效果（联想生活中的卷帘门）：让元素以下拉动画效果展示出来，也有四种用法，这里展示常用的两种
用法一：

$("div").slideDown(speed，callback);

用法二：

$("div").slideDown();

注意：省略参数或者传入不合法的参数，就会使用默认值400ms（同样适用于slideUp、fadeIn）。
滑出动画效果：让元素以上拉动画效果形式隐藏，也有四种方法，这里不再全部展示

$("div").slideUp(speed,callback);

滑入滑出切换动画效果slideToggle
如果元素已经隐藏，该方法就相当于slideDown；如果元素已经展示，该方法就相当于slideUp

$("div").slideToggle(speed,callback);

淡入淡出动画（通过改变透明度display来实现）

淡入动画效果：让元素以淡淡的的进入视线的方式展示出来，有四种方法；

$("div").fadeIn(speed,callback);

淡出动画效果：让元素以渐渐消失的方式隐藏起来，有四种方法

$("div").fadeOut(speed,callback);

淡入淡出切换动画效果：通过改变透明度，切换匹配元素的显示和隐藏(完全透明时隐藏)状态；

$("div").fadeToggle("fast",callback);

改变透明度到具体的某个值fadeTo
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从完全不透明到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
用法有别于其它动画效果；第一个参数表示时长；第二个参数表示透明度，范围：0-1，0为全透明，1为不透明；可以有第三个参数（回调函数）；

$("div").fadeTo(100,0.4);

第一个参数为0时，此时的作用相当于：.css("opacity",.4);；

$("div").fadeTo(0,.4);

注意：
jQuery预设的三组动画效果的语法几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画执行完成后的回调函数;第一个参数是：可以是指定字符或者毫秒数(fadeTo()除外)；
展示隐藏：
- 表示展示：show()、fadeIn()、slideDown();
- 表示隐藏：hide()、fadeOut()、slideUp()。

自定义动画

注意：所有能够执行动画的属性必须只有一个数字类型的值，如要改变字体的大小，要使用：fontSize（font-size），不要使用font。

$("div").animate(params,speen,callback);

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #96c;
            position: absolute;
        }
    </style>
</head>

<body>
<button>点我</button>
<div></div>

<script src="jquery-1.11.1.js"></script>
<script>
    var btn = $("button");
    btn.click(function () {
        var json1 = {"width":"500px","height":"500px","left":"200px","top":"200px","border-radius":100 };
        var json2 = {"width":300,"height":300,"left":100,"top":100};
        $("div").animate(json1,1000,function () {
            $("div").animate(json2,1000,function () {
                alert("动画2执行完毕");
            });
        });
    });
</script>
</body>

作用：执行一组CSS属性的自定义动画;
第一个参数表示要执行动画的CSS属性（必选）（JSON串），不支持背景色；第二个参数表示执行动画时长（可选）；第三个参数表示动画执行完毕之后立即执行的回调函数（可选）：

停止动画`stop()`:停止当前正在执行的动画

如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
动画队列里面的动画不会全部执行，直到第一个动画执行完成；
第一个参数表示后续动画是否要执行true:后续动画不执行 ;false:后续动画会执行
第二个参数表示当前动画是否执行完true:立即执行完成当前动画 ;false:立即停止当前动画，一定要注意，是当前动画

$(selector).stop(clearQueue,jumpToEnd);

都不给，默认false；
解释：
当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用stop()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
常用方式：

$(selector).stop();

练习：
右下角弹出的广告（打开页面广告先滑入再滑出；再淡入，点击关闭按钮后再淡出）；两种方式实现：一种是链式编程，一种是通过函数回调实现。

jQuery节点操作

创建节点

回顾一下js中创建节点的三种方式：
方式一：document.write();，容易层叠掉已有的元素；
方式二：使用innerHTML或者html属性；
方式三：document.createElement();
$()函数的另外一个作用：动态创建元素；
方式一：

var $spanNode = $(“<span>我是一个span元素</span>”);

类比js中的document.createElement("span")。
方式二：html创建元素（推荐使用，重点）

var node = $(“#box”).html（“<li>我是li</li>”）；

作用：设置或返回所选元素的html内容（包括 HTML 标记）;
设置内容的时候，如果是html标记，会动态创建元素，此时可类比js里面的 innerHTML属性，因为此属性识别html标签；
获取html内容

$(selector).html();

添加元素`append()（重点）`

在元素的最后一个子元素后面追加元素；
作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）；
如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了；
如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去；
常用参数：htmlString 或者 jQuery对象；
在$(selector)中追加$node

$(selector).append($node);

在$(selector)中追加div元素，参数为htmlString

$(selector).append('<div></div>');

不常用操作：（用法跟append()方法基本一致）
appendTo(),作用：同append()；

node.appendTo($(selector));

prepend(),作用：在元素的第一个子元素前面追加内容或节点;

//方式一：
$(selector).prepend(node);
//方式二：
node.prependTo($(selector));

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

$(selector).after(node);

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

$(selector).before(node);

清空元素

清空指定元素的所有子元素（光杆司令）；
方法一：没有参数；

$(selector).empty();    //方式一
$(selector).html("");   //方式二

“自杀” 把自己（包括所有内部元素）从文档中删除掉；

$(selector).remove();

复制元素

作用：复制匹配的元素
复制$(selector)所匹配到的元素；
返回值为复制的新元素，只有深层复制；

$(selector).clone();

总结：
推荐使用html("<span></span>")方法来创建元素或者html("")清空元素。
练习：
选择水果；
动态创建表格；
动态添加数据；

重点内容

val()属性操作；
时间绑定；
事件解绑；
事件触发；
插件基本使用。

操作form表单

属性操作

设置属性

$(selector).attr("title","卡内基梅陇");

第一个参数表示：要设置的属性名称；
第二个参数表示：该属性名称对应的值。
获取属性：返回指定属性的值

$(selector).attr("title");

参数为：要获取属性的名称，该操作会返回指定属性对应的值。
移除属性操作

$(selector).removeAttr("title");

参数为：要移除的属性的名称；
注意：
checked、selected、disabled要使用.prop()方法;
prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性;
例如：input和button的disabled特性，以及checkbox的checked特性;
细节参考：http://api.jquery.com/prop/
案例：表格案例全选反选；

值和内容

val()方法：
作用：设置或者返回表单元素的值，例如：input、select、textarea的值；

//获取匹配元素的值，只匹配第一个元素
$(selector).val();

//设置所有匹配到的元素的值
$(selector).val("具体值");

text()方法：
作用：设置或者获取匹配元素的文本内容；
方法一：获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）

$(selector).text();

设置操作带参数，参数表示要设置的文本内容

// 如果设置的内容包含html标签（<span>我要动态创建span</span>），那么text这个方法会把他们当作文本内容输出，而不会创建元素。这个text()和html()方的主要区别
$(selector).text(“我是内容”);

案例：红鲤鱼与绿鲤鱼

尺寸位置操作

高度和宽度操作

高度操作height() ：
作用：设置或获取匹配元素的高度值;
带参数表示设置高度

$(selector).height(200);

不带参数获取高度

$(selector).height();

宽度操作width() ：
作用：设置或获取匹配元素的宽度值;
带参数表示设置宽度;
不带参数获取宽度;

$(selector).width(200);

css()获取高度和height获取高度的区别:
方式一：height()方法返回值为number类型，例如：30；

$("div").height();

方式二：css()方法返回值为string类型，例如："30px"；

$("div").css("height");

区别：方式一常用于参与数学计算的情况。

坐标值操作

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(100);

scrollLeft():
作用：获取或者设置元素水平方向滚动的位置;

$(selector).scrollLeft(100);

对scrollTop的理解：
垂直滚动条位置是可滚动区域在可视区域上方的被隐藏区域的高度。
如果滚动条在最上方没有滚动或者当前元素没有出现滚动条，那么这个距离为0。
案例：固定导航栏

jQuery事件机制

jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

jQuery事件的发展历程（了解）

简单事件绑定 >> bind事件绑定 >> delegate事件绑定 >> on重点；
简单事件绑定：

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

其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
bind方式（不推荐，1.7以后的jQuery版本被on取代）
作用：给匹配到的元素直接绑定事件

// 绑定单击事件处理程序
$("p").bind("click", function(e){
    //事件响应方法
});

第一个参数：事件类型;
第二个参数：事件处理程序;
比简单事件绑定方式的优势：
- 可以同时绑定多个事件，比如：bind(“mouseenter mouseleave”, function(){});；
- 缺点：要绑定事件的元素必须存在文档中。
delegate方式（特点：性能高，支持动态创建的元素）
作用：给匹配到的元素绑定事件，对支持动态创建的元素有效；

$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

第一个参数：selector，要绑定事件的元素；
第二个参数：事件类型；
第三个参数：事件处理函数。
与前两种方式最大的优势：减少事件绑定次数提高效率，支持动态创建出来的元素绑定事件！

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(){});

事件解绑

unbind() 方式
作用：解绑 bind方式绑定的事件;
解绑所有的事件:

$(selector).unbind();

解绑指定的事件

$(selector).unbind(“click”);

undelegate() 方式
作用：解绑delegate方式绑定的事件；
解绑所有的delegate事件;

$( selector ).undelegate();

解绑所有的click事件;

$( selector).undelegate("click"); ```

- off解绑on方式绑定的事件`重点`
 - 解绑匹配元素的所有事件:
```js
$(selector).off();

解绑匹配元素的所有click事件:

$(selector).off("click");

解绑所有代理的click事件，元素本身的事件不会被解绑:

$(selector).off("click", "**" );

事件触发

简单事件触发
触发 click事件:

$(selector).click();

trigger方法触发事件，触发浏览器行为：

$(selector).trigger(“click”);

triggerHandler触发事件响应方法，不触发浏览器行为，比如:文本框获得焦点的默认行为：

$(selector).triggerHandler(“focus”);

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	键盘按键代码

案例：按键变色

jQuery补充

链式编程

链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end();:结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用;
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
案例【五角星评分控件】

each方法

有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性；
如果要对每个元素做不同的处理，这时候就用到了each方法；
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
参数一表示当前元素在所有匹配元素中的索引号；
参数二表示当前元素（DOM对象）；

$(selector).each(function(index,element){});

element是一个 js对象，需要转换成jquery对象。
【案例】什么都看不见

多库共存

此处多库共存指的是：jQuery占用了$ 和jQuery这两个变量。当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。
模拟另外的库使用了 $ 这个变量，此时，就与jQuery库产生了冲突:

var $ = { name : “itecast” };

解决方式：
- 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法;$.noConflict(); //true两个都交出来，返回值是新的调用方法；

<script src="../jquery-1.8.2.min.js"></script>
<script src="../jquery-1.11.1.js"></script>
<script>
    $.noConflict();
    //打印当前jQuery的版本号
    console.log($.fn.jquery);   //1.8.2
    console.log(jQuery.fn.jquery);  //1.11.1
</script>

jQuery插件机制

jQuery这个js库，虽然功能强大，但也不是面面俱到包含所有的功能。
jQuery是通过插件的方式，来扩展它的功能：
当你需要某个插件的时候，你可以“安装”到jQuery上面，然后，使用；
当你不再需要这个插件，那你就可以从jQuery上“卸载”它。（就好比如手机软件，安装的app就好比插件，用的时候安装上，不用的时候卸载掉）

第三方插件

jQuery.color.js
animate()自定义动画：不支持背景的动画效果;
animate动画支持的属性列表;
jQuery.lazyload.js
使用步骤：
- 引入jQuery文件
- 引入插件
- 使用插件

制作插件

如何创建jQuery插件：http://learn.jquery.com/plugins/basic-plugin-creation/
全局jQuery函数扩展方法:

$.pluginName = function() {};

jQuery对象扩展方法

$.fn.pluginName = function() {};

jQueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程:http://www.runoob.com/jqueryui/jqueryui-intro.html
基本使用:
引入jQueryUI的样式文件；
引入jQuery；
引入jQueryUI的js文件；
使用jQueryUI功能。

最后编辑于：2018.01.17 17:09:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,012评论 4赞 359
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,589评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,819评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,652评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,954评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,381评论 1赞 210
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,687评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,404评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,082评论 1赞 238
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,355评论 2赞 241
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,880评论 1赞 255
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,249评论 2赞 250
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,864评论 3赞 232
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,007评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,760评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,394评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,281评论 2赞 259

08-jQuery学习与使用

为甚嚒要学习jQuery？

因为JS中有很多痛点：

jQuery是什么？

jQuery描述（理解）

学习jQuery，主要学习什么内容？

jQuery网站

jQuery特点

如何使用jQuery重点

三个步骤：

入口函数

jQuery的$符号重点

jQuery对象(jQuery中的DOM对象)和js中的DOM对象的区别和联系重点！！！难点

jQuery版本

选择器

基本选择器重点

层级选择器重点，基本过滤选择器

层级选择器

基本过滤选择器

筛选选择器（方法）重点

jQuery操作DOM

为甚嚒要使用jQuery操作DOM

重点内容

样式操作

样式属性操作.css()

类操作

jQuery动画

隐藏显示动画（通过改变宽高和透明度display来实现）

滑入滑出动画（通过改变高度display来实现）

淡入淡出动画（通过改变透明度display来实现）

自定义动画

停止动画stop():停止当前正在执行的动画

jQuery节点操作

创建节点

添加元素append()（重点）

清空元素

复制元素

重点内容

操作form表单

属性操作

值和内容

尺寸位置操作

高度和宽度操作

坐标值操作

jQuery事件机制

jQuery事件的发展历程（了解）

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

事件解绑

事件触发

jQuery事件对象介绍

jQuery补充

链式编程

隐式迭代

each方法

多库共存

jQuery插件机制

第三方插件

制作插件

jQueryUI

推荐阅读更多精彩内容

如何使用jQuery`重点`

jQuery的$符号`重点`

jQuery对象(jQuery中的DOM对象)和js中的DOM对象的区别和联系`重点！！！难点`

基本选择器`重点`

层级选择器`重点`，基本过滤选择器

筛选选择器（方法）`重点`

样式属性操作`.css()`

停止动画`stop()`:停止当前正在执行的动画

添加元素`append()（重点）`

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