事件流，事件对象和jQuery
事件流
多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”
例子：
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)
