前端開發工具之jQuery

jQuery

　　jQuery是一個輕量級的JavaScript第三方庫，可以簡單方便的進行JavaScript編程。

　　jQuery選擇器

　　　　1，id選擇器：

$("#id")

　　　　2，標籤選擇器：

$("標籤名")

　　　　3，類選擇器：

$(".類名")

　　　　4，限定選擇器：

$("div.c1")  // 找到有c1類的div標籤

　　　　5，全局選擇器：

$("*")  // 找到全部

　　　　6，多項選擇器：

$("#id, .類名, 屬性名")

　　　　7，層級選擇器：x和y能夠爲任意選擇器

$("x y")      // x的全部後代y（子子孫孫）
$("x > y")    // x的全部兒子y（兒子）
$("x + y")    // 找到全部緊挨在x後面的y
$("x ~ y")    // x以後全部的兄弟y

　　　　8，屬性選擇器：

$(input [type])           // 找到有type屬性的input標籤
$(input [type="text"])    // 找到type屬性值爲text的input標籤
$(input [type="text"])    // 找到type屬性值不爲text的input標籤

　　　　9，選擇器的篩選：

:first         // 第一個
:last          // 最後一個
:eq(index)     // 索引等於index的那個元素
:even          // 匹配全部索引值爲偶數的元素，從 0 開始計數
:odd           // 匹配全部索引值爲奇數的元素，從 0 開始計數
:gt(index)     // 匹配全部大於給定索引值的元素
:lt(index)     // 匹配全部小於給定索引值的元素
:not(元素選擇器) // 移除全部知足not條件的標籤
:has(元素選擇器) // 選取全部包含一個或多個標籤在其內的標籤(指的是從後代元素找)

　　　　　　實例：

$("div:has(h1)")      // 找到全部後代中有h1標籤的div標籤
$("div:has(.c1)")     // 找到全部後代中有c1樣式類的div標籤
$("li:not(.c1)")      // 找到全部不包含c1樣式類的li標籤
$("li:not(:has(a))")  // 找到全部後代中不含a標籤的li標籤

　　　　10，from表單經常使用篩選：

:text        // 篩選type是text的標籤
:password    // 篩選type是password的標籤
:file        // 篩選type是file的標籤
:radio       // 篩選type是radio的標籤
:checkbox    // 篩選type是checkbox的標籤

:submit      // 篩選type是submit的標籤
:reset       // 篩選type是reset的標籤
:button      // 篩選type是button的標籤

　　　　　　表單屬性篩選：

:enabled    // 篩選出可用的input標籤
:disabled   // 篩選出不可用的input標籤
:checked    // 篩選出有checkbox選項被選中的input標籤
:selected   // 篩選出有select選項被選中的option標籤

 

 

　　jQuery篩選器

　　　　1，篩選某jQuery對象的下面的元素

jQuery對象.next()  // 篩選出某jQuery對象下面的第一個元素
jQuery對象.nextAll()  // 篩選出某jQuery對象下面的所有元素
jQuery對象.nextUntil("選擇器")  // 篩選出某jQuery對象下面的元素，直到遇到指定的元素爲止

　　　　2，篩選某jQuery對象的上面的元素

jQuery對象.prev()  // 篩選出某jQuery對象上面的第一個元素
jQuery對象.prevAll()  // 篩選出某jQuery對象上面的所有元素
jQuery對象.prevUntil("選擇器")  // 篩選出某jQuery對象上面的元素，直到遇到指定的元素爲止

　　　　3，篩選某jQuery對象的父元素

jQuery對象.parent()  // 篩選出某jQuery對象的父元素
jQuery對象.parents()  // 篩選出某jQuery對象的所有父級元素
jQuery對象.parentsUntil("選擇器")  // 篩選出某jQuery對象的父級元素，直到遇到指定的元素爲止

　　　　4，篩選某jQuery對象的子元素

jQuery對象.children()  // 篩選出某jQuery對象的子元素

　　　　5，篩選某jQuery對象的兄弟元素

jQuery對象.siblings()  // 篩選出某jQuery對象的兄弟元素

　　　　6，經常使用於和篩選組合方法

.find()   // 從前面的jQuery對象中找出符合條件的元素
.first()  // 獲取匹配的第一個元素
.last()   // 獲取匹配的最後一個元素
.not()    // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has()    // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。

 

 

　　jQuery標籤操做

　　　　1，操做標籤樣式

jQuery標籤對象.addClass("類名")   // 給標籤添加CSS類名
jQuery標籤對象.removeClass("類名")   // 刪除CSS類名
jQuery標籤對象.hasClass("類名")   // 判斷是否有此CSS類
jQuery標籤對象.toggleClass("類名")   // 判斷是否有此CSS類，有就刪除，沒有添加

　　　　2，獲取標籤位置

