摘要：如下就是對(duì)象或是如下以下兩者的修改都是等價(jià)的但是使用不能很好的操作，所以可以將其轉(zhuǎn)換成對(duì)象把元素轉(zhuǎn)化成的對(duì)象總體，表示當(dāng)前的上下文對(duì)象是一個(gè)對(duì)象，可以調(diào)用對(duì)象所擁有的屬性和方法。代表的上下文對(duì)象是一個(gè)的上下文對(duì)象，可以調(diào)用的方法和屬性值。

通過標(biāo)準(zhǔn)的JavaScript操作DOM與jQuyer操作DOM的對(duì)比，我們不難發(fā)現(xiàn)：
通過jQuery方法包裝后的對(duì)象，是jQuery對(duì)象，它是一個(gè)新的對(duì)象
jQuery與DOM對(duì)象完全不是同一個(gè)東西，但是又似曾相似，因?yàn)樗麄兌寄芴幚鞤OM
通過jQuery處理DOM的操作，可以讓開發(fā)者更專注業(yè)務(wù)邏輯的開發(fā)，而不需要我們
具體知道哪個(gè)DOM節(jié)點(diǎn)有那些方法，也不需要關(guān)心不同瀏覽器的兼容問題，
我們可以通過jQuery更友好的API進(jìn)行開發(fā)，同時(shí)代碼也會(huì)更加精短

ps : jQuery 是 一個(gè)類數(shù)組對(duì)象，而 DOM 對(duì)象是一個(gè)多帶帶的DOM 元素

//HTML代碼
元素一
元素二
元素三

//JavaScript代碼
var $div = $("div") //jQuery對(duì)象
var div = $div[0] //轉(zhuǎn)化成DOM對(duì)象
div.style.color = "red" //操作dom對(duì)象的屬性

//通過jQuery自帶的get()方法
//jQuery對(duì)象自身提供一個(gè).get() 方法允許我們直接訪問jQuery對(duì)象中相關(guān)的DOM節(jié)點(diǎn)，
//get方法中提供一個(gè)元素的索引：

var $div = $("div") //jQuery對(duì)象
var div = $div.get(0) //通過get方法，轉(zhuǎn)化成DOM對(duì)象
div.style.color = "red" //操作dom對(duì)象的屬性

$("div") 語句得到的是 一個(gè)類數(shù)組對(duì)象，里面存放著多個(gè) dom 元素

//HTML代碼
元素一
元素二
元素三
//JavaScript代碼
var div = document.getElementsByTagName("div"); //dom對(duì)象
var $div = $(div); //jQuery對(duì)象
var $first = $div.first(); //找到第一個(gè)div元素
$first.css("color", "red"); //給第一個(gè)元素設(shè)置顏色

div 得到的是 Dom 集合對(duì)象，有三個(gè)div元素，通過 $(div)轉(zhuǎn)換成 jquery 對(duì)象；

4.1選擇器：

$( "#id" )  // jQuery內(nèi)部使用JavaScript函數(shù)document.getElementById()來處理ID的獲取。
$( ".class" )   // class 選擇器
$( "element" ) // 節(jié)點(diǎn)選擇器

4.2層級(jí)選擇器：

$("div > p")   div 里面的 第一個(gè) p 元素    子選擇器、 
$("div p")   div 里面的 所有 p 元素     后代選擇器、 
$(".prev + div")   跟 類  .prev 同級(jí)的 第一個(gè)兄弟元素   相鄰兄弟選擇器、 
$(".prev ~ div")   跟 類  .prev 同級(jí)的 所有兄弟元素   一般兄弟選擇器

4.3基本篩選選擇器：不是 css規(guī)范 是 jquery 擴(kuò)展的

$(".div:first")   class為div的第一個(gè)元素 $(".div:last")    class為div的最后一個(gè)元素
$(".div:even")    class為div的 偶數(shù) 元素 $(".div:odd")    class為div的 奇數(shù) 元素
$(".aaron:eq(2)")    class為 aaron 的 第三個(gè)元素 $(".aaron:gt(3)")    class為
aaron 的 大于 4的所有元素 $(".aaron:lt(2)")   class為 aaron 的 小于 3的所有元素
$("input:not(:checked) + p")  所有 沒被選中的 input 元素

4.4 內(nèi)容篩選選擇器：

4.5 可見性篩選選擇器：

4.6 屬性選擇器：

