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>
