Python開發【前端篇】JavaScript和Jquery

時間 2019-11-10

標籤 python 開發前端篇 javascript jquery 欄目 Python 简体版

原文原文鏈接

JavaScript嵌入頁面的方式

一、行間事件（主要用於事件）javascript

<input type="button" name="" onclick="alert('ok！');">

二、頁面script標籤嵌入css

<script type="text/javascript">        
    var a = '你好！';
    alert(a);
</script>

三、外部引入html

<script type="text/javascript" src="js/index.js"></script>

javascript語句與註釋

一、一條javascript語句應該以「;」結尾java

<script type="text/javascript">    
var a = 123;
var b = 'str';
function fn(){
    alert(a);
};
fn();
</script>

二、javascript註釋jquery

<script type="text/javascript">    

// 單行註釋
var a = 123;
/*  
    多行註釋
    一、...
    二、...
*/
var b = 'str';
</script>

變量

JavaScript 是一種弱類型語言，javascript的變量類型由它的值來決定。定義變量須要用關鍵字 'var'數組

 var a = 123;
 var b = 'asd';

 //同時定義多個變量能夠用","隔開，公用一個‘var’關鍵字

 var c = 45,d='qwe',f='68';

變量類型瀏覽器

5種基本數據類型：
number、string、boolean、undefined、null服務器

1種複合類型：
object閉包

變量、函數、屬性、函數參數命名規範

一、區分大小寫
二、第一個字符必須是字母、下劃線（_）或者美圓符號（$）
三、其餘字符能夠是字母、下劃線、美圓符或數字app

獲取元素方法一

可使用內置對象document上的getElementById方法來獲取頁面上設置了id屬性的元素，獲取到的是一個html對象，而後將它賦值給一個變量，好比：

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>

上面的語句，若是把javascript寫在元素的上面，就會出錯，由於頁面上從上往下加載執行的，javascript去頁面上獲取元素div1的時候，元素div1尚未加載，解決方法有兩種：

第一種方法：將javascript放到頁面最下邊

....
<div id="div1">這是一個div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

第二種方法：將javascript語句放到window.onload觸發的函數裏面,獲取元素的語句會在頁面加載完後才執行，就不會出錯了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">這是一個div元素</div>

操做元素屬性

獲取的頁面元素，就能夠對頁面元素的屬性進行操做，屬性的操做包括屬性的讀和寫。

操做屬性的方法

一、「.」操做
二、「[ ]」操做

屬性寫法

一、html的屬性和js裏面屬性寫法同樣
二、「class」屬性寫成「className」
三、「style」屬性裏面的屬性，有橫槓的改爲駝峯式，好比：「font-size」，改爲」style.fontSize」

經過「.」操做屬性：

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 讀取屬性值
        var val = oInput.value;
        var typ = oInput.type;
        var nam = oInput.name;
        var links = oA.href;
        // 寫(設置)屬性
        oA.style.color = 'red';
        oA.style.fontSize = val;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.baidu.com" id="link1">baidu</a>

經過「[ ]」操做屬性：

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 讀取屬性
        var val1 = oInput1.value;
        var val2 = oInput2.value;
        // 寫(設置)屬性
        // oA.style.val1 = val2; 沒反應
        oA.style[val1] = val2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://baidu.com" id="link1">百度</a>

innerHTML

innerHTML能夠讀取或者寫入標籤包裹的內容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //讀取
        var txt = oDiv.innerHTML;
        alert(txt);
        //寫入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">傳智播客<a/>';
    }
</script>

......

<div id="div1">這是一個div元素</div>

函數

函數就是重複執行的代碼片。

函數定義與執行

<script type="text/javascript">
    // 函數定義
    function aa(){
        alert('hello!');
    }
    // 函數執行
    aa();
</script>

變量與函數預解析

JavaScript解析過程分爲兩個階段，先是編譯階段，而後執行階段，在編譯階段會將function定義的函數提早，而且將var定義的變量聲明提早，將它賦值爲undefined。

<script type="text/javascript">    
    aa();       // 彈出 hello！
    alert(bb);  // 彈出 undefined
    function aa(){
        alert('hello!');
    }
    var bb = 123;
</script>

提取行間事件

在html行間調用的事件能夠提取到javascript中調用，從而作到結構與行爲分離。

<!--行間事件調用函數   -->
<script type="text/javascript">        
    function myalert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="彈出" onclick="myalert()">

<!-- 提取行間事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="彈出" id="btn1">

匿名函數

定義的函數能夠不給名稱，這個叫作匿名函數，能夠將匿名函數直接賦值給元素綁定的事件來完成匿名函數的調用。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接將匿名函數賦值給綁定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

函數傳參