在這么多屬性選擇器中[attr="value"]和[attr*="value"]是最實(shí)用的
[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件

4.7 表單元素選擇器：這個(gè)在表單提交還是挺有用的！

$(":input")   :input 選擇器基本上選擇所有表單控件
$("input:text")
$("input:password") 
$("input:radio")
$("input:checkbox") 
$("input:submit") 
$("input:image")
$("input:button") 
$("input:file")

4.8 表單對(duì)象屬性選擇器：主要是對(duì)所選的表單元素進(jìn)行篩選：

$("input:enabled")
$("input:disabled") 
$("input:checked")
$("option:selected")

4.9 特殊選擇器 this：
$(this) 和 this 有什么區(qū)別呢？
this 是 javascript 的 關(guān)鍵字，只當(dāng)前的上下文對(duì)象，簡單的說就是 方法和 屬性的所有者。
如下：

var SF = {
    name:"SFxx",
    getName:function(){
        //this,就是imooc對(duì)象
        return this.name;
    }
}
imooc.getName(); //SFxx

或是如下：

p.addEventListener("click",function(){
    //this === p
    //以下兩者的修改都是等價(jià)的
    this.style.color = "red";
    p.style.color = "red";
},false);

但是 使用 this 不能很好的操作 Dom ，所以可以將其轉(zhuǎn)換成 jquery 對(duì)象！ var $this= $(this)

$("p").click(function(){
    //把p元素轉(zhuǎn)化成jQuery的對(duì)象
    var $this= $(this) 
    $this.css("color","red")
})

總體：
this，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象，可以調(diào)用html對(duì)象所擁有的屬性和方法。
$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象，可以調(diào)用jQuery的方法和屬性值。

attr()有4個(gè)表達(dá)式
attr(傳入屬性名)：獲取屬性的值
attr(屬性名, 屬性值)：設(shè)置屬性的值
attr(屬性名,函數(shù)值)：設(shè)置屬性的函數(shù)值
attr(attributes)：給指定元素設(shè)置多個(gè)屬性值，即：{屬性名一: “屬性值一” , 
屬性名二: “屬性值二” , … … }
removeAttr()刪除方法
.removeAttr( attributeName ) : 為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）

還可以利用 方法作為參數(shù)回調(diào)：

.html()方法 
獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 或 設(shè)置每一個(gè)匹配元素的html內(nèi)容，具體有3種用法：
.html() 不傳入值，就是獲取集合中第一個(gè)匹配元素的HTML內(nèi)容
.html( htmlString )  設(shè)置每一個(gè)匹配元素的html內(nèi)容
.html( function(index, oldhtml) ) 用來返回設(shè)置HTML內(nèi)容的一個(gè)函數(shù)

.htm()方法內(nèi)部使用的是DOM的innerHTML屬性來處理的，所以在設(shè)置與獲取上需要注意的一個(gè)最重要的問題，這個(gè)操作是針對(duì)整個(gè)HTML內(nèi)容（不僅僅只是文本內(nèi)容）

.text()方法

得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合，包括他們的后代，
或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容。，具體有3種用法：
.text() 得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代
.text( textString ) 用于設(shè)置匹配元素內(nèi)容的文本
.text( function(index, text) ) 用來返回設(shè)置文本內(nèi)容的一個(gè)函數(shù)

jQuery中有一個(gè).val()方法主要是用于處理表單元素的值，
比如 input, select 和 textarea。
.val()方法
.val()無參數(shù)，獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值
.val( value )，設(shè)置匹配的元素集合中每個(gè)元素的值
.val( function ) ，一個(gè)用來返回設(shè)置值的函數(shù)

.html(),.text()和.val()的差異總結(jié)：  
.html(),.text(),.val()三種方法都是用來讀取選定元素的內(nèi)容；只不過.html()是用來讀取元素的html內(nèi)容（包括html標(biāo)簽），.text()用來讀取元素的純文本內(nèi)容，包括其后代元素，.val()是用來讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個(gè)元素上時(shí)，只讀取第一個(gè)元素；.val()方法和.html()相同，如果其應(yīng)用在多個(gè)元素上時(shí)，只能讀取第一個(gè)表單元素的"value"值，但是.text()和他們不一樣，如果.text()應(yīng)用在多個(gè)元素上時(shí)，將會(huì)讀取所有選中元素的文本內(nèi)容。
.html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容。
.html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容。

.addClass( className )方法
.addClass( className ) : 為每個(gè)匹配元素所要增加的一個(gè)或多個(gè)樣式名
.addClass( function(index, currentClass) ) : 這個(gè)函數(shù)返回一個(gè)或更多
用空格隔開的要增加的樣式名

下面是通過 函數(shù)返回一個(gè)或多個(gè) className ,
.addClass(函數(shù))， 函數(shù)內(nèi)部會(huì)執(zhí)行循環(huán)操作，遍歷 所有查找到的 ‘div’元素， 元素的索引 為參數(shù)index，元素的 className 為 className；

      $("div").addClass(function(index,className) {
                    //找到類名中包含了imooc的元素
                    if(-1 !== className.indexOf("bb")){
                        //this指向匹配元素集合中的當(dāng)前元素
                        $(this).addClass("imoocClass")
                    }
                });

.removeClass( )方法
.removeClass( [className ] )：每個(gè)匹配元素移除的一個(gè)或多個(gè)用空格隔開的樣式名
.removeClass( function(index, class) ) ： 一個(gè)函數(shù)，返回一個(gè)或多個(gè)將要被移除的樣式名
注意事項(xiàng)
如果一個(gè)樣式類名作為一個(gè)參數(shù),只有這樣式類會(huì)被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數(shù)，那么所有的樣式類將被移除

當(dāng)函數(shù)內(nèi)部沒有 return （return "imoocClass";）時(shí)， 那么 函數(shù)只是做遍歷操作，沒有真正移除 className ，只有 return 了，才將 return 的 className 移除。

  //.removeClass() 方法允許我們指定一個(gè)函數(shù)作為參數(shù)，返回將要被刪除的樣式
        $(".right > div:first").removeClass(function(index,className){
            
            //className = aa bb imoocClass
            //把div的className賦給下一個(gè)兄弟元素div上作為它的class
            $(this).next().addClass(className)
            //刪除自己本身的imoocClass
            return "imoocClass";
        })

.toggleClass( )方法：在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類
.toggleClass( className )：在匹配的元素集合中的每個(gè)元素上用來切換的一個(gè)或多個(gè)（用空格隔開）樣式類名
.toggleClass( className, switch )：一個(gè)布爾值，用于判斷樣式是否應(yīng)該被添加或移除
.toggleClass( [switch ] )：一個(gè)用來判斷樣式類添加還是移除的 布爾值
.toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個(gè)元素上用來切換的樣式類名的一個(gè)函數(shù)。接收元素的索引位置和元素舊的樣式類作為參數(shù)

注意事項(xiàng)：

toggleClass是一個(gè)互斥的邏輯，也就是通過判斷對(duì)應(yīng)的元素上是否存在指定的Class名，如果有就刪除，如果沒有就增加
toggleClass會(huì)保留原有的Class名后新增，通過空格隔開
//第二個(gè)參數(shù)判斷樣式類是否應(yīng)該被添加或刪除
    //true，那么這個(gè)樣式類將被添加;
    //false，那么這個(gè)樣式類將被移除
    //所有的奇數(shù)tr元素，應(yīng)該都保留class="c"樣式
    $("#table tr:even").toggleClass("c", true); //這個(gè)操作沒有變化，因?yàn)闃邮揭呀?jīng)是存在的

css() 方法：獲取元素樣式屬性的計(jì)算值或者設(shè)置元素的CSS屬性
獲?。?.css( propertyName ) ：獲取匹配元素集合中的第一個(gè)元素的樣式屬性的計(jì)算值
.css( propertyNames )：傳遞一組數(shù)組，返回一個(gè)對(duì)象結(jié)果
設(shè)置：
 .css(propertyName, value )：設(shè)置CSS
.css( propertyName, function )：可以傳入一個(gè)回調(diào)函數(shù)，返回取到對(duì)應(yīng)的值進(jìn)行處理
.css( properties )：可以傳一個(gè)對(duì)象，同時(shí)設(shè)置多個(gè)樣式

容錯(cuò)處理 ：例如 .css("width",50}) 與 .css("width","50px"})一樣.

