jQuery系列 第三章 jQuery框架操作CSS
第三章 jQuery框架操作CSS
3.1 jQuery框架的CSS方法
jQuery框架提供了css方法，我們通過調用該方法傳遞對應的參數，可以方便的來批量設置標簽的CSS樣式。
使用JavaScript設置標簽的樣式相對來說比較麻煩，而如果需要批量的設置多個標簽的樣式那需要寫很多代碼，使用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"; 11oDiv.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})
代碼示例
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的方法主要有：
addClass : 為選中的所有標簽批量的添加Class
hasClass：檢查選定的標簽中是否存在指定的Class
removeClass：把選定標簽中指定的Class刪除
toggleClass： 切換Class
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>
- Posted by 博客園·文頂頂 ~ 花田半畝
- 聯系作者 簡書·文頂頂 新浪微博·文頂頂_iOS
- 原創文章，版權聲明：自由轉載-非商用-非衍生-保持署名 | 文頂頂
jQuery系列 第三章 jQuery框架操作CSS