jQuery對象.offset()  // 獲取匹配元素在當前窗口的相對偏移或設置元素位置
jQuery對象.position()   // 獲取匹配元素相對父元素的偏移
jQuery對象.scrollTop()   // 獲取匹配元素相對滾動條頂部的偏移
jQuery對象.scrollLeft()   // 獲取匹配元素相對滾動條左側的偏移

　　　　3，獲取標籤尺寸

jQuery對象.width()  // 獲取寬度
jQuery對象.height()  // 獲取高度
jQuery對象.innerWidth()  // 獲取內容寬度加padding寬度
jQuery對象.innerHeight()  // 獲取內容高度加padding高度
jQuery對象.outerWidth()  // 獲取內容寬度加padding寬度再加border寬度
jQuery對象.outerHeight()  // 獲取內容高度加padding高度再加border高度

　　　　4，操做HTML代碼

jQuery對象.html()   // 獲取第一個匹配元素的html內容，要獲取每一個就遍歷對象再獲取
jQuery對象.html("新的內容")  // 將匹配到的元素設置爲新內容

　　　　5，操做標籤的文本內容

jQuery對象.text()   // 獲取匹配元素的全部內容
jQuery對象.text("新內容")   // 將匹配元素的全部內容設置爲新內容

　　　　6，操做標籤中的value值

jQuery對象.val()  // 獲取第一個匹配元素的當前值
jQuery對象.val("value值")  // 將匹配元素中有指定值的元素選中展現出來
jQuery對象.val(["value值1", "value值2"])  // 設置checkbox、select的值

　　　　7，操做標籤屬性

jQuery對象.attr("屬性名")  // 獲取匹配到的第一個元素的屬性值
jQuery對象.attr("屬性名"，"屬性值")  // 爲匹配到的元素設置屬性
jQuery對象.attr({"屬性名1"："屬性值1"，"屬性名2"："屬性值2"})  // 爲匹配到的元素設置多個屬性
jQuery對象.removeAttr("屬性名")   // 刪除匹配元素中的一個屬性

// 對於checkbox和radio使用下面的方法操做屬性
.prop("屬性名")  // 獲取屬性值
.prop("屬性名"，"屬性值")  // 設定屬性
.removeProp("屬性名")  // 刪除屬性 

　　jQuery文檔處理

　　　　1，在指定元素內部的前面添加新的HTML代碼

jQuery對象a.prepend(jQuery對象b)   // 將對象b添加到對象a的前面
jQuery對象a.prependTo(jQuery對象b)   // 將對象a添加到對象b的前面

　　　　2，在指定元素內部的後面添加新的HTML代碼

jQuery對象a.append(jQuery對象b)   // 將對象b添加到對象a的後面
jQuery對象a.appendTo(jQuery對象b)   // 將對象a添加到對象b的後面

　　　　3，在指定元素外部的前面添加新的HTML代碼

jQuery對象a.before(jQuery對象b)   // 將對象b添加到對象a的前面
jQuery對象a.insertBefore(jQuery對象b)   // 將對象a添加到對象b的前面

　　　　4，在指定元素外部的後面添加新的HTML代碼

jQuery對象a.after(jQuery對象b)   // 將對象b添加到對象a的後面
jQuery對象a.insertAfter(jQuery對象b)   // 將對象a添加到對象b的後面

　　　　5，刪除和清空指定的元素

jQuery對象.remove()  // 刪除元素自己以及內部的全部元素
jQuery對象.empty()   // 清空元素內部的全部元素，不包含自己

　　　　6，元素替換

jQuery對象.replaceWith(替換內容)   // 將對象替換爲新內容
替換內容.replaceAll(jQuery對象)   // 用新內容替換對象

 　　　　7，元素克隆

jQuery對象.clone()  // 克隆一個新元素   有參數true，添加true帶元素自己的事件也會克隆

　　jQuery事件

　　　　1，經常使用事件

click  // 單擊
dblclick  // 雙擊
mouseenter  // 鼠標移動到標籤上
mouseleave   // 鼠標離開標籤

keydown      // 按鍵被按下
keyup       // 按鍵被鬆開

submit    // submit按鈕按下時
change    // 表單的元素的值被改變時
focus        // 當鼠標點擊選中的元素或tab鍵定位元素時
blur     // 當選中的元素失去焦點時

 

　　　　2，事件綁定

某標籤.on(events,selector,function(){})

// events爲事件   selector爲選擇器（特定條件下使用）  function爲事件要進行的函數

 

 

　　　　3，事件委託

　　　　　　經過給父標籤綁定事件，在加上選擇器進行限定，從而利用父標籤去捕獲子標籤的事件。

父級標籤.on(events,要觸發事件的標籤,function(){})

 

　　　　4，事件移除

某綁定過事件的標籤.off(events)

　　　　5，阻止後續事件執行

return false;  // 在事件執行函數結束後如過返回的是false則後續的事件不會執行。

 

　　　　6，頁面載入

$(document).ready(function(){
// 在這裏寫你的JS代碼...
})
// 這個函數能夠極大的提升web應用程序的響應速度，優化頁面載入。