<meta charset="utf-8">

一、jQuery簡(jiǎn)介

1、什么是jQuery

jQuery 是一套兼容多瀏覽器的 javascript 腳本庫(kù).

核心理念是寫(xiě)得更少，做得更多，

使用 jQuery 將極大的提高編寫(xiě) javascript 代碼的效率,幫助開(kāi)發(fā)者節(jié)省了大量的工作,讓 寫(xiě)出來(lái)的代碼更加優(yōu)雅, 更加健壯，“如虎添翼”. 同時(shí)網(wǎng)絡(luò)上豐富的 jQuery 插件也讓我 們的工作變成了"有了 jQuery,一切 soeasy."--因?yàn)槲覀円呀?jīng)站在巨人的肩膀上了。

jQuery 在 2006 年 1 月由美國(guó)人 John Resig 在紐約的 barcamp 發(fā)布，吸引了來(lái)自 世界各地的眾多 JavaScript 高手加入，由 Dave Methvin 率領(lǐng)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。如今， jQuery 已經(jīng)成為最流行的 javascript 框架，在世界前 10000 個(gè)訪(fǎng)問(wèn)最多的網(wǎng)站中，有超 過(guò) 55%在使用 jQuery

2、下載和安裝

• 官網(wǎng)：http://jquery.com/
• 版本：

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下載 1.X)

（1）完整版 : jquery-2.1.4.js -->學(xué)習(xí)版本(學(xué)習(xí)源碼 想高手學(xué)習(xí)是最好學(xué)習(xí)方法)

（2）壓縮版 : jquery-2.1.4.min.js -->開(kāi)發(fā)版本(壓縮版，減少傳輸)

• 優(yōu)點(diǎn)：

（1）提供了強(qiáng)大的功能函數(shù)

（2）解決瀏覽器兼容性問(wèn)題

（3）實(shí)現(xiàn)豐富的 UI 和插件

（4）糾正錯(cuò)誤的腳本知識(shí)

• 安裝：

在頁(yè)面引入即可 ：<script src="js/jquery.js" type="text/javascript" ></script>

3、核心

"$"符號(hào)在 jQuery 中代表對(duì) jQuery 對(duì)象的引用, "jQuery"是核心對(duì)象，通過(guò)該對(duì)象 可以獲取 jQuery 對(duì)象，調(diào)用 jQuery 提供的方法等。

注意：只有 jQuery 對(duì)象才能調(diào)用 jQuery 提供 的方法。

二、DOM 對(duì)象和 jQuery 包裝集對(duì)象

原始的 Dom 對(duì) 象只有 DOM 接口提供的方法和屬性，通過(guò) js 代碼獲取的對(duì)象都是 dom 對(duì)象；而通過(guò) jQuery 獲取的對(duì)象是 jQuery 包裝集對(duì)象，簡(jiǎn)稱(chēng) jQuery 對(duì)象，只有 jQuery 對(duì)象才能使用 jQuery 提 供的方法。

1、DOM對(duì)象

javascript 中獲取 Dom 對(duì)象，Dom 對(duì)象只有有限的屬性和方法: 
// 得到DOM對(duì)象
var mydivDom = document.getElementById("mydiv");
console.log(mydivDom);

2、 jQuery 包裝集|對(duì)象

可以說(shuō)是 Dom 對(duì)象的擴(kuò)充.在 jQuery 的世界中將所有的對(duì)象, 無(wú)論是一個(gè)還是一組, 
都封裝成一個(gè) jQuery 包裝集,比如獲取包含一個(gè)元素的 jQuery 包裝集: 
var jQueryObject = $("#testDiv"); 

3、DOM與jQuery互轉(zhuǎn)

//Dom 對(duì)象轉(zhuǎn)為 jQuery 對(duì)象,只需要利用$()方法進(jìn)行包裝即可 
var domDiv = document.getElementById('mydiv');  // 獲取 Dom 對(duì)象 
mydiv = $(domDiv); 

//jQuery 對(duì)象轉(zhuǎn) Dom 對(duì)象，只需要取數(shù)組中的元素即可 
//第一種方式 獲取 jQuery 對(duì)象 
var jqueryDiv = jQuery('#mydiv'); 
//第二種方式 獲取 jQuery 對(duì)象 jqueryDiv = $('#mydiv'); 
var dom = jqueryDiv[0];
//將以獲取的 jquery 對(duì)象轉(zhuǎn)為 dom 

