Jquery

時間 2019-12-09

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

目錄javascript

jquery

jquery

使用JavaScript的一些疼處

讓咱們用一段代碼來解釋下使用JavaScript的一些疼處：css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div{
                width: 100%;
                height: 200px;
                display: none;
                background-color: red;
                margin: 10px 0px 0px 0px;
            }
        </style>
    </head>
    <body>
        <button id="btn">展現</button>
        <div></div>
        <div></div>
        <div></div>
    </body>
    <script type="text/javascript">
        var btn = document.getElementById('btn');
        console.log(btn)
        var divs = document.getElementsByTagName('div');
        console.log(divs)
        
        window.onload = function(){
            btn.onclick = function(){
                for (var i=0;i<divs.length;i++) {
                    divs[i].style.display = 'block';
                    divs[i].innerHTML = 'div展現了'
                }
            }
        }

    </script>
</html>

當咱們點擊按鈕的時候盒子都出現了
html

在這段代碼中，咱們難免發現：java

書寫js繁瑣代碼量大僅僅1個動做就寫了10多行代碼
代碼顯的比較複雜尤爲是在定義DOM元素的時候
動畫的效果咱們須要開啓定時器，還要當心定時器的清楚操做還有各類操做和處理事件
瀏覽器的兼容性

可是jquery就解決了上面的問題,讓咱們來看下代碼：jquery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div{
                width: 100%;
                height: 200px;
                display: none;
                background-color: red;
                margin: 10px 0px 0px 0px;
            }
        </style>
    </head>
    <body>
        <button id="btn">展現</button>
        <div></div>
        <div></div>
        <div></div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /*var btn = document.getElementById('btn');
        console.log(btn)
        var divs = document.getElementsByTagName('div');
        console.log(divs)
        
        window.onload = function(){
            btn.onclick = function(){
                for (var i=0;i<divs.length;i++) {
                    divs[i].style.display = 'block';
                    divs[i].innerHTML = 'div展現了'
                }
            }
        }*/
        
        //1.首先要在js前引入jquery,引入了以後咱們就能夠寫jquery代碼了
        $(function(){
            $('#btn').click(function(){
                $('div').css('display','block');
                $('div').html('div展現了')
            })
        })
        
    </script>
</html>

效果是和以前的效果是同樣的。編程

jquery的引入

JavaScript和jquery的區別

JavaScript是一門編程語言，咱們用它來編寫客戶端瀏覽器腳本
jquery是JavaScript的一個庫，包含多個可重用的函數，用來輔助咱們簡化JavaScript的開發
jquery能作到的JavaScript都能作到，而JavaScript能作的事情，jquery不必定能作到

注意：通常狀況下，是庫的文件，該庫中都會拋出來構造函數或者對象。若是是構造函數，那麼就使用new關鍵字來建立對象，若是是對象那麼就直接調用它的屬性和方法。數組

DOM文檔加載的步驟

解析HTML結構
加載外部腳本和樣式表文件 CSS
解析並執行腳本代碼 windos.onload外面的腳本
DOM樹構建完畢
加載圖片等外部文件
頁面加載不一樣

從而，js和jq有三方面的不一樣:瀏覽器

執行時間不一樣

window.onload必需要等待頁面內包括圖片的全部元素加載完畢後才能執行app

$(document).ready()是DOM結構回值完畢後就執行，沒必要等到加載完畢dom

# js代碼最後解析的緣由：若是沒有獲取完DOM樹的話，那麼解析js腳本就會獲得null
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                var box = document.getElementById('box')
                console.log(box)
            }
        </script>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>

編寫個數不一樣

window.onload不能同時編寫多個，若是有多個windos.onload方法，那麼只會執行一個

$(document).ready()能夠同時編寫多個，而且都能獲得執行

簡化寫法不一樣

windos.onload沒有簡化寫法

$(document).ready()能夠簡化成$(function(){})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //$(document)取到文本元素   而後交給後面的回調函數function(){}執行
        $(document).ready(function(){
            
        })
    </script>
</html>

jquery選擇器的用法

jquery的基本選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li id="brother" class="item">泰然城1</li>
            <li >泰然城2</li>
            <li class="item">泰然城3</li>
            <li>泰然城4</li>
            <li class="item">泰然城5</li>
            <li>泰然城6</li>
            <li class="item">泰然城7</li>
            <a href="#">百度一下</a>
        </ul>
        <div id="duanzi">
            <p>天王蓋地虎</p>
            <p><h1>小雞燉蘑菇</h1></p>
            <p>寶塔鎮河妖</p>
            <p>蘑菇放辣椒</p>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //1.ID選擇器  ：選中ID爲brither的文本元素 並將元素修改爲red
        $(function(){
            $('#brother').css('color','red')
        })
        
        //2.標籤選擇器    選中標籤爲a的文本元素 並將該元素下劃線取消 顏色修改成yello
        $(function(){
            $('a').css({'text-decoration':'none','color':'yellow'})
        })
        
        //3.類選擇器   選中類爲item的文本元素 並將字體修改成20px
        $(function(){
            $('.item').css({'font-size':'20px'})
        })
        
        //4.通配符選擇器*  選中全部文本元素 而後清空全部內容  這個不常常用
