08-jQuery學(xué)習(xí)與使用

為甚嚒要學(xué)習(xí)jQuery？

因?yàn)镴S中有很多痛點(diǎn)：
  • window.onload事件只能出現(xiàn)一次，如果出現(xiàn)多次，后面的事件會(huì)覆蓋掉前面的事件；
  • 代碼容錯(cuò)性差，如果獲取標(biāo)簽發(fā)生錯(cuò)誤，會(huì)影響后續(xù)代碼執(zhí)行；
  • 瀏覽器兼容性問(wèn)題：如innerText等；
  • 簡(jiǎn)單功能實(shí)現(xiàn)很繁瑣，如漸變的動(dòng)畫(huà)效果。

jQuery是什么？

jQuery描述（理解）
  • jQuery是js的一個(gè)庫(kù)，封裝了我們開(kāi)發(fā)過(guò)程中常用的一些功能，方便我們來(lái)調(diào)用，提高了我們的開(kāi)發(fā)效率；
  • Js庫(kù)是把我們常用的功能放到一個(gè)單獨(dú)的文件中，我們用的時(shí)候，直接引用到頁(yè)面里面來(lái)就可以了。
學(xué)習(xí)jQuery，主要學(xué)習(xí)什么內(nèi)容？
  • 目前這個(gè)階段，主要學(xué)習(xí)如何來(lái)使用jQuery操作DOM，其實(shí)就是學(xué)習(xí)jQuery封裝好的那些功能方法，這些方法叫做API（Application Programming Interface應(yīng)用程序編程接口）。
  • 這些API的共同特點(diǎn)是：幾乎全都是方法。所以，在使用jQuery的API時(shí)，都是方法調(diào)用，也就是說(shuō)要加小括號(hào)()，小括號(hào)里面是相應(yīng)的參數(shù)，參數(shù)不同，功能不同。

jQuery網(wǎng)站

jQuery特點(diǎn)
  • 鏈?zhǔn)骄幊蹋?/li>
  • 隱式迭代（遍歷）。

如何使用jQuery重點(diǎn)

三個(gè)步驟：
  • 引包
<script src="XXX"></script>
  • 入口函數(shù)
  • 功能實(shí)現(xiàn)代碼（事件處理）
$(document).ready(function (){  //入口函數(shù)
    //功能實(shí)現(xiàn)代碼（事件處理）
    //獲取元素和綁定事件（通過(guò)方法實(shí)現(xiàn)）
    事件源.事件(function(){
        //事件處理程序
    });
});
  • 體驗(yàn)：
<script src="jquery-1.11.1.js"></script>  //引包
<script type="text/javascript">
    $(document).ready(function () { //入口函數(shù)
        //使用$獲取元素，通過(guò)標(biāo)簽獲取直接寫(xiě)標(biāo)簽名；通過(guò)類(lèi)名獲取寫(xiě).XXX；通過(guò)id獲取寫(xiě)#XXX。
        var jqBtn = $("button");
        var jqDiv = $("div");

        jqBtn.click(function () {
            jqDiv.show(1000);   //可以設(shè)置開(kāi)始顯示到結(jié)束顯示的時(shí)間間隔
            jqDiv.html(12345);  //設(shè)置顯示內(nèi)容
        });
    });
</script>
入口函數(shù)
  • 入口函數(shù)一：文檔加載完畢，圖片沒(méi)有加載時(shí)就可以調(diào)用：
$(document).ready(function () {
    //code;
});
  • 入口函數(shù)二：是入口函數(shù)一的簡(jiǎn)寫(xiě)，作用和入口函數(shù)一相同：
$(fucntion (){
    //code
});
  • 入口函數(shù)三：文檔加載完畢，圖片也加載完畢時(shí)候執(zhí)行：
$(window).ready(function (){
    //code;
});
  • 原生js入口函數(shù)，頁(yè)面上所有內(nèi)容加載完畢時(shí)候執(zhí)行（不僅文本加載完畢，而且圖片也要加載完畢時(shí)候才執(zhí)行函數(shù)）：
window.onload = function (){
    //code;
};
  • jQuery入口函數(shù)和js入口函數(shù)的區(qū)別（理解）
  • 書(shū)寫(xiě)個(gè)數(shù)不同：js入口函數(shù)只能出現(xiàn)一次，出現(xiàn)多次會(huì)存在事件覆蓋的問(wèn)題（其它函數(shù)也都會(huì)出現(xiàn)覆蓋的問(wèn)題，除了addEventListener、attachEvent方法）；jQuery的入口函數(shù)可以出現(xiàn)任意多次，并不會(huì)存在事件覆蓋問(wèn)題。
  • 執(zhí)行時(shí)機(jī)不同：js入口函數(shù)是在所有的文件資源加載完成后，才執(zhí)行（這些文件資源包括：頁(yè)面文檔、外部的js文件、外部的css文件、圖片等）；jQuery的入口函數(shù)，是在文檔加載完成后，就執(zhí)行。文檔加載完成指的是：DOM樹(shù)加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成，如果想要所有的資源都加載完畢后再執(zhí)行就用入口函數(shù)三。
jQuery的$符號(hào)重點(diǎn)
  • js命名規(guī)范允許出現(xiàn)的字符有：數(shù)字、字母、下劃線(xiàn)、$（不能以數(shù)字開(kāi)頭）；
  • jQuery中$是一個(gè)函數(shù)，和jQuery的值基本一樣$===jQuery的值為true；
  • jQuery中使用$的原因：書(shū)寫(xiě)簡(jiǎn)潔，相對(duì)于其它字符更容易被記住。
  • 怎么理解jQuery中的$符號(hào)：
  • $實(shí)際上是一個(gè)函數(shù)名；
