jQuery篇（write Less, Do More）

jQuery

快速、簡潔的JavaScript框架，設計宗旨：write Less, Do More。
做用：簡化原生js的語法，解決瀏覽器兼容性問題。

引入jQuery
能夠直接引入在線地址，也能夠在jQuery官方網站上下載，而後使用src屬性引入：

<script src="jquery-3.3.1.js"></script>

基礎語法：$(selector).action()

• $：jQuery對象
• selector：選擇器，用於定位HTML元素
• action()：方法，用於對元素進行操做

文檔就緒函數

//HTML文檔加載完成後，再開始執行該方法裏面的函數
$(document).ready(function(){
    //代碼段
})

jQuery選擇器

jQuery選擇器相比原生javascript功能更增強大

元素選擇器

• $('#id')：id選擇器，相似document.getElementById("#id")
• $('.class')：class選擇器，相似document.getElementsByClassName('.class')
• $('tag')：tag選擇器，相似document.getElementsByTagName('tag')
• $('tag.class')：父子選擇器

屬性選擇器

• $("[attr]")：選取全部帶有attr屬性的元素
• $("[attr='value']")選取全部帶有attr屬性並值爲value的元素
• $("[attr$='value']")選取全部帶有attr屬性並以value結尾的元素

jQuery事件

事件方法會觸發匹配元素的事件，或將函數綁定到全部匹配元素的某個事件。

經常使用事件：
ready()：文檔就緒事件，HTML加載完成後調用
bind()：爲被選元素添加一個或多個事件處理程序，並規定事件發生時運行的函數
focus()：當元素得到焦點的時候調用
blur()：當元素失去焦點的時候調用
change()：當元素的值發生改變時調用（僅僅適用於form表單中的text、field、select、textarea）
click()：當點擊元素的時候調用
dblclick()：當雙擊元素的時候調用
keydown()：當鍵盤按鈕被按下時調用
keyup()：當鍵盤按鈕被鬆開時調用
keypress()：當鍵盤按鈕被按下時調用（必須插入字符才能被調用）
mousedown()：當鼠標指針移動到元素上方，並按下鼠標按鍵時調用
mouseup()：當在元素上放鬆鼠標按鈕時調用，常與mousedown()一塊兒使用
mousemove()：當鼠標指針在指定元素上移動時調用
submit()：當提交表單的時候調用

jQuery是爲處理HTML事件而特別設計的，當遵循如下原則時，代碼會更容易維護：

• 把全部jQuery代碼置於事件處理函數中
• 把全部事件處理函數置於文檔就緒事件處理器中
• 把jQuery代碼置於單獨的.js文件中

關於DOM

相比原生javascript，jQuery擁有更爲強大的可操做HTML元素和屬性的方法。

查找HTML元素

• $("#id")
• $(".class")
• $("tag")

對元素的操做

• append()：在被選元素的結尾插入內容
• prepend()：在被選元素的開頭插入內容
• after()：在被選元素以後插入內容
• before()：在被選元素以前插入內容
• remove()：刪除被選元素（及其子元素）
• empty()：從被選元素中刪除子元素

對屬性的操做

• attr()：設置或返回所選元素的屬性和值
• removeAttr()：從所選元素中移除指定的屬性
• addClass()：爲所選元素添加指定的類名
• removeClass()：爲所選元素刪除所有或指定的類
• hasClass()：判斷所選元素是否擁有指定的類

對文本的操做

• text()：設置或返回所選元素的文本內容
• html()：設置或返回所選元素的內容（包括HTML標記）
• val()：設置或返回表單字段的值

對CSS的操做

• css()：設置或返回所選元素的樣式屬性
• height()：設置或返回所選元素的高度
• width()：設置或返回所選元素的寬度