//      $('*').html(' ')
    </script>
</html>

jquery的層級選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li id="brother" class="item">泰然城1</li>
            <li >泰然城2</li>
            <li class="item">泰然城3</li>
            <li>泰然城4</li>
            <li class="item">泰然城5</li>
            <li>泰然城6</li>
            <li class="item">泰然城7</li>
            <a href="#">百度一下</a>
        </ul>
        <div id="duanzi">
            <p>天王蓋地虎</p>
            <p><h1>小雞燉蘑菇</h1></p>
            <p>寶塔鎮河妖</p>
            <p>蘑菇放辣椒</p>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        //1.後代選擇器  選中div的後代爲p的文本元素  讓顏色變成紅色  注意：若是P標籤裏包含了其餘元素，那麼就不會生效
        $(function(){
            $('div p').css('color','red')
        })
        
        
        //2.子代選擇器  選中div的子代爲p的文本元素 讓其背景顏色變成#333     注意： p標籤中包含了其餘元素，那麼就不會生效
        $(function(){
            $('div>p').css('background','#333')
        })
        
        
        //3.毗鄰選擇器  選中以id爲brother的鄰居 li 而後將li標籤的樣式去掉
        $(function(){
            $('#brother+li').css('list-style','none')
        })
        
        
        //4.兄弟選擇器  選中本身的兄弟的同級標籤 而後修改顏色爲red   注意：不包括本身
        $(function(){
            $('#brother~li').css('color','red')
        })
        
        //5.  :first    選中全部Li標籤中的第一個li標籤文本元素 而後修改文字大小爲30px
        $(function(){
            $('li:first').css('font-size','30px')
        })
        
        //6. :last   選中全部Li標籤的最後一個Li標籤文本元素 而後修改text屬性
        $(function(){
            $('li:last').html('修改了')
        })
    </script>
</html>

jquery基本過濾選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>哈哈哈，基本過濾選擇器</li>
            <li>嘿嘿嘿</li>
            <li>天王蓋地虎</li>
            <li>小雞燉蘑菇</li>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //1. ：first  獲取第一個元素
        //2. :last   獲取最後一個元素
        
        //3.odd()  選中全部爲基數的元素 第一個元素爲0
        $(function(){
            $('li:odd').css('color','red')
        })
        
        //4.even()  選中全部爲偶數的元素  第一個元素爲0
        $(function(){
            $('li:even').css('color','green')
        })
        
        
        //5.eq(index)  選中全部第二個li標籤 修改文本大小   注意：第一個元素爲0
        $(function(){
            $('li:eq(2)').css('font-size','20px')
        })
        
        //6.gt(num)  選中給定大於num的標籤   對其背景機型修改
        $(function(){
            $('li:gt(1)').css('background','#333')
        })
        
        //7.lt(num)  選中給定小於num的表親啊 對其文本大小進行修改
        $(function(){
            $('li:lt(1)').css('font-size','12px')
        })
    </script>
</html>

jquery的屬性選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div id="box">
        <h2 class="title">屬性元素器</h2>
        <ul>
            <li id="li1">分手應該體面</li>
            <li class="what" id="li2">分手應該體面</li>
            <li class="what">分手應該體面</li>
            <li class="heihei">分手應該體面</li>

        </ul>

        <form action="" method="post">

            <input name="username" type='text' value="1" checked="checked"></input>
            <input name="username1111" type='text' value="1"></input>
            <input name="username2222" type='text' value="1"></input>
            <input name="username3333" type='text' value="1"></input>
            <button class="btn-default">按鈕1</button>
            <button class="btn-info">按鈕1</button>
            <button class="btn-success">按鈕1</button>
            <button class="btn-danger">按鈕1</button>


        </form>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        //1.標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
        $(function(){
            $('li[id]').css('color','red')
        })
        
        //2.給定標籤中的某個屬性是否等於某個值 若是等於則將字體修改成20px
        $(function(){
            $('li[class=what]').css('font-size','20px')
        })
        
        //3. 給定標籤的某個屬性不等於某個值的時候  將背景修改成#333
        $(function(){
            $('li[class!=what]').css('background','#333')
        })
        
        //4. 給定標籤的某個屬性 以 xxx開頭  修改背景顏色爲綠色
        
        $(function(){
            $('input[name^=username]').css('background','green')
        })
        
        //5.給定標籤的某個屬性 以xxx結尾  修改背景顏色
        $(function(){
            $('input[name$=name]').css('background','#333')
        })
        
        //6. 給定標籤 若是某個屬性的值中包含xxx   那麼就將背景顏色修改
        $(function(){
            $("button[class*='btn']").css('background','#0000FF')
        })
        
    </script>
</html>

jquery的篩選選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <p class="p1">
                <span>我是第一個span標籤</span>
                <span>我是第二個span標籤</span>
                <span>我是第三個span標籤</span>
            </p>
            <button>按鈕</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        //1.將全部span標籤的中的 第1個標籤修改文字大小
        $(function(){
            $('span').eq(0).css('font-size','30px')
        })
        
        //2.first()獲取第一個元素
        //3.last()獲取最後一個元素
        
        //4. 將span標籤的父級元素 .p1 的css樣式表修改成：
        $(function(){
            $('span').parent('.p1').css({'width':'300px',"height":'300px','background':'yellow'})
        })
        
        
        //5.選中類爲list的標籤的同級兄弟標籤 修改CSS   注意：不包含本身
        $(function(){
            $('.list').siblings('li').css('color','red')
        })
        
        //6.find()  查找全部後代的元素  
        $(function(){
            $('div').find('button').css('background','#333')
        })
    </script>
