第三章 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 addClass26 ????????//删除class removeClass27 ????????//检查class hasClass28 ????????//切换class toggleClass29 ????????//01 添加class30 ????????$("button").eq(0).click(function () {31 ????????????//console.log("点击");32 ????????????//获取指定的标签,并且设置class33 ????????????//添加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 检查class42 ????????$("button").eq(1).click(function () {43 ????????????//console.log("点击");44 ????????????//获取指定的标签,并且设置class45 ????????????//检查class:检查div标签中是否存在class1,如果存在那么就返回true,否则返回false46 ????????????console.log($("div").hasClass("class1"));47 ????????????console.log($("p").hasClass("demo1"));48 ????????})49 ????????//03 删除class50 ????????$("button").eq(2).click(function () {51 ????????????//console.log("点击");52 ????????????//获取指定的标签,并且设置class53 ????????????//删除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 切换class62 ????????$("button").eq(3).click(function () {63 ????????????//console.log("点击");64 ????????????//获取指定的标签,并且设置class65 ????????????//切换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 位置:获取当前标签距离窗口的位置 offset39 ????????console.log($(".class2").offset().left);40 ????????console.log($(".class2").offset().top);41 ????????//03 位置:获取当前标签距离父标签的位置 position42 ????????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
原文地址：https://www.cnblogs.com/wendingding/p/8778141.html