三、jQuery選擇器

1、層次性選擇器

層次選擇器 Hierarchy
選擇器         名稱(chēng)              舉例
后代選擇器   ancestor descendant     $("#parent div")選擇 id 為 parent 的元素的所有 div 元素
子代選擇器   parent > child          $("#parent>div")選擇 id 為 parent 的直接 div 子元素
相鄰選擇器   prev + next             $(".blue + img")選擇 css 類(lèi)為 blue 的下一個(gè) img 元素
同輩選擇器   prev ~ sibling          $(".blue ~ img")選擇 css 類(lèi)為 blue 的之后的 img 元素

示例:

                // 后代選擇器        ancestor descendant
        var houdai = $("#parent div");
        console.log(houdai);
        
        // 子代選擇器        parent > child
        var zidai = $("#parent > p");
        console.log(zidai);
        
        // 相鄰選擇器        prev + next  （1、只找當(dāng)前元素的下一個(gè)同級(jí) 2、只找一個(gè)）
        var next = $("#parent + div");
        console.log(next);
        
        // 同輩選擇器        prev ~ sibling 
        var tb = $("#parent ~ div");
        console.log(tb);

2、基礎(chǔ)選擇器

基礎(chǔ)選擇器 Basics
選擇器             名稱(chēng)          舉例
id 選擇器          #id             $("#testDiv")選擇 id 為 testDiv 的元素（id屬性值）
元素名稱(chēng)選擇器     element         $("div")選擇所有 div 元素 （元素名稱(chēng)）
類(lèi)選擇器            .class          $(".blue")選擇所有 class=blue 的元素  （class屬性值）
選擇所有元素      *               $("*")選擇頁(yè)面所有元素
組合選擇器       selector1,      $("#testDiv,span,.blue")同時(shí)選中這幾個(gè)選擇器匹配的元素
                selector2,
                selectorN

示例:

            // id 選擇器   #id   如果有多個(gè)同名ID，以第一個(gè)為準(zhǔn)
        console.log($("#mydiv1"));
        // 元素名稱(chēng)選擇器  element
        console.log($("div"));
        // 類(lèi)選擇器 .class 
        console.log($(".blue"));
        
        //  選擇所有元素      *
        console.log($("*"));
        
        // 組合選擇器        selector1,selector2,selectorN
        console.log($("#mydiv,div,span,.blue"));

3、表單選擇器

過(guò)濾選擇器
        :checked:得到所有checked為true的元素
         :eq(index):匹配指定下標(biāo)的元素
         :gt(index):大于指定下標(biāo)的
         
         :odd  獲取所有的奇數(shù)位置的元素
         :even 獲取所有的偶數(shù)位置的元素
   
                var cked = $(":checked");
        console.log(cked);
        console.log($(":checkbox:checked"));
        
        var eq1 = $(":checkbox:eq(0)");
        console.log(eq1);
        
        var gt1 = $(":checkbox:gt(0)");
        console.log(gt1);

四、jQuery DOM操作

1、操作元素的屬性

操作元素的屬性
獲取屬性        
方法        說(shuō)明                                                          舉例
attr(屬性名稱(chēng))    獲取指定的屬性值，操作 checkbox 時(shí)選中返回      attr('checked')attr('name')                                            
                          checked，沒(méi)有選中返回 undefined。
prop(屬性名稱(chēng))  獲取具有 true 和 false 兩個(gè)屬性的屬性值         prop('checked')                        
            
設(shè)置屬性
    attr("屬性名","屬性值")
    prop("屬性名","屬性值")
移除屬性
    removeAttr("屬性名")
                
attr()與prop()的區(qū)別：
    共同點(diǎn)：都可以獲取元素的屬性
    不同點(diǎn)：
        1、attr()可以獲取自定義屬性和固有屬性的值，而prop()只能獲取固有屬性的值 （固有屬性：元素本身就有的屬性）
        2、操作返回值是boolean類(lèi)型的屬性時(shí)，attr()返回的是對(duì)應(yīng)的值，而prop()返回的是true和false
    如何選擇：
        如果屬性的返回值是boolean類(lèi)型時(shí)，用prop()方法；  （checked、selected、disabled）
        如果是非boolean類(lèi)型，則使用attr()方法