<script type="text/javascript">
    function myalert(a){
        alert(a);
    }
    myalert(12345);
</script>

函數'return'關鍵字

函數中'return'關鍵字的做用：
一、返回函數執行的結果
二、結束函數的運行
三、阻止默認行爲

<script type="text/javascript">
function add(a,b){
    var c = a + b;
    return c;
    alert('here!');
}

var d = add(3,4);
alert(d);  //彈出7
</script>

條件語句

經過條件來控制程序的走向，就須要用到條件語句。

運算符

一、算術運算符： +(加)、 -(減)、 *(乘)、 /(除)、 %(求餘)
二、賦值運算符：=、 +=、 -=、 *=、 /=、 %=
三、條件運算符：==、===、>、>=、<、<=、!=、&&(並且)、||(或者)、!(否)

if else

var a = 6;
if(a==1)
{
    alert('語文');
}
else if(a==2)
{
    alert('數學');
}
else if(a==3)
{
    alert('英語');
}
else if(a==4)
{
    alert('美術');
}
else if(a==5)
{
    alert('舞蹈');
}
else
{
    alert('不補習');
}

switch

var a = 6;

switch (a){
    case 1:
        alert('語文');
        break;
    case 2:
        alert('數學');
        break;
    case 3:
        alert('英語');
        break;
    case 4:
        alert('美術');
        break;
    case 5:
        alert('舞蹈');
        break;
    default:
        alert('不補習');
}

數組及操做方法

數組就是一組數據的集合，javascript中，數組裏面的數據能夠是不一樣類型的。

定義數組的方法

//對象的實例建立
var aList = new Array(1,2,3);

//直接量建立
var aList2 = [1,2,3,'asd'];

操做數組中數據的方法

一、獲取數組的長度：aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 彈出4

二、用下標操做數組的某個數據：aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 彈出1

三、join() 將數組成員經過一個分隔符合併成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 彈出 1-2-3-4

四、push() 和 pop() 從數組最後增長成員或刪除成員

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4

五、unshift()和 shift() 從數組前面增長成員或刪除成員

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4

六、reverse() 將數組反轉

var aList = [1,2,3,4];
aList.reverse();
alert(aList);  // 彈出4,3,2,1

七、indexOf() 返回數組中元素第一次出現的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

八、splice() 在數組中增長或刪除成員

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //從第2個元素開始，刪除1個元素，而後在此位置增長'7,8,9'三個元素
alert(aList); //彈出 1,2,7,8,9,4

多維數組

多維數組指的是數組的成員也是數組的數組。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //彈出2;

獲取元素的第二種方法

document.getElementsByTagName(''),獲取的是一個選擇集，不是數組，可是能夠用下標的方式操做選擇集裏面的dom元素。

循環語句

程序中進行有規律的重複性操做，須要用到循環語句。

for循環

for(var i=0;i<len;i++)
{
    ......
}

while循環

var i=0;

while(i<8){

    ......

    i++;

}

數組去重

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

Javascript組成

一、ECMAscript javascript的語法（變量、函數、循環語句等語法）
二、DOM 文檔對象模型操做html和css的方法
三、BOM 瀏覽器對象模型操做瀏覽器的一些方法

字符串處理方法

一、字符串合併操做：「 + 」
二、parseInt() 將數字字符串轉化爲整數
三、parseFloat() 將數字字符串轉化爲小數
四、split() 把一個字符串分隔成字符串組成的數組
五、charAt() 獲取字符串中的某一個字符
六、indexOf() 查找字符串是否含有某字符
七、substring() 截取字符串用法： substring(start,end)（不包括end）
八、toUpperCase() 字符串轉大寫
九、toLowerCase() 字符串轉小寫

字符串反轉

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

調試程序的方法

一、alert

二、console.log

三、document.title

定時器

定時器在javascript中的做用
一、製做動畫
二、異步操做
三、函數緩衝與節流

定時器類型及語法

