??首先列出一些關(guān)于jquery事件的函數(shù)。

blur() 元素失去焦點
focus() 元素獲得焦點
change() 表單元素的值發(fā)生變化
click() 鼠標(biāo)單擊
dblclick() 鼠標(biāo)雙擊
mouseover() 鼠標(biāo)進入（進入子元素也觸發(fā)）
mouseout() 鼠標(biāo)離開（離開子元素也觸發(fā)）
mouseenter() 鼠標(biāo)進入（進入子元素不觸發(fā)）
mouseleave() 鼠標(biāo)離開（離開子元素不觸發(fā)）
hover() 同時為mouseenter和mouseleave事件指定處理函數(shù)
mouseup() 松開鼠標(biāo)
mousedown() 按下鼠標(biāo)
mousemove() 鼠標(biāo)在元素內(nèi)部移動
keydown() 按下鍵盤
keypress() 按下鍵盤
keyup() 松開鍵盤
load() 元素加載完畢
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動條的位置發(fā)生變化
select() 用戶選中文本框中的內(nèi)容
submit() 用戶遞交表單
toggle() 根據(jù)鼠標(biāo)點擊的次數(shù)，依次運行多個函數(shù)
unload() 用戶離開頁面

鼠標(biāo)移入和移出的效果

在很多情況下，我們需要在鼠標(biāo)移入某個東西時，讓它產(chǎn)生一些效果，那么用這個就正好能進解決我們的需求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠標(biāo)移入移出</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            margin: 100px auto 0;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*進入子元素也觸發(fā)，即觸發(fā)我們下面寫的效果*/
                /*$('#div1').mouseover(function() {
                    $(this).animate({marginTop: 50});//.stop()
                });
                    $('#div1').mouseout(function() {
                    $(this).animate({marginTop: 100});//.stop()
                });*/

            /*進入子元素不觸發(fā)*/
            /*這里加了一個stop()是在快速移動的時候不受影響*/
                /*$('#div1').mouseenter(function() {
                    $(this).stop().animate({marginTop: 50});//
                });
            $('#div1').mouseleave(function() {
                $(this).stop().animate({marginTop: 100});//
            });*/

            /*通過hover（mouseenter+mouseleave）實現(xiàn)簡寫，繼續(xù)添加一個stop()*/
            $('#div1').hover(function() {
                $(this).stop().animate({marginTop: 50});
            }, function() {
                $(this).stop().animate({marginTop: 100});
            });
        })
    </script>
</head>
<body>
    <div id="div1" class="box">
        <div class="son"></div>
    </div>
</body>
</html>

input輸出框，獲取焦點等

??在input輸入框中，會有一些操作，失去和獲取焦點，判斷輸入框內(nèi)內(nèi)容是否改變等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input框事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //一開始就獲取焦點，相當(dāng)于設(shè)置了autofocus自動獲取焦點了（HTML5 新增表單控件屬性）
            // $('#txt01').focus();

            // //文本框獲取焦點的時候（有光標(biāo)閃爍的時候）
            // $('#txt01').focus(function() {
            //  alert('focus');
            // });

            // //失去焦點的時候（光標(biāo)離開的時候）
            // $('#txt01').blur(function() {
            //  alert('blur');
            // });

            // //輸入框內(nèi)容發(fā)生變化的時候，失去焦點后觸發(fā)，可用于注冊時驗證用戶名是否已存在
            $('#txt01').change(function() {
                alert('change');
            });

            //松開鍵盤按鍵就觸發(fā)
            // $('#txt01').keyup(function() {
            //  alert('keyup');
            // });
        })
    </script>
</head>
<body>
    <input type="text" id="txt01">
</body>
</html>

在上面也加了一個鍵盤的事件，當(dāng)松開鍵盤的時候就觸發(fā)，其中的其他和鍵盤相關(guān)的都類似。

關(guān)于在書寫js時的方法

??在書寫js的，我們要為其提供一個環(huán)境，即頁面加載和渲染完成后或者當(dāng)頁面中所有的節(jié)點加載完成后，雖然看似差不多，但是時間上會差的?？隙ㄊ呛竺娴目臁?/p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery其他事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // //JS原生寫法
        // window.onload = function(){

        // }

        // //jQuery寫法，等同于上面寫法,時間一樣
        // $(window).load(function(){

        // })

        // //ready的寫法
        // $(document).ready(function(){

        // })

        // //ready的簡寫
        // $(function(){

        // })

        // 窗口改變尺寸的時候，會高頻觸發(fā)
        $(window).resize(function() {
            console.log('3');
        });
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

綁定事件的其他方法

??之前有一個click點擊事件的綁定，現(xiàn)在又新增一個bind。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>綁定事件bind</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //只能綁定click事件，不能綁定其他的了
            // $('#btn').click(function() {
            //  /* Act on the event */
            // });

            //bind方式可綁定多個事件
            $('#btn').bind('click mouseover', function() {
                alert('hello!');

                //取消綁定事件
                $(this).unbind('mouseover');
            });
        })
    </script>
</head>
<body>
    <input type="button" value="按鈕" id="btn">
</body>
</html>

bind用戶綁定多個事件，事件用空格隔開，后面加觸發(fā)后的函數(shù)。

主動觸發(fā)與自定義事件

