Jquery基礎知識

      前兩天接了一個單子，沒日沒夜、加班加點的做出來，以至於對於星期幾已經沒有概念了，哈哈哈，今天終於空閑下來了，突然覺得神清氣爽啊啊！

      作為一名前端工程師，如果只是單純的寫html和css我覺得發展還是有一定的限制的，因為公司不可能專門提供個職位讓你只是純切圖吧！但是很不幸的我對於javascript和jquery都寫不來，目前如果網站要用的js效果都是從網上下載下來或者扣下來用到自己的網站上，但是我覺得這不是個長久之計，如果你想稍微改動一下效果，難道你又要重新去找個一模一樣的嗎？運氣好的話，很快就找到合適的了，運氣不好要找很久的，並且找的不一定是完全符合的，有很多不必要的js代碼都沒用，這樣就增加了檔案大小，對於網站最佳化不好。最後我做出了一個艱難的決定，一定要學好js，雖然看著那些符號代碼，一長串解釋看不懂頭暈，但是還是要熬著看下去，當我再一次看著那些看不懂的文字想哭時，有人說不然你先試著學習jquery吧，那個入門快些，寫一些簡單的效果還容易上手些。寫了那麼多口水話.....萬事開頭難！先從最基本的看起吧！

       一、jquery是什嗎？

        其實它就是我看不懂的js的一個架構，其主要思想是，通過選取器(jquery選取器非常強大)尋找對應的節點，然後對這個節點做一個封裝（封裝成jquery對象）。通過調用jquery對象的屬性和方法來實現對節點的操作。

        使用jquery的好處是：

        1、將不同瀏覽器之間的差異相容起來；（這個我的理解非常淺，誰懂的說下咯）

        2、代碼更加簡潔，維護方便。這個我知道。

      二、使用jquery編程的步驟？

        1、先把要操作的節點找到，怎麼找呢？用jquery的選取器去找（非常強大的選取器）；

        2、找到節點後，因為此時找到的節點都被封裝成jquery對象了，所以就調用該對象的屬性和方法來實現對節點的操作；

      鑒於我目前對於對象的屬性和方法還不太瞭解，我就先學好強大的jquery選取器吧！

      三、什麼是選取器？

        懂的css的人都知道它有自己的選取器，其實jquery選取器就是模仿到css選取器來的，所以我覺得上手快些！jquery選取器支援css1和css2的全部和css3的部分選取器，同時它也有少量的專屬的選取器。選取器分為4類：基本選取器、層次選取器、過濾選取器(基本過濾選取器、內容過濾選取器、可見度過濾選取器、屬性過濾選取器、子項目過濾選取器、表單對象屬性過濾選取器)、表單選取器。

        下面一一說明：

        1、基本選取器：最常用也是最簡單的選取器。它通過id、class、標籤名等來尋找節點元素。每個id只允許出現一次，而class允許重複使用。

