jQuery知識點整合

時間 2019-11-13

標籤 jquery 知識整合欄目 JQuery 简体版

原文原文鏈接

1、jQuery介紹

jQuery是一個函數庫，一個js文件，頁面用script標籤引入js文件就可使用javascript

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

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

2、jQuery加載

將獲取元素的語句寫到頁面的頭部，會由於元素尚未加載而出現錯誤，jquery提供了ready方法解決這個問題，它的速度比原生的window.onload更快。jquery

3、jQuery選擇器

一、jQuery用法思想

選擇某個網頁元素，而後對它進行某種操做ide

二、jQuery選擇器

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

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

b、選擇全部的li元素： $("li")網站

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

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

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

f、選擇id爲uli元素下的全部li下的span元素： $("#uli li span")

三、對選擇器進行修飾過濾（相似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")

四、對選擇器進行函數過濾

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)

五、選擇器轉移

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")

4、jQuery樣式操做

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

一、操做行間樣式

a、獲取div的樣式

b、設置div的樣式

特別注意：選擇器獲取多個元素，獲取信息獲取的是第一個，好比：$("div").css("width")，獲取的是第一個div的width

二、操做樣式類名addClass 、removeClass、toggleClass

a、追加樣式float_left

b、移除樣式float_left

c、重複切換樣式active

5、jQuery屬性操做

一、獲取或設置html內容：html（）

a、獲取html（）裏的內容

b、設置html（）裏的內容

二、獲取或設置text內容：text（）

a、獲取text（）裏的內容（不會帶標籤）

b、設置text（）裏的內容，下面的span是文本而不是標籤

三、獲取或設置某個屬性的值：attr();

a、獲取某個屬性的值

b、設置某個屬性的值

四、獲取或設置checkbox的狀態值：prop();

a、獲取checkbox的狀態值

b、設置checkbox的狀態值

6、綁定click事件

實例：選項卡的製做

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>選項卡</title>
 6     <style>
 7         .tab{
 8             width:500px;
 9         }
10         .tab button{
11             width:100px;
12             height:50px;
13             margin-left:10px;
14             border: none;
15             outline: none;
16             cursor: pointer;
17         }
18         .tab .active{
19             background:gold;
20         }
21         .con div{
22             width:500px;
23             height:300px;
24             background:gold;
25             margin-left:10px;
26             display: none;
27         }
28         .con .act{
29             display: block;
30         }
31     </style>
32     <script src="../js/jquery-1.12.4.min.js"></script>
33     <script>
34         $(function(){
35             $(".tab button").click(function(){
36                 $(this).addClass("active").siblings().removeClass("active");
37                 //獲取索引值點擊的$(this).index()
38                 var i = $(this).index();
39                 //$("#con div")[i]把原來的jquery對象轉換成了js對象，因此原有的jquery對應的方法沒法使用，只能將其轉換爲jquery才能使用
40                 $($("#con div")[i]).addClass("act").siblings().removeClass("act");
41 //                $("#con div").eq(i).addClass("act").siblings().removeClass("act");
42             })
43 
44         })
45     </script>
46 </head>
47 <body>
48     <div class="tab">
49         <button class="active">tab01</button>
50         <button>tab02</button>
51         <button>tab03</button>
52     </div>
53     <div class="con" id="con">
54         <div class="act">內容一</div>
55         <div>內容二</div>
56         <div>內容三</div>
57     </div>
58 </body>
59 </html>

View Code

7、jQuery特殊效果

一、fadeIn（）淡入

二、fadeOut（）淡出

三、fadeToggle（）切換淡入淡出

四、hide（）隱藏元素

五、show（）顯示元素

六、toggle（）依次展現或隱藏某個元素

七、slideDown（）向下展現

八、slideUp（）向上捲起

九、slideToggle（）依次展開或捲起某個元素

8、jQuery鏈式調用

jquery對象的方法在執行完以後返回這個jquery對象，全部的jQuery對象的方法能夠連起來寫：

$("#div1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")

$("#div1").//id位div1的元素

.chlidren("ul") //該元素下的ul子元素

.slideDown("fast") //高度從零到實際高度來顯示ul元素

.parent() //跳轉到ul的父元素，也就是id爲div1的元素

.siblings() //跳轉div1元素同級的全部兄弟元素

.chlidren("ul") //查找這些兄弟元素中的ul子元素

.slideUp("fase") //從實際高度變換爲零來隱藏ul元素

9、jQuery尺寸相關及滾動事件

一、獲取和設置元素的尺寸

a、width（）和height（）獲取元素width和height

b、innerWidth（）和innerHeight（）包括padding的width和height

c、outerWidth（）和outerHeight（）包括padding和border的width和height

d、outerWidth（true）和outHeight（true）包括padding和border以及margin的width和height

二、獲取元素相對頁面的絕對位置

offset（）獲取元素的絕對位置，返回的是個對象

三、獲取可視區高度

$(window).height()

四、獲取頁面的高度

$(document).height()

五、獲取頁面滾動距離

$(document).scrollTop();常使用這個製做回到頁面頂部效果

$(document).scrollLeft();

六、頁面滾動事件

$(window).scroll(function(){

　　............

})

10、jQuery動畫 animate({par1:值,par2:值,par3:值},speed,動畫曲線,function(){})

經過animate方法能夠設置元素某屬性值上的動畫，能夠設置一個或多個屬性值，動畫執行完成後會執行一個函數。

//參數說明：
 一、屬性設置{par1:1,par2:2}
 二、speed 時間(ms)
 三、動畫曲線 swing(默認值) 開始和結束慢速 中間快速，linear勻速
 四、回調函數  指動畫完成以後作什麼操做。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。