事件流，事件对象和jQuery

Posted 2020-11-21 lzw123-

事件流

　　多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”

例子：
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>

View Code

 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)