</html>

JavaScript的DOM對象和jquery對象的轉換

DOM對象轉換稱爲jquery對象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>隱藏</button>
        <div id="box">
            
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //DOM對象轉換稱爲jquery對象
        var box = document.getElementById('box');
        var btn = document.getElementsByTagName('button')[0];
        
        $(btn).click(function(){
            $(box).css('display','none')
        })
        
        
        
        
    </script>
    
</html>

點擊按鈕，盒子就會隱藏

jquery對象轉換成DOM對象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>隱藏</button>
        <div id="box">
            
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        //jquery對象轉換稱爲DOM對象
        //第一種方式
        console.log($('button')[0])
        
        //第二種方式
        console.log($('button').get(0))
        
        var isShow = true;
        $('button').get(0).onclick = function(){
            if (isShow) {
                $('#box').css('display','none')
                $('button')[0].innerText = '顯示';
                isShow = false;
            } else{
                $('#box').css('display','block')
                $('button')[0].innerText = '隱藏';
                isShow = true;
                
            }
        }
        
        
        
        
        
    </script>
    
</html>

效果就是，點擊了隱藏的按鈕後，div盒子變沒了，按鈕上的字變成了顯示，反之亦然。

jquery效果

jquery顯示和隱藏效果

show

概念:顯示隱藏的匹配元素語法：show(speed,callback) 參數：

speed：三種預約速度之一的字符串('slow','normal','fast')或表示動畫時長的毫秒值（如：1000毫秒==1秒）
callback:在動畫完成時執行的函數，每一個元素執行一次

hide

hide(speed,callback)跟show使用方法相似，表示隱藏顯示的元素。

能夠經過show（）和hide（）方法，來動態控制元素的顯示隱藏

toggle

若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。

# 使用hide和show方法實現的
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                
            }
            div{
                height: 200px;
                width: 200px;
                border: 1px solid black;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>點我隱藏</button>
        <div id="box">
            
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var isShow = true;
        $(function(){
            $('button').click(function(){
                if (isShow) {
                    $('#box').hide('normal',function(){
                        $('button').html('點我開啓')
                        isShow = false
                    })
                } else{
                    $('#box').show('normal',function(){
                        $('button').html('點我隱藏')
                        isShow = true
                    })
                }
            })
        })
        
    </script>
</html>

# 使用toggle方法實現
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                
            }
            div{
                height: 200px;
                width: 200px;
                border: 1px solid black;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>點我隱藏</button>
        <div id="box">
            
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
                $('#box').toggle(3000,function(){
                    alert('成功')
                })
            })
        })
    </script>
</html>

使用toggle有淡入淡出的效果

jquery效果2-slide

slideDown

概念：經過高度變化（向下增大）來到動態地顯示全部匹配的元素，在顯示完成後觸發一個回調函數

用法和參數跟上面相似

slideUp

經過高度變化（向上減少）來動態地隱藏全部匹配的元素，在隱藏完成後可選地觸發一個回調函數。

用法和參數跟上面相似

slideToggle

概念:經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回調函數

跟toggle用法相似

# 使用slideUp 和 slideDown 實現的隱藏和開啓

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <button id="btn">點我隱藏</button>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            var isShow = true;
            $('#btn').click(function(){
                if (isShow) {
                    $('#box').slideUp('3000')
                    $('#btn').html('點我開啓')
                    isShow = false
                } else{
                    $('#box').slideDown('3000')
                    $('#btn').html('點我隱藏')
                    isShow = true
                }
            })
        })
    </script>
</html>

# 使用slideToggle實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }   
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <button id="btn">點我</button>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                $('#box').slideToggle('3000')
            })
        })
    </script>
</html>

jquery效果3 淡入淡出

fadeIn

概念：經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。

這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化

fadeOut

概念：經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選地觸發一個回調函數。

這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。

fadeTo

概念：把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選地觸發一個回調函數。

這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。

fadeToggle

概念：經過不透明度的變化來開關全部匹配元素的淡入和淡出效果，並在動畫完成後可選地觸發一個回調函數。

這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化。

實現淡入淡出的效果就是使用此方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <button id="btn">淡出</button>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        
        //第一種方法
        /*$(function(){
            var isShow = true;
            $('#btn').click(function(){
                if (isShow) {
                    $('#box').fadeOut('3000')
                    $('#btn').html('淡入')
                    isShow = false
                } else{
                    $('#box').fadeIn('3000')
                    $('#btn').html('淡出')
                    isShow = true
                }

            })
        })*/
        
        //第二種方法
        $(function(){
            $('#btn').click(function(){
                $('#box').fadeToggle('3000')
            })
        })
        
    </script>
</html>

jquery的動畫效果

animate

概念：用於建立自定義動畫的函數

語法：animate(params,[speed],[fn])

參數：

