事件流和初識Jquery

1、事件流

定義：

多個彼此嵌套元素，他們擁有相同的事件，最內部元素事件被觸發後，外邊多個元素的同類型事件也會被觸發，多個元素他們同類型事件同時執行的效果稱爲「事件流」。

事件對象獲取：

得到：

①主流瀏覽器(IE9以上版本瀏覽器)：

node.onclick = function(evt){evt就是事件對象}

addEventListener(類型,function(evt){}/函數名字);

function 函數名稱(evt){}

事件處理函數的第一個形參就是事件對象

② IE(6/7/8)瀏覽器

node.onclick = function(){window.event事件對象}

全局變量event就是事件對象

兼容：var evnt = evt ? evt : window.event；

事件對象做用：

①鼠標座標的獲取：

event.clientX/clientY;    //相對dom區域座標

event.pageX/pageY;        //相對dom區域座標，給考慮滾動條位置

event.screenX/screenY;    //相對屏幕座標

②阻止事件流：

event.stopPropagation();  //主流瀏覽器

event.cancelBubble = true; // IE瀏覽器

冒泡型、捕捉型均可以進行阻止,爲了瀏覽器兼容處理，只考慮冒泡型。

感知被觸發鍵盤鍵子信息：

event.keyCode  得到鍵盤對應的鍵值碼信息

經過事件觸發時候得到的keyCode數值碼信息能夠對應鍵盤的鍵子信息。

2、Jquery

定義：

 

Jquery 是一個 JavaScript 庫。

 

Jquery 極大地簡化了 JavaScript 編程。

Js與Jquery在Dom操做中的區別：

①找元素，操做元素

js    document.getElementById ()                         jquery  $(選擇器)

　   document.getElementsByName ()

　　document.getElementsByTagName ()

　　document.getElementsByClassName ()

對象：jsobj                                                                對象： jqobj

 

②操做內容

js     非表單元素  jsobj.innerHTML（獲取）   jsobj.innerHTML = 123（更改）

　　 表單元素     jsobj.Value  （獲取）          jsobj.Value = 123（更改）     

jquery  非表單：Jqobj.html(獲取)        Jqobj.html(「123」)   （更改）

　　  表單：jqobj.val  (獲取)         jqobj.val(「123」)      （更改）

 

③操做屬性

js  jsobj.getAttribute(「class」);

     jsobj.setAttribute(:class」,」add」)

jquery  jqobj.Attr(「class」,」add」);一個參數是獲取，兩個參數是設置

            jqobj.Attr({‘class’:’add’,’id’:’id’})

用json格式數據

清除   jqobj.removeAttr()

          jqobj.addClass(「add」);

 

④操做樣式

Js   jsobj.style.color=」red」

jquery  jsobj.css()

 

⑤操做事件

Js jsobj.onclick=fuction(){}

Jquery jqobj.click(fuction(){})

 

⑥頁面加載完成

Js   window.onload = function(){

 

}

Jquery  

方式1：$(document).ready(function(){

 

})

方式2：$(function(){

 

})

實例：

簡單計算器：

<p>簡單計算器</p>
<!--輸入框-->
請輸入第一個數：<input class="num1" type="text"><br>
請輸入第二個數：<input class="num2" type="text"><br>
<!--複選框-->
      請選擇符號：<select name="" id="aaa">
                    <option class="add" value="+">+</option>
                    <option class="add" value="—">-</option>
                    <option class="add" value="*">*</option>
                    <option class="add" value="/">/</option>
                </select><br>
<!--提交按鈕-->
            <button>計算</button>
<!--結果-->
         結果爲：<input class="num3" type="text"><br>

var n =0;
$(function(){
    $("button").click(function(){
        var n = eval($(".num1").val()+$("#aaa").val()+$(".num2").val());
        $(".num3").val(n);
    })
})