事件流和初识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 ...
随机推荐
- DOM-BOM-EVENT(6)
6.BOM 6.1.什么是BOM? BOM(Browse Object Model),浏览器对象模型,没有相关标准,是约定俗成的东西,定义了一些操作浏览器的方法和属性,大部分方法都是通过window对 ...
- 【kubeadm初始化报错】failed to run Kubelet: misconfiguration: kubelet cgroup driver: "cgroupfs" is different from docker cgroup driver: "systemd"
复现场景 环境 系统:Centos7 kubernetes:1.18.5 docker:19.03.9 复现步骤 1.通过 yum 或 rpm 安装 kubelet kubectl kubeadm,并 ...
- JQuery 优缺点略谈
1.jQuery实现脚本与页面的分离 ; 2.最少的代码做最多的事情; 3.性能; 在大型JavaScript框架中,jQuery对性能的理解最好.尽管不同版本拥有众多新功能,其最精简版本只有18KB ...
- Spring Boot2.x 的Druid连接池配置[附带监控]
父依赖[Spring Boot 2.1.x版本] <parent> <groupId>org.springframework.boot</groupId> < ...
- 分享一个与jQuery相关的TypeError: $ is not a function问题解决过程
最近碰到一个比较奇葩的问题,估计很多人也遇到过,就是jQuery可能会遇到的‘$ is not a function’,不过我碰到的这个问题比较怪异,解决该问题也颇费了一番周折,现在给大家分享一下. ...
- SpringCloud之OpenFeign
SpringCloud之openFeign Spring Cloud的子项目之一,Spring Cloud OpenFeign以将OpenFeign集成到Spring Boot应用中的方式,为微服务架 ...
- 5000+字硬核干货!Redis 分布式集群部署实战
原理: Redis集群采用一致性哈希槽的方式将集群中每个主节点都分配一定的哈希槽,对写入的数据进行哈希后分配到某个主节点进行存储. 集群使用公式(CRC16 key)& 16384计算键key ...
- sun.reflect.generics.reflectiveObjects.TypeVariableImpl cannot be cast to java.lang.Class
1.首先,问题出现的点是在泛型 我出现问题的原因是,和泛型有关系,要调整泛型 2.我把问题出现的过程描述一哈子 1.基础类 @tk.mybatis.mapper.annotation.Register ...
- 洛谷P3237 [HNOI2014]米特运输
题目描述 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储 存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个 ...
- 使用IDEA创建Spring boot项目,继承mybaits。并进行简单的数据库查询操作
本文讲的是使用IEDA创建Spring boot项目,对于环境安装需要自行准备,如JDK1.8.Maven 3.3.IDEA编译器.Mysql5.7等需事前准备好. 1.创建Spring boot项目 ...