示例：

 // 獲取元素的屬性 （固有屬性）
        var name1 = $("#ck1").attr("name");
        console.log(name1);
        var name2 = $("#ck2").prop("name");
        console.log(name2);
        
        // 獲取元素的屬性 （自定義屬性屬性）
        var a1 = $("#ck1").attr("aa");
        var a2 = $("#ck1").prop("aa");
        console.log(a1,a2);
        
        // 獲取元素的屬性 （設(shè)置過(guò)屬性且屬性返回值是boolean類(lèi)型）
        var c1 = $("#ck1").attr("checked");
        var c2 = $("#ck1").prop("checked");
        console.log(c1,c2);
        
        // 獲取元素的屬性 （未設(shè)置過(guò)屬性且屬性返回值是boolean類(lèi)型）
        var c11 = $("#ck2").attr("checked");
        var c22 = $("#ck2").prop("checked");
        console.log(c11,c22);
        
        
        // 設(shè)置元素的屬性值
        $("#ck1").attr("value","1");
        $("#ck2").prop("value","2");
        
        // attr()
        $("#ck1").attr("checked","checked");
        $("#ck2").prop("checked",true);
        
        
        // 移除屬性
        $("#ck1").removeAttr("name");

2、操作元素的樣式

操作元素的樣式
方法          說(shuō)明
attr(“class”)       獲取 class 屬性的值，即樣式名稱(chēng)
attr(“class”,”樣式名”)     修改 class 屬性的值，修改樣式
addClass(“樣式名”)         添加樣式名稱(chēng)
css()           添加具體的樣式
removeClass(class)      移除樣式名稱(chēng)
            
增加元素的具體樣式，格式：
    1）css({‘樣式名’:’樣式值’,’樣式名 2’:’樣式值 2’})
    例：css({"background-color":"red","color":"#fff"})2）css(“樣式名”,”樣式值”)
    例：css('color','white')
    2）css(“樣式名”,”樣式值”)
    例：css('color','white')
                    
attr():設(shè)置樣式時(shí)，會(huì)重新設(shè)置class的屬性值，所以會(huì)將原來(lái)的樣式覆蓋
addClass():添加樣式，原來(lái)的樣式依然保留，如果出現(xiàn)了相同樣式，以后定義的樣式為準(zhǔn)
css():設(shè)置具體的樣式（設(shè)置行內(nèi)樣式，寫(xiě)在style屬性中的樣式）

3、操作元素的內(nèi)容

操作元素的內(nèi)容
方法                      說(shuō)明
html()                                 獲取元素的 html 內(nèi)容
html("html 內(nèi)容")                        設(shè)定元素的 html 內(nèi)容
text()                                 獲取元素的文本內(nèi)容，不包含 html
text("text 內(nèi)容")                        設(shè)置元素的文本內(nèi)容，不包含 html
val()                                           獲取元素 value 值
val(‘值’)                                           設(shè)定元素的 value 值
                
html()和text()
        html()可以識(shí)別數(shù)據(jù)中的html標(biāo)簽并 顯示出來(lái)；
        text()不識(shí)別html標(biāo)簽，會(huì)當(dāng)做純文本顯示
        取值時(shí)，html()能夠獲取到元素中的html代碼，text()只會(huì)獲取純文本
                
表單元素：取值賦值使用 val()
    文本框、密碼框、單選框、復(fù)選框、下拉框、文本域、文件域、隱藏域、（按鈕）等
非表單元素：取值賦值使用  html()和text()
    div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等

4、創(chuàng)建元素

在 jQuery 中創(chuàng)建元素很簡(jiǎn)單，直接使用核心函數(shù)即可 
$(‘元素內(nèi)容’) 
$(‘<p>this is a paragraph!!!</p>’) 

5、添加元素

添加元素
方法                         說(shuō)明
prepend(content)                   在被選元素內(nèi)部的開(kāi)頭插入元素或內(nèi)容，被追加的 content 參數(shù)
                                                   可以是字符、HTML 元素標(biāo)記。
