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/
關於作者:專注於基礎平台的項目開發。如有問題或建議,請多多賜教!
版權聲明:本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接。
特此聲明:所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤,共同進步。或者直接私信
聲援博主:如果您覺得文章對您有幫助,可以點擊文章右下角推薦一下。您的鼓勵是作者堅持原創和持續寫作的最大動力!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM