摘要：如下就是對象或是如下以下兩者的修改都是等價的但是使用不能很好的操作，所以可以將其轉換成對象把元素轉化成的對象總體，表示當前的上下文對象是一個對象，可以調用對象所擁有的屬性和方法。代表的上下文對象是一個的上下文對象，可以調用的方法和屬性值。

通過標準的JavaScript操作DOM與jQuyer操作DOM的對比，我們不難發現：
通過jQuery方法包裝后的對象，是jQuery對象，它是一個新的對象
jQuery與DOM對象完全不是同一個東西，但是又似曾相似，因為他們都能處理DOM
通過jQuery處理DOM的操作，可以讓開發者更專注業務邏輯的開發，而不需要我們
具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的兼容問題，
我們可以通過jQuery更友好的API進行開發，同時代碼也會更加精短

ps : jQuery 是 一個類數組對象，而 DOM 對象是一個多帶帶的DOM 元素

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

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

//通過jQuery自帶的get()方法
//jQuery對象自身提供一個.get() 方法允許我們直接訪問jQuery對象中相關的DOM節點，
//get方法中提供一個元素的索引：

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

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

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

div 得到的是 Dom 集合對象，有三個div元素，通過 $(div)轉換成 jquery 對象；

4.1選擇器：

$( "#id" )  // jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。
$( ".class" )   // class 選擇器
$( "element" ) // 節點選擇器

4.2層級選擇器：

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

4.3基本篩選選擇器：不是 css規范 是 jquery 擴展的

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

4.4 內容篩選選擇器：

4.5 可見性篩選選擇器：

4.6 屬性選擇器：

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

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

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

4.8 表單對象屬性選擇器：主要是對所選的表單元素進行篩選：

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

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

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

或是如下：

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

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

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

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

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

還可以利用 方法作為參數回調：

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

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

.text()方法

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

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

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

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

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

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

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

當函數內部沒有 return （return "imoocClass";）時， 那么 函數只是做遍歷操作，沒有真正移除 className ，只有 return 了，才將 return 的 className 移除。

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

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

注意事項：

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

css() 方法：獲取元素樣式屬性的計算值或者設置元素的CSS屬性
獲取：
.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames )：傳遞一組數組，返回一個對象結果
設置：
 .css(propertyName, value )：設置CSS
.css( propertyName, function )：可以傳入一個回調函數，返回取到對應的值進行處理
.css( properties )：可以傳一個對象，同時設置多個樣式

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

//獲取尺寸，傳入CSS屬性組成的一個數組

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

//獲取到指定元素的寬度，在回調返回寬度值 函數方式

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

樣式的優先級：

css的樣式是有優先級的，當外部樣式、內部樣式和內聯樣式同一樣式規則同時應用于同一個元素的時候，優先級如下
外部樣式 < 內部樣式 < 內聯樣式

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

通過.css方法設置的樣式屬性優先級要高于.addClass方法

jQuery提供的存儲接口
jQuery.data( element, key, value )   //靜態接口,存數據
jQuery.data( element, key )  //靜態接口,取數據   
.data( key, value ) //實例接口,存數據
.data( key ) //實例接口,存數據

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