python jquery

jquery

一.寻找元素(选择器和筛选器)

a.选择器

1.基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

2.层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3.基本筛选器　　

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)") 

4.属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

5.表单选择器

$("[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.过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

2.查找筛选器

$("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" 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             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" 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 切换 演示

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 演示

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标签 演示

clone input标签演示

二.操作元素(属性，css，文档处理)

a.属性操作

#--------------------------属性
$("").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 演示

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>

prop 演示

 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 演示

html text 演示

b.文档处理

//创建一个标签对象
    $("<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 演示

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 替换演示

replaceWith 替换演示

c. css操作

#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 演示

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 演示

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.方式一

<script>
    arrs=[11,22,33];
    arrs={"name":"egon","age":18}
 
    $.each(arrs,function (i,j) {
        console.log(i);
        console.log(j);
    })
     
</script>　　

b.方式二　　

<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>

四. 事件

# 事件绑定
 
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 演示

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 事件绑定 解除绑定 演示

on 事件绑定解除绑定演示

五.动画效果

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;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 回调函数

回调函数

六. 扩展方法 (插件机制)

<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.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

滚动条返回顶部 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 轮播图

轮播图

苑昊

posted @ 2017-06-27 23:44 Meet~ 阅读(273) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Loading

不苦不累, 人生无味