jQuery系列第三章 jQuery框架操做CSS

時間 2019-11-05

標籤 jquery 系列第三框架 css 欄目 JQuery 简体版

原文原文鏈接

第三章 jQuery框架操做CSS

3.1 jQuery框架的CSS方法

jQuery框架提供了css方法，咱們經過調用該方法傳遞對應的參數，能夠方便的來批量設置標籤的CSS樣式。css

使用JavaScript設置標籤的樣式相對來講比較麻煩，而若是須要批量的設置多個標籤的樣式那須要寫不少代碼，使用jQuery能夠爲咱們簡化該過程。html

　使用原生的方式來設置標籤的樣式(代碼示例)jquery

 1 <body>
 2 <div>我是div標籤</div>
 3 <button id="btnID">按鈕</button>
 4 <script>
 5     window.onload = function () {
 6         var oBtn = document.getElementById("btnID");
 7         oBtn.onclick = function () {
 8             var oDiv = document.getElementsByTagName("div")[0];
 9             oDiv.style.height = "50px";
10             oDiv.style.width = "200px";
11             oDiv.style.background = "red";
12         }
13     }
14 </script>
15 </body>

　　　使用jQuery中的css方法來設置標籤的樣式(代碼示例)編程

 1 <body>
 2 <div>我是div標籤</div>
 3 <button id="btnID">按鈕</button>
 4 <script src="jquery-3.2.1.js"></script>
 5 <script>
 6     $(function () {
 7         $("#btnID").click(function () {
 8             $("div").css("height","50px").css("width","200px").css("background","red");
 9         })
10     })
11 </script>
12 </body>

CSS方法的語法瀏覽器

① $("selector").css(name,value);
② $("selector").css(name1,value).css(name2,value)...;
③ $("selector").css( { name1 : value , name2 : value})框架

　　代碼示例spa

 1 <script>
 2     $(function () {
 3         $("#btnID").click(function () {
 4             //01 CSS方法的第一種使用方式
 5             //$("div").css("height","50px");
 6             //$("div").css("width","200px");
 7             //$("div").css("background","red");
 8             //02 CSS方法的第二種使用方式:鏈式編程
 9             //$("div").css("height","50px").css("width","200px").css("background","red");
10             //03 CSS方法的第三種使用方式:傳遞樣式鍵值對的對象做爲參數
11             $("div").css({
12                 "height":"100px",
13                 "width":"200px",
14                 "background":"red"
15             })
16         })
17     })
18 </script>

　　3.2 jQuery框架操做Class

　　jQuery框架中操做class的方法主要有：code

addClass : 爲選中的全部標籤批量的添加Class
hasClass：檢查選定的標籤中是否存在指定的Class
removeClass：把選定標籤中指定的Class刪除
toggleClass：切換Classhtm

addClass：爲選中的全部標籤批量的添加Class。對象

① $("selector")addClass("class1");
② $("selector")addClass("class1 class2");
③ $("selector")addClass("class1").addClass("class2");

hasClass：檢查選定的標籤中是否存在指定的Class。

　　只要選中的全部標籤中有一個標籤存在該Class，那麼就把返回true,若是選中的全部標籤中都沒有找到該class ，那麼就返回false。

$("selector")hasClass("class1");

removeClass：把全部選定標籤中指定的Class刪除。

遍歷jQuery實例對象中全部的標籤，若是當前標籤中存在該指定的class，那麼就刪除，若是不存在，則不做處理。

① $("selector")removeClass("class1");
② $("selector")removeClass("class1 class2");
③ $("selector")removeClass("class1").removeClass("class2");

toggleClass：切換全部選中標籤的Class。

若是當前標籤中存在指定的Class，那麼就刪除，若是不存在，那麼就添加。

① $("selector")toggleClass("class1");
② $("selector")toggleClass("class1 class2");
③ $("selector")toggleClass("class1").toggleClass("class2");

