一、事件流

定义:

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

事件对象获取:

获得:

①主流浏览器(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);
})
})

事件流和初识Jquery的更多相关文章

  1. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  3. 事件流,事件对象和jQuery

    事件流 多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流” 例子:html代码: <div cl ...

  4. jQuery事件传播,事件流

    一. jQuery事件传播 在DOM2级事件模型中,一旦事件被触发.事件流首先从DOM树顶部(文档节点)向下传播.直到目标节点.然后再从目标节点向上传播到DOM树顶.从上到下的过程被称为捕获阶段.从下 ...

  5. jQuery 事件流的概念

    jQuery  事件流的概念 什么是事件流 DOM事件流 1. 事件捕获阶段; 2.处于目标阶段; 3.事件冒泡阶段; <!DOCTYPE html> <html lang=&quo ...

  6. jQuery系列(九):JS的事件流的概念

    1.事件概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在 ...

  7. jQuery事件流的顺序

    <div id="aaron"> <div id='test'> <ul> <p>点击p被委托,ul被阻止了,因为内部重写了事件对象 ...

  8. 前端jQuery之事件流

    1.事件流概念 描述的是从页面中接收事件的顺序 包含事件捕获阶段,处于目标阶段,事件冒泡阶段 2.绑定事件 语法 bind(type,data,fn) 示例:每个标签被点击的时候,弹出其文本 $(&q ...

  9. python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

随机推荐

  1. sorted 函数及小练习

    python 中sorted函数 sorted() 函数对所有可迭代的对象进行排序操作. sorted 语法: sorted(iterable[, cmp[, key[, reverse]]]) 参数 ...

  2. 七月份开发语言排行榜,Java依然霸榜

  3. Java桌面应用程序打包

    IDEA环境生成Jar 设置配置 File -> Project Structure -> Artifacts -> + -> JAR -> From modules w ...

  4. HDU 5963 朋友 题解

    题目 B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根.接下来从女生开始,双 ...

  5. POJ3263 Tallest Cow 差分

    题目描述 FJ's N (1 ≤ N ≤ 10,000) cows conveniently indexed 1..N are standing in a line. Each cow has a p ...

  6. 洛谷P3237 米特运输

    题目链接 题意: 中文题,挺好理解.就是让节点的权值等于各子节点权值之和,然后每个子节点的权值相等,原本每个点有一个权值,通过最少次的修改(可以修改成小数)使其满足要求. 分析: 题意一旦读明白,题什 ...

  7. [JAVA]《JAVA开发手册》规约详解

    [强制] 使用 Map 的方法 keySet()/values()/entrySet()返回集合对象时,不可以对其进行添加元素操作,否则会抛出 UnsupportedOperationExceptio ...

  8. P2295 MICE 网格中的DP

    题目描述 分析 很好的一道网格中的\(DP\)题 我们设\(f[x][y]\)为小象到达坐标为\((x,y)\)的点时看到的最少的老鼠的数量 但是这样定义是不好转移的,因为小象可能从上面的格子转移下来 ...

  9. day16 本日作业+周末作业

    目录 1.编写计数器功能,要求调用一次在原有的基础上加1 2.周末作业 1.编写计数器功能,要求调用一次在原有的基础上加1 def func(): x=0 def counter(): nonloca ...

  10. kubernetes系列(十四) - 存储之PersistentVolume

    1. PersistentVolume(PV)简介 1.1 为什么需要Persistent Volume(PV) 1.2 PersistentVolume(PV)和Volume的区别 1.3 PV和P ...