params:一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合

speed:三種預約速度之一的字符串("slow","normal", or "fast")或表示動畫時長的毫秒數值(如：1000)

fn:在動畫完成時執行的函數，每一個元素執行一次。

stop

概念：中止全部在指定元素上正在運行的動畫

語法：stop([clearQueue],[jumpToEnd])

參數：

clearQueue:若是設置成true，則清空隊列。能夠當即結束動畫。若是不加true，那麼只中止當前元素的動畫，不會影響到當前元素的下一個動畫

gotoEnd:讓當前正在執行的動畫當即完成，而且重設show和hide的原始樣式，調用回調函數等

delay

概念：用來作延遲的操做

語法：delay(1000)，一秒以後作後面的操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <button id="btn">點我</button>
        <button id="stop">中止</button>
        <div id="box">
            
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        //當點擊按鈕後直接進行操做
        /*$(function(){
            $('#btn').click(function(){
                $('#box').animate({
                    width:'200px',
                    height:'300px'
                })
            })
        })*/
        
        //當點擊時按照咱們給定的路線走
        /*$(function(){
            $('#btn').click(function(){
                $('#box').animate({
                    left:"200px",
                    top:"300px"
                },2000).animate({
                    top:'100px'
                })
            })
        })*/
        
        //同時咱們還可讓運動一次後 等待幾秒再運行  deady()
        /*$(function(){
            $('#btn').click(function(){
                $('#box').animate({
                    left:'200px',
                    top:'300px'
                },1000).delay(1000).animate({
                    top:'100px'
                })
            })
        })*/
        
        $(function(){
            $('#btn').click(function(){
                $('#box').animate({
                    top:'200px',
                    left:'200px'
                },2000).delay(2000).animate({
                    top:'300px'
                })
            })
            $('#stop').click(function(){
                $('#box').stop();
            })
            
            $('#stop').click(function(){
                $('#box').stop(true);
            })
        })
    </script>
</html>

jquery右下角彈出廣告

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 300px;height: 200px;
                position: absolute;
                bottom: 0;
                right: 0;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src='../02.jpg'/>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('#box').slideDown(1000).slideUp('fast').fadeIn(1000).click(function(){
                $('#box').fadeOut(2000)
            })
        })
    </script>
</html>

jquery的屬性操做

jquery有本身的屬性和方法，咱們先研究一下jquery的屬性操做

jquery的屬性操做模塊分爲四個部分：

html屬性操做
DOM屬性操做
類樣式操做
值操做

HTML屬性操做和DOM屬性操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <p>泰然城</p>
        </div>
        <button>獲取</button>
        
        <ul>
            <li class="tairan1">泰然城1</li>
            <li class="tairan2">泰然城2</li>
            <li class="tairan3">泰然城3</li>
            <li class="tairan4">泰然城4</li>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //1.獲取div盒子的ID jquery屬性    html屬性 attr() 若是有一個參數表示獲取屬性值   有兩個參數表明設置值
        $(function(){
            $('button').click(function(){
                $('#box').text($('#box').attr('id'))
                
                //設置一個屬性
                $('#box').attr('class','foo')
                
                //設置多個屬性 須要用到對象存儲的方法 
                $('#box').attr({'class2':'foo','name':'xiaoyafei'})
                
                
                //2.removeAttr() 刪除一個屬性
                $('#box').removeAttr('class')
                
                //刪除多個屬性 中間加空格
                $('#box').removeAttr('class2 name')
            })
        })
        
        //2.jquery DOM屬性
        $(function(){
            //1.獲取匹配元素數組中的第一個元素的屬性值
            console.log($('li').prop('class'))
            
            //給DOM對象設置屬性
            $('li').eq(0).prop({'name':'app','name2':'app2'})
            console.log($('li').eq(0))
            
            //移除由prop方法設置的屬性
            $('li').removeProp('name')
            $('li').removeProp('name2')
            
        })
        
    </script>
</html>

class操做和值操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p.active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p>泰然城</p>
        </div>
        <button>獲取</button>
        
        <ul>
            <li class="tairan">泰然城1</li>
            <li class="tairan2">泰然城2</li>
            <li class="tairan3">泰然城3</li>
            <li class="tairan4">泰然城4</li>
        </ul>
        
        <span id="span1">路飛</span>
        <div id="box2">
            哈哈
            <p>我是一個段落</p>
            <input type="text" name="" id="" value="nihao" />
            <button id="btn3">GET</button>
        </div>
    </body>
        <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                //3.class屬性操做  首先咱們在style裏寫上了類的樣式
                //addClass()
                $('p').addClass('active')
                
                //removeClass()  刪除掉屬性
                $('p').removeClass('active')
                
                
                //4.值屬性操做  html() text() val()
                //獲取
                console.log($('input').val())
                
                //設置
                $('input').val('嘿嘿嘿你個大頭鬼')
                
                //監聽事件
                $('input').change(function(){
                    console.log($(this).val())
                })
                
            })
        </script>
</html>