#id	給指定的id匹配一個元素	返回單個元素	$("#test") id為test的元素
#class	匹配給定的類名	返回集合元素	$(".test")類名為test的元素
element	匹配給定的標籤名	返回集合元素	$("p"）所有的p元素
*	匹配所有元素	返回集合元素	$("*")html中的所有元素（少用）
selector1、selctor2。。。selectorN	匹配給定的集合	返回集合元素	$("div,span,p.myclass")所有的div，span和類名為myclass的p元素

         2、層次選取器：通過節點元素之間的層次關係來獲得特定元素、例如後代元素、子項目、相鄰元素、兄弟元素。

$("ancestor descendant")	選取ancestor裡所有的descendant元素	返回集合元素	$("div span")選取div裡的所有span元素
$("parent>child")	選取parent下的child元素，與第一個不同哈	返回集合元素	$("div>span")選取div下的元素名是span的元素
$("prev+next")	選取緊接在prev後的next元素	集合元素	$(".one+div")選取class為one的下一個div元素
$("prev~siblings")	選取prev元素之後的所有siblings元素	集合元素	$(".one~div")選取class為one元素後面的所有div元素

            在層次選取器中，第一個和第二個比較常用，而第三個和第四個可以在jquery中用更加簡單的方法代替，所以使用的幾率小些。可以用next()代替$("prev+next")，用nextAll()方法代替$("prev~siblings");這裡將siblings()方法與$("prev~siblings")進行比較：siblings()方法呢擷取的是這個元素的兄弟元素包含前面或者後面的，與位置無關。而$("prev~siblings")只能擷取這個元素後面的兄弟元素。

          3、過濾選取器就分類多了。主要是通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與css中的偽類別選取器文法相同，即選取器都以"："開頭。

             3(1)、基本過濾選取器

:first	選取第一個元素	返回單個元素	$("div:first")擷取所有div元素的第一個div元素
:last	選取最後一個元素	返回單個元素	$("div:last")擷取所有div元素中的最後一個div元素
:not(selector)	去除所有匹配selector選取器的元素	返回集合元素	$("div:not(.mydiv)")選取class名不為mydiv的所有div元素
:even	選取索引為偶數的元素，注意：索引從0開始	返回集合元素	$("input:even")選取索引為偶數的input元素
:odd	選取索引為奇數的元素	返回集合元素	$("input:odd")選取索引為奇數的input元素
:eq(index)	選取索引為index的元素	返回單個元素	$("input:eq(1)")選取索引為1的input元素
:gt(index)	選取索引大於index的元素	返回集合元素	$("input:gt(4)")選取索引大於4的input元素
:lt(index)	選取索引小於index的元素	返回集合元素	$("input:lt(4)")選取索引小於4的input元素
:header	選取所有的標題元素，例如h1,h2,h3``h6	返回集合元素	$(":hear")選取網頁中的所有標題元素
:animated	選取當前正在執行動畫的元素（常用語判斷語句中）	返回集合元素	$("div:animated")選取正在執行動畫的div元素

             3(2)、內容過濾選取器

:contains(text)	選取含有常值內容為text的元素	返回集合元素	$("div:contains("我"))選取含有我文本的所有div元素
:empty	選取不包含子項目或者文本的空元素	集合元素	$("div:empty")選取不包含子項目或者文本元素的div元素，相當於空標籤
:has(selector)	選取有所匹配元素的元素	返回集合元素	$("div:has(p)")選取含有p元素的div元素
:parent	選取含有子項目或者文本元素的元素	返回集合元素	$("div:parent")選取含有子項目和文本元素的div元素

              3(3)、可見度過濾選取器，根據元素的可見和不可見行來選擇相應的元素

:hidden	選取所有隱藏元素	返回集合元素	$(":hidden")選取所有不可見的元素， 包括<input type="hidden"><div style="display:none"><div style="visibility:hidden">等元素
:visible	選取所有可見元素	返回集合元素	$(div:visible")選取所有可見的div元素

             3(4)、屬性過濾選取器，通過元素的屬性來擷取相應的元素。

[attribute]	選取擁有此屬性的元素	集合元素	$("div[id]")選取擁有id屬性的div元素
[attribute=value]	選取屬性的值為value的元素	集合元素	$("div[title="mytitle"])選取title屬性為mytitle的div元素
[attribute!=value]	選取屬性的值不為value的元素	集合元素	$("div[title!="mytitle"])選擇title屬性不為mytitle的div元素
[attribute^=value]	選取屬性的值以value開始	集合元素	$("div[title^="a"]")選取title屬性以a字母開頭的div元素
[attribute$=value]	選取屬性的值以value結束	集合元素	$("div[title$="a"]")選取title屬性以a字母結束的div元素
[attribute*=value]	選取屬性的值含有value的元素	集合元素	$("div[title*="a"]")選取title屬性含有a字母的div元素
[selector1][selector2] [selectorN]	用屬性選取器合并成一個複合屬性選取器，滿足多個條件， 每選擇一次就會縮小一次範圍	集合元素	$("div[id][title="mytitle"]")選取含有i的屬性且title屬性為mytitle的div元素

             4(5)、子項目過濾選取器，子項目過濾選取器相對於其他選取器要稍微複雜些，注意它與普通的過濾器的差別。

:nth-child(index/odd/even/equation)	選取每個父元素下的第index個元素或者奇偶元素(index從1算起)	集合元素	:eq(index)只匹配一個元素,:nth-child(index)將為每一個父元素匹配子項目，並且他的index是從1開始算起的
:first-child	選取每個父元素下的第一個子項目	集合元素	:first只擷取單個元素，而:first-child擷取每個父元素下個的第一個子項目
:last-child	選取每個父元素下的最後一個元素	集合元素	同理
:only-child	如果某個元素時它父元素中的唯一一個子項目，那麼將會被匹配， 如果父元素中含有其他元素，那麼將不會被匹配	集合元素	$("ul li:only-child")在ul中選取是唯一子項目的li元素

             3(6)、表單對象屬性過濾選取器，表單對象比如被選中的下拉框、多選框等。

:enabled	選取所有可用元素	集合元素	$("#form:enabled")選取id為form的表單裡所有可用元素
:disabled	選取所有不可用元素	集合元素	選取停用元素
:checked	選取被選擇的元素(單選框、複選框)	集合元素	$("input:checked")選取所有被選中的input元素
:selected	選取所有被選中的選項元素(下拉式清單)	集合元素	$("selected:selected")選取所有被選中的選中元素

          4、表單對象選取器，利用這個選取器能極其方便的擷取到表單的某個或某個類型的元素。

:input	選取所有的<input>,<textarea>,<select>,<button>元素	集合元素	$(":input")
:radio	選取所有的單選框元素	集合元素	$(":radio")
:file	選取所有的上傳域	集合元素	$(":file")
:text	選取所有的單行文字框	集合元素	$(":text")
:password	選取所有密碼框	集合元素	$(":password")
:checkbox	選取所有複選框	集合元素	$(":checkbox")
:submit	選取所有提交按鈕	集合元素	$(":submit")
:image	選取所有映像按鈕	集合元素	$(":image")
:reset	選取所有重設按鈕	集合元素	$(":reset")
:button	選取所有的按鈕	集合元素	$(":button")
:hidden	選取所有不可見的元素	集合元素	$(":hidden")

     合理的利用每個選取器，達到事半功倍的效果！沒事來看看加深加深印象，對於那些大神們，你們就繞道而行吧！