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"; 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})
代码示例
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 博客园·文顶顶 ~ 文顶顶的个人博客_花田半亩
- 联系作者 简书·文顶顶 新浪微博·文顶顶
- 原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | 文顶顶