1：$(document).ready 的作用是等頁面的文檔（document）中的節(jié)點都加載完畢后，再執(zhí)行后續(xù)的代碼郊愧，因為我們在執(zhí)行代碼的時候朴译，可能會依賴頁面的某一個元素，我們要確保這個元素真正的的被加載完畢后才能正確的使用属铁。

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

2:jQuery對象與DOM對象是不一樣的
通過原生DOM模型提供的document.getElementById() 方法獲取的DOM元素就是一個DOM對象眠寿，再通過innerHTML與style屬性處理文本與顏色。

var p = document.getElementById('imooc');
p.innerHTML = '您好焦蘑！通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑';
p.style.color = 'red';

通過$('#')方法會得到的jQuery對象盯拱，是一個類數(shù)組對象。這個對象里面包含了DOM對象的信息例嘱，然后封裝了很多操作方法狡逢，調(diào)用自己的方法html與css，得到的效果與標(biāo)準(zhǔn)的JavaScript處理結(jié)果是一致的拼卵。

var p = $('#imooc');
p.html('您好奢浑！通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑').css('color','red');

3:jQuery對象轉(zhuǎn)化成DOM對象
jQuery是一個類數(shù)組對象，而DOM對象就是一個單獨的DOM元素腋腮。我們可以使用下面兩種方法將jQuery對象轉(zhuǎn)化為DOM對象雀彼。

var $div = $('div') //jQuery對象
var div = $div[0] //轉(zhuǎn)化成DOM對象
div.style.color = 'red' //操作dom對象的屬性
或者
var $div = $('div') //jQuery對象
var div = $div.get(0) //通過get方法壤蚜，轉(zhuǎn)化成DOM對象
div.style.color = 'red' //操作dom對象的屬性

4:DOM對象轉(zhuǎn)化成jQuery對象
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象

5:jQuery選擇器之層級選擇器

image.png

重點關(guān)注：相鄰兄弟選擇器 +

6:jQuery選擇器之基本篩選選擇器
篩選選擇器的用法與CSS中的偽元素相似徊哑，選擇器用冒號“：”開頭袜刷，通過一個列表，看看基本篩選器的描述：

image.png

7：jQuery選擇器之內(nèi)容篩選選擇器

image.png

注意事項：

1莺丑，:contains與:has都有查找的意思著蟹，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
2窒盐，如果:contains匹配的文本包含在元素的子元素中草则，同樣認為是符合條件的。
3蟹漓，:parent與:empty是相反的炕横，兩者所涉及的子元素，包括文本節(jié)點

$(".div:contains(':contains')")
$(".div:has(span)")
$("a:parent")
$("a:empty")

8:jQuery選擇器之可見性篩選選擇器
元素有顯示狀態(tài)與隱藏狀態(tài)葡粒，jQuery根據(jù)元素的狀態(tài)擴展了可見性篩選選擇器:visible與:hidden

描述如下：

image.png

這2個選擇器都是 jQuery 延伸出來的份殿，看起來比較簡單，但是元素可見性依賴于適用的樣式

:hidden選擇器嗽交，不僅僅包含樣式是display="none"的元素卿嘲，還包括隱藏表單、visibility等等
我們有幾種方式可以隱藏一個元素：

CSS display的值是none夫壁。
type="hidden"的表單元素拾枣。
寬度和高度都顯式設(shè)置為0。
一個祖先元素是隱藏的盒让，該元素是不會在頁面上顯示
CSS visibility的值是hidden
CSS opacity的指是0
如果元素中占據(jù)文檔中一定的空間,元素被認為是可見的梅肤。
可見元素的寬度或高度，是大于零邑茄。
元素的visibility: hidden 或 opacity: 0被認為是可見的姨蝴，因為他們?nèi)匀徽加每臻g布局。
不在文檔中的元素是被認為是不可見的肺缕，如果當(dāng)他們被插入到文檔中左医，jQuery沒有辦法知道他們是否是可見的，因為元素可見性依賴于適用的樣式

9:jQuery選擇器之屬性篩選選擇器

image.png

 $('div[name=p1]')

10:jQuery選擇器之子元素篩選選擇器

image.png

注意事項：

:first只匹配一個單獨的元素同木，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素浮梢。這相當(dāng)于:nth-child(1)
:last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即彤路，為每個父級元素匹配最后一個子元素
如果子元素只有一個的話黔寇，:first-child與:last-child是同一個
:only-child匹配某個元素是父元素中唯一的子元素，就是說當(dāng)前子元素是父元素中唯一的元素斩萌，則匹配
jQuery實現(xiàn):nth-child(n)是嚴(yán)格來自CSS規(guī)范缝裤，所以n值是“索引”，也就是說颊郎，從1開始計數(shù)憋飞，:nth-child(index)從1開始的，而eq(index)是從0開始的
nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計算姆吭，后者從后往前計算