/*
    定時器：
    setTimeout  只執行一次的定時器 
    clearTimeout 關閉只執行一次的定時器
    setInterval  反覆執行的定時器
    clearInterval 關閉反覆執行的定時器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

定時器製做時鐘

<script type="text/javascript">
    window.onload = function(){    
        var oDiv = document.getElementById('div1');
        function timego(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var str = '當前時間是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
            oDiv.innerHTML = str;
        }
        timego();
        setInterval(timego,1000);
    }

    function toweek(n){
        if(n==0)
        {
            return '星期日';
        }
        else if(n==1)
        {
            return '星期一';
        }
        else if(n==2)
        {
            return '星期二';
        }
        else if(n==3)
        {
            return '星期三';
        }
        else if(n==4)
        {
            return '星期四';
        }
        else if(n==5)
        {
            return '星期五';
        }
        else
        {
            return '星期六';
        }
    }


    function todou(n){
        if(n<10)
        {
            return '0'+n;
        }
        else
        {
            return n;
        }
    }
</script>
......
<div id="div1"></div>

定時器製做倒計時

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        function timeleft(){
            var now = new Date();
            var future = new Date(2018,8,12,24,0,0);
            var lefts = parseInt((future-now)/1000);
            var day = parseInt(lefts/86400);
            var hour = parseInt(lefts%86400/3600);
            var min = parseInt(lefts%86400%3600/60);
            var sec = lefts%60;
            str = '距離2018年9月10日晚24點還剩下'+day+'天'+hour+'時'+min+'分'+sec+'秒';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

View Code

類型轉換

一、直接轉換 parseInt() 與 parseFloat()

alert('12'+7); //彈出127
alert( parseInt('12') + 7 );  //彈出19 
alert( parseInt(5.6));  // 彈出5
alert('5.6'+2.3);  // 彈出5.62.3
alert(parseFloat('5.6')+2.3);  // 彈出7.8999999999999995
alert(0.1+0.2); //彈出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //彈出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //彈出7.9

二、隱式轉換「==」和「-」

if('3'==3)
{
    alert('相等');
}

// 彈出'相等'
alert('10'-3);  // 彈出7

三、NaN 和 isNaN

alert( parseInt('123abc') );  // 彈出123
alert( parseInt('abc123') );  // 彈出NaN

變量做用域

變量做用域指的是變量的做用範圍，javascript中的變量分爲全局變量和局部變量。

一、全局變量：在函數以外定義的變量，爲整個頁面公用，函數內部外部均可以訪問。
二、局部變量：在函數內部定義的變量，只能在定義該變量的函數內部訪問，外部沒法訪問。

<script type="text/javascript">
    //全局變量
    var a = 12;
    function myalert()
    {
        //局部變量
        var b = 23;
        alert(a);
        alert(b);
    }
    myalert(); //彈出12和23
    alert(a);  //彈出12    
    alert(b);  //出錯
</script>

封閉函數

封閉函數是javascript中匿名函數的另一種寫法，建立一個一開始就執行而不用命名的函數。

通常定義的函數和執行函數：

function changecolor(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}
changecolor();

封閉函數：

(function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
})();

還能夠在函數定義前加上「~」和「!」等符號來定義匿名函數

!function(){
    var oDiv = document.getElementById('div1');
    oDiv.style.color = 'red';
}()

閉包

什麼是閉包

函數嵌套函數，內部函數能夠引用外部函數的參數和變量，參數和變量不會被垃圾回收機制收回

function aaa(a){      
      var b = 5;      
      function bbb(){
           a++;
           b++;
         alert(a);
         alert(b);
      }
      return bbb;
  }

 var ccc = aaa(2);

 ccc();
 ccc();

改寫成封閉函數的形式：

var ccc = (function(a){

  var b = 5;
  function bbb(){
       a++;
       b++;
     alert(a);
     alert(b);
  }
  return bbb;

})(2);

ccc();
ccc();

用處

一、將一個變量長期駐紮在內存當中，可用於循環中存索引值

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        for(var i=0;i<aLi.length;i++)
        {
            (function(i){
                aLi[i].onclick = function(){
                    alert(i);
                }
            })(i);
        }
    }
</script>
......
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>

二、私有變量計數器，外部沒法訪問，避免全局變量的污染

<script type="text/javascript">

var count = (function(){
    var a = 0;
    function add(){
        a++;
        return a;
    }

    return add;

})()

count();
count();

var nowcount = count();

alert(nowcount);

</script>

內置對象

一、document

document.referrer  //獲取上一個跳轉頁面的地址(須要服務器環境)

二、location

window.location.href  //獲取或者重定url地址
window.location.search //獲取地址參數部分
window.location.hash //獲取頁面錨點或者叫哈希值
window.location.assign("http://www.baidu.com"); //跳轉 能夠後退
window.location.reload(); //刷新頁面
window.location.replace(newUrl) //跟assign有點像 不過沒有後退  替代掉

三、Math

Math.random 獲取0-1的隨機數
Math.floor 向下取整
Math.ceil 向上取整

Jquery

jquery加載

將獲取元素的語句寫到頁面頭部，會由於元素尚未加載而出錯，jquery提供了ready方法解決這個問題，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

能夠簡寫爲：

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery選擇器

jquery用法思想一

選擇某個網頁元素，而後對它進行某種操做

jquery選擇器

jquery選擇器能夠快速地選擇元素，選擇規則和css樣式相同，使用length屬性判斷是否選擇成功。

$(document) //選擇整個文檔對象
$('li') //選擇全部的li元素
$('#myId') //選擇id爲myId的網頁元素
$('.myClass') // 選擇class爲myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span') //選擇id爲爲ul1元素下的全部li下的span元素

對選擇集進行修飾過濾(相似CSS僞類)

$('#ul1 li:first') //選擇id爲ul1元素下的第一個li
$('#ul1 li:odd') //選擇id爲ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id爲ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id爲ul1元素下的前三個以後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素

對選擇集進行函數過濾

$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素

選擇集轉移

$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的全部子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素

jquery樣式操做

jquery用法思想二
同一個函數完成取值和賦值

操做行間樣式

// 獲取div的樣式
$("div").css("width");
$("div").css("color");


//設置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特別注意

選擇器獲取的多個元素，獲取信息獲取的是第一個，好比：$("div").css("width")，獲取的是第一個div的width。

操做樣式類名

$("#div1").addClass("divClass2") //爲id爲div1的對象追加樣式divClass2
$("#div1").removeClass("divClass")  //移除id爲div1的對象的class名爲divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式

jquery屬性操做

一、html() 取出或設置html內容

// 取出html內容

var $htm = $('#div1').html();

// 設置html內容

$('#div1').html('<span>添加文字</span>');

二、text() 取出或設置text內容

// 取出文本內容

var $htm = $('#div1').text();

// 設置文本內容

$('#div1').text('<span>添加文字</span>');

三、attr() 取出或設置某個屬性的值

// 取出圖片的地址

var $src = $('#img1').attr('src');

// 設置圖片的地址和alt屬性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

四、prop()取出或設置某個屬性的值對固有屬性的

綁定click事件

給元素綁定click事件，能夠用以下方法：

$('#btn1').click(function(){

    // 內部的this指的是原生對象

    // 使用jquery對象用 $(this)

})

jquery特殊效果

fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展現或隱藏某個元素
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

jquery鏈式調用

jquery對象的方法會在執行完後返回這個jquery對象，全部jquery對象的方法能夠連起來寫

$('#div1') // id爲div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent()  //跳到ul的父元素，也就是id爲div1的元素
.siblings()  //跳到div1元素平級的全部兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast');  //高度實際高度變換到零來隱藏ul元素

jquery動畫

經過animate方法能夠設置元素某屬性值上的動畫，能夠設置一個或多個屬性值，動畫執行完成後會執行一個函數。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

參數能夠寫成數字表達式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});

尺寸相關、滾動事件

一、獲取和設置元素的尺寸

width()、height()    獲取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

二、獲取元素相對頁面的絕對位置

offse()

三、獲取可視區高度

$(window).height();

四、獲取頁面高度

$(document).height();

五、獲取頁面滾動距離

$(document).scrollTop();  
$(document).scrollLeft();

六、頁面滾動事件

$(window).scroll(function(){  
    ......  
})

jquery事件

事件函數列表：

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

綁定事件的其餘方式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消綁定事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

主動觸發與自定義事件

主動觸發

可以使用jquery對象上的trigger方法來觸發對象上綁定的事件。

自定義事件

除了系統事件外，能夠經過bind方法自定義事件，而後用tiggle方法觸發這些事件。

//給element綁定hello事件
element.bind("hello",function(){
    alert("hello world!");
});

//觸發hello事件
element.trigger("hello");

事件冒泡

什麼是事件冒泡

在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

事件冒泡的做用

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

阻止事件冒泡

事件冒泡機制有時候是不須要的，須要阻止掉，經過 event.stopPropagation() 來阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默認行爲

阻止右鍵菜單

$(document).contextmenu(function(event) {
    event.preventDefault();
});

合併阻止操做

// event.stopPropagation();
// event.preventDefault();

// 合併寫法：
return false;

事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，經過判斷事件來源的子集，執行相應的操做，事件委託首先能夠極大減小事件綁定次數，提升性能；其次可讓新加入的子元素也能夠擁有相同的操做。

通常綁定事件的寫法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委託的寫法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

// on 方法綁定
$('.list').on('click', 'li', function() {
    alert($(this).html());

});

取消事件委託

// ev.delegateTarge 委託對象
$(ev.delegateTarge).undelegate();

// 上面的例子可以使用 $list.undelegate();

jquery元素節點操做

建立節點

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

插入節點

一、append()和appendTo()：在現存元素的內部，從後面插入元素

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

二、prepend()和prependTo()：在現存元素的內部，從前面插入元素

三、after()和insertAfter()：在現存元素的外部，從後面插入元素

四、before()和insertBefore()：在現存元素的外部，從前面插入元素

刪除節點

$('#div1').remove();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。