$(); //調(diào)用我們自定義的函數(shù)$
$(document).ready(function(){});    //調(diào)用入口函數(shù)
$(function(){});    //調(diào)用入口函數(shù)
$(window).ready(function(){});  //調(diào)用入口函數(shù)
$("#btnStyle"); //獲取id屬性為btnStyle的元素
$("div");   //獲取所有的div元素
$(".content");  //獲取類(lèi)名為content(包含即可)的元素
jQuery對(duì)象(jQuery中的DOM對(duì)象)和js中的DOM對(duì)象的區(qū)別和聯(lián)系重點(diǎn)！！！難點(diǎn)

  • jQuery對(duì)象是一個(gè)數(shù)組，數(shù)組中包含著原生js中的DOM對(duì)象；

  • jQuery中有css()方法，原生js沒(méi)有，因?yàn)閖Query有一層功能皮膚，jqDiv.css({"width":100});;

  • jQuery中DOM對(duì)象和js中DOM對(duì)象的轉(zhuǎn)換：

  • js中DOM對(duì)象轉(zhuǎn)換為jQuery中DOM對(duì)象，使其皮膚上有功能，然后可以直接使用相應(yīng)方法，使用$就可以實(shí)現(xiàn)轉(zhuǎn)換：$(js對(duì)象)，如：box = $(box);；

  • jQuery對(duì)象轉(zhuǎn)換為js對(duì)象：通過(guò)索引值就可以進(jìn)行轉(zhuǎn)換：

    • 方法一：jQuery對(duì)象[索引值];，如：jqDiv[0].style.backgroundColor = "red";
    • 方法二：jQuery對(duì)象.get(索引值);，如：jqDiv.get(3).style.backgroundColor = "pink";

  • 如果想要使用哪種方式(jQuery或者js)設(shè)置屬性或者方法，必須轉(zhuǎn)換成對(duì)應(yīng)的類(lèi)型(jQuery類(lèi)型或者js類(lèi)型)才能調(diào)用。

  • 練習(xí)：

  • 隔行變色；

<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>
  • 開(kāi)關(guān)燈
<body>
<!--開(kāi)關(guān)燈-->
<input type="button" value="開(kāi)燈">
<input type="button" value="關(guān)燈">
<div>
    ![](images/coder.jpg)
</div>

<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
    //通過(guò)js獲取
    var btns = document.getElementsByTagName("input");
    //通過(guò)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是兩個(gè)大版本的最新版；
  • 版本一：1.x版本；版本二：2.x版本；
  • 兩個(gè)版本的最大區(qū)別：2.x版本不再支持IE678。

選擇器

基本選擇器重點(diǎn)

  • id選擇器：$("#id名")；
  • 類(lèi)選擇器：$(".類(lèi)名")；
  • 標(biāo)簽選擇器：$("標(biāo)簽名")；
  • jqDiv.css(參數(shù)1,參數(shù)2);：如果只有一個(gè)參數(shù)是獲取屬性值，如果有兩個(gè)參數(shù)是設(shè)置屬性值。

層級(jí)選擇器重點(diǎn)，基本過(guò)濾選擇器

層級(jí)選擇器
  • 空格：后代選擇器（所有后代選擇器，可以隔代），用法：$("#jiang li").css("background-color","red");，選擇id為jiang的元素的所有后代元素li；
  • >：子代選擇器，只能是直接下一代。
基本過(guò)濾選擇器
  • :eq(index)：選擇匹配到的元素中索引號(hào)為index的一個(gè)元素，index從0開(kāi)始；
  • :odd：選擇匹配到的元素中索引號(hào)為奇數(shù)的所有元素；
  • :even：選擇匹配到的元素中索引號(hào)為偶數(shù)的所有元素；
  • 其它的有：:first/:last/:not()/...

篩選選擇器（方法）重點(diǎn)

  • 元素.find(selector)：查找指定元素的所有后代元素（子子孫孫），必須指定參數(shù)，如$("#jiang").find("li").css("color","red");：設(shè)置id為jiang的元素的所有后代元素li的顏色；

  • children()：查找指定元素的所有直接子元素（親兒子元素），如$("jiang").children("ul").css("color","red");；

  • siblings()：查找所有兄弟元素（不包括自己），如$("jiang").siblings().css("color","red");；

  • parent()：查找親父親元素；

  • eq(index)：查找指定元素的第index個(gè)元素，如$("li").eq(2).css("color","red");：選擇所有l(wèi)i元素中的第2個(gè)；

  • next()：該元素的下一個(gè)兄弟元素。

  • 練習(xí)：

  • 下拉菜單（this）；

    • jQuery對(duì)象綁定的事件中的this也代指js中的對(duì)象。
<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="">一級(jí)標(biāo)簽1</a>
                <ul>
                    <li><a href="">二級(jí)標(biāo)簽11</a></li>
                    <li><a href="">二級(jí)標(biāo)簽12</a></li>
                    <li><a href="">二級(jí)標(biāo)簽13</a></li>
                </ul>
            </li>

            <li><a href="">一級(jí)標(biāo)簽2</a>
                <ul>
                    <li><a href="">二級(jí)標(biāo)簽21</a></li>
                    <li><a href="">二級(jí)標(biāo)簽22</a></li>
                    <li><a href="">二級(jí)標(biāo)簽23</a></li>
                </ul>
            </li>

            <li><a href="">一級(jí)標(biāo)簽3</a>
                <ul>
                    <li><a href="">二級(jí)標(biāo)簽31</a></li>
                    <li><a href="">二級(jí)標(biāo)簽32</a></li>
                    <li><a href="">二級(jí)標(biāo)簽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>
  • 鼠標(biāo)進(jìn)入高亮，離開(kāi)恢復(fù)（隔行變色）；