jquery獲取input的值操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="radio" name="sex"  value="112" />男
        <input type="radio" name="sex"  value="11" checked="" />女
        <input type="radio" name="sex"  value="114" />gay

        <input type="checkbox" value="a" checked=""/>吃飯
        <input type="checkbox" value="b" checked=""/>睡覺
        <input type="checkbox" value="c" checked=""/>打豆豆

        <select name="timespan" id="timespan" class="Wdate"   >  
            <option value="1">8:00-8:30</option>  
            <option value="2" selected="">8:30-9:00</option>  
            <option value="3">9:00-9:30</option>  
        </select>  
        <input type="text" name="" id="" value="111" />
    </form>
</body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function(){
            //1.獲取單選框被選中的value值
            console.log($('input[type=radio]:checked').val())
            
            //2.複選框被選中的value獲取到的第一個被選中的值
            console.log($('input[type=checkbox]:checked').val())
            
            //3.獲取下拉列表被選中的值
            console.log($('#timespan option:checked').val())
            
            //4.設置單選框的值
            $('input[type=radio]:checked').val('1100')
            
            //5.設置複選框的值  這裏須要使用select
            $('select').val(['3']);
            
            //6.設置文本框的值
            $('input[type=text]').val('123')
            
        })
    </script>
</html>

jquery文檔操做

插入操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span>哈哈哈</span>
        <ul>
            
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function(){
            //1.append()   父元素添加一個新的子元素 按照從上到下的順序添加
            $('ul').append('<li>你在幹嗎呢</li>')
            $('ul').append('<li>你在幹嗎呢？</li>')
            
            //2.appendTo()  子元素添加到父元素中  緊接着進行插入
            $('<li>我是哈哈哈</li>').appendTo('ul')
            $('<li>我是哈哈哈2</li>').appendTo('ul')
            
            //3.prepend()  添加一個子元素放在第一位
            $('ul').prepend('這是一個prepend的方法')
            //4.prependTo()  添加一個子元素放在最前面
            $('<li>添加一個子元素到最後一位</li>').prependTo('ul')
            
            //5.after()  在匹配的元素以後插入內容   兄弟關係
            $('ul').after('<h2>我是一個耳機標題</h2>')
            
            //insertAfter()  在匹配的元素後插入內容
            $('<h3>我是一個三級標題</h3>').insertAfter('ul')
            
            
            //6.before()  在匹配的元素以前插入內容
            $('ul').before('<h1>我是一個一級標題</h1>')
            $('ul').before('<h1 style="color: red;">我是一個一級標題</h1>')
            
            
        })
    </script>
</html>

克隆操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span>哈哈哈</span>
        <ul>
            
        </ul>
        <button>點我快點我</button>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function(){
            //clone操做 當點擊按鈕時 再克隆一個新的按鈕
            $('button').click(function(){
//              $(this).clone().insertAfter(this);
                
                //若是cloen()的參數未true，那麼  就將這個元素以及全部的事件處理進行克隆
                $(this).clone(true).insertAfter(this);
                
            })
        })
    </script>
</html>

替換操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span>哈哈哈</span>
        <ul>
            
        </ul>
        <button>點擊替換</button>
        
        <h4>我是一個四級標題</h4>
        <h4>我是一個四級標題</h4>
        <h4>我是一個四級標題</h4>
        <h4>我是一個四級標題</h4>
        <h5>我是一個五級標題</h5>
        <h5>我是一個五級標題</h5>
        <h5>我是一個五級標題</h5>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function(){
            $('button').click(function(){
                
                //replaceWith()將全部匹配的元素替換成指定的HTML或DOM元素
                $('h5').replaceWith('<a>我要去百度</a>')
                
                //replaceAll() 用匹配的元素替換掉全部匹配到的元素
                $('<a>你好</a>').replaceAll('h4');
            })
        })
    </script>
</html>

刪除操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span>哈哈哈</span>
        <ul id="ul_1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul id="ul_2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <button>點擊替換</button>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function(){
            //1.刪除一個節點 remove()
//          $('#ul_1').remove();
            
//          2.刪除節點後,事件會保留
            var val = $('#ul_2').detach()
            $('#ul_1').append($(val))
            //3.empty清空元素中的全部後代節點
            //例如 清空ul中的子元素 保留ul
            $('ul').empty()
        })
    </script>
</html>

jquery的位置屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                position: relative;
                width: 200px;
                height: 200px;
                border: 1px solid red;
                padding: 10px 5px;
            }
            p{
                position: absolute;
                left: 30px;
                top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p>我是一個段落標籤</p>
        </div>
        <button id="btn">動畫吧</button>
        <div id="" style="width: 200px;height: 200px;margin: 100px auto;border: 1px solid deepskyblue">
            
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //1.獲取匹配元素相對於父元素的偏移量   也就是子元素相對於父元素的top和left值
            console.log($('p').position().left)
            console.log($('p').position().top)
            
            //2.offset 獲取匹配元素在當前視口的相對偏移   也就是子元素到瀏覽器左上角的值
            console.log($('p').offset().top)
            console.log($('p').offset().left)
            
            //3.scrollTop scroolLeft  獲取當前元素相對滾動條頂部的偏移   當瀏覽器的滾動條向下 或者向右移動時就會顯示
            console.log($(document).scrollLeft())
            console.log($(document).scrollTop())
            
            //監聽滾動條   當滑動滾動條會立馬顯示
            $(document).scroll(function(){
                console.log($(document).scrollLeft())
                console.log($(document).scrollTop())
            })
            
            
            //4.innerHeight  innerWeight  獲取第一個匹配元素的內部區域高度和寬度  不包含margin 和 border
            console.log($('#box').innerHeight())
            console.log($('#box').innerWidth())
            
            //5.outerHeight outerWidth  獲取第一個匹配元素的外部區域高度和寬度   包含margin 和 border
            console.log($('#box').outerHeight())
            console.log($('#box').outerWidth())
            
            //6.width height 獲取匹配元素的寬度和高度   
            console.log($('p').width())
            console.log($('p').height())

        })
    </script>