//獲取尺寸，傳入CSS屬性組成的一個(gè)數(shù)組

    //{width: "60px", height: "60px"}    
    var value = $(".first").css(["width","height"]);
//合并設(shè)置,通過對(duì)象傳設(shè)置多個(gè)樣式
    $(".seventh").css({
        "font-size"        :"15px",
        "background-color" :"#40E0D0",
        "border"           :"1px solid red"
    })

//獲取到指定元素的寬度，在回調(diào)返回寬度值 函數(shù)方式

    //通過處理這個(gè)value，重新設(shè)置新的寬度
    $(".sixth").css("width",function(index,value){
        //value帶單位，先分解
        value = value.split("px");
        //返回一個(gè)新的值，在原有的值上，增加50px
        return (Number(value[0]) + 50) + value[1];
    })

樣式的優(yōu)先級(jí)：

css的樣式是有優(yōu)先級(jí)的，當(dāng)外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同一樣式規(guī)則同時(shí)應(yīng)用于同一個(gè)元素的時(shí)候，優(yōu)先級(jí)如下
外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式

.addClass()方法是通過增加class名的方式，那么這個(gè)樣式是在外部文件或者內(nèi)部樣式中先定義好的，等到需要的時(shí)候在附加到元素上
通過.css()方法處理的是內(nèi)聯(lián)樣式，直接通過元素的style屬性附加到元素上的

通過.css方法設(shè)置的樣式屬性優(yōu)先級(jí)要高于.addClass方法

jQuery提供的存儲(chǔ)接口
jQuery.data( element, key, value )   //靜態(tài)接口,存數(shù)據(jù)
jQuery.data( element, key )  //靜態(tài)接口,取數(shù)據(jù)   
.data( key, value ) //實(shí)例接口,存數(shù)據(jù)
.data( key ) //實(shí)例接口,存數(shù)據(jù)

同樣的也提供2個(gè)對(duì)應(yīng)的刪除接口，使用上與data方法其實(shí)是一致的，只不過是一個(gè)是增加一個(gè)是刪除罷了
jQuery.removeData( element [, name ] )
.removeData( [name ] )