<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>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
            <li>今天天氣真好，我和馬老大去放風(fēng)箏</li>
        </ul>
    </div>

    <script src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //獲取奇數(shù)行
            var jqLiOdd = $("ul li:odd");
            //獲取偶數(shù)行
            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>練習(xí)</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">
        //為每一個(gè)li元素綁定方法
        $(".wrap").find("li").mouseover(function () {
            $(this).css("opacity",1).siblings().css("opacity",0.3);
        });
        //當(dāng)鼠標(biāo)離開(kāi)時(shí)，全部li為全透明
        $(".wrap").mouseleave(function () {
            $(this).find("li").css("opacity",1);
        });
    </script>
</body>
  • 手風(fēng)琴；
  • 淘寶精品服飾。

jQuery操作DOM

為甚嚒要使用jQuery操作DOM

  • 對(duì)比js操作DOM和jQuery操作DOM發(fā)現(xiàn)，使用jQuery的方式來(lái)操作DOM更加的簡(jiǎn)潔、方便，統(tǒng)一的調(diào)用方式方便我們學(xué)習(xí)，降低我們的學(xué)習(xí)成本。

重點(diǎn)內(nèi)容

  • 樣式和類(lèi)的操作；
  • jQuery動(dòng)畫(huà)；
  • 節(jié)點(diǎn)操作。

樣式操作

樣式屬性操作.css()
  • 作用：設(shè)置或獲取元素的樣式屬性值；
  • 設(shè)置樣式屬性操作：
  • 設(shè)置單個(gè)樣式：
$("div").css("background-color","red");

- 第一個(gè)參數(shù)表示樣式屬性名稱(chēng)；
- 第二個(gè)參數(shù)表示樣式屬性值。
  • 設(shè)置多個(gè)樣式：（此種方式也可以用來(lái)設(shè)置單個(gè)）
$("div").css({"background-color":"red","margin":"10px"});

- 參數(shù)是{}(`對(duì)象`)。
  • 獲取樣式屬性值的操作：
$("div").css("background-color");
  • 參數(shù)表示要獲取的樣式屬性名稱(chēng)。
類(lèi)操作
  • 添加類(lèi)樣式：addClass(className)
  • 為指定元素添加類(lèi)className：
$(selector).addClass("liItem");

  • 注意：此處類(lèi)名不帶點(diǎn)，所有類(lèi)操作的方法類(lèi)名都不帶點(diǎn);

  • 移除類(lèi)樣式：
    removeClass(className)

  • 為指定元素移除類(lèi) className:

    • 指定參數(shù)（類(lèi)名）：
$(selector).removeClass(“l(fā)iItem”);

- 不指定參數(shù)：表示移除被選中元素的所有類(lèi)：

$(selector).removeClass();
  • 判斷有沒(méi)有類(lèi)樣式：
    hasClass(calssName)
  • 判斷指定元素是否包含類(lèi) className
$("div").hasClass(“l(fā)iItem”);

  • 此時(shí)，會(huì)返回true或false;

  • 有一個(gè)div有l(wèi)iItem時(shí)就返回true，只有所有的div都沒(méi)有類(lèi)liItem時(shí)才返回false。

  • 練習(xí)：切換背景色（點(diǎn)擊一次變換一下，再次點(diǎn)擊恢復(fù)，可判斷也可用toggle實(shí)現(xiàn)）。

  • 切換類(lèi)樣式：
    toggleClass(className):

  • 為指定元素切換類(lèi) className，該元素有類(lèi)則移除，沒(méi)有指定類(lèi)則添加:

$(selector).toggleClass(“l(fā)iItem”);

  • 注意點(diǎn)：

  • 操作類(lèi)樣式的時(shí)候，所有的類(lèi)名，都不帶點(diǎn)（.）;

  • 經(jīng)驗(yàn)：

  • 操作的樣式非常少，那么可以通過(guò).css()這個(gè) 方法來(lái)操作;

  • 操作的樣式很多，那么要通過(guò)使用類(lèi)的方式來(lái)操作;

  • 如果考慮以后維護(hù)方便（把CSS從js中分離出來(lái)）的話(huà)，推薦使用類(lèi)的方式來(lái)操作。類(lèi)比CSS書(shū)寫(xiě)位置（把css從html中分離出來(lái)）。

  • 前面內(nèi)容特色總結(jié)：簡(jiǎn)約、“粗暴”、干凈利落、直截了當(dāng)

  • 案例：圖片京東Table欄

jQuery動(dòng)畫(huà)

  • jQuery提供的一組網(wǎng)頁(yè)中常見(jiàn)的動(dòng)畫(huà)效果，這些動(dòng)畫(huà)是標(biāo)準(zhǔn)的、有規(guī)律的效果；同時(shí)還提供給我們了自定義動(dòng)畫(huà)的功能。
隱藏顯示動(dòng)畫(huà)（通過(guò)改變寬高和透明度display來(lái)實(shí)現(xiàn)）
  • show方法：讓匹配的方法展示出來(lái)
  • 用法一：參數(shù)為數(shù)值類(lèi)型，表示執(zhí)行動(dòng)畫(huà)時(shí)長(zhǎng)（從開(kāi)始到結(jié)束的時(shí)間）（底層是改變寬高和透明度）；
