子曰:“溫故而知新,可以為師矣。”孔子說:“溫習舊知識從而得知新的理解與體會,憑借這一點就可以成為老師了。“ 尤其是咱們搞程序的人,不管是不是全棧工程師,都是集十八般武藝於一身。不過有時候有些知識如果有很久沒用了的話,就會忘記,甚至是忘的你一點都想不起來,尤其是一些基礎的東西。所以我才打算寫個"溫故而知新"的系列博文出來,一來是這些基礎的東西我比較健忘,以后方便自己翻閱;二來是希望可以幫助到一些剛入門的朋友。這個系列記錄的所有知識點都是最最最(重要的事情說三遍)基礎的知識。大部分都是我學習的時候所積累的筆記。
溫故而知新系列都是一些基礎知識,大神可以直接跳過。
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事件:
vJquery DOM
1.DOM操作:
- $("父對象").append("子對象")在父對象里向后追加子對象
- $("父對象").prepend("子對象")在父對象里向前追加子對象
- $("父對象").before("子對象")在父對象前面添加子對象
- $("父對象").after("子對象")在父對象后面添加子對象
vJquery 其它
1.位置:
- length() 獲取元素的個數/長度
- size()獲取元素的個數/長度
- index()獲取同輩元素的索引位置,返回值是數值,從0開始
- get()獲取索引位置的元素,將jq的對象轉成js對象
v博客總結
關於jquery 入門教程就寫到這里,只是為了希望幫助到一些入門的朋友,或者一些像我這樣健忘的人朋友恢復記憶。
作 者:請叫我頭頭哥
出 處:http://www.cnblogs.com/toutou/
關於作者:專注於基礎平台的項目開發。如有問題或建議,請多多賜教!
版權聲明:本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。
特此聲明:所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤,共同進步。或者直接私信我
聲援博主:如果您覺得文章對您有幫助,可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力!