</html>

jquery的篩選方法

前面學到了選擇器的篩選方法，如今來看下jquery經常使用的篩選方法

children()方法和hasClass()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="denger">1</li>
            <li>2</li>
            <li class="denger"><a href="">3</a></li>
            <li>4</li>
            <a href="#" id="anchor">百度</a>
            <a href="#" id="anchor1">百度</a>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //1.當class是denger的  那麼就讓它的顏色變成紅色
            $('ul').children().each(function(index,ele){
                console.log(index)
                console.log(ele)
                
                var denger = $(this).hasClass('denger');
                if (denger) {
                    $(this).css('color','red')
                } else{
                    $(this).css('font-size','20px')
                }
            })
        })
    </script>
</html>

parent() 獲取當前元素的惟一父元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="denger">1</li>
            <li>2</li>
            <li class="denger"><a href="" id="myA">3</a></li>
            <li>4</li>
            <a href="#" id="anchor">百度</a>
            <a href="#" id="anchor1">百度</a>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //2.parent() 獲取到匹配元素的父元素
            console.log($('#myA').parent());
        })
    </script>
</html>

prev() 和 prevAll()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="denger">1</li>
            <li>2</li>
            <li class="denger"><a href="" id="myA">3</a></li>
            <li>4</li>
            <a href="#" id="anchor">百度</a>
            <a href="#" id="anchor1">百度</a>
            <p>我是一個段落標籤</p>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //3.prev()  獲取當前匹配元素的前一個兄弟元素
            $('p').last().prev().css('background-color','red')
            
            //4.prevAll()  獲取當前匹配元素的全部兄弟元素
            $('p').prevAll().css('font-size','40px')
        })
    </script>
</html>

siblings() 得到匹配集合中每一個元素的同胞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            li.active{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="denger">1</li>
            <li>2</li>
            <li class="denger"><a href="" id="myA">3</a></li>
            <li>4</li>
            <a href="#" id="anchor">百度</a>
            <a href="#" id="anchor1">百度</a>
            <p>我是一個段落標籤</p>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //5.siblings() 得到匹配集合中每一個元素的同胞，經過選擇器進行篩選是可選的。
            console.log($('li').siblings('li'))
            
            $('li').hover(function(){
                $(this).addClass('active').siblings('li').removeClass('active')
            })
        })
    </script>
</html>

jquery案例

仿淘寶搜索欄

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100%;
            }
            div img{
                width: 100%;
            }
            #nav{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="top">
            <img src="../images/top.jpg"/>
        </div>
        <div id="nav">
            <img src="../images/nav.jpg"/>
        </div>
        <div id="taobao">
            <img src="../images/taobao1.png"/>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

        $(function(){
            //1.獲取top的height
            var h = $('#top').height();
            console.log(h)
            
            //2.對滾動條進行監聽 當滾動欄進行監聽  當h小於scrollTP的時候 就讓他展現出來
            $(document).scroll(function(){
                var scrollTp = $(document).scrollTop();
                if (h < scrollTp ) {
                    $('#nav').css({display:'block',position:'fixed',top:0})
                } else{
                    $('#nav').css({display:'none',position:'static',top:0})
                    
                }
            })
        })
    </script>
</html>

小米官網案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }           
            ul{list-style: none;}
            .wrap{width: 980px;height: 612px;margin: 20px auto 0px;background: #f4f3f4;border: 1px solid gray;}
        
            ul li{float: left;margin-left: 10px;position: relative;overflow: hidden;width: 233px;height: 300px;}

        
            ul li p{    
                width: 233px;
                height: 100px;
                background: rgba(245,102,51,.7);
                position: absolute;
                bottom: -100px;
                text-align: center;
                color: white;
                line-height: 100px;
                
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <ul>
                <li><a href="#"><img src="../images/xiaomi_01.png"/></a><p>百度一下，你就知道</p></li>
                <li><a href="#"><img src="../images/xiaomi_02.png"/></a><p>百度一下，你就知道</p></li>
                
                <li><a href="#"><img src="../images/xiaomi_03.png"/></a><p>百度一下，你就知道</p></li>
                <li><a href="#"><img src="../images/xiaomi_04.png"/></a><p>百度一下，你就知道</p></li>
                <li><a href="#"><img src="../images/xiaomi_05.png"/></a><p>百度一下，你就知道</p></li>
                <li><a href="#"><img src="../images/xiaomi_07.png"/></a><p>百度一下，你就知道</p></li>
                <li><a href="#"><img src="../images/xiaomi_08.png"/></a><p>百度一下，你就知道</p></li>
                <li><a href="#"><img src="../images/xiaomi_09.png"/></a><p>百度一下，你就知道</p></span></li>
            </ul>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //當鼠標滑過li標籤的時候
            $('li').hover(function(){
                $(this).children('p').stop().animate({bottom:0},300)
            },function(){
                $(this).children('p').stop().animate({bottom:-100},300)
            })
        })
    </script>