$("div").show(2000);    //從開(kāi)始展示到展示結(jié)束花費(fèi)2秒時(shí)間（）
  • 用法二：參數(shù)是字符串類(lèi)型，是jQuery預(yù)設(shè)的值，共有三個(gè)，分別為：slow(600ms)、normal(400ms)、fast(200ms)，如果傳入其它字符串默認(rèn)為normal；
$("div").show("fast");
  • 用法三：參數(shù)一可以是數(shù)值類(lèi)型或者字符串類(lèi)型表示動(dòng)畫(huà)執(zhí)行時(shí)間，參數(shù)二表示動(dòng)畫(huà)執(zhí)行完畢之后立刻執(zhí)行的回調(diào)函數(shù)；
$("div").show(1000,function (){});
  • 用法四：不帶參數(shù)，作用等同于css("display","block");（底層是通過(guò)改變display:block來(lái)實(shí)現(xiàn)的），此時(shí)沒(méi)有動(dòng)畫(huà)效果
$("div").show();
  • hide方法：使得匹配元素隱藏
  • 四種用法如下：
//方法一
$("div").hide(1000);
//方法二
$("div").hide("slow");
//方法三
$("div").hide("normal",function (){});
//方法四
$("div").hide();
  • 顯示隱藏進(jìn)行切換toggle，用法完全一致。
滑入滑出動(dòng)畫(huà)（通過(guò)改變高度display來(lái)實(shí)現(xiàn)）
  • 滑入動(dòng)畫(huà)效果（聯(lián)想生活中的卷簾門(mén)）：讓元素以下拉動(dòng)畫(huà)效果展示出來(lái)，也有四種用法，這里展示常用的兩種
  • 用法一：
$("div").slideDown(speed，callback);
  • 用法二：
$("div").slideDown();

  • 注意：省略參數(shù)或者傳入不合法的參數(shù)，就會(huì)使用默認(rèn)值400ms（同樣適用于slideUp、fadeIn）。

  • 滑出動(dòng)畫(huà)效果：讓元素以上拉動(dòng)畫(huà)效果形式隱藏，也有四種方法，這里不再全部展示

$("div").slideUp(speed,callback);
  • 滑入滑出切換動(dòng)畫(huà)效果slideToggle
  • 如果元素已經(jīng)隱藏，該方法就相當(dāng)于slideDown；如果元素已經(jīng)展示，該方法就相當(dāng)于slideUp
$("div").slideToggle(speed,callback);
淡入淡出動(dòng)畫(huà)（通過(guò)改變透明度display來(lái)實(shí)現(xiàn)）
  • 淡入動(dòng)畫(huà)效果：讓元素以淡淡的的進(jìn)入視線(xiàn)的方式展示出來(lái)，有四種方法；
$("div").fadeIn(speed,callback);
  • 淡出動(dòng)畫(huà)效果：讓元素以漸漸消失的方式隱藏起來(lái)，有四種方法
$("div").fadeOut(speed,callback);
  • 淡入淡出切換動(dòng)畫(huà)效果：通過(guò)改變透明度，切換匹配元素的顯示和隱藏(完全透明時(shí)隱藏)狀態(tài)；
$("div").fadeToggle("fast",callback);
  • 改變透明度到具體的某個(gè)值fadeTo
  • 與淡入淡出的區(qū)別：淡入淡出只能控制元素的不透明度從 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具體值。并且時(shí)間參數(shù)是必需的！
  • 用法有別于其它動(dòng)畫(huà)效果；第一個(gè)參數(shù)表示時(shí)長(zhǎng)；第二個(gè)參數(shù)表示透明度，范圍：0-1，0為全透明，1為不透明；可以有第三個(gè)參數(shù)（回調(diào)函數(shù)）；
$("div").fadeTo(100,0.4);
  • 第一個(gè)參數(shù)為0時(shí)，此時(shí)的作用相當(dāng)于：.css("opacity",.4);；
$("div").fadeTo(0,.4);
  • 注意：
  • jQuery預(yù)設(shè)的三組動(dòng)畫(huà)效果的語(yǔ)法幾乎一致：參數(shù)可以有兩個(gè)，第一個(gè)是動(dòng)畫(huà)的執(zhí)行時(shí)長(zhǎng)，第二個(gè)是動(dòng)畫(huà)執(zhí)行完成后的回調(diào)函數(shù);第一個(gè)參數(shù)是：可以是指定字符或者毫秒數(shù)(fadeTo()除外)；
  • 展示隱藏：
    • 表示展示：show()、fadeIn()、slideDown();
    • 表示隱藏：hide()、fadeOut()、slideUp()。
自定義動(dòng)畫(huà)
  • 注意：所有能夠執(zhí)行動(dòng)畫(huà)的屬性必須只有一個(gè)數(shù)字類(lèi)型的值，如要改變字體的大小，要使用：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>點(diǎn)我</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("動(dòng)畫(huà)2執(zhí)行完畢");
            });
        });
    });
</script>
</body>
  • 作用：執(zhí)行一組CSS屬性的自定義動(dòng)畫(huà);
  • 第一個(gè)參數(shù)表示要執(zhí)行動(dòng)畫(huà)的CSS屬性（必選）（JSON串），不支持背景色；第二個(gè)參數(shù)表示執(zhí)行動(dòng)畫(huà)時(shí)長(zhǎng)（可選）；第三個(gè)參數(shù)表示動(dòng)畫(huà)執(zhí)行完畢之后立即執(zhí)行的回調(diào)函數(shù)（可選）：