查找class="first-div"下的只有一個子元素的a元素
 $('.first-div a:only-child')
查找class="last-div"下的第二個a元素
$('.last-div a:nth-child(2)')
查找class="last-div"下的倒數(shù)第二個a元素
$('.last-div a:nth-last-child(2)')

11:jQuery選擇器之表單元素選擇器

image.png

注意事項：

除了input篩選選擇器榛做，幾乎每個表單類別篩選器都對應(yīng)一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換内狸。比如 $(':password') == $('[type=password]')

匹配所有input元素中的復(fù)選按鈕,并選中
$('input:checkbox')

12:jQuery選擇器之表單對象屬性篩選選擇器

image.png

選擇器適用于復(fù)選框和單選框检眯，對于下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素昆淡，所以保險起見換用選擇器input:checked锰瘸，確保只會選取<input>元素

$('input:checked')

13:jQuery的屬性與樣式之.attr()與.removeAttr()

jQuery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經(jīng)常用到attr()

attr()有4個表達式

attr(傳入屬性名)：獲取屬性的值
attr(屬性名, 屬性值)：設(shè)置屬性的值
attr(屬性名,函數(shù)值)：設(shè)置屬性的函數(shù)值
attr(attributes)：給指定元素設(shè)置多個屬性值昂灵，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }
removeAttr()刪除方法

.removeAttr( attributeName ) :
為匹配的元素集合中的每個元素中移除一個屬性（attribute）

14:jQuery的屬性與樣式之html()及.text()

.html()方法

獲取集合中第一個匹配元素的HTML內(nèi)容 或 設(shè)置每一個匹配元素的html內(nèi)容避凝，具體有3種用法：

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

.text()方法

得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合眨补，包括他們的后代管削，或設(shè)置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容。撑螺，具體有3種用法：

.text() 得到匹配元素集合中每個元素的合并文本含思，包括他們的后代
.text( textString ) 用于設(shè)置匹配元素內(nèi)容的文本
.text( function(index, text) ) 用來返回設(shè)置文本內(nèi)容的一個函數(shù)

15:jQuery的屬性與樣式之.val()

jQuery中有一個.val()方法主要是用于處理表單元素的值，比如 input, select 和 textarea甘晤。

.val()方法

.val()無參數(shù)含潘，獲取匹配的元素集合中第一個元素的當(dāng)前值
.val( value )，設(shè)置匹配的元素集合中每個元素的值
.val( function ) 安皱，一個用來返回設(shè)置值的函數(shù)
注意事項：

通過.val()處理select元素调鬓， 當(dāng)沒有選擇項被選中，它返回null
.val()方法多用來設(shè)置表單的字段的值
如果select元素有multiple（多選）屬性酌伊，并且至少一個選擇項被選中腾窝， .val()方法返回一個數(shù)組，這個數(shù)組包含每個選中選擇項的值

16: jQuery的屬性與樣式之增加樣式.addClass()
.addClass( className )方法

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

.addClass()方法不會替換一個樣式類名居砖。它只是簡單的添加一個樣式類名到元素上
簡單的描述下：在p元素增加一個newClass的樣式

<p class="orgClass">
$("p").addClass("newClass")

那么p元素的class實際上是 class="orgClass newClass"樣式只會在原本的類上繼續(xù)增加虹脯，通過空格分隔

17:jQuery的屬性與樣式之刪除樣式.removeClass()

removeClass()，它的作用是從匹配的元素中刪除全部或者指定的class

.removeClass( )方法

.removeClass( [className ] )：每個匹配元素移除的一個或多個用空格隔開的樣式名
.removeClass( function(index, class) ) ： 一個函數(shù)奏候，返回一個或多個將要被移除的樣式名
注意事項

如果一個樣式類名作為一個參數(shù),只有這樣式類會被從匹配的元素集合中刪除 循集。 如果沒有樣式名作為參數(shù)，那么所有的樣式類將被移除

18:jQuery的屬性與樣式之切換樣式.toggleClass()

在做某些效果的時候蔗草，可能會針對同一節(jié)點的某一個樣式不斷的切換咒彤，也就是addClass與removeClass的互斥切換疆柔，比如隔行換色效果

jQuery提供一個toggleClass方法用于簡化這種互斥的邏輯，通過toggleClass方法動態(tài)添加刪除Class镶柱，一次執(zhí)行相當(dāng)于addClass旷档，再次執(zhí)行相當(dāng)于removeClass

