首页 > 网站开发 > JavaScript教程 >
-
WEB前端第四十四课——jQuery框架(二)常用方法
1.css()方法
用于更改 jq对象的css样式,本方法可读可写,相当于 js中的 style属性
语法:$("选择器") .css("key", "value");
css()方法的第二个参数为可选参数,
如果只有第一个参数,就是读取样式;
如果有两个参数或JSON样式参数就是设置样式。
示例,var $w=$("div").css("width");
console.log(parseInt($w)); //读取 jq对象尺寸的返回值包含单位,使用数字时需要转换。
注意,书写css属性名时可以使用“驼峰”格式,也可以使用“横杠”格式;
当css属性的值是以“px”为计量单位的数值时,可以不写px单位,写px时必须加引号!
特性,jq中css样式的宽度和高度可以直接在原值的基础上累加,示例如下:
$("div").css("width", "+=400px"); //可以配合监听事件使用
2.show()和hide()
show(),用于设置元素的显示,相当于 style中的 display:block;
hide(),用于设置元素的隐藏,相当于 style中的 display:none;
语法:$("选择器").show(timeValue) || hide(timeValue);
两种方法都可以设置参数,用于定义显示和隐藏的动画效果时间。
这两种方法可以配合“toggle()”方法使用,可以方便的实现元素的切换,包括显示/隐藏切换和内容切换。
语法:$("点击元素").toggle(function(){
$("选择器").show(timeValue);
$("选择器").html(“textContent”);
},
function(){
$("选择器").hide(timeValue);
});
toggle()方法内可以绑定多个事件处理函数,以响应被选元素的轮流的 click事件,
另外,还可以定义时间和效果参数(字符串),实现动画效果,但toggle()方法在高版本中已取消。
代码示例:
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
|
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>Test</title> <script src= "jQueryFiles/jquery-1.8.3.js" ></script> </head> <body> <button>显示Div元素</button> <div class = "div1" ></div> <div class = "div2" ></div> <div class = "div3" ></div> <script> var d1=$( ".div1" ); var d2=$( ".div2" ); var d3=$( ".div3" ); $( "button" ).click( function () { d1.css({ "width" :200, "height" : "200px" ,backgroundColor: "gold" }); d2.css({ "width" :200, "height" : "200px" ,backgroundColor: "gray" }); }); // 给div1添加鼠标进入、离开和点击事件 var colorArr=[ "red" , "yellow" , "blue" , "green" , "orange" , "indigo" , "purple" , "brown" ]; d1.bind({ mouseenter: function () { $( this ).animate({ width:100,height:100, "backgroundColor" : "hotpink" , borderRadius: "50%" , },1000).css({ //链式声明 "backgroundColor" : "hotpink" , "border" : "2px solid white" }); //不支持animate()方法?? }, click: function () { var i=Math.floor(Math.random()*8); $( this ).css( "backgroundColor" ,colorArr[i]); //获取随机背景颜色 }, mouseleave: function () { $( this ).animate({ "width" :200, "height" : "200px" , borderRadius: "0" , },1000).css({ backgroundColor: "gold" , }); $( this ).off( "mouseenter" ); //去除事件 } }); // 给div2添加鼠标悬停 // 定义hover事件中的 in事件 d2.hover( function () { $( this ).animate({ "width" :100, "height" : "100px" , },1000).css({ //链式声明 "backgroundColor" : "yellowgreen" , "border" : "2px solid darkorange" , "cursor" : "pointer" , }); d3.css({ "backgroundColor" : "red" , "width" : "100px" , "height" : "100px" , "borderRadius" : "50%" , "position" : "absolute" , "display" : "none" , "left" :d2[0].offsetLeft+d2[0].offsetWidth+1+ "px" , "top" :d2[0].offsetTop+2+ "px" , }); // 在hover的in事件中定义click事件 $( this ).click( function () { //存在问题:1.连续快速点击后,目标元素会一直移动停不下来?2.点击事件会逐次累加导致多次移动? d3.show(2000) //动画显示 .animate({ "left" : "+=500px" , //定义left属性的自增效果 },1000); console.log(d3[0].offsetLeft); console.log(d3[0].offsetTop); }); }, // 定义hover事件中的out事件 function () { d3.animate({ "left" :d2[0].offsetLeft+d2[0].offsetWidth+1+ "px" },2000); d3.hide(1000); //动画隐藏 }) </script> </body> </html> |
3.slideDown()和slideUp()
slideDown(),表示下拉显示,当元素的 style属性为“display:none”时,才能调用 slideDown()方法;
语法:$("选择器").slideDown(timeValue);
slideUp(),表示上滑隐藏,当元素为显示的时候,才能调用 slideUp()方法,
语法:$("选择器").slideUp(timeValue);
这两种方法都可以定义“时间”参数,实现动画效果,即使不设置时间参数也会有较短的动画效果。
注意,两种方法存在一个隐藏的属性“边界”,即下拉开始和上滑结束的位置, 默认是元素的上边框;
可以通过“定位”的方式来设置 jq对象的边界属性,改变动作开始和结束位置。
对于连续快速操作导致动画一直执行的现象称作“动画积累”,可以通过“stop()”方法解决这一问题。
stop(),用于停止所有在指定元素上正在运行的动画,如果队列中有等待执行的动画(并且
clearQueue没有设为 true),他们将被马上执行。
语法:$("选择器").stop(true||false);
参数为true,表示清空队列(立即结束动画),
默认为false,表示立即完成正在执行的动画,同时重设show和hide原始样式,调用回调函数等
4.fadeIn()和fadeOut()
这两种方法表示淡入、淡出效果。
语法:$("选择器").fadeIn(timeValue);
$("选择器").fadeOut(timeValue);
注意,fadeIn()的起点和fadeOut()的终点都是“display:none”,而不是“opacity:0”。
也就是说一个元素如果想实现淡入,一定要设置“display:none”属性,而不是“opacity:0”属性。
代码示例:
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
|
<html lang= "en" > <head> <meta charset= "UTF-8" > <title>显示&隐藏</title> <script src= "jQueryFiles/jquery-1.8.3.js" ></script> <style> button{display:block;margin: 0px auto;letter-spacing: 2px;} .div1{ width: 100px;height: 200px;background-color: orangered; margin:0px auto; } .div2{ width: 100px;height: 300px;border: 1px solid fuchsia; margin:0px auto;position: relative; } .div3{ width: 100px;height: 200px;background-color: deepskyblue; bottom:0px;position: absolute; } </style> </head> <body> <button>Div操作</button> <div class = "div1" ></div> <div class = "div2" style= "display: none" > <div class = "div3" ></div> </div> <script> var $d1=$( ".div1" ); var $d2=$( ".div2" ); var $d3=$( ".div3" ); var $btn=$( "button" ); $btn.toggle( function () { $d1.hide(3000); //隐藏元素 $( this ).html( "显示Div1" ); $d2.fadeIn(3000); //淡入元素 }, function () { $d1.show(3000); //显示元素 $( this ).html( "隐藏Div1" ); $d2.fadeOut(3000); //淡出元素 }); $d2.hover( function () { for ( var i=0;i<5;i++){ $d3.slideUp(1000).slideDown(1000); //滑出&滑入元素 } }, function () { $d3.stop(); //立即完成正在执行的动画 }) </script> </body> </html> |
ps:上述示例中的滑入&滑出的“重复动画效果”,可以通过“from…to…”关键字实现。
5.addClass()和removeClass()
这两种方法用于“追加类”和“移除类”。
语法:$("选择器").addClass("className"); //追加类名,不改变已有类名
$("选择器").removeClass("className"); //删除指定类名,不影响其他类名
※ className前不需要加“点号”!!!
ps:可以通过增加和删除类名,操作元素样式。
6.attr()方法
在原生 js中通过类似如下方式修改元素属性:
document.getElementById("#pic").src="newUrl";
在 jQuery中使用 attr()方法“读写”元素的属性值。
语法:$("选择器").adttr("key", "value");
当 attr()方法只有一个参数时,表示“读取”元素的属性。
语法:$("选择器").adttr("property");
7.html()方法
用于“读写”元素内部的内容,相当于原生 js中的“innerHTML”。
语法:$("选择器").html("textContent");
当 html()方法中不写参数时表示“读取”元素的内容。
出处:https://www.cnblogs.com/husa/p/13682233.html