停止動(dòng)畫(huà)stop():停止當(dāng)前正在執(zhí)行的動(dòng)畫(huà)

  • 如果一個(gè)以上的動(dòng)畫(huà)方法在同一個(gè)元素上調(diào)用，那么對(duì)這個(gè)元素來(lái)說(shuō)，后面的動(dòng)畫(huà)將被放到效果隊(duì)列中。這樣就形成了動(dòng)畫(huà)隊(duì)列。（聯(lián)想：排隊(duì)進(jìn)站）

  • 動(dòng)畫(huà)隊(duì)列里面的動(dòng)畫(huà)不會(huì)全部執(zhí)行，直到第一個(gè)動(dòng)畫(huà)執(zhí)行完成；

  • 第一個(gè)參數(shù)表示后續(xù)動(dòng)畫(huà)是否要執(zhí)行true:后續(xù)動(dòng)畫(huà)不執(zhí)行 ;false:后續(xù)動(dòng)畫(huà)會(huì)執(zhí)行

  • 第二個(gè)參數(shù)表示當(dāng)前動(dòng)畫(huà)是否執(zhí)行完true:立即執(zhí)行完成當(dāng)前動(dòng)畫(huà) ;false:立即停止當(dāng)前動(dòng)畫(huà)，一定要注意，是當(dāng)前動(dòng)畫(huà)

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

  • 都不給，默認(rèn)false；

  • 解釋?zhuān)?/p>

  • 當(dāng)調(diào)用stop()方法后，隊(duì)列里面的下一個(gè)動(dòng)畫(huà)將會(huì)立即開(kāi)始。但是，如果參數(shù)clearQueue被設(shè)置為true，那么隊(duì)列面剩余的動(dòng)畫(huà)就被刪除了，并且永遠(yuǎn)也不會(huì)執(zhí)行。

  • 如果參數(shù)jumpToEnd被設(shè)置為true，參與動(dòng)畫(huà)的每一個(gè)CSS屬性將被立即設(shè)置為它們的目標(biāo)值。比如：slideUp()方法，那么元素會(huì)立即隱藏掉。如果存在回調(diào)函數(shù)，那么回調(diào)函數(shù)也會(huì)立即執(zhí)行。

  • 注意：如果元素動(dòng)畫(huà)還沒(méi)有執(zhí)行完，此時(shí)調(diào)用stop()方法，那么動(dòng)畫(huà)將會(huì)停止。并且動(dòng)畫(huà)沒(méi)有執(zhí)行完成，那么回調(diào)函數(shù)也不會(huì)被執(zhí)行。

  • 常用方式：

$(selector).stop();
  • 練習(xí)：
  • 右下角彈出的廣告（打開(kāi)頁(yè)面廣告先滑入再滑出；再淡入，點(diǎn)擊關(guān)閉按鈕后再淡出）；兩種方式實(shí)現(xiàn)：一種是鏈?zhǔn)骄幊蹋环N是通過(guò)函數(shù)回調(diào)實(shí)現(xiàn)。

jQuery節(jié)點(diǎn)操作

創(chuàng)建節(jié)點(diǎn)

  • 回顧一下js中創(chuàng)建節(jié)點(diǎn)的三種方式：

  • 方式一：document.write();，容易層疊掉已有的元素；

  • 方式二：使用innerHTML或者html屬性；

  • 方式三：document.createElement();

  • $()函數(shù)的另外一個(gè)作用：動(dòng)態(tài)創(chuàng)建元素；

  • 方式一：

var $spanNode = $(“<span>我是一個(gè)span元素</span>”);
  • 類(lèi)比js中的document.createElement("span")。
  • 方式二：html創(chuàng)建元素（推薦使用，重點(diǎn)）
var node = $(“#box”).html（“<li>我是li</li>”）；
  • 作用：設(shè)置或返回所選元素的html內(nèi)容（包括 HTML 標(biāo)記）;
  • 設(shè)置內(nèi)容的時(shí)候，如果是html標(biāo)記，會(huì)動(dòng)態(tài)創(chuàng)建元素，此時(shí)可類(lèi)比js里面的 innerHTML屬性，因?yàn)榇藢傩宰R(shí)別html標(biāo)簽；
  • 獲取html內(nèi)容
$(selector).html();
添加元素append()（重點(diǎn)）
  • 在元素的最后一個(gè)子元素后面追加元素；
  • 作用：在被選元素內(nèi)部的最后一個(gè)子元素（或內(nèi)容）后面插入內(nèi)容（存在或者創(chuàng)建出來(lái)的元素都可以）；
  • 如果是頁(yè)面中存在的元素，那么調(diào)用append()后，會(huì)把這個(gè)元素放到相應(yīng)的目標(biāo)元素里面去；但是，原來(lái)的這個(gè)元素，就不存在了；
  • 如果是給多個(gè)目標(biāo)追加元素，那么方法的內(nèi)部會(huì)復(fù)制多份這個(gè)元素，然后追加到多個(gè)目標(biāo)里面去；
  • 常用參數(shù)：htmlString 或者 jQuery對(duì)象；
  • 在$(selector)中追加$node
$(selector).append($node);
  • 在$(selector)中追加div元素，參數(shù)為htmlString
$(selector).append('<div></div>');
  • 不常用操作：（用法跟append()方法基本一致）
  • appendTo(),作用：同append()；
node.appendTo($(selector));
  • prepend(),作用：在元素的第一個(gè)子元素前面追加內(nèi)容或節(jié)點(diǎn);
//方式一：
$(selector).prepend(node);
//方式二：
node.prependTo($(selector));
  • after(),作用：在被選元素$(selector)之后，作為兄弟元素插入內(nèi)容或節(jié)點(diǎn)