</html>

大體的效果就是這樣，當鼠標通過時就從底部彈出東西：

焦點式輪播圖

大體的結果就是點我點擊下面的li標籤時圖片也會跟着動

jquery中的事件

事件的概念

HTML和JavaScript交互是經過事件驅動來實現的，例如按鈕點擊事件，頁面的滾動onscroll等等，能夠向文檔或者文檔中添加事件偵聽器來監聽事件。想要知道這些事件是何時發生的，須要瞭解下什麼是事件流。

事件流

事件流描述的是從頁面中接收事件的順序。

1.DOM事件流

DMO2級事件規定的事件流包括3個階段

事件捕獲階段
處於目標階段
事件冒泡階段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn處於事件捕獲階段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn處於事件冒泡階段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document處於事件捕獲階段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document處於事件冒泡階段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件捕獲階段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件冒泡階段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body處於事件捕獲階段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body處於事件冒泡階段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

點咱們點擊btn的時候，看看這個頁面都輸出了什麼：

在解釋輸出結果爲何是這樣以前，還有幾個知識點須要瞭解一下：

1.addEventListener

addEventListener是DOM2級事件新增的指定事件處理程序的操做，這個方法接收3個參數：要處理的事件名、作爲事件處理程序的函數和一個布爾值，最後這個布爾值參數若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。

document、documentElement和document.body三者的關係

document表明的是整個html頁面

document.documentElement表明的是標籤

document.body表明的是標籤

在標準的DOM2級事件中規定，事件流首先通過事件捕獲階段，接着是處於目標階段，最後是事件冒泡階段，這裏有一張圖：

首先是在事件捕獲階段，document對象首先接收到click事件，而後事件沿着DOM樹依次向下，一直傳播到事件的實際目標，就是id爲btn 的a標籤元素。

接着是事件冒泡階段，事件開始時由最具體的元素（a標籤）接收，而後逐級向上傳播到較爲不具體的節點(document)

注意：因爲老版本的瀏覽器不支持事件的捕獲，所以在實際開發中須要使用事件冒泡，在有特殊須要的時候使用事件捕獲。

補充：

一、IE中的事件流只支持 事件冒泡  ，可是版本到IE9+之後，實現了 DOM2級事件 ，也就是說IE9+之後能夠在捕獲階段對元素進行相應的操做了

二、在DOM事件流中，實際的目標在 捕獲階段 不會接收到事件，而是在 處於目標階段 被觸發，並在事件處理中被當作 冒泡階段 的一部分，而後 冒泡階段發生，事件又傳播迴文檔

jquery中的經常使用事件

jquery的事件對象和事件冒泡

讓咱們舉一個例子來看下什麼是事件冒泡：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <button>點擊我！</button>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
                alert('按鈕被點擊了！')
            })
            $('#box').click(function(){
                alert('盒子被點擊了！')
            })
        })
        
    </script>
</html>

當咱們點擊了按鈕的時候，第一次會彈出按鈕被點擊了，第二次會彈出盒子被點擊了，這就是事件冒泡，冒泡到上一層

正是由於事件冒泡，因此當咱們點擊的時候，纔會彈出兩個框

那麼該如何禁止盒子被彈出了，讓咱們來看一下事件對象

事件對象

在點擊進行事件對象的時候，會傳遞進來一個事件對象的對象

event.type 表示事件的類型

enevt.target 表示事件的對象

event.pageX 表示相對瀏覽器X軸位置

event.pageY 表示相對瀏覽器Y軸位置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
            }
            p{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p class="p1"></p>
            <!--#  表明頂部-->
            <a href="https://www.baidu.com">打開百度</a>
        </div>
    </body>
    <script src="jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        //1.入口函數事件
        $(function(){
            
            //事件對象 就是點擊當前的元素的時候 就會傳遞一個事件對象的對象
            $('.p1').click(function(event){//hover事件能夠傳遞兩個參數
                
                //1.事件屬性
                //事件類型
                console.log(event.type)
                
                //事件對象
                console.log(event.target)
                
                //相對於瀏覽器獲取光標所點的位置
                console.log(event.pageX)
                console.log(event.pageY)
                
                alert('當前按鈕事件觸發了')
                //2.經常使用的事件  1.阻止事件冒泡  

            })
            $('#box').click(function(){
                alert('盒子事件觸發了')
            })
            
        })
    </script>
</html>

事件冒泡

以前咱們說了當咱們點擊p標籤時，DIV盒子也會彈出，這就是事件冒泡帶來的影響，因此咱們須要阻止事件冒泡

event.stopPropagation() 阻止事件冒泡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
            }
            p{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p class="p1"></p>
            <!--#  表明頂部-->
            <a href="https://www.baidu.com">打開百度</a>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //效果：當點擊p標籤的同時 div盒子不受事件冒泡的影響
            $('.p1').click(function(enent){
                console.log('p元素冒泡了')
                
                //阻止事件冒泡
                event.stopPropagation()
                
            })
            $('#box').click(function(){
                console.log('div元素冒泡了')
            })
            
        })
    </script>
