jquery知識點復習

一、 基本概念

1. jQuery簡介

jQuery是一個基於javascript的框架。它提供了豐富的選擇器和大量的函數，可以方便的實現網頁中各種動態的效果。迄今為止，已經有大量的jquery插件和基於jQuery的UI框架（miniui、easyui、ligerui）。

jQuery的宗旨是：write less,do more!

1. 文檔加載完畢函數

常規形式：$(document).ready(function(){… …});

簡寫形式：$(function(){… …});

1. jquery對象和js對象的相互轉化

jquery對象不等同於js對象!

js對象的屬性和方法,jquery對象不能調用；jquery對象的屬性和方法，js對象也不能調用。

js轉jquery：$(js對象)

jquery轉js：$(“#box1”).get(0)  或者    $(“.box”)[0]

二、 選擇器

jquery的基石就是選擇，jquery提供了大量的選擇器。建議在不同的業務場景下使用不同的選擇器。

注意：通過任何一個選擇器篩選到的結果都是一個數組，所以要判斷通過選擇器是否篩選到了元素，可以通過length屬性進行判斷。

1. 基本選擇器

n ID選擇器

$(“#ID值”)    例如：$(“#txt1”)

n 類選擇器

$(“.class名稱”)   例如：$(“.box”)

n 標記選擇器

$(“tagName”)   例如：$(“div”)

n 組合選擇器

$(“selector1,selector2,selector3”)   例如：$(“.box,#txt1,div”)

n 通配符選擇器

$(“*”)

1. 層次選擇器

n 父子選擇器

$(“selector1 > selector2”)

n 祖先后代選擇器

$(“selector1   selector2”)

n 后兄弟選擇器

$(“selector1~siblings”)

n 相鄰的后兄弟選擇器

$(“selector1 + selector2”)

1. 基本過濾選擇器

n :first ：篩選第一個元素

n :last ：篩選最后一個元素

n :odd ：篩選索引值為奇數的元素

n :even ：篩選索引值為偶數的元素

n :eq(n) ：篩選索引值等於n的元素

n :gt(n) ：篩選索引值大於n的元素

n :lt(n) ：篩選索引值小於n的元素

n :not(selector) ：篩選排除selector以外的元素

1. 內容過濾選擇器

n :contains(text) ：篩選文本內容包含text的元素

n :empty ：篩選不包含任何子元素和文本內容的元素

n :parent ：篩選包含子孫元素或文本內容的元素

1. 可見性過濾選擇器

n :visible ：篩選可見元素

n :hidden ：篩選不可見元素

1. 屬性過濾選擇器

n [attr] ：篩選存在attr屬性的元素

n [attr=value] ：篩選attr屬性值等於value的元素

n [attr!=value] ：篩選attr屬性值不等於value的元素

n [attr^=value] ：篩選attr屬性值以value開頭的元素

n [attr$=value] ：篩選attr屬性值以value結尾的元素

n [attr*=value] ：篩選attr屬性值包含value的元素

1. 表單屬性選擇器

n :checked ：篩選選中狀態的單選按鈕和復選框

n :selected ：篩選選中的下拉列表項

n :enabled ：篩選可用的表單元素

n :disabled ：篩選不可用的表單元素

1. 表單對象選擇器

n :text ：篩選單行文本框

n :button ：篩選按鈕元素

n :submit ：篩選提交按鈕

n :password ：篩選密碼框

n :radio ：篩選單選按鈕

n :checkbox ：篩選復選框

n :file ：篩選文件域

n :image ：篩選圖片

一、 篩選函數

n parent() ：獲取父元素

n children() ：獲取子元素

n next() ：獲取相鄰的后兄弟元素

n nextAll() ：獲取所有的后兄弟元素

n prev() ：獲取相鄰的前兄弟元素

n prevAll() ：獲取所有的前兄弟元素

n find() ：從子孫后代元素中查找滿足條件的子孫元素（過濾后的是這組元素的子孫元素）

n filter() ：從一組元素中篩選滿足條件的元素（過濾后的是這一組元素中的部分元素）

n first() ：獲取第一個元素

n last() ：獲取最后一個元素

n siblings() ：獲取所有的同輩元素

n not() ：排除指定的元素

n index() ：獲取一個元素在一組元素中的索引值

n eq(n) ：獲取索引值等於n的元素

二、 樣式操作

n css(“css屬性”) ：獲取css屬性的值

n css(“css屬性”, “值”) ：給css屬性賦值

n css({“css屬性1”:“值”,  “css屬性2”:”值”}) ：通過給多個css屬性賦值

n addClass ：添加class樣式

n removeClass ：移除class樣式

n toggleClass ：切換class樣式

n hasClass ：判斷是否擁有class樣式，有返回true，否則返回false

三、 屬性操作

n attr(“屬性名”) ：獲取屬性的值

n attr(“屬性名”, “值”) ：給屬性賦值

四、 DOM操作

n append() ：追加子元素（最后一個子元素）

n prepend() ：添加子元素（第一個子元素）

n remove() ：移除元素

n empty() ：清除所有的子孫元素

n after() ：添加一個后兄弟元素

n before ：添加一個前兄弟元素

五、 事件

1. 事件的類型

load、click、dblclick、focus、blur、change、mouseover、mouseout、mousemove、mouseenter、mouseleave、keyup、keydown、keypress、scroll、resize

 

1. 事件函數

 

n bind ：為事件綁定函數

 

$(“#button1”).bind(“click”, function(){… …})

 

n unbind ：解除綁定的事件

 

$(“#button1”).unbind(“click”);

 

n click(function(){}) ：為事件綁定函數的另一種寫法

 

$(“#button1”).click(function(){… …});

 

n click() ：觸發或模擬單擊事件

 

1. 事件參數

 

$(“#button1”).click(function(event){

 

event.target：獲取觸發當前事件的元素

 

event.source：

 

event.which：獲取對應的鍵盤按鍵值和鼠標按鍵值

 

event. preventDefault()：阻止瀏覽器默認行為

 

event. stopPropagation()：阻止事件冒泡

 

});

 

一、 動畫

 

n show([slow|normal|fast]|毫秒數)：讓元素顯示

 

n hide([slow|normal|fast]|毫秒數)：隱藏元素

 

n toggle([slow|normal|fast]|毫秒數)：切換元素的顯隱狀態

 

n slideUp()：讓元素隱藏（高度逐漸變為0）

 

n slideDown()：讓元素顯示（高度從0逐漸恢復到原始高度）

 

n slideToggle()：切換元素的顯隱狀態（改變的是高度）

 

n fadeIn()：讓元素顯示（透明度逐漸變為不透明）

 

n fadeOut()：讓元素隱藏（改變透明度逐漸變為透明）

 

n fadeToggle()：切換元素的顯隱狀態（改變透明度）

 

n animate()：自定義動畫

 

$(“#box1”).animate({width:”+=50px”, height:”200px”}, 1000)

 

二、 其他函數

 

n height()、height(val)

 

n width()、width(val)

 

n val(value)、val()

 

n text(value)、text()

 

n html(value)、html()

 

上述函數有參數表示賦值，沒有參數表示獲取值。