$(selector).after(node);
  • before(),作用：在被選元素$(selector)之前，作為兄弟元素插入內(nèi)容或節(jié)點(diǎn)
$(selector).before(node);
清空元素
  • 清空指定元素的所有子元素（光桿司令）；
  • 方法一：沒(méi)有參數(shù)；
$(selector).empty();    //方式一
$(selector).html("");   //方式二
  • “自殺” 把自己（包括所有內(nèi)部元素）從文檔中刪除掉；
$(selector).remove();
復(fù)制元素
  • 作用：復(fù)制匹配的元素
  • 復(fù)制$(selector)所匹配到的元素；
  • 返回值為復(fù)制的新元素，只有深層復(fù)制；
$(selector).clone();

  • 總結(jié)：
    推薦使用html("<span></span>")方法來(lái)創(chuàng)建元素或者h(yuǎn)tml("")清空元素。

  • 練習(xí)：

  • 選擇水果；

  • 動(dòng)態(tài)創(chuàng)建表格；

  • 動(dòng)態(tài)添加數(shù)據(jù)；

重點(diǎn)內(nèi)容

  • val()屬性操作；
  • 時(shí)間綁定；
  • 事件解綁；
  • 事件觸發(fā)；
  • 插件基本使用。

操作form表單

屬性操作
  • 設(shè)置屬性
$(selector).attr("title","卡內(nèi)基梅隴");

  • 第一個(gè)參數(shù)表示：要設(shè)置的屬性名稱(chēng)；

  • 第二個(gè)參數(shù)表示：該屬性名稱(chēng)對(duì)應(yīng)的值。

  • 獲取屬性：返回指定屬性的值

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

  • 參數(shù)為：要獲取屬性的名稱(chēng)，該操作會(huì)返回指定屬性對(duì)應(yīng)的值。

  • 移除屬性操作

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

  • 參數(shù)為：要移除的屬性的名稱(chēng)；

  • 注意：

  • checked、selected、disabled要使用.prop()方法;

  • prop方法通常用來(lái)影響DOM元素的動(dòng)態(tài)狀態(tài)，而不是改變的HTML屬性;

  • 例如：input和button的disabled特性，以及checkbox的checked特性;

  • 細(xì)節(jié)參考：http://api.jquery.com/prop/

  • 案例：表格案例全選反選；

值和內(nèi)容
  • val()方法：
  • 作用：設(shè)置或者返回表單元素的值，例如：input、select、textarea的值；
//獲取匹配元素的值，只匹配第一個(gè)元素
$(selector).val();

//設(shè)置所有匹配到的元素的值
$(selector).val("具體值");
  • text()方法：
  • 作用：設(shè)置或者獲取匹配元素的文本內(nèi)容；
  • 方法一：獲取操作不帶參數(shù)（注意：這時(shí)候會(huì)把所有匹配到的元素內(nèi)容拼接為一個(gè)字符串，不同于其他獲取操作！）
$(selector).text();
  • 設(shè)置操作帶參數(shù)，參數(shù)表示要設(shè)置的文本內(nèi)容
// 如果設(shè)置的內(nèi)容包含html標(biāo)簽（<span>我要?jiǎng)討B(tài)創(chuàng)建span</span>），那么text這個(gè)方法會(huì)把他們當(dāng)作文本內(nèi)容輸出，而不會(huì)創(chuàng)建元素。這個(gè)text()和html()方的主要區(qū)別
$(selector).text(“我是內(nèi)容”);
  • 案例：紅鯉魚(yú)與綠鯉魚(yú)

尺寸位置操作

高度和寬度操作
  • 高度操作height() ：
  • 作用：設(shè)置或獲取匹配元素的高度值;
  • 帶參數(shù)表示設(shè)置高度
$(selector).height(200);
  • 不帶參數(shù)獲取高度
$(selector).height();
  • 寬度操作width() ：
  • 作用：設(shè)置或獲取匹配元素的寬度值;
  • 帶參數(shù)表示設(shè)置寬度;
  • 不帶參數(shù)獲取寬度;
$(selector).width(200);
  • css()獲取高度和height獲取高度的區(qū)別:
  • 方式一：height()方法返回值為number類(lèi)型，例如：30；
$("div").height();
  • 方式二：css()方法返回值為string類(lèi)型，例如："30px"；
$("div").css("height");
  • 區(qū)別：方式一常用于參與數(shù)學(xué)計(jì)算的情況。
坐標(biāo)值操作
  • offset():
  • 作用：獲取或設(shè)置元素相對(duì)于文檔的位置；
  • 無(wú)參數(shù)表示獲取，返回值為：{left:num, top:num}，值是相對(duì)于document的位置;
$(selector).offset();
  • 有參數(shù)表示設(shè)置，參數(shù)推薦使用數(shù)值類(lèi)型;
$(selector).offset({left:100, top: 150});

  • 注意點(diǎn)：設(shè)置offset后，如果元素沒(méi)有定位(默認(rèn)值：static)，則被修改為relative。

  • position():

  • 作用：獲取相對(duì)于其最近的具有定位的父元素的位置;

  • 獲取，返回值為對(duì)象：{left:num, top:num};

$(selector).position();

  • 注意：只能獲取，不能設(shè)置。

  • scrollTop():

  • 作用：獲取或者設(shè)置元素垂直方向滾動(dòng)的位置；

  • 無(wú)參數(shù)表示獲取偏移；

  • 有參數(shù)表示設(shè)置偏移，參數(shù)為數(shù)值類(lèi)型；

$(selector).scrollTop(100);
  • scrollLeft():
  • 作用：獲取或者設(shè)置元素水平方向滾動(dòng)的位置;