</html>

那相同的來講，咱們的a標籤有一個默認事件，就是當咱們點擊a標籤的時候，會跳轉到某一個網頁中

event.preventDefault() 取消元素的默認事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
            }
            p{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p class="p1"></p>
            <!--#  表明頂部-->
            <a href="https://www.baidu.com">打開百度</a>
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //效果：當點擊p標籤的同時 div盒子不受事件冒泡的影響
            $('.p1').click(function(enent){
                console.log('p元素冒泡了')
                
                //阻止事件冒泡
                event.stopPropagation()
                
            })
            $('#box').click(function(){
                console.log('div元素冒泡了')
            })
            
            $('a').click(function(event){
                console.log('剛剛點擊了a標籤')
                event.preventDefault()
                event.stopPropagation()
                
            })
            
        })
    </script>
</html>

只是提示點擊了a標籤，可是並無給咱們跳轉

jquery中綁定事件和移除事件

綁定事件：咱們最經常使用的click和hover，這就是一個事件，可是在jquery中，咱們還能夠用另一種方法綁定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            
            //1.給DOM元素綁定事件  
            /*$('#box').bind('mouseenter',function(){
                console.log('綁定了mouseenter方法')
            })*/
            
            //2.綁定多個事件的時候須要用到對象存儲
            //當通過時顯示通過  當點擊時顯示點擊的動做
            function over(){
                console.log('鼠標通過')
            }
            function clicks(){
                console.log('鼠標點擊')
            }
            
            $('#box').bind({
                'mouseenter':over,
                'click':clicks
            })
            
            //3.移除事件  unbind若是沒有參數 那麼表明移除全部的事件
            //兩秒後取消box的點擊操做
            setInterval(function(){
                $('#box').unbind('click')
            },2000)
        })
    </script>
</html>

綁定自定義事件

所謂的綁定自定義事件，意思就是程序從上到下執行，點擊事件剛剛作完的時候，咱們動態生成了一個div盒子，那麼此時這個Div盒子時沒有添加任何事件的，因此咱們須要使用綁定自定義事件。

咱們的代碼仍是剛剛的綁定事件的代碼只是作了少量修改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <button>按鈕</button>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            
            //jq給DOM元素綁定click事件
//          $('#box').click(fn)
            
            //語法：jquery對象.bind(事件類型,fn)
//          $('#box').bind('click mouseenter',function(){
//              alert('事件被綁定了')
//          })
            
            //給jq對象
            
            function add(){
                console.log('click')
            }
            function over(){
                console.log('over')
            }
            $('div').bind({
                "click":add,
                "mouseenter":over
            })
            
            //移除事件   若是沒有參數 表明移除全部事件
            setTimeout(function(){
                $('#box').unbind('click')
            },2000)
            
            
            //後續添加的事件 不能發生在將來   動態生成的元素不能直接添加對象  裏面的事件也不能發生了
            $('body').append('<div style="width: 200px;height: 200px;background-color: yellow;">哈哈哈</div>')
            
            
        })
    </script>
</html>

最開始的狀況時這個樣子的：

由於咱們在後面動態生成的DOM元素因此是不受影響的，若是想收到影響咱們須要綁定自定義事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
        <button>按鈕</button>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            
            //jq給DOM元素綁定click事件
//          $('#box').click(fn)
            
            //語法：jquery對象.bind(事件類型,fn)
//          $('#box').bind('click mouseenter',function(){
//              alert('事件被綁定了')
//          })
            
            //給jq對象
            
            function add(){
                console.log('click')
            }
            function over(){
                console.log('over')
            }
            $('div').bind({
                "click":add,
                "mouseenter":over
            })
            
            //移除事件   若是沒有參數 表明移除全部事件
            setTimeout(function(){
                $('#box').unbind('click')
            },2000)
            
            
            //後續添加的事件 不能發生在將來   動態生成的元素不能直接添加對象  裏面的事件也不能發生了
            $('body').append('<div style="width: 200px;height: 200px;background-color: yellow;">哈哈哈</div>')
            
            $('button').bind('myClick',function(event){
                console.log('綁定了事件')
            })
            
            //經過trigger 觸發了綁定事件
            $('button').trigger('myClick')
        })
    </script>
</html>

當咱們什麼都沒操做的時候就已經給咱們的事件綁定了

事件代理

後續生成的doM元素不能綁定事件可是是可使用事件代理的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>泰然城</li>
            <li>小泰良品</li>
            <li>泰然保險</li>
        </ul>
    </body>
    <script src="../jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //後續生成的doM元素 不能綁定事件 可是是可使用事件代理的
        $(function(){
            
            //常規寫法
            /*$('li').click(function(){
                console.log($(this).html())
            })*/
            
            //事件代理的寫法  
            $('ul').on('click','li',function(){
                console.log(111)
            })
            
            //此時是不能綁定事件的  
            $('ul').append('<li>娜美</li>')
        })
    </script>
</html>

到最後當咱們點擊娜美的時候就會輸出111