主動觸發(fā)
可使用jquery對象上的trigger方法來觸發(fā)對象上綁定的事件。
自定義事件
除了系統(tǒng)事件外，可以通過bind方法自定義事件，然后用tiggle方法觸發(fā)這些事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //自定義事件只能用bind方式綁定，第一個參數(shù)是事件的名字，第二個參數(shù)是事件發(fā)生時執(zhí)行的函數(shù)
            $('#btn1').bind('hello', function(){
                alert('hello');
            })
            $('#btn1').bind('click', function(){
                alert('click');
            })
            $('#btn2').click(function() {
                // trigger即可以觸發(fā)自定義事件，也可以觸發(fā)原始的事件
                $('#btn1').trigger('hello');
                $('#btn1').trigger('click');
            });
            
            //不一定點擊按鈕觸發(fā)，也可頁面加載時觸發(fā)，也可在滿足某種if條件時觸發(fā)
            // $('#btn1').trigger('hello');
        })
    </script>
</head>
<body>
    <input type="button" value="按鈕" id="btn1">
    <input type="button" value="按鈕2" id="btn2">
</body>
</html>

事件冒泡

什么是事件冒泡

??在一個對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

事件冒泡的作用

??事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。

阻止事件冒泡

??事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止，簡寫的形式就是返回一個false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 400px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('body').click(function() {
                alert(4);
            });
            $('.grandfather').click(function() {
                alert(3);
            });
            $('.father').click(function() {
                alert(2);
            });
            $('.son').click(function(event) {//event代表當(dāng)前事件
                alert(1);
                // console.log(event);//顯示很多屬性，其中clientX、clientY就是點擊的坐標(biāo)
                // alert("X軸坐標(biāo)：" + event.clientX);

                // //阻止事件冒泡
                // event.stopPropagation();

                //合并阻止操作：把阻止冒泡和阻止默認(rèn)行為合并
                return false;
            });

            //阻止右鍵菜單
            $(document).contextmenu(function(event){
                // //阻止默認(rèn)行為（原來右鍵能彈出菜單，阻止后無法彈出）
                // event.preventDefault();

                //合并阻止
                return false;
            })
        })
    </script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

事件委托

??事件委托就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執(zhí)行相應(yīng)的操作。
事件委托的好處：

首先可以極大減少事件綁定次數(shù)，提高性能；
其次可以讓新加入的子元素也可以擁有相同的操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style type="text/css">
        .list{
            list-style: none;
        }

        .list li{
            height: 30px;
            background-color: green;
            margin-bottom: 10px;
            color: #fff;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
                      一般綁定事件的寫法，每一個子元素綁定點擊事件。
            給每個li綁定事件，一共綁定了8次，性能不高
            $('.list li').click(function() {
                alert($(this).html());
            });
            */          
            // 事件委托：方法delegate，只綁定一次事件，冒泡觸發(fā)
            //  參數(shù)：
            //      selector選擇器：寫入ul下面的所有要發(fā)生事件的元素，多個元素用空格隔開，例如‘li a span’
            //      eventType事件
            //      function要執(zhí)行的操作
            //在delegate中綁定的子元素可以使多個，用空格隔開。如'li a span'。
            $('.list').delegate('li', 'click', function() {
                //$(this)指發(fā)生事件的子集，即每個li
                alert($(this).html());

                //全部取消委托
                // $('.list').undelegate();
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

jquery元素節(jié)點操作

一般的節(jié)點操作：

創(chuàng)建節(jié)點

var $div =$ ('<div>');
var $div2 =$ ('<div>這是一個div元素</div>');

插入節(jié)點
?? 1、append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素

var $span =$ ('<span>這是一個span元素</span>');
$('#div1').append($ span);

?? 2、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素
?? 3、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素
?? 4、before()和insertBefore()：在現(xiàn)存元素的外部，從前面插入元素
<div id="div1"></div>

刪除節(jié)點

$('#div1').remove();
寫一個簡單的實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節(jié)點操作</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $span = $('<span>span元素</span>');
            var $p = $('<p>p段落元素</p>');
            var $h = $('<h1>頁面標(biāo)題</h1>');

            /*插入子元素*/
            //div中插入span和p（末尾追加）
            // $('#div1').append($span);
            // $('#div1').append($p);

            // 把span和p插入div中
            $span.appendTo('#div1');
            $p.appendTo('#div1');

            //把子元素插入到父元素（前面追加）
            // $('#div1').prepend($span);
            // $('#div1').prepend($p);
            // $span.prependTo('#div1');
            // $p.prependTo('#div1');

            //在div前邊插入兄弟h1標(biāo)題
            // $('#div1').before($h);
            $h.insertBefore('#div1');

            //在后邊插入兄弟元素
            //after()
            //insertAfter()

            //刪除p標(biāo)簽
            $p.remove();    
        })
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

知識點還有點多。@_@

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

web進階之二十七：jquery事件

web進階之二十七：jquery事件

鼠標(biāo)移入和移出的效果

input輸出框，獲取焦點等

關(guān)于在書寫js時的方法

綁定事件的其他方法

主動觸發(fā)與自定義事件

事件冒泡

什么是事件冒泡

事件冒泡的作用

阻止事件冒泡

事件委托

jquery元素節(jié)點操作

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

web進階之二十七：jquery事件

鼠標(biāo)移入和移出的效果

input輸出框，獲取焦點等

關(guān)于在書寫js時的方法

綁定事件的其他方法

主動觸發(fā)與自定義事件

事件冒泡

什么是事件冒泡

事件冒泡的作用

阻止事件冒泡

事件委托

jquery元素節(jié)點操作

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

input輸出框，獲取焦點等