$(selector).scrollLeft(100);

  • 對(duì)scrollTop的理解：
    垂直滾動(dòng)條位置 是可滾動(dòng)區(qū)域 在 可視區(qū)域上方的 被隱藏區(qū)域的高度。
    如果滾動(dòng)條在最上方?jīng)]有滾動(dòng) 或者 當(dāng)前元素沒(méi)有出現(xiàn)滾動(dòng)條，那么這個(gè)距離為0。

  • 案例：固定導(dǎo)航欄

jQuery事件機(jī)制

  • jQuery的事件機(jī)制，指的是：jQuery對(duì)JavaScript操作DOM事件的封裝，包括了：事件綁定、事件解綁、事件觸發(fā)。
jQuery事件的發(fā)展歷程（了解）

  • 簡(jiǎn)單事件綁定 >> bind事件綁定 >> delegate事件綁定 >> on重點(diǎn)；

  • 簡(jiǎn)單事件綁定：

事件 事件描述
click(handler) 單擊事件
blur(handler) 失去焦點(diǎn)事件
mouseenter(handler) 鼠標(biāo)進(jìn)入事件
mouseleave(handler) 鼠標(biāo)離開(kāi)事件
dbclick(handler) 雙擊事件
change(handler) 改變事件，如：文本框值改變，下拉列表值改變等
focus(handler) 獲得焦點(diǎn)事件
keydown(handler) 鍵盤(pán)按下事件 
// 綁定單擊事件處理程序
$("p").bind("click", function(e){
    //事件響應(yīng)方法
});

  • 第一個(gè)參數(shù)：事件類(lèi)型;

  • 第二個(gè)參數(shù)：事件處理程序;

  • 比簡(jiǎn)單事件綁定方式的優(yōu)勢(shì)：

    • 可以同時(shí)綁定多個(gè)事件，比如：bind(“mouseenter mouseleave”, function(){});；
    • 缺點(diǎn)：要綁定事件的元素必須存在文檔中。

  • delegate方式（特點(diǎn)：性能高，支持動(dòng)態(tài)創(chuàng)建的元素）

  • 作用：給匹配到的元素綁定事件，對(duì)支持動(dòng)態(tài)創(chuàng)建的元素有效；

$(".parentBox").delegate("p", "click", function(){
    //為 .parentBox下面的所有的p標(biāo)簽綁定事件
});

  • 第一個(gè)參數(shù)：selector，要綁定事件的元素；

  • 第二個(gè)參數(shù)：事件類(lèi)型；

  • 第三個(gè)參數(shù)：事件處理函數(shù)。

  • 與前兩種方式最大的優(yōu)勢(shì)：減少事件綁定次數(shù)提高效率，支持動(dòng)態(tài)創(chuàng)建出來(lái)的元素綁定事件！

on方式（最現(xiàn)代的方式，兼容zepto(移動(dòng)端類(lèi)似jQuery的一個(gè)庫(kù))，強(qiáng)烈建議使用的方式）重點(diǎn)
  • jQuery1.7版本后，jQuery用on統(tǒng)一了所有的事件處理的方法；
  • 作用：給匹配的元素綁定事件，包括了上面所有綁定事件方式的優(yōu)點(diǎn)；
  • 語(yǔ)法：
  • 第一個(gè)參數(shù)：events，綁定事件的名稱(chēng)可以是由空格分隔的多個(gè)事件（標(biāo)準(zhǔn)事件或者自定義事件）；
  • 第二個(gè)參數(shù)：selector, 執(zhí)行事件的后代元素；
  • 第三個(gè)參數(shù)：data，傳遞給處理函數(shù)的數(shù)據(jù)，事件觸發(fā)的時(shí)候通過(guò)event.data來(lái)使用；
  • 第四個(gè)參數(shù)：handler，事件處理函數(shù)；
$(selector).on(events[,selector][,data],handler);
  • 表示給$(selector)綁定事件，當(dāng)必須是它的內(nèi)部元素span才能執(zhí)行這個(gè)事件;
$(selector).on( "click",“span”, function() {});
  • 綁定多個(gè)事件
  • 表示給$(selector)匹配的元素綁定單擊和鼠標(biāo)進(jìn)入事件;
$(selector).on(“click mouseenter”, function(){});
事件解綁
  • unbind() 方式
  • 作用：解綁 bind方式綁定的事件;
  • 解綁所有的事件:
$(selector).unbind();
  • 解綁指定的事件
$(selector).unbind(“click”);
  • undelegate() 方式
  • 作用：解綁delegate方式綁定的事件；
  • 解綁所有的delegate事件;
$( selector ).undelegate();
  • 解綁所有的click事件;
$( selector).undelegate("click"); ```

- off解綁on方式綁定的事件`重點(diǎn)`
 - 解綁匹配元素的所有事件:
```js
$(selector).off();
  • 解綁匹配元素的所有click事件:
$(selector).off("click");
  • 解綁所有代理的click事件，元素本身的事件不會(huì)被解綁:
$(selector).off("click", "**" );
事件觸發(fā)
  • 簡(jiǎn)單事件觸發(fā)
  • 觸發(fā) click事件:
$(selector).click();
  • trigger方法觸發(fā)事件，觸發(fā)瀏覽器行為：
$(selector).trigger(“click”);
  • triggerHandler觸發(fā) 事件響應(yīng)方法，不觸發(fā)瀏覽器行為，比如:文本框獲得焦點(diǎn)的默認(rèn)行為：
