事件流和初识Jquery

一、事件流

定义：

多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”。

事件对象获取：

获得：

①主流浏览器(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数值码信息可以对应键盘的键子信息。

二、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);
    })
})