事件流,事件对象和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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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)