jquery
一.寻找元素(选择器和筛选器)
a.选择器
1.基本选择器
1
|
$(
"*"
) $(
"#id"
) $(
".class"
) $(
"element"
) $(
".class,p,div"
)
|
2.层级选择器
1
|
$(
".outer div"
) $(
".outer>div"
) $(
".outer+div"
) $(
".outer~div"
)
|
3.基本筛选器
1
|
$(
"li:first"
) $(
"li:eq(2)"
) $(
"li:even"
) $(
"li:gt(1)"
)
|
4.属性选择器
1
|
$(
'[id="div1"]'
) $(
'["alex="sb"][id]'
)
|
5.表单选择器
1
2
|
$(
"[type='text']"
)
-
-
-
-
-
>$(
":text"
)
#注意只适用于input标签 : $("input:checked")
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul> 9 <li>111</li> 10 <li>222</li> 11 <li>333</li> 12 <li>444</li> 13 </ul> 14 <script src="jquery-3.2.1.js"></script> 15 16 <script> 17 $("li").css("color","red"); #数组 18 19 $("li:first").css("color","red"); #第一个 20 $("li:last").css("color","red"); #第二个 21 22 $("li:eq(2)").css("color","red"); #查找索引 23 24 $("li:even").css("color","red"); #基数行 25 26 $("li:odd").css("color","red"); #偶数行 27 28 $("li:gt(1)").css("color","red"); #大于某个数 29 30 31 $("li:lt(2)").css("color","red"); #小于某个数 32 33 34 35 </script> 36 </body> 37 </html> 38 39 基本选择器 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 10 <p alex="sb">1111</p> 11 <p alex="sb">1111</p> 12 <p alex="sb" id="p4">1111</p> 13 14 15 <script src="jquery-3.2.1.js"></script> 16 17 <script> 18 19 $("[alex]").css("color","red") #都变红 20 21 $("[alex='sb']").css("color","red") #都变红 22 23 $("[alex='sb'][id='p4']").css("color","red") #最后一个变红 24 25 </script> 26 </body> 27 </html> 28 29 属性选择器 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 10 <input type="text"> 11 <input type="checkbox"> 12 <input type="submit"> 13 14 15 16 <script src="jquery-3.2.1.js"></script> 17 18 <script> 19 20 $("[type='text']").css("width","300px"); 21 22 $(":text").css("width","300px"); #简写 23 24 </script> 25 </body> 26 </html>
b.筛选器
1.过滤筛选器
1
|
$(
"li"
).eq(
2
) $(
"li"
).first() $(
"ul li"
).hasclass(
"test"
)
|
2.查找筛选器
1
2
3
4
5
6
7
8
9
|
$(
"div"
).children(
".test"
) $(
"div"
).find(
".test"
)
$(
".test"
).
next
() $(
".test"
).nextAll() $(
".test"
).nextUntil()
$(
"div"
).prev() $(
"div"
).prevAll() $(
"div"
).prevUntil()
$(
".test"
).parent() $(
".test"
).parents() $(
".test"
).parentUntil()
$(
"div"
).siblings()
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>left_menu</title> 6 7 <style> 8 .menu{ 9 height: 500px; 10 width: 30%; 11 background-color: gainsboro; 12 float: left; 13 } 14 .content{ 15 height: 500px; 16 width: 70%; 17 background-color: rebeccapurple; 18 float: left; 19 } 20 .title{ 21 line-height: 50px; 22 background-color: #425a66; 23 color: forestgreen; 24 } 25 26 27 .hide{ 28 display: none; 29 } 30 31 32 </style> 33 </head> 34 <body> 35 36 <div class="outer"> 37 <div class="menu"> 38 <div class="item"> 39 <div class="title" οnclick=show(this);>菜单一</div> 40 <div class="con"> 41 <div>111</div> 42 <div>111</div> 43 <div>111</div> 44 </div> 45 </div> 46 <div class="item"> 47 <div class="title" οnclick=show(this);>菜单二</div> 48 <div class="con hide"> 49 <div>111</div> 50 <div>111</div> 51 <div>111</div> 52 </div> 53 </div> 54 <div class="item"> 55 <div class="title" οnclick=show(this);>菜单三</div> 56 <div class="con hide"> 57 <div>111</div> 58 <div>111</div> 59 <div>111</div> 60 </div> 61 </div> 62 63 </div> 64 <div class="content"></div> 65 66 </div> 67 68 <script src="jquery-3.2.1.js"></script> 69 70 <script> 71 function show(self){ 72 $(self).next().removeClass("hide"); 73 $(self).parent().siblings().children(".con").addClass("hide"); 74 75 } 76 </script> 77 78 </body> 79 </html> 80 81 实例之左侧菜单 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <button οnclick="selectall();">全选</button> 10 <button οnclick="cancel();">取消</button> 11 <button οnclick="reverse();">反选</button> 12 13 14 <table border="1" id="Table"> 15 <tr> 16 <td><input type="checkbox"></td> 17 <td>111</td> 18 </tr> 19 <tr> 20 <td><input type="checkbox"></td> 21 <td>222</td> 22 </tr> 23 <tr> 24 <td><input type="checkbox"></td> 25 <td>333</td> 26 </tr> 27 <tr> 28 <td><input type="checkbox"></td> 29 <td>444</td> 30 </tr> 31 </table> 32 33 <script src="jquery-3.2.1.js"></script> 34 <script> 35 function selectall() { 36 $(":checkbox").each(function () { 37 $(this).prop("checked", true) 38 }) 39 } 40 41 function cancel() { 42 $(":checkbox").each(function () { 43 $(this).prop("checked", false) 44 }) 45 } 46 47 function reverse() { 48 $(":checkbox").each(function () { 49 if($(this).prop("checked")){ 50 $(this).prop("checked",false) 51 } 52 else { 53 $(this).prop("checked",true) 54 } 55 }) 56 } 57 </script> 58 59 </body> 60 </html> 61 62 正选 反选 取消
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .back{ 8 background-color: rebeccapurple; 9 height: 2000px; 10 } 11 12 .shade{ 13 position: fixed; 14 top: 0; 15 bottom: 0; 16 left:0; 17 right: 0; 18 background-color: coral; 19 opacity: 0.4; 20 } 21 22 .hide{ 23 display: none; 24 } 25 26 .models{ 27 position: fixed; 28 top: 50%; 29 left: 50%; 30 margin-left: -100px; 31 margin-top: -100px; 32 height: 200px; 33 width: 200px; 34 background-color: gold; 35 36 } 37 </style> 38 </head> 39 <body> 40 41 <div class="back"> 42 <input id="ID1" type="button" value="click" οnclick="action1(this)"> 43 </div> 44 45 <div class="shade hide"></div> 46 47 <div class="models hide"> 48 <input id="ID2" type="button" value="cancel" οnclick="action2(this)"> 49 </div> 50 51 52 <script src="jquery-3.2.1.js"></script> 53 <script> 54 55 function action1(self){ 56 $(self).parent().siblings().removeClass("hide"); 57 58 } 59 function action2(self){ 60 61 $(self).parent().addClass("hide").prev().addClass("hide") 62 63 } 64 </script> 65 </body> 66 </html> 67 68 模态窗口
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .outer{ 13 width: 80%; 14 margin: 20px auto; 15 } 16 17 .nav li{ 18 list-style: none; 19 float: left; 20 width: 33.2%; 21 height: 40px; 22 background-color: wheat; 23 text-align:center; 24 line-height: 40px; 25 border-right: solid 1px green; 26 } 27 28 .nav:after{ 29 content: "."; 30 display: block; 31 clear: both; 32 visibility: hidden; 33 line-height: 0; 34 height: 0; 35 font-size:0; 36 } 37 38 .content{ 39 width: 100%; 40 height: 400px; 41 background-color: yellowgreen; 42 } 43 44 ul .active{ 45 background-color: #204982; 46 } 47 48 .hide{ 49 display: none; 50 } 51 </style> 52 </head> 53 <body> 54 55 56 <div class="outer"> 57 <ul class="nav"> 58 <li xxx="con1" class="active" οnclick="tab(this)">菜单一</li> 59 <li xxx="con2" οnclick="tab(this)">菜单二</li> 60 <li xxx="con3"οnclick="tab(this)">菜单三</li> 61 </ul> 62 63 <div class="content"> 64 <div class="con1">111</div> 65 <div class="con2 hide">222</div> 66 <div class="con3 hide">333</div> 67 </div> 68 </div> 69 70 <script src="jquery-3.2.1.js"></script> 71 <script> 72 function tab(self) { 73 var index=$(self).attr("xxx"); 74 $("."+index).removeClass("hide").siblings().addClass("hide") 75 $(self).addClass("active").siblings().removeClass("active") 76 77 78 } 79 </script> 80 81 82 </body> 83 </html> 84 85 Tab 切换 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div class="c1"> 10 <p>ppp</p> 11 </div> 12 13 <button>button</button> 14 <script src="jquery-3.2.1.js"></script> 15 <script> 16 $("button").click(function () { 17 18 $("p").empty() 19 20 }) 21 </script> 22 23 </body> 24 </html> 25 26 empty remove 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div class="outer"> 10 <div class="iterm"> 11 <button οnclick="add(this)">+</button> 12 <input type="text"> 13 </div> 14 </div> 15 16 <script src="jquery-3.2.1.js"></script> 17 <script> 18 function add(self) { 19 var $clone_obj=$(self).parent().clone(); 20 $clone_obj.children("button").text("-"); 21 $clone_obj.children("button").attr("onclick","remove_obj(this)"); 22 23 $(".outer").append($clone_obj); 24 } 25 26 function remove_obj(self) { 27 $(self).parent().remove() 28 } 29 30 31 32 </script> 33 34 </body> 35 </html> 36 37 clone input标签 演示
二.操作元素(属性,css,文档处理)
a.属性操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#--------------------------属性
$("").attr();
#新建属性 查看属性 修改属性 自己定义的属性
$("").removeAttr();
$("").prop();
#固有的属性
$("").removeProp();
#--------------------------CSS类
$("").addClass(
class
|fn)
$("").removeClass([
class
|fn])
#--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
#取固有属性,input标签
#---------------------------
$("
").css("
color
","
red")
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div class="div1" con="c1"></div> 9 10 11 <script src="jquery-3.2.1.js"></script> 12 <script> 13 14 console.log($("div").attr("con")) #查看属性的值 15 16 $("div").attr("con","c2") #修改属性 17 18 $("div").attr("alex","c2") #新建属性 19 20 </script> 21 </body> 22 </html> 23 24 attr 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <input type="checkbox" checked="checked">是否可见 10 <input type="checkbox" >是否可见 11 12 13 <script src="jquery-3.2.1.js"></script> 14 <script> 15 16 console.log($(":checkbox:first").prop("checked")) 17 console.log($(":checkbox:last").prop("checked")) 18 19 </script> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 10 <div id="id1"> 11 <p>1111</p> 12 </div> 13 14 15 <script src="jquery-3.2.1.js"></script> 16 <script> 17 18 console.log($("#id1").html()); #查找 19 console.log($("#id1").text()); #查找 20 21 $("#id1").html("<h2>hello word</h2>") #赋值 22 23 </script> 24 </body> 25 </html> 26 27 html text 演示
b.文档处理
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
|
/
/
创建一个标签对象
$(
"<p>"
)
/
/
内部插入
$("
").append(content|fn) ----->$("
p
").append("
<b>Hello<
/
b>");
$("
").appendTo(content) ----->$("
p
").appendTo("
div");
$("
").prepend(content|fn) ----->$("
p
").prepend("
<b>Hello<
/
b>");
$("
").prependTo(content) ----->$("
p
").prependTo("
#foo");
/
/
外部插入
$("
").after(content|fn) ----->$("
p
").after("
<b>Hello<
/
b>");
#自己插兄弟
$("
").before(content|fn) ----->$("
p
").before("
<b>Hello<
/
b>");
$("
").insertAfter(content) ----->$("
p
").insertAfter("
#foo"); #兄弟插自己
$("
").insertBefore(content) ----->$("
p
").insertBefore("
#foo");
/
/
替换
$("
").replaceWith(content|fn) ----->$("
p
").replaceWith("
<b>Paragraph. <
/
b>");
/
/
删除
$("").empty()
#标签还在,内容清空
$("").remove([expr])
#标签和内容都清空
/
/
复制
$("").clone([Even[,deepEven]])
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div class="c1"> 10 <p>ppp</p> 11 </div> 12 13 <button>add</button> 14 <script src="jquery-3.2.1.js"></script> 15 <script> 16 $("button").click(function () { 17 var $ele=$("<h1></h1>"); 18 $ele.html("hello word"); 19 $ele.css("color","red"); 20 21 // $(".c1").append($ele); #父亲增加儿子 22 23 $ele.appendTo(".c1") ; #儿子增加父亲 24 }) 25 </script> 26 27 </body> 28 </html> 29 30 append appendTo 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div class="c1"> 10 <p>ppp</p> 11 </div> 12 13 <button>add</button> 14 <script src="jquery-3.2.1.js"></script> 15 <script> 16 $("button").click(function () { 17 var $ele=$("<h1></h1>"); 18 $ele.html("hello word"); 19 $ele.css("color","red"); 20 21 $("p").replaceWith($ele); 22 23 24 }) 25 </script> 26 27 </body> 28 </html> 29 30 replaceWith 替换演示
c. css操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#CSS
$("").css(name|pro|[,val|fn])
# 位置
$("").offset([coordinates])
#相对于视口的偏移量
$("").position()
#相对于已经定位的父标签的偏移量
$("").scrollTop([val])
$("").scrollLeft([val])
# 尺寸
$("").height([val|fn])
#高
$("").width([val|fn])
$("").innerHeight()
#加上内边距高
$("").innerWidth()
$("").outerHeight([soptions])
#内容+内边距+boder +True参数,就加上了margin
$("").outerWidth([options])
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 .div1,.div2{ 15 width: 200px; 16 height: 200px; 17 } 18 19 .div1{ 20 background-color: #84a42b; 21 } 22 23 .div2{ 24 background-color: red; 25 } 26 </style> 27 28 </head> 29 <body> 30 31 32 <div class="div1"></div> 33 <div class="div2"></div> 34 35 36 <script src="jquery-3.2.1.js"></script> 37 <script> 38 39 console.log($(".div2").offset().top) 40 console.log($(".div2").offset().left) 41 42 </script> 43 44 </body> 45 </html> 46 47 offset 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 .div1,.div2{ 15 width: 200px; 16 height: 200px; 17 } 18 19 .div1{ 20 background-color: #84a42b; 21 } 22 23 .div2{ 24 background-color: red; 25 } 26 27 /*.outer{*/ 28 /*position: relative;*/ 29 /*}*/ 30 </style> 31 32 </head> 33 <body> 34 35 36 <div class="div1"></div> 37 38 <div class="outer"> 39 40 <div class="div2"></div> 41 </div> 42 43 44 45 <script src="jquery-3.2.1.js"></script> 46 <script> 47 48 console.log($(".div1").position().top); 49 console.log($(".div1").position().left); 50 51 52 console.log($(".div2").position().top); 53 console.log($(".div2").position().left); 54 </script> 55 56 </body> 57 </html> 58 59 position 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 .div1,.div2{ 15 width: 200px; 16 height: 100px; 17 } 18 19 .div1{ 20 background-color: #84a42b; 21 border: 3px solid blue; 22 padding: 20px; 23 margin: 1px; 24 } 25 26 .div2{ 27 background-color: red; 28 } 29 30 31 </style> 32 33 </head> 34 <body> 35 36 37 <div class="div1"></div> 38 39 <div class="outer"> 40 41 <div class="div2"></div> 42 </div> 43 44 45 46 <script src="jquery-3.2.1.js"></script> 47 <script> 48 49 console.log($(".div1").height()); 50 console.log($(".div1").innerHeight()); 51 console.log($(".div1").outerHeight(true)); 52 53 54 55 </script> 56 57 </body> 58 </html> 59 60 尺寸 演示
三. 循环
a.方式一
1
2
3
4
5
6
7
8
9
10
|
<script>
arrs
=
[
11
,
22
,
33
];
arrs
=
{
"name"
:
"egon"
,
"age"
:
18
}
$.each(arrs,function (i,j) {
console.log(i);
console.log(j);
})
<
/
script>
|
b.方式二
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<p>
111
<
/
p>
<p>
222
<
/
p>
<p>
333
<
/
p>
<script src
=
"jquery-3.2.1.js"
><
/
script>
<script>
$(
"p"
).each(function () {
$(this).html(
"hello"
)
})
<
/
script>
|
四. 事件
1
2
3
4
5
|
# 事件绑定
bind
unbind
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 .div1,.div2{ 15 width: 100%; 16 height: 800px; 17 } 18 19 .div1{ 20 background-color: #84a42b; 21 } 22 23 .div2{ 24 background-color: red; 25 } 26 27 .returnTop{ 28 position: fixed; 29 right: 20px; 30 bottom: 20px; 31 width: 90px; 32 height: 50px; 33 background-color: cyan; 34 color: white; 35 text-align: center; 36 line-height: 50px; 37 } 38 39 .returnTop{ 40 display: none; 41 } 42 </style> 43 44 </head> 45 <body> 46 47 48 <ul> 49 <li>111</li> 50 <li>222</li> 51 <li>333</li> 52 <li>555</li> 53 </ul> 54 55 <buton>add</buton> 56 <script src="jquery-3.2.1.js"></script> 57 <script> 58 // $("ul li").click(function () { 59 // alert("123") 60 // }) 61 62 $("ul li").bind("click",function () { #绑定事件 63 alert(123) 64 }); 65 66 $("ul li").unbind("click") #解除绑定 67 68 69 </script> 70 71 </body> 72 </html> 73 74 bind unbind 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body> 9 10 11 <ul> 12 <li>111</li> 13 <li>111</li> 14 <li>111</li> 15 <li>111</li> 16 </ul> 17 18 <button>add</button> 19 <button class="off_p">off</button> 20 21 <script src="jquery-3.2.1.js"></script> 22 <script> 23 24 25 $(".off_p").click(function(){ 26 $("ul").off(); // 解除所有事件 27 }); 28 29 30 $("button:first").click(function(){ 31 $("ul").append("<li>222</li>")}); 32 33 34 $("ul").on("click","li",function(){ 35 alert(100) 36 }) 37 38 39 </script> 40 41 42 </body> 43 </html> 44 45 on 事件绑定 解除绑定 演示
五.动画效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
hide()
#显示
show()
#隐藏
toggle()
#切换
slideDown()
#滑入
slideUp()
#滑出
slideToggle()
#切换
fadeIn()
#淡入
fadeOut()
#淡出
fadeToggle()
#切换
fadeTo(
1000
,
0.4
)
#透明度
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div>hello</div> 10 11 12 <button οnclick="f1()">显示</button> 13 <button οnclick="f2()">隐藏</button> 14 <button οnclick="f3()">切换</button> 15 16 <script src="jquery-3.2.1.js"></script> 17 18 <script> 19 20 function f1() { 21 $("div").show(1000) 22 } 23 24 function f2() { 25 $("div").hide(1000) 26 } 27 28 function f3() { 29 $("div").toggle(1000) 30 } 31 32 33 </script> 34 35 </body> 36 </html> 37 38 显示 隐藏 切换 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-3.2.1.js"></script> 7 <script> 8 $(document).ready(function(){ 9 $("#slideDown").click(function(){ 10 $("#content").slideDown(1000); 11 }); 12 $("#slideUp").click(function(){ 13 $("#content").slideUp(1000); 14 }); 15 $("#slideToggle").click(function(){ 16 $("#content").slideToggle(1000); 17 }) 18 }); 19 </script> 20 21 22 <style> 23 #content{ 24 text-align: center; 25 background-color: darkgrey; 26 border: solid 1px blueviolet; 27 padding: 50px; 28 } 29 </style> 30 </head> 31 <body> 32 33 34 35 <div id="slideDown">出现</div> 36 <div id="slideUp">隐藏</div> 37 <div id="slideToggle">toggle</div> 38 39 <div id="content">hello word</div> 40 41 <script src="jquery-3.2.1.js"></script> 42 43 44 </body> 45 </html> 46 47 滑入 滑出 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-3.2.1.js"></script> 7 <script> 8 $(document).ready(function(){ 9 $("#in").click(function(){ 10 $("#id1").fadeIn(2000); 11 12 13 }); 14 $("#out").click(function(){ 15 $("#id1").fadeOut(2000); 16 17 }); 18 $("#toggle").click(function(){ 19 $("#id1").fadeToggle(2000); 20 21 22 }); 23 $("#fadeto").click(function(){ 24 $("#id1").fadeTo(1000,0.4); 25 26 }); 27 }); 28 29 30 31 </script> 32 33 </head> 34 <body> 35 <button id="in">fadein</button> 36 <button id="out">fadeout</button> 37 <button id="toggle">fadetoggle</button> 38 <button id="fadeto">fadeto</button> 39 40 <div id="id1" style="width: 80px;height: 80px;background-color: blueviolet"></div> 41 42 </body> 43 </html> 44 45 谈入 谈出 演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 8 </head> 9 <body> 10 <button>hide</button> 11 <p>helloworld helloworld helloworld</p> 12 13 14 15 <script> 16 $("button").click(function(){ 17 $("p").hide(1000,function(){ 18 alert($(this).html()) 19 }) 20 21 }) 22 </script> 23 </body> 24 </html> 25 26 回调函数
六. 扩展方法 (插件机制)
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
|
<script>
$.extend(
object
)
/
/
为JQuery 添加一个静态方法。
$.fn.extend(
object
)
/
/
为JQuery实例添加一个方法。
jQuery.extend({
min
: function(a, b) {
return
a < b ? a : b; },
max
: function(a, b) {
return
a > b ? a : b; }
});
console.log($.
min
(
3
,
4
));
/
/
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
$.fn.extend({
"print"
:function(){
for
(var i
=
0
;i<this.length;i
+
+
){
console.log($(this)[i].innerHTML)
}
}
});
$(
"p"
).
print
();
<
/
script>
|
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <p>111</p> 10 <p>222</p> 11 <p>333</p> 12 13 <script src="jquery-3.2.1.js"></script> 14 15 <script> 16 17 方式一: 18 19 $.extend({ 20 Myprint:function () { 21 console.log("hello word") 22 } 23 }); 24 25 $.Myprint() 26 27 28 方式二: 29 30 $.fn.extend({ 31 GetText: function () { 32 for (var i = 0; i < this.length; i++) { 33 console.log($(this).text()); 34 35 } 36 37 } 38 }); 39 $("p").GetText(); 40 41 42 </script> 43 44 </body> 45 </html> 46 47 两种方式 演示
案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 9 *{ 10 margin: 0; 11 padding: 0; 12 } 13 14 .div1,.div2{ 15 width: 100%; 16 height: 800px; 17 } 18 19 .div1{ 20 background-color: #84a42b; 21 } 22 23 .div2{ 24 background-color: red; 25 } 26 27 .returnTop{ 28 position: fixed; 29 right: 20px; 30 bottom: 20px; 31 width: 90px; 32 height: 50px; 33 background-color: cyan; 34 color: white; 35 text-align: center; 36 line-height: 50px; 37 } 38 39 .returnTop{ 40 display: none; 41 } 42 </style> 43 44 </head> 45 <body> 46 47 48 <div class="div1"></div> 49 50 <div class="div2"></div> 51 52 <div class="returnTop">返回顶部</div> 53 54 55 <script src="jquery-3.2.1.js"></script> 56 <script> 57 58 $(".returnTop").click(function () { 59 $(window).scrollTop(0); 60 }); 61 62 window.οnscrοll=function () { 63 if ($(window).scrollTop()>200){ 64 $(".returnTop").show(); 65 } 66 else{ 67 $(".returnTop").hide(); 68 } 69 } 70 71 </script> 72 73 </body> 74 </html> 75 76 滚动条 返回顶部 scrollTop
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 width: 790px; 9 height: 340px; 10 margin: 20px auto; 11 border: 1px darkgreen solid; 12 position: relative; 13 } 14 ul.img{ 15 list-style: none; 16 } 17 18 ul.img li{ 19 position: absolute; 20 top:0; 21 left: 0; 22 display: none; 23 } 24 25 .icon{ 26 position: absolute; 27 bottom: 20px;; 28 left: 220px;; 29 list-style: none; 30 } 31 32 .icon li{ 33 display: inline-block; 34 width: 30px; 35 height: 30px; 36 background-color: gray; 37 text-align: center; 38 line-height: 30px; 39 color: white; 40 border-radius: 100%; 41 margin-left: 14px; 42 43 } 44 45 .btn{ 46 position: absolute; 47 top: 50%; 48 width: 60px; 49 height: 80px; 50 background-color: grey; 51 font-size: 40px; 52 text-align: center; 53 line-height: 80px; 54 opacity: 0.7; 55 margin-top: -40px; 56 color: white; 57 } 58 59 .left{ 60 left: 0; 61 } 62 .right{ 63 right: 0; 64 } 65 66 .icon .active{ 67 background-color: red; 68 } 69 70 </style> 71 </head> 72 <body> 73 74 <div class="outer"> 75 <ul class="img"> 76 <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li> 77 <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li> 78 <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li> 79 <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li> 80 <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li> 81 <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li> 82 </ul> 83 84 <ul class="icon"> 85 <li class="active">1</li> 86 <li>2</li> 87 <li>3</li> 88 <li>4</li> 89 <li>5</li> 90 <li>6</li> 91 </ul> 92 93 <div class="left btn"> < </div> 94 <div class="right btn"> > </div> 95 </div> 96 97 98 <script src="jquery-3.2.1.js"></script> 99 <script> 100 var i=0; 101 102 // 自动轮播: 103 function move_right(){ 104 105 if(i==5){ 106 i=-1 107 } 108 i++; // i=2 109 console.log(i); 110 $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); 111 $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); 112 } 113 114 function move_left(){ 115 116 if(i==0){ 117 i=6 118 } 119 120 i--; 121 console.log(i); 122 $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); 123 $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800); 124 125 } 126 var ID=setInterval(move_right,1000); 127 128 // 手动轮播 129 130 $(".outer").hover(function(){ 131 clearInterval(ID) 132 },function(){ 133 ID=setInterval(move_right,1000) 134 }); 135 136 $(".icon li").mouseover(function(){ 137 i=$(this).index(); 138 $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); 139 $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); 140 }); 141 142 143 // click事件 144 $(".right").click(move_right); 145 $(".left").click(move_left); 146 147 </script> 148 </body> 149 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;color: white;"> 10 标题 11 </div> 12 <div style="height: 300px;"> 13 内容 14 </div> 15 </div> 16 <script type="text/javascript" src="jquery-3.2.1.js"></script> 17 <script> 18 $(function(){ 19 // 页面加载完成之后自动执行 20 $('#title').mouseover(function(){ 21 $(this).css('cursor','move'); 22 }).mousedown(function(e){ 23 //console.log($(this).offset()); 24 var _event = e || window.event; 25 // 原始鼠标横纵坐标位置 26 var ord_x = _event.clientX; 27 var ord_y = _event.clientY; 28 29 var parent_left = $(this).parent().offset().left; 30 var parent_top = $(this).parent().offset().top; 31 32 $(this).bind('mousemove', function(e){ 33 var _new_event = e || window.event; 34 var new_x = _new_event.clientX; 35 var new_y = _new_event.clientY; 36 37 var x = parent_left + (new_x - ord_x); 38 var y = parent_top + (new_y - ord_y); 39 40 $(this).parent().css('left',x+'px'); 41 $(this).parent().css('top',y+'px'); 42 43 }) 44 }).mouseup(function(){ 45 $(this).unbind('mousemove'); 46 }); 47 }) 48 </script> 49 </body> 50 </html> 51 52 面板拖动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 12 .outer{ 13 width: 790px; 14 height: 340px; 15 margin: 20px auto; 16 border: 1px darkgreen solid; 17 position: relative; 18 } 19 20 21 ul.img{ 22 list-style: none; 23 } 24 25 ul.img li{ 26 position: absolute; 27 top: 0; 28 left: 0; 29 display: none; 30 } 31 32 .icon{ 33 position: absolute; 34 list-style: none; 35 bottom: 20px; 36 left: 220px; 37 /*display: none;*/ 38 /*background-color: rebeccapurple;*/ 39 } 40 41 .icon li{ 42 display: inline-block; 43 width: 30px; 44 height: 30px; 45 background-color: gray; 46 text-align: center; 47 line-height: 30px; 48 color: white; 49 border-radius:100%; 50 margin-left: 14px; 51 } 52 53 .btn{ 54 position: absolute; 55 top: 50%; 56 width: 60px; 57 height: 80px; 58 background-color: #84a42b; 59 font-size: 40px; 60 text-align: center; 61 line-height: 80px; 62 opacity: 0.7; 63 margin-top: -40px; 64 color: white; 65 } 66 67 .show_hide{ 68 display: none; 69 } 70 71 .left{ 72 left:0; 73 74 } 75 76 .right{ 77 right: 0; 78 } 79 80 .icon .active{ 81 background-color: red; 82 } 83 84 85 </style> 86 </head> 87 <body> 88 89 90 <div class="outer"> 91 <ul class="img"> 92 <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li> 93 <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li> 94 <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li> 95 <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li> 96 <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li> 97 <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li> 98 </ul> 99 100 <ul class="icon"> 101 <li class="active">1</li> 102 <li>2</li> 103 <li>3</li> 104 <li>4</li> 105 <li>5</li> 106 <li>6</li> 107 </ul> 108 109 <div class="show_hide"> 110 111 <div class="left btn"> < </div> 112 <div class="right btn"> > </div> 113 </div> 114 115 116 117 </div> 118 119 <script src="jquery-3.2.1.js"></script> 120 121 <script> 122 var i=0; 123 function move_right() { 124 if (i==5){ 125 i = -1; 126 } 127 128 i++; 129 $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); 130 $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); 131 } 132 133 function move_left(){ 134 if(i==0){ 135 i=6 136 } 137 138 i--; 139 console.log(i); 140 $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); 141 $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800); 142 } 143 var ID=setInterval(move_right,1000); 144 145 146 $(".outer").hover(function () { 147 $(".show_hide").show(); 148 clearInterval(ID) 149 },function () { 150 $(".show_hide").hide(); 151 ID=setInterval(move_right,1000) 152 }); 153 154 $(".icon li").mousemove(function () { 155 i=$(this).index(); 156 $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); 157 $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); 158 }) 159 160 161 $(".right").click(move_right); 162 $(".left").click(move_left); 163 164 165 </script> 166 167 168 169 170 171 </body> 172 </html> 173 174 轮播图