事件流，事件对象和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代码：

 <div style="width: 100px;height: 100px; background: red;">123</div>

jQ代码：

 var jqdd = $('div').eq(0);//获取div并定义变量

 //定时器

 setTimeout(function(){

     //慢慢隐藏

     jqdd.hide('slow',function(){

         //慢慢显示

         jqdd.show('slow');

     });

 },1000);

 var jqdd = $('div').eq(0);

 setTimeout(function(){

     jqdd.hide('slow',function(){

         jqdd.show('slow');

     });

 },1000)

巴特西

事件流，事件对象和jQuery

事件对象

最新文章

热门文章