jQuery筆記之事件綁定

時間  2019-11-29
標籤 jquery 筆記 事件 綁定 欄目 JQuery 简体版
原文   原文鏈接

.on()，off()，.one()，.trigger()javascript

.hover()css

jQuery實例方法-動畫html

.show()，.hide()，.toggle()java

參數：null或(duration,easing,callblack)jquery

.fadeIn()，.fadeOut()，.fadeToggle()，.fadeTo()ide

參數：null或(duration,[opacity],easing,callblack)函數

.slideDom()，.slideUp()，.slideToggle()動畫

參數: null或(duration,easing,callblack)ui

.animate()  這是一個大佬等級的動畫！this

參數：(target duration easing callblack)

配合一下方法使用

.stop()，finish()

.delay() 

jQuery.fx.off = true   動畫開關接口

-------------------------------------------------------------

on()

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         .demo{
10             width:100px;
11             height:100px;
12             background:red;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="demo"></div>
18     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
19     <script>
20 
21         $('.demo').on('click', {name : 'ypx'}, function(e){
22             console.log(e.data);
23         });
24 
25         //on事件還能夠這麼綁定
26         $('.demo').on({ 
27             click: function(){
28                 console.log(click);
29             },
30             mouseenter: function(){
31                 console.log(mouseenter);
32             },
33             mouseleave: function(){
34                 console.log(mouseleave);
35             }
36         });
37 
38         
39     </script>
40 </body>
41 </html>

 off()，能夠解綁有綁定事件的元素

 1     <style>
 2         .demo {
 3             width: 100px;
 4             height: 100px;
 5             background: red;
 6         }
 7     </style>
 8 </head>
 9 
10 <body>
11     <div class="demo"></div>
12     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
13     <!-- <script src="../jq/Myjquery.js"></script> -->
14     <!-- <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> -->
15     <script>
16         function clickOne(){ //建立輸出函數
17             console.log('clickOne');
18         }
19         $('.demo').on('click', clickOne); //給demo身上綁定點擊事件
20 
21         $('.demo').off(); //解綁demo身上的全部事件

off()也能夠傳入參數

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10     </style>
11 </head>
12 
13 <body>
14     <ul>
15         <li>1</li>
16         <li>2</li>
17         <li>3</li>
18         <li>4</li>
19         <li>5</li>
20     </ul>
21     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
22     <!-- <script src="../jq/Myjquery.js"></script> -->
23     <!-- <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> -->
24     <script>
25         function clickOne(){ //建立輸出函數
26             console.log('clickOne');
27         }
28         $('ul').on('click', 'li', clickOne); //選中ul給li身上綁定點擊事件
29         $('ul').off('click', 'li', clickOne); //選中ul解綁li身上的全部事件
30     </script>
31 </body>
32 </html>

one()

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <a href="https://www.baidu.com">jump</a> 
    <!-- 百度頁面 -->
    <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
    <script>

        $('a').one('click', function(){ //one()只有一次效果
            window.open('https://www.taobao.com');  //第一次點擊打開淘寶頁面，點擊第二次打開百度頁面
            return false;
        });

        
    </script>
</body>
</html>

 trigger()

第二個參數

自定義方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         .demo{
10             width: 100px;
11             height:100px;
12             background: red;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="demo"></div>
18     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
19     <!-- <script src="../jq/Myjquery.js"></script> -->
20     <script>
21         $('.demo').on('pageload', function(){  // 1、pageload自定義的方法，是不可能經過一系列的操做來觸發
22             console.log('觸發點擊事件'); //3、觸發自定義的方法以後能夠開啓一系列的操做了
23                                         //想要實現什麼東西均可以寫到裏面
24         });
25         $('.demo').trigger('pageload'); //2、只能經過trigger來觸發自定義的方法
26     </script>
27 </body>
28 </html>

 hover()

 

 

show(), hide()

先看一下效果圖：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .demo{
11             width: 200px;
12             height: 300px;
13             border: 1px solid black;
14         }
15         p{
16             background:red;
17             cursor: pointer;
18         }
19         ul {  
20             display: none;
21         }
22         /* ul最開始得先設置爲不可見 */
23     </style>
24 </head>
25 
26 <body>
27     <div class="demo">
28         <p>Rose</p>
29         <ul>
30             <li>NBA狀元秀</li>
31             <li>最年輕的MVP</li>
32             <li>涅槃重生</li>
33         </ul>
34     </div>
35 
36     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
37     <!-- <script src="../jq/Myjquery.js"></script> -->
38     <script>
39         $('p').on('mouseenter', function () {  //鼠標移入觸發
40             $(this).next().show(2000, 'swing');
41             //獲取自己下一個標籤設置展現動畫，2秒內完成，swing的運動方式先快再慢再快
42         });
43         $('.demo').on('mouseleave', function () { //鼠標移出觸發
44             $('p').next().hide(2000, 'linear');
45             //獲取p標籤下一個標籤設置隱藏動畫，2秒內完成，linear的運動方式水平勻速
46         });
47     </script>
48 </body>
49 </html>

toggle() 

點擊出來，點擊消失

fadeIn()，fadeOut()，fadeToggle()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .demo{
11             width: 200px;
12             border:1px solid black;
13         }
14         p{
15             background:red;
16             cursor: pointer;
17         }
18         ul {  
19             display: none;
20         }
21         /* ul最開始得先設置爲不可見 */
22     </style>
23 </head>
24 
25 <body>
26     <div class="demo">
27         <p>Rose</p>
28         <ul>
29             <li>NBA狀元秀</li>
30             <li>最年輕的MVP</li>
31             <li>涅槃重生</li>
32         </ul>
33     </div>
34 
35     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
36     <!-- <script src="../jq/Myjquery.js"></script> -->
37     <script>
38         $('p').on('click', function () {  //鼠標點擊觸發 
39  
40         //方法一
41            if($(this).next().css('display') == 'none'){ //判斷被點擊元素下一個標籤身上dispaly等不等於none
42                $(this).next().fadeIn(); //等於none就把展現出來的畫面變成fadeIn(淡入淡出)。主要修改透明度
43            }else{    
44                $(this).next().fadeOut();//若是不等於none就慢慢收回
45            }
46 
47 
48         //方法二，同理上面的方法一
49            $(this).next().fadeToggle(2000); //自己具備判斷性，參數是要求在2秒內完成。主要修改透明度
50         });
51     </script>
52 </body>
53 </html>

 

fadeTo()

漸漸呈現，慢慢消失。主要改變透明度值

成品圖以下：

slideDom()，slideUp()

捲簾效果，主要改變高度

成品圖以下：

 slideToggle()

 1 <script>
 2         $('p').on('click', function () {  //鼠標點擊觸發 
 3            //方法一
 4            if($(this).next().css('display') == 'none'){ //判斷被點擊元素下一個標籤身上dispaly等不等於none
 5                $(this).next().slideDown(1000, 'swing', function(){
 6                    console.log('over1');
 7                }); 
 8            }else{    
 9                $(this).next().slideUp(1000, 'swing', function(){
10                    console.log('over2');
11                });
12            }
13 
14 
15            //方法二
16            $(this).next().slideToggle(2000);   //同理與上面的方法，這個自己具備判斷性，能夠來回切換狀態呈現捲簾效果，參數是2秒內完成動畫
17         });
18     </script>

animate()  配合使用.stop()，finish()，.delay() 

成品圖1.0

點擊start後運動

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         .demo {
11             position: absolute;
12             width: 100px;
13             height: 100px;
14             background: red;
15         }
16 
17         .dian {
18             width: 5px;
19             height: 150px;
20             background: black;
21             position: absolute;
22             top: 232px;
23             left: 358px;
24         }
25     </style>
26 </head>
27 
28 <body>
29     <button id="stopBtn">stop</button>
30     <!-- <button id="finishBtn">finish</button> -->
31     <button id="startBtn">start</button>
32     <div class="demo"></div>
33     <div class="dian"></div>
34     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
35     <!-- <script src="../jq/Myjquery.js"></script> -->
36     <script>
37         $('#startBtn').on('click', function () {//starBtn綁定點擊事件
38             $('.demo') //點擊後demo改變
39                 .animate({ width: '+=50', height: '+=50', left: '+=200', top: '+=200' }, 1000, 'swing') //狀態改變，執行完本行動畫再執行下一行
40                     .animate({ width: '+=50', height: '+=50', left: '+=200', top: '-=200' }, 1000, 'swing') //狀態改變
41         });
42     </script>
43 </body>
44 </html>

stop(),中止當前正在執行的動畫，執行下一個動畫

還沒到達終點線就中止，執行下一個動畫　

 1     <script>
 2         $('#startBtn').on('click', function () {//starBtn綁定點擊事件
 3             $('.demo') //點擊後demo改變
 4                 .animate({ width: '+=50', height: '+=50', left: '+=200', top: '+=200' }, 1000, 'swing') //狀態改變，執行完本行動畫再執行下一行
 5                     .animate({ width: '+=50', height: '+=50', left: '+=200', top: '-=200' }, 1000, 'swing') //狀態改變
 6         });
 7         $('#stopBtn').on('click', function(){ //stopBtn綁定點擊事件
 8             $('.demo').stop(); //被點擊後中止執行當前動畫，跳到下一個動畫
 9         });
10     </script>

在stop()裏面還能夠傳入參數 ：null    (true)     (true,true)

咱們來看傳入一個true，點擊stop以後中止了後面的全部動畫

咱們再來看看傳入兩個true是什麼樣的！

傳入兩個true是點擊stop以後中止當前動畫，直接跳轉到了動畫的目標點

finish()

點擊finish以後直接跳轉到了動畫結束的目標點

相似於ppt播放的時候點擊頁面，把動畫去掉，直接顯示出來

 1     <script>
 2         $('#startBtn').on('click', function () {//starBtn綁定點擊事件
 3             $('.demo') //點擊後demo改變
 4                 .animate({ width: '+=50', height: '+=50', left: '+=200', top: '+=200' }, 1000, 'swing') //狀態改變，執行完本行動畫再執行下一行
 5                     .animate({ width: '+=50', height: '+=50', left: '+=200', top: '-=200' }, 1000, 'swing') //狀態改變
 6         });
 7         $('#stopBtn').on('click', function () { //stopBtn綁定點擊事件
 8             $('.demo').stop(true, true); //被點擊後中止執行當前動畫，跳到下一個動畫
 9         });
10         $('#finishBtn').on('click', function () { //finishBtn邦定點擊事件
11             $('.demo').finish();    //被點擊後直接跳轉到最後的目標
12         });
13     </script>

delay()    能夠傳入參數，參數爲時間。傳入2秒錶示2秒後執行下一個動畫

jquery.fx.off()    

jQuery動畫接口，參數true把全部過分動畫給禁用，默認爲flase爲開啓過分動畫。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程