jquery 基礎教程[溫故而知新二]

子曰：「溫故而知新，能夠爲師矣。」孔子說：「溫習舊知識從而得知新的理解與體會，憑藉這一點就能夠成爲老師了。「 尤爲是我們搞程序的人，無論是否是全棧工程師，都是集十八般武藝於一身。不過有時候有些知識若是有好久沒用了的話，就會忘記，甚至是忘的你一點都想不起來，尤爲是一些基礎的東西。因此我纔打算寫個"溫故而知新"的系列博文出來，一來是這些基礎的東西我比較健忘，之後方便本身翻閱；二來是但願能夠幫助到一些剛入門的朋友。這個系列記錄的全部知識點都是最最最(重要的事情說三遍)基礎的知識。大部分都是我學習的時候所積累的筆記。

溫故而知新系列都是一些基礎知識，大神能夠直接跳過。

v寫在前面

若是十八般武藝都融會貫通，若是什麼兵器你都耍得有模有樣，那麼這篇博文你大能夠跳過了。只是在忘記的時候，能夠拿出來溫習溫習。

v基本概念

JQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及後續版本將再也不支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標準通用標記語言下的一個應用）、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。jQuery可以使用戶的html頁面保持代碼和html內容分離，也就是說，不用再在html裏面插入一堆js來調用命令了，只須要定義id便可。

簡單點一句話歸納： Jquery不是一門獨立的語言，是javascript的一個類庫或框架

v各類選擇器

1.基本選擇器： 

• $("div")標記選擇器
• $(".div")類別選擇器
• $("#div")id選擇器
• $("*")通用選擇器
• $("div,.nav,#box")組合選擇器

2.層次選擇器： 

• $("div p")後代選擇器 div裏面全部的p
• $("div>p")子選擇器 div裏面的下一級p
• $("div+p")兄弟選擇器 下一個兄弟元素，div後面的p
• $("div~p")div後面全部的兄弟元素，div後面全部的p

3.簡單選擇器： 

• $("div:first")找到第一個div
• $("div:last")找到最後一個div
• $("div:eq(index)")找到索引位置的div

4.內容選擇器： 

• $("div:contains(文本內容)")找到包含文本內容的div

5.可見性選擇器： 

• $("div:visible")找到全部顯示的div元素
• $("div:hidden")找到全部隱藏的div元素

6.屬性選擇器： 

• $("div[align]")具備align這個屬性的div
• $("div[align=right]")具備align這個屬性且屬性值是right的div

7.表單選擇器： 

• $("div:input")找到div內全部的表單元素
• $("div:checkbox")找到div內全部的複選框
• $("div:radio")找到div內全部的表單選框
• $("div:password")找到div內全部的密碼框
• $("div:text")找到div內全部的文本框
• $("div:selected")找到div內全部被選中的下拉列表框

v過濾選擇

• first()找到第一個元素
• last()找到最後一個元素
• eq()找到索引值的元素
• filter("條件")篩選
• find()查找後代元素 =$("div p")
• next()下一個兄弟元素 =$("div+p")
• nextAll()後面全部的兄弟元素 =$("div~p")
• prev()前一個元素
• parent()父元素
• not()除了...以外的

vJquery操做

1.操做屬性： 

• 對象.attr("屬性名") 獲取屬性的值
• 對象.attr("屬性名","屬性值") 設置屬性的值 ps:值得一提的是對於部分(radion等)表單元素設置屬性值使用prop
• 對象.removeAttr("屬性名") 移除屬性

2.操做樣式： 

• addClass()添加樣式
• removeClass()刪除樣式
• toggleClass()切換樣式
• 對象.css({"屬性名":"屬性值","屬性名":"屬性值"})

3.操做內容： 

• html()獲取/改變非表單元素的其餘標籤的內容
• text()獲取/改變非表單元素的其餘標籤的文本內容
• val（）獲取/改變表單元素的value值

4.操做寬高： 

• width()獲取/改變元素的寬
• height()獲取/改變元素的高

5.Jquery事件： 

js的事件去掉on就是jquery的事件

vJquery DOM

1.DOM操做： 

• $("父對象").append("子對象")在父對象裏向後追加子對象
• $("父對象").prepend("子對象")在父對象裏向前追加子對象
• $("父對象").before("子對象")在父對象前面添加子對象
• $("父對象").after("子對象")在父對象後面添加子對象

vJquery 其它

1.位置： 

• length() 獲取元素的個數/長度
• size()獲取元素的個數/長度
• index()獲取同輩元素的索引位置，返回值是數值，從0開始
• get()獲取索引位置的元素，將jq的對象轉成js對象

v博客總結

關於jquery 入門教程就寫到這裏，只是爲了但願幫助到一些入門的朋友，或者一些像我這樣健忘的人朋友恢復記憶。

 

做　　者：請叫我頭頭哥
出　　處：http://www.cnblogs.com/toutou/
關於做者：專一於基礎平臺的項目開發。若有問題或建議，請多多賜教！
版權聲明：本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。
特此聲明：全部評論和私信都會在第一時間回覆。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：若是您以爲文章對您有幫助，能夠點擊文章右下角【推薦】一下。您的鼓勵是做者堅持原創和持續寫做的最大動力！