$(selector).triggerHandler(“focus”);
jQuery事件對(duì)象介紹
事件對(duì)象 說(shuō)明
event.data 傳遞給事件處理程序的額外數(shù)據(jù)
event.currentTarget 等同于this，當(dāng)前DOM對(duì)象
event.pageX 鼠標(biāo)相對(duì)于文檔左部邊緣的位置
event.target 觸發(fā)事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默認(rèn)行為
event.type 事件類(lèi)型：click，dbclick…
event.which 鼠標(biāo)的按鍵類(lèi)型：左1 中2 右3
event.keyCode 鍵盤(pán)按鍵代碼
  • 案例：按鍵變色

jQuery補(bǔ)充

鏈?zhǔn)骄幊?/h5>

  • 鏈?zhǔn)骄幊淘恚簉eturn this;

  • 通常情況下，只有設(shè)置操作才能把鏈?zhǔn)骄幊萄永m(xù)下去。因?yàn)楂@取操作的時(shí)候，會(huì)返回獲取到的相應(yīng)的值，無(wú)法返回 this。

  • end();:結(jié)束當(dāng)前鏈最近的一次過(guò)濾操作，并且返回匹配元素之前的狀態(tài)。

隱式迭代
  • 隱式迭代的意思是：在方法的內(nèi)部會(huì)為匹配到的所有元素進(jìn)行循環(huán)遍歷，執(zhí)行相應(yīng)的方法；而不用我們?cè)龠M(jìn)行循環(huán)，簡(jiǎn)化我們的操作，方便我們調(diào)用;
  • 如果獲取的是多元素的值，大部分情況下返回的是第一個(gè)元素的值。
  • 案例【五角星評(píng)分控件】
each方法

  • 有了隱式迭代，為什么還要使用each函數(shù)遍歷？

  • 大部分情況下是不需要使用each方法的，因?yàn)閖Query的隱式迭代特性；

  • 如果要對(duì)每個(gè)元素做不同的處理，這時(shí)候就用到了each方法；

  • 作用：遍歷jQuery對(duì)象集合，為每個(gè)匹配的元素執(zhí)行一個(gè)函數(shù)

  • 參數(shù)一表示當(dāng)前元素在所有匹配元素中的索引號(hào)；

  • 參數(shù)二表示當(dāng)前元素（DOM對(duì)象）；

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

  • element是一個(gè) js對(duì)象，需要轉(zhuǎn)換成jquery對(duì)象。

  • 【案例】 什么都看不見(jiàn)

多庫(kù)共存

  • 此處多庫(kù)共存指的是：jQuery占用了$ 和jQuery這兩個(gè)變量。當(dāng)在同一個(gè)頁(yè)面中引用了jQuery這個(gè)js庫(kù)，并且引用的其他庫(kù)（或者其他版本的jQuery庫(kù)）中也用到了$或者jQuery這兩個(gè)變量，那么，要保證每個(gè)庫(kù)都能正常使用，這時(shí)候就有了多庫(kù)共存的問(wèn)題。

  • 模擬另外的庫(kù)使用了 $ 這個(gè)變量，此時(shí)，就與jQuery庫(kù)產(chǎn)生了沖突:

var $ = { name : “itecast” };
  • 解決方式：
    • 作用：讓jQuery釋放對(duì)$的控制權(quán)，讓其他庫(kù)能夠使用$符號(hào)，達(dá)到多庫(kù)共存的目的。此后，只能使用jQuery來(lái)調(diào)用jQuery提供的方法;$.noConflict(); //true兩個(gè)都交出來(lái)，返回值是新的調(diào)用方法； 
<script src="../jquery-1.8.2.min.js"></script>
<script src="../jquery-1.11.1.js"></script>
<script>
    $.noConflict();
    //打印當(dāng)前jQuery的版本號(hào)
    console.log($.fn.jquery);   //1.8.2
    console.log(jQuery.fn.jquery);  //1.11.1
</script>

jQuery插件機(jī)制

  • jQuery這個(gè)js庫(kù)，雖然功能強(qiáng)大，但也不是面面俱到包含所有的功能。
  • jQuery是通過(guò)插件的方式，來(lái)擴(kuò)展它的功能：
  • 當(dāng)你需要某個(gè)插件的時(shí)候，你可以“安裝”到j(luò)Query上面，然后，使用；
  • 當(dāng)你不再需要這個(gè)插件，那你就可以從jQuery上“卸載”它。（就好比如手機(jī)軟件，安裝的app就好比插件，用的時(shí)候安裝上，不用的時(shí)候卸載掉）
第三方插件
  • jQuery.color.js
  • animate()自定義動(dòng)畫(huà)：不支持背景的動(dòng)畫(huà)效果;
  • animate動(dòng)畫(huà)支持的屬性列表;
  • jQuery.lazyload.js
  • 使用步驟：
    • 引入jQuery文件
    • 引入插件
    • 使用插件
制作插件
$.pluginName = function() {};
  • jQuery對(duì)象擴(kuò)展方法
$.fn.pluginName = function() {};
jQueryUI
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,367評(píng)論 0贊 2
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,200評(píng)論 0贊 1
  • 通過(guò)jQuery，您可以選取（查詢(xún)，query）HTML元素，并對(duì)它們執(zhí)行“操作”（actions）。 jQuer...
    枇杷樹(shù)8824閱讀 670評(píng)論 0贊 3
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,679評(píng)論 18贊 503
  • 如上面的布局所示，在5.0以上和5.0以下會(huì)有不同的效果： 可以看到，Button跑到了最上面，這是為毛啊？沒(méi)找到...
    舊時(shí)光KK閱讀 1,663評(píng)論 2贊 6