$(content).prependTo(selector)  把 content 元素或內(nèi)容加入 selector 元素開(kāi)頭
append(content)                 在被選元素內(nèi)部的結(jié)尾插入元素或內(nèi)容，被追加的 content 參數(shù)，可以是
                                                    字符、HTML 元素標(biāo)記。
$(content).appendTo(sector)     把 content 元素或內(nèi)容插入 selector 元素內(nèi)，默認(rèn)是在尾部
before()                                在元素前插入指定的元素或內(nèi)容:$(selector).before(content)
after()                             在元素后插入指定的元素或內(nèi)容:$(selector).after(content)

6、刪除元素

刪除元素
方法  說(shuō)明
remove()    刪除所選元素或指定的子元素，包括整個(gè)標(biāo)簽和內(nèi)容一起刪。
empty()     清空所選元素的內(nèi)容

7、遍歷元素

遍歷元素： each()
$(selector).each(function(index,element)) :遍歷元素
參數(shù) function 為遍歷時(shí)的回調(diào)函數(shù)，
index 為遍歷元素的序列號(hào)，從 0 開(kāi)始。
element 是當(dāng)前的元素，此時(shí)是 dom 元素。

$(".pink").each(function(index,element){
            console.log(index);
            console.log(element);
            console.log($(element).html());
});

五、jQuery事件

1、ready加載事件

ready()加載事件
ready()類(lèi)似于 onLoad()事件
ready()可以寫(xiě)多個(gè)，按順序執(zhí)行
$(document).ready(function(){})等價(jià)于$(function(){})

ready()加載事件和onload加載事件：
ready()加載事件在dom結(jié)構(gòu)（htm標(biāo)簽）加載完畢后，就執(zhí)行
onload加載事件在dom結(jié)構(gòu)（htm標(biāo)簽）及引入的外部資源（js文件、css文件等）加載完畢之后才執(zhí)行

示例：

<script type="text/javascript">         
    // JS
    window.onload = function() {
        console.log("js的預(yù)加載事件....");
    }           
    // jquery
    $(document).ready(function(){
        console.log("jquery的預(yù)加載事件....");
        console.log($("#mydiv"));
    });     
    $(function(){
        console.log("jquery的預(yù)加載事件2....");
    }); 
</script>
<body>
    <div id="mydiv">
        預(yù)加載事件
    </div>
</body> 
//打印結(jié)果
js的預(yù)加載事件....
10-ready加載事件.html?__hbt=1559225739497:16 jquery的預(yù)加載事件....
10-ready加載事件.html?__hbt=1559225739497:17 jQuery.fn.init(1)
10-ready加載事件.html?__hbt=1559225739497:21 jquery的預(yù)加載事件2....

2、綁定事件

bind()綁定元素事件
為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。
$(selector).bind( eventType [, eventData], handler(eventObject))
eventType ：是一個(gè)字符串類(lèi)型的事件類(lèi)型，就是你所需要綁定的事件。這類(lèi)類(lèi)型可
以包括如下：
    blur, focus, focusin, focusout, load, resize, scroll, unload, click, 
    dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, 
    mouseleave,change, select, submit, keydown, keypress, keyup, error [, eventData]：傳遞的參數(shù)，格式：{名:值,名 2:值 2}
    handler(eventObject)：該事件觸發(fā)執(zhí)行的函數(shù)
            
1.確定為哪些元素綁定事件
    獲取元素
2.綁定什么事件（事件類(lèi)型）
    第一個(gè)參數(shù)：事件的類(lèi)型
3.相應(yīng)事件觸發(fā)的，執(zhí)行的操作
    第二個(gè)參數(shù)：函數(shù)

3、總結(jié)與注意：
* 綁定事件只能使用匿名綁定或者使用已聲明的方法時(shí)不能加括號(hào)

        function test(){
            console.log(1);
        }
            //綁定成功
        $("#btn1").click(function(){
            test();
        })
        $("#btn2").click(test);
        //綁定失敗
        $("#btn2").click(test());

    *  jQuery中each

類(lèi)似于javascript的for循環(huán) ，但不同于for循環(huán)的是在each里面不能使用break結(jié)束循環(huán)，也不能使用continue來(lái)結(jié)束本次循環(huán)，想要實(shí)現(xiàn)類(lèi)似的功能就只能用return,
break 用return false
continue 用return true