jQuery知識點整合

標籤：網頁   可見   load   ges   第一個   log   window   color   win   

一、jQuery介紹

jQuery是一個函數庫，一個js檔案，頁面用script標籤引入js檔案就可以使用

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

1、官方網站：http://jquery.com/

2、版本下載：http://code.jquery.com/

二、jQuery載入

將擷取元素的語句寫到頁面的頭部，會因為元素還沒有載入而出現錯誤，jquery提供了ready方法解決這個問題，它的速度比原生的window.onload更快。

三、jQuery選取器1、jQuery用法思想

選擇某個網頁元素，然後對它進行某種操作

2、jQuery選取器

jQuery選取器可以快速的選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。

a、選擇整個文檔對象： $(document) 

b、選擇所有的li元素： $("li")

c、選擇id為myId的網頁元素：$("#myId")

d、選擇class為myClass的元素：$(".myClass")

e、選擇name屬性等於first的input元素 ： $("input[name=first]")

f、選擇id為uli元素下的所有li下的span元素 ： $("#uli li span")

 3、對選取器進行修飾過濾（類似CSS偽類）

a、選擇id為uli元素下的第一個li ：$("#uli li:first")

b、選擇id為uli元素下的li的奇數行：$("#uli li:odd")（從0開始）

c、選擇id為uli元素下的第三個li：$("#uli li:eq(2)")（從0開始）

d、選擇id為uli元素下的前三個之後的li：$("#uli li:gt(2)")

e、選擇表單中的input元素：$("#myForm :input")

f、選擇可見的div元素：$("div:visible")

4、對選取器進行函數過濾

a、選擇包含p元素的div元素：$("div").has("p")

b、選擇class不等於myClass的div元素 ：$("div").not(".myClass")

c、選擇class等於myClass的div元素：$("div").filter(".myClass")

d、選擇第一個div元素：$("div").first()

e、選第六個div元素：$("div").eq(5)

5、選取器轉移

a、選擇id為div2元素下前面的第一個p元素：$("#div2").prev("p")

b、選擇id為div元素下後面的第一個p元素：$("#div").next("p")

c、選擇離id為div元素下最近的那個form父元素：$("#div").closest("form")

d、選擇id為div元素下的父元素：$("#div").parent()

e、選擇id為div元素下的所有子項目：$("#div").children()

f、選擇id為div元素下的（除自己之外的）同級元素：$("#div").siblings()

g、選擇div內的class等於myClass的元素：$("#div").find(".myClass")

 四、jQuery樣式操作

同一個函數完成取值和賦值

1、操作行間樣式

a、擷取div的樣式

b、設定div的樣式

特別注意：選取器擷取多個元素，擷取資訊擷取的是第一個，比如：$("div").css("width")，擷取的是第一個div的width

 2、操作樣式類名addClass 、removeClass、toggleClass

a、追加樣式float_left

b、移除樣式float_left

c、重複轉場樣式active

 

 

jQuery知識點整合