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>