python 前端 Jquery
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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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" onclick=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" onclick=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" onclick=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 onclick="selectall();">全选</button>
10 <button onclick="cancel();">取消</button>
11 <button onclick="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" onclick="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" onclick="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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" onclick="tab(this)">菜单一</li>
59 <li xxx="con2" onclick="tab(this)">菜单二</li>
60 <li xxx="con3"onclick="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 onclick="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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
|
# 事件绑定bindunbind |
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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 onclick="f1()">显示</button>
13 <button onclick="f2()">隐藏</button>
14 <button onclick="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; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">"></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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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.onscroll=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="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 轮播图
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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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" onclick=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" onclick=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" onclick=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 onclick="selectall();">全选</button>
10 <button onclick="cancel();">取消</button>
11 <button onclick="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" onclick="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" onclick="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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" onclick="tab(this)">菜单一</li>
59 <li xxx="con2" onclick="tab(this)">菜单二</li>
60 <li xxx="con3"onclick="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 onclick="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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
|
# 事件绑定bindunbind |
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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 onclick="f1()">显示</button>
13 <button onclick="f2()">隐藏</button>
14 <button onclick="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; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">"></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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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.onscroll=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="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 轮播图
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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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" onclick=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" onclick=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" onclick=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 onclick="selectall();">全选</button>
10 <button onclick="cancel();">取消</button>
11 <button onclick="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" onclick="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" onclick="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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" onclick="tab(this)">菜单一</li>
59 <li xxx="con2" onclick="tab(this)">菜单二</li>
60 <li xxx="con3"onclick="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 onclick="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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
|
# 事件绑定bindunbind |
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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 onclick="f1()">显示</button>
13 <button onclick="f2()">隐藏</button>
14 <button onclick="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; padding: 0px; color: rgb(128, 0, 0); line-height: 1.5 !important;">"></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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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.onscroll=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="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 padding: 0px; color: rgb(0, 128, 0); line-height: 1.5 !important;">#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 轮播图
浙公网安备 33010602011771号