1.jquery多class層級選擇元素的實現以及模糊匹配
$(‘.class1 .class2‘) 選擇class1元素下class2的元素（中間有空格）;
$(‘.class1.class2‘) 選擇同時含有class1和class2的元素（中間沒有空格）;
$(‘.class1,.class2‘) 選擇class1或者class2的元素（中間有逗號）.
1.class前綴爲percentAge的所有div的jquery對象
$("div[class^='percentAge']");
2.class後綴爲percentAge的所有div的jquery對象
$("div[class$='percentAge']");
3.class中包含percentAge的所有div的jquery對象
$("div[class*='percentAge']");
2.jquery 的鼠標事件
鼠標事件是在用戶移動鼠標光標或者使用任意鼠標鍵點擊時觸發的。
(1):click事件：click事件於用戶在元素敲擊鼠標左鍵，並在相同元素上鬆開左鍵時觸發。
$('p').click(function(){
alert('click function is running !');
});
(2):dbclick事件：dbclick事件在用戶完成迅速連續的兩次點擊之後觸發，雙擊的速度取決於操作系統的設置。一般雙擊事件在頁面中不經常使用。
$('p').dbclick(function(){
alert('dbclick function is running !');
});
(3):mousedown事件：mousedown事件在用戶敲擊鼠標鍵時觸發，跟keydown事件不一樣，該事件僅在按下鼠標時觸發。
$('p').mousedown(function(){
alert('mousedown function is running !');
});
(4):mouseup事件：mouseup事件在用戶鬆開鼠標時觸發，如果在與按下鼠標的元素相同元素上鬆開，那麼click事件也會觸發。
$('p').mouseup(function(){
alert('mouseup function is running !');
}).click(function(){
alert('click function is running too !');
});
(5):mouseover事件：mouseover事件於用戶把鼠標從一個元素移動到另外一個元素上時觸發，如果需要知道來自那個元素可以使用，relatedTagrget屬性。
(6):mouseout事件：mouseout事件於用戶把鼠標移出一個元素時觸發，這包括從父元素移動到子元素上，或者使用鍵盤跳到元素上。
(5)和(6)這兩個事件一般不常用，很難實現與用戶的交互，也就是說不易捕獲用戶事件。
(7):mouseenter事件：mouseenter事件是在用戶光標進入元素上時觸發。
$('p').mouseenter(function(){
alert('mouseenter function is running !');
});
(8):mouseleaver事件：mouseleaver事件是在用戶的光標離開元素時觸發。
$('p').mouseleaver(function(){
alert('mouseleaver function is running !');
});
(7)和(8)這兩個事件一般連起來使用，在jQuery中可以使用hover這個函數來代替這兩個函數。
$('p').hover(function(){
alert('mouseenter function is running !');
},function(){
alert('mouseleaver function is running !');
});
3.jquery之樣式學習
一、選擇器
jquery選擇器
jquery選擇器之id選擇器 $("#id")
jquery選擇器之類選擇器 $(".class")
jquery選擇器之元素選擇器 $("div")
jquery選擇器之全選擇器 $("*")
jquery選擇器之層級選擇器：
子元素 $("div > p")
後代元素 $("div p")
兄弟元素 $(".prev+div") 選取prev後面的第一個的div兄弟節點
相鄰元素 $(".prev ~ div") 選取prev後面的所有的div兄弟節點
篩選選擇器：
$(":first")匹配第一個元素 例如:$(".div:first") $("div:first") $("#div:first")
$(":last")匹配最後一個元素 例如:$(".div:last")
$(":even")選擇索引值爲偶數的元素,從0開始計算 例如:$(".div:even")
$(":odd")選擇索引值爲奇數的元素,從0開始計算 例如: $(".div:odd")
$(":not(selector)")"一個用來過濾的選擇器,選擇所有元素去除不匹配給到的選擇器元素 例如: $("input:not(:checked)+p")
//:not 選擇所有元素去除不匹配給定的選擇器的元素
//選中所有緊接着沒有checked屬性的input元素後的p元素，賦予顏色
$(":eq(index)")在匹配的集合中選擇索引值爲index的元素 例如:$(".aaron:eq(2)")
$(":gt(index)")選擇匹配集合中所有大於給定index(索引值) 的元素 例如: $(".aaron:gt(3)")
$(":lt(index)")選擇匹配集合中所有索引值小於給定index參數的元素 例如:$(".aaron:lt(2)")
$(":header")選擇所有標題元素 像h1...h6等 例如:
$(":lang(language)")選擇指定語言的所有元素 例如:
$(":root")選擇該文檔的根元素 例如:
$(":animated")選擇所有正在執行動畫效果的元素 例如:
備註：:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引。gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始
內容選擇器：
$(":contains(text)") 選擇所有包含指定文本的元素 例如： $(".div:contains(':contains')") 查找所有class='div'中DOM元素中包含"contains"的元素節點
$(":parent")選擇所有包含子元素或者文本的元素 例如： $("a:parent")選擇所有包含子元素或者文本的a元素
$(":empty")選擇所有沒有子元素的元素(包含文本節點) 例如：$("a:empty")找到a元素下面的所有空節點(沒有子元素)
$(":has(selector)")選擇元素中至少包含指定選擇器的元素 例如：$(".div:has(span)")查找所有class='div'中DOM元素中包含"span"的元素節點
可見性篩選選擇器:
$(":visible") 選擇所有顯示的元素 $("#div1:visible")
$(":hidden")選擇所有隱藏的元素
備註：:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等
display的值是none。
type="hidden"的表單元素。
寬度和高度都顯式設置爲0。
一個祖先元素是隱藏的，該元素是不會在頁面上顯示
CSS visibility的值是hidden
CSS opacity的指是0
屬性篩選選擇器:
$("[attribute|='value']")選擇指定屬性值等於給定字符串或以該文字串爲前綴(該字符串後跟一個連定字符'-')的元素 $("div[name|='-']")查找所有div中，有屬性name中的值只包含一個連字符“-”的div元素
$("[attribute*='value']")選擇指定屬性具有包含一個給定的子字符串的元素(選擇給定的屬性是以包含某些值的元素)$("div[name*='test']")查找所有div中，有屬性name中的值包含一個test字符串的div元素
$("[attribute~='value']")選擇指定屬性用空格分隔的值中包含一個給定的元素 $('div[name~="a"]')查找所有div中，有屬性name中的值包含一個連字符“空”和“a”的div元素
$("[attribute='value']")選擇指定屬性是給定值的元素$("div[name=p1]")
$("[attribute!='value']")選擇不存在指定屬性，或者指定的屬性值不等於給定指的元素$("div[testattr!='true']")查找所有div中，有屬性testattr中的值沒有包含"true"的div
$("[attribute^='value']")選擇指定屬性是以給定字符串開始的元素$("div[name^=imooc]")查找所有div中，屬性name的值是用imooc開頭的
$("[attribute$='value']")選擇指定屬性是以給定值結尾的元素，區分大小寫$("div[name$=imooc]")查找所有div中，屬性name的值是用imooc結尾的
$("[attribute]")選擇所有具有指定屬性的元素，該屬性可以是任何值 $("div[p2]")
$("[attributeFilter1][attributeFilterN]")選擇匹配所有指定的屬性篩選器的元素
子元素屬性篩選選擇器:
$(":first-child")選擇所有父級元素下的第一個子元素$(".first-div a:first-child") //查找class="first-div"下的第一個a元素,針對所有父級下的第一個
$(":last-child")選擇所有父級元素下的最後一個子元素$(".first-div a:last-child") //查找class="first-div"下的最後一個a元素,針對所有父級下的最後一個,如果只有一個元素的話，last也是第一個元素
$(":only-child")如果某個元素是其父元素的唯一子元素,那麼選中 $(".first-div a:only-child") //查找class="first-div"下的只有一個子元素的a元素
$(":nth-child")選擇的他們所有父元素的第n個子元素 $(".last-div a:nth-child(2)") //查找class="last-div"下的第二個a元素
$(":nth-last-child")選擇所有他們父元素的第n個子元素,計數從最後一個元素開始到第一個 $(".last-div a:nth-last-child(2)") //查找class="last-div"下的倒數第二個a元素
表單元素選擇器：
$(":input") 選擇所有的input,textarea,select,button元素
$(":text")匹配所有文本框$("input:text") //匹配所有input元素中類型爲text的input元素
$(":password")匹配所有密碼框
$(":radio")匹配所有單選按鈕
$(":checkbox")匹配所有複選框
$(":submit")匹配所有提交按鈕
$(":image")匹配所有圖像域
$(":reset")匹配所有重置按鈕
$(":button")匹配所有按鈕
$(":file")匹配所有文件域
表單對象屬性篩選選擇器:
$(":enabled") 選取可用的表單元素 $("input:enabled") //查找所有input所有可用的（未被禁用的元素）input元素。
$(":disabled")選取不可用的表單元素
$(":checked") 選取被選中的<input>元素$("input:checked") //查找所有input所有勾選的元素(單選框,複選框)
$(":selected") 選取被選中的<option>元素