　　代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="JS/jquery-3.2.1.js"></script>
 7     <style>
 8         .class1{
 9             width: 400px;
10             height: 50px;
11             background: red;
12         }
13         .class2{
14             width: 600px;
15             background: green;
16             border: 1px solid #000000;
17         }
18     </style>
19 </head>
20 <body>
21 <script>
22     $(function () {
23         //....
24         //jQuery對Class的操做:
25         //添加class addClass
26         //刪除class removeClass
27         //檢查class hasClass
28         //切換class toggleClass
29         //01 添加class
30         $("button").eq(0).click(function () {
31             //console.log("點擊");
32             //獲取指定的標籤,而且設置class
33             //添加class:
34             //(1) jQ對象.addClass("類")
35             //(2) jQ對象.addClass("類1")..addClass("類2")
36             //(3) jQ對象.addClass("類1 類2")
37             //$("div").addClass("class1")
38             //$("div").addClass("class1").addClass("class2")
39             $("div").addClass("class1 class2")
40         })
41         //02 檢查class
42         $("button").eq(1).click(function () {
43             //console.log("點擊");
44             //獲取指定的標籤,而且設置class
45             //檢查class:檢查div標籤中是否存在class1,若是存在那麼就返回true,不然返回false
46             console.log($("div").hasClass("class1"));
47             console.log($("p").hasClass("demo1"));
48         })
49         //03 刪除class
50         $("button").eq(2).click(function () {
51             //console.log("點擊");
52             //獲取指定的標籤,而且設置class
53             //刪除class:
54             //(1) jQ對象.removeClass("類")
55             //(2) jQ對象.removeClass("類1")..removeClass("類2")
56             //(3) jQ對象.removeClass("類1 類2")
57             //$("div").removeClass("class2")
58             //$("div").removeClass("class1").removeClass("class2")
59             $("div").removeClass("class1 class2")
60         })
61         //04 切換class
62         $("button").eq(3).click(function () {
63             //console.log("點擊");
64             //獲取指定的標籤,而且設置class
65             //切換class:若是指定的class存在那麼就刪除,不然就添加
66             //(1) jQ對象.toggleClass("類")
67             //(2) jQ對象.toggleClass("類1 類2")
68             //$("div").toggleClass("class2")
69             $("div").toggleClass("class1 class2")
70         })
71     })
72 </script>
73 <div>我是div</div>
74 <p class="demo1"></p>
75 <p class="demo2"></p>
76 <button>添加</button>
77 <button>檢查</button>
78 <button>刪除</button>
79 <button>切換</button>
80 </body>
81 </html>

3.3 jQuery框架操做位置的方法介紹

① width和height方法

　　$("selector").width()和$("selector").height()方法的使用：若是不傳遞參數則表示獲取指定標籤的寬度|高度，若是傳遞參數則表示要設置標籤的寬度|高度。

② offset和position方法

　　offset表示獲取當前標籤距離瀏覽器窗口的位置，而position獲取當前標籤距離父標籤的位置

代碼示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="JS/jquery-3.2.1.js"></script>
 7     <style>
 8        .class1{
 9            width: 200px;
10            height: 200px;
11            background: rebeccapurple;
12            position: relative;
13        }
14         .class2{
15             width: 50px;
16             height: 50px;
17             background: #2aa198;
18             left: 10px;
19             top:20px;
20             position: absolute;
21         }
22     </style>
23 </head>
24 <body>
25 <script>
26     $(function () {
27         //....
28         //01 width和height:
29         //console.log($(".class2").get(0));
30         //獲取寬度和高度:不傳遞參數
31         console.log($(".class2").width());
32         console.log($(".class2").height());
33         //設置寬度和高度:傳遞參數
34         $(".class2").width(100);
35         $(".class2").height(100);
36         console.log($(".class2").width());
37         console.log($(".class2").height());
38         //02 位置:獲取當前標籤距離窗口的位置 offset
39         console.log($(".class2").offset().left);
40         console.log($(".class2").offset().top);
41         //03 位置:獲取當前標籤距離父標籤的位置 position
42         console.log($(".class2").position().left);
43         console.log($(".class2").position().top);
44     })
45 </script>
46 <div class="class1">
47     <div class="class2"></div>
48 </div>
49 </body>
50 </html>