事件流和初识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);
})
})
事件流和初识Jquery的更多相关文章
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
- 事件流,事件对象和jQuery
事件流 多个彼此嵌套元素,他们拥有相同的事件,最内部元素事件被触发后,外边多个元素的同类型事件也会被触发,多个元素他们同类型事件同时执行的效果称为“事件流” 例子:html代码: <div cl ...
- jQuery事件传播,事件流
一. jQuery事件传播 在DOM2级事件模型中,一旦事件被触发.事件流首先从DOM树顶部(文档节点)向下传播.直到目标节点.然后再从目标节点向上传播到DOM树顶.从上到下的过程被称为捕获阶段.从下 ...
- jQuery 事件流的概念
jQuery 事件流的概念 什么是事件流 DOM事件流 1. 事件捕获阶段; 2.处于目标阶段; 3.事件冒泡阶段; <!DOCTYPE html> <html lang=&quo ...
- jQuery系列(九):JS的事件流的概念
1.事件概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在 ...
- jQuery事件流的顺序
<div id="aaron"> <div id='test'> <ul> <p>点击p被委托,ul被阻止了,因为内部重写了事件对象 ...
- 前端jQuery之事件流
1.事件流概念 描述的是从页面中接收事件的顺序 包含事件捕获阶段,处于目标阶段,事件冒泡阶段 2.绑定事件 语法 bind(type,data,fn) 示例:每个标签被点击的时候,弹出其文本 $(&q ...
- python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑
一.昨日内容回顾 1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...
随机推荐
- sorted 函数及小练习
python 中sorted函数 sorted() 函数对所有可迭代的对象进行排序操作. sorted 语法: sorted(iterable[, cmp[, key[, reverse]]]) 参数 ...
- 七月份开发语言排行榜,Java依然霸榜
- Java桌面应用程序打包
IDEA环境生成Jar 设置配置 File -> Project Structure -> Artifacts -> + -> JAR -> From modules w ...
- HDU 5963 朋友 题解
题目 B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根.接下来从女生开始,双 ...
- 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 ...
- 洛谷P3237 米特运输
题目链接 题意: 中文题,挺好理解.就是让节点的权值等于各子节点权值之和,然后每个子节点的权值相等,原本每个点有一个权值,通过最少次的修改(可以修改成小数)使其满足要求. 分析: 题意一旦读明白,题什 ...
- [JAVA]《JAVA开发手册》规约详解
[强制] 使用 Map 的方法 keySet()/values()/entrySet()返回集合对象时,不可以对其进行添加元素操作,否则会抛出 UnsupportedOperationExceptio ...
- P2295 MICE 网格中的DP
题目描述 分析 很好的一道网格中的\(DP\)题 我们设\(f[x][y]\)为小象到达坐标为\((x,y)\)的点时看到的最少的老鼠的数量 但是这样定义是不好转移的,因为小象可能从上面的格子转移下来 ...
- day16 本日作业+周末作业
目录 1.编写计数器功能,要求调用一次在原有的基础上加1 2.周末作业 1.编写计数器功能,要求调用一次在原有的基础上加1 def func(): x=0 def counter(): nonloca ...
- kubernetes系列(十四) - 存储之PersistentVolume
1. PersistentVolume(PV)简介 1.1 为什么需要Persistent Volume(PV) 1.2 PersistentVolume(PV)和Volume的区别 1.3 PV和P ...