事件流
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”
例子：
html代码：
<div class="one"><div class="two"><div class="three"></div></div></div>
css样式代码：
.one{width: 200px;height: 200px;background: red; }.two{width: 100px;height: 100px;background:blue; }.three{width: 50px;height: 50px;background:green; }js代码：
//找元素
var one = document.getElementsByClassName(‘one‘)[0];var two = document.getElementsByClassName(‘two‘)[0];var three = document.getElementsByClassName(‘three‘)[0];
//添加事件
one.onclick = function(evt){
console.log(‘one‘);
}
two.onclick = function(evt){
console.log(‘two‘);
}
three.onclick = function(evt){
console.log(‘three‘);
}
结果就是： 当点击two或three的class的div时，也会将最底下的one层内容显示
事件对象
事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被 触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。
例子：
html代码：
<input type="text" id="txt" ><button onClick="denglu()">登录</button>
js代码：
var input1 = document.getElementById(‘txt‘);
//键盘键按下去时触发事件input1.onkeydown = function(evt){var code = evt.keyCode;
//键入回车键时if(code == 13){denglu();}}/*方法*/function denglu(){alert(‘登录成功‘);}
阻止事件流：
evt.stopPropagation();
event.keyCode 获得键盘对应的键值码信息
jQuery
必须引入jQuery的js文件
页面加载完成
js
?window.onload = function(){}jquery
//方式一 ???$(document).ready(function(){ ???????????})// 方式二 ???$(function(){ ???????????})
js和jquery 找元素操作元素
1.找元素
?js ?document.getElementById(); ???????document.getElementsByTagName();... ???jquery ????????$(‘选择器‘) ;
//例如
$("img")//提取img标签的元素
$("#aa")//提取id为aa的元素
$(".bb")//提取class为bb的元素
/*自定义*/
$(this)//提取当前html的元素
$("p:first")//选取第一个 <p> 元素
$("[href]")//选取带有 href 属性的元素
js对象 jsObj jquery对象 jqObj
2.操作内容
没有等号是获取，一个等号是赋值
js
// 非表单元素 ?
jsObj.innerHTML ??jsObj.innerHTML= 123;
??// 表单元素 ???jsObj.value ??= 123;
jquery
?//非表单元素 jqObj.html() ?? ?jqObj.html(‘123‘)
?// 表单元素 ???jqObj.val() ????jqObj.val("123") 3.操作属性
js
jsObj.getAttribute(属性名称);//提取属性值jsObj.setAttribute(名称，值);//添加属性jsObj.removeAttribute(属性名称);//删除属性
例如：
?jsObj.getAttribute("class"); ??jsObj.setAttribute("class","add") ??jsObj.removeAttribute("class");
jquery
jqObj.attr(‘class‘,‘add‘);//一个参数是获取 两个参数是设置 jqObj.attr({‘class‘:‘add‘,‘id‘:‘id‘});//同时设置多个属性用json格式数据 ?jqObj.removeAttr()//删除属性 ?jqObj.addClass(‘add‘);//添加一个classs属性，值为add
4.操作样式
js
???????jsObj.style.color = "red";//只能操作行内样式
jquery
??jqObj.css();
例如：
$("p").css("background-color");//提取样式属性 $("p").css("background-color","yellow");//添加样式$("p").css({"background-color":"yellow","font-size":"200%"});添加多个样式
5.操作事件
js
????jsObj.onclick = function(){} jquery
?jqObj.click(function(){});
添加删除元素
//添加元素 ??
jqObj.html(‘<button></button>‘);
show（）
例子：
基本显示隐藏
html代码：
1 <div style="width: 100px;height: 100px; background: red;">123</div>
jQ代码：
1 var jqdd = $(‘div‘).eq(0);//获取div并定义变量2 //定时器3 setTimeout(function(){4 ????//慢慢隐藏5 ????jqdd.hide(‘slow‘,function(){6 ????????//慢慢显示7 ????????jqdd.show(‘slow‘);8 ????});9 },1000);1 var jqdd = $(‘div‘).eq(0);2 setTimeout(function(){3 ????jqdd.hide(‘slow‘,function(){4 ????????jqdd.show(‘slow‘);5 ????});6 },1000)事件流，事件对象和jQuery
原文地址：https://www.cnblogs.com/lzw123-/p/9251184.html