3.1 jQuery框架的CSS方法

jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式。

使用JavaScript设置标签的样式相对来说比较麻烦,而如果需要批量的设置多个标签的样式那需要写很多代码,使用jQuery可以为我们简化该过程。

使用原生的方式来设置标签的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<div>我是div标签</div>
<button id="btnID">按钮</button>
<script>
window.onload = function () {
var oBtn = document.getElementById("btnID");
oBtn.onclick = function () {
var oDiv = document.getElementsByTagName("div")[0];
oDiv.style.height = "50px";
oDiv.style.width = "200px";
oDiv.style.background = "red";
}
}
</script>
</body>

使用jQuery中的css方法来设置标签的样式

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<div>我是div标签</div>
<button id="btnID">按钮</button>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
$("#btnID").click(function () {
$("div").css("height","50px").css("width","200px").css("background","red");
})
})
</script>
</body>

CSS方法的语法:

① $("selector").css(name,value);
② $("selector").css(name1,value).css(name2,value)...;
③ $("selector").css( { name1 : value , name2 : value})

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
$(function () {
$("#btnID").click(function () {

//01 CSS方法的第一种使用方式
//$("div").css("height","50px");
//$("div").css("width","200px");
//$("div").css("background","red");


//02 CSS方法的第二种使用方式:链式编程
//$("div").css("height","50px").css("width","200px").css("background","red");

//03 CSS方法的第三种使用方式:传递样式键值对的对象作为参数
$("div").css({
"height":"100px",
"width":"200px",
"background":"red"
})
})
})
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery-3.2.1.js"></script>
<style>
.class1{
width: 400px;
height: 50px;
background: red;
}

.class2{
width: 600px;
background: green;
border: 1px solid #000000;
}
</style>
</head>
<body>
<script>
$(function () {
//....
//jQuery对Class的操作:
//添加class addClass
//删除class removeClass
//检查class hasClass
//切换class toggleClass

//01 添加class
$("button").eq(0).click(function () {
//console.log("点击");
//获取指定的标签,并且设置class
//添加class:
//(1) jQ对象.addClass("类")
//(2) jQ对象.addClass("类1")..addClass("类2")
//(3) jQ对象.addClass("类1 类2")

//$("div").addClass("class1")
//$("div").addClass("class1").addClass("class2")
$("div").addClass("class1 class2")
})

//02 检查class
$("button").eq(1).click(function () {
//console.log("点击");
//获取指定的标签,并且设置class
//检查class:检查div标签中是否存在class1,如果存在那么就返回true,否则返回false
console.log($("div").hasClass("class1"));
console.log($("p").hasClass("demo1"));
})

//03 删除class
$("button").eq(2).click(function () {
//console.log("点击");
//获取指定的标签,并且设置class
//删除class:
//(1) jQ对象.removeClass("类")
//(2) jQ对象.removeClass("类1")..removeClass("类2")
//(3) jQ对象.removeClass("类1 类2")

//$("div").removeClass("class2")
//$("div").removeClass("class1").removeClass("class2")
$("div").removeClass("class1 class2")
})

//04 切换class
$("button").eq(3).click(function () {
//console.log("点击");
//获取指定的标签,并且设置class
//切换class:如果指定的class存在那么就删除,否则就添加

//(1) jQ对象.toggleClass("类")
//(2) jQ对象.toggleClass("类1 类2")
//$("div").toggleClass("class2")
$("div").toggleClass("class1 class2")
})
})

</script>
<div>我是div</div>
<p class="demo1"></p>
<p class="demo2"></p>

<button>添加</button>
<button>检查</button>
<button>删除</button>
<button>切换</button>
</body>
</html>

3.3 jQuery框架操作位置的方法介绍

① width和height方法

$("selector").width()和$("selector").height()方法的作用:获取|设置匡高。 如果不传递参数则表示获取指定标签的宽度|高度,如果传递参数则表示要设置标签的宽度|高度。

② offset和position方法

offset表示获取当前标签距离浏览器窗口的位置,而position获取当前标签距离父标签的位置

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery-3.2.1.js"></script>
<style>
.class1{
width: 200px;
height: 200px;
background: rebeccapurple;
position: relative;
}

.class2{
width: 50px;
height: 50px;
background: #2aa198;
left: 10px;
top:20px;
position: absolute;
}
</style>
</head>
<body>
<script>
$(function () {
//....
//01 width和height:
//console.log($(".class2").get(0));
//获取宽度和高度:不传递参数
console.log($(".class2").width());
console.log($(".class2").height());
//设置宽度和高度:传递参数
$(".class2").width(100);
$(".class2").height(100);

console.log($(".class2").width());
console.log($(".class2").height());

//02 位置:获取当前标签距离窗口的位置 offset
console.log($(".class2").offset().left);
console.log($(".class2").offset().top);

//03 位置:获取当前标签距离父标签的位置 position
console.log($(".class2").position().left);
console.log($(".class2").position().top);
})

</script>
<div class="class1">
<div class="class2"></div>
</div>
</body>
</html>