.toggleClass( )方法：在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類

.toggleClass( className )：在匹配的元素集合中的每個元素上用來切換的一個或多個（用空格隔開）樣式類名
.toggleClass( className, switch )：一個布爾值歇拆，用于判斷樣式是否應(yīng)該被添加或移除
.toggleClass( [switch ] )：一個用來判斷樣式類添加還是移除的 布爾值
.toggleClass( function(index, class, switch) [, switch ] )：用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數(shù)鞋屈。接收元素的索引位置和元素舊的樣式類作為參數(shù)
注意事項：

toggleClass是一個互斥的邏輯，也就是通過判斷對應(yīng)的元素上是否存在指定的Class名故觅，如果有就刪除厂庇，如果沒有就增加
toggleClass會保留原有的Class名后新增，通過空格隔開

19:jQuery的屬性與樣式之樣式操作.css()

在jQuery中我們要動態(tài)的修改style屬性我們只要使用css()方法就可以實現(xiàn)了

.css() 方法：獲取元素樣式屬性的計算值或者設(shè)置元素的CSS屬性

獲仁淅簟：

.css( propertyName ) ：獲取匹配元素集合中的第一個元素的樣式屬性的計算值
.css( propertyNames )：傳遞一組數(shù)組权旷，返回一個對象結(jié)果
設(shè)置：

.css(propertyName, value )：設(shè)置CSS
.css( propertyName, function )：可以傳入一個回調(diào)函數(shù)，返回取到對應(yīng)的值進行處理
.css( properties )：可以傳一個對象评也，同時設(shè)置多個樣式
注意事項：

瀏覽器屬性獲取方式不同炼杖，在獲取某些值的時候都jQuery采用統(tǒng)一的處理，比如顏色采用RBG盗迟，尺寸采用px
.css()方法支持駝峰寫法與大小寫混搭的寫法坤邪，內(nèi)部做了容錯的處理
當(dāng)一個數(shù)只被作為值（value）的時候， jQuery會將其轉(zhuǎn)換為一個字符串罚缕，并添在字符串的結(jié)尾處添加px艇纺，例如 .css("width",50}) 與 .css("width","50px"})一樣

合并設(shè)置,通過對象傳設(shè)置多個樣式
css({
            'font-size'        :"15px",
            "background-color" :"#40E0D0",
            "border"           :"1px solid red"
        })

20: jQuery的屬性與樣式之元素的數(shù)據(jù)存儲
jQuery提供的存儲接口

jQuery.data( element, key, value ) //靜態(tài)接口,存數(shù)據(jù)
jQuery.data( element, key ) //靜態(tài)接口,取數(shù)據(jù)
.data( key, value ) //實例接口,存數(shù)據(jù)
.data( key ) //實例接口,存數(shù)據(jù)
2個方法在使用上存取都是通一個接口，傳遞元素邮弹，鍵值數(shù)據(jù)黔衡。在jQuery的官方文檔中，建議用.data()方法來代替腌乡。

我們把DOM可以看作一個對象盟劫，那么我們往對象上是可以存在基本類型，引用類型的數(shù)據(jù)的与纽，但是這里會引發(fā)一個問題侣签，可能會存在循環(huán)引用的內(nèi)存泄漏風(fēng)險

通過jQuery提供的數(shù)據(jù)接口，就很好的處理了這個問題了急迂，我們不需要關(guān)心它底層是如何實現(xiàn)影所，只需要按照對應(yīng)的data方法使用就行了

同樣的也提供2個對應(yīng)的刪除接口，使用上與data方法其實是一致的僚碎，只不過是一個是增加一個是刪除罷了

jQuery.removeData( element [, name ] )
.removeData( [name ] )

<script type="text/javascript">
    $('.left').click(function() {
        var ele = $(this);
        //通過$.data方式設(shè)置數(shù)據(jù)
        $.data(ele, "a", "data test")
        $.data(ele, "b", {
            name : "慕課網(wǎng)"
        })
        //通過$.data方式取出數(shù)據(jù)
        var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
        ele.find('span').append(reset)
    })
    </script>
    <script type="text/javascript">
    $('.right').click(function() {
        var ele = $(this);
        //通過.data方式設(shè)置數(shù)據(jù)
        ele.data("a", "data test")
        ele.data("b", {
            name: "慕課網(wǎng)"
        })
        //通過.data方式取出數(shù)據(jù)
        var reset = ele.data("a") + "</br>" + ele.data("b").name
        ele.find('span').append(reset)
    })
    </script>