jQuery 自学笔记

Posted 2022-02-03 Xiu Yan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 自学笔记相关的知识，希望对你有一定的参考价值。

文章目录

一、on 统一所有的注册事件

jQuery1.7之后，jQuery用on统一了所有事件的注册方式。

1.1 on 简单注册

不支持动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div 
            width: 200px;
            height: 200px;
            margin-top: 10px;
        
        .one  
            border: 1px solid red;
        
        .two 
            border: 1px solid green;
        
    </style>
</head>
<body>
<input type="button" value="按钮" id="btn"/> <br/><br/>
<div class="one" id="one"></div>
</body>
</html>
<script src="jquery-3.4.1.min.js"></script>
<script>
    $(function () 
        $('#btn').click(function () 
            let $divNew = $('<div class="two"></div>');
            $('body').append($divNew);
        );
        //on简单注册事件.
        $('div').on('click', function () 
			alert("我是单击事件...");
        );
    )
</script>

效果如下：

效果显示，用 on 进行简单的事件注册，原给 div 的注册点击事件，在新创建的 div 中该事件不起作用，即不支持动态注册。

on 的简单注册，可实现同时注册，代码如下：

$('#one').on(
	'click':function () 
		console.log('单击事件');
	,
	'mouseenter':function () 
		console.log('鼠标移入事件');
	
)

效果如下：

1.2 on 委托注册

支持动态注册
语法： $(父元素选择器).on(事件名称, 选择器, 函数)

第一个参数：事件名称，绑定事件的名称可以是由空格分开的多个事件（标准事件或者自定义事件）
第二个参数：选择器，执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
（忽略）第三个参数: data，传递给处理函数的数据，事件触发的时候通过event.data来使用，不常使用。
第四个参数：事件处理函数

示例 1：

$('body').on('click','div', function () 
	alert("单击事件.");
);

效果如下：

从效果可以看出，通过 on 委托注册，可以动态注册。
委托事件的原理：点击选择器会触发所有父元素的点击事件，即“委托”父元素注册事件。

示例 2：

$('body').on('click','div,span', function () 
	alert("单击事件.");
);

效果如下：

示例 3：同时注册

$('body').on('click mouseenter','div', function () 
	console.log("事件");
);

效果如下：

二、事件解绑

jQuery 用 on 来注册事件，用 off 来解绑事件。

off() 不给参数就是解绑所有的事件

off(‘click’) 解绑指定的事件

$('#btn2').on('click',function () 
	$('#one').off(); //解绑所有的事件
	$('#one').off('click'); //解绑单机事件
)

三、触发事件 trigger

代码的方式来触发

// div 注册一个单击事件
$('#one').on('click',function () 
	console.log('单击事件');
)

//给按钮注册事件
var i = 0;
$('#btn1').on('click',function () 
	i++;
	if(i==3)
		//条件满足，触发div的单击事件
		//事件触发，感觉使用代码的方式来触发事件
		// $('#one').click(); //第一种方式
		$('#one').trigger('click'); //第二种方式
	
);

可以触发自定义事件

//给 div 注册一个自定义事件
$('#one').on('zidingyi',function() 
	console.log('我是自定义事件');
)

//定义触发事件
$('#btn2').on('click',function () 
	var res = confirm('调用自定义事件么？');
	if(res)
		//触发自定义事件
		$('#one').trigger('zidingyi');
	
)

四、事件对象

什么是事件对象
注册一个事件，系统就会帮我们生成一个对象记录这个事件触发时候的一些信息，比如：触发事件的时候有没有按住某个键，再比如触发这个事件的时候的一些坐标信息等。
jQuery中用事件参数e来获取
jQuery的事件对象是对原生 js 事件对象的一个封装，已经处理好了兼容性。
$("#one").on('click', function (e) console.log(e););

事件对象有常用的三个坐标
(screenX, screenY)、(clientX, clientY)、(pageX, pageY)

console.log("screenX: "+e.screenX+":"+e.screenY);//触发事件那一点距离屏幕最左上角的值
console.log("clientX: "+e.clientX+":"+e.clientY);//触发事件那一点距离可视区左上角的值
console.log("pageX: "+e.pageX+":"+e.pageY);//触发事件那一点距离页面左上角的值

阻止事件冒泡
事件冒泡的意思是，当初发当前元素的事件时，会连带着触发父元素（父辈的元素）的单击事件。如：

...
<body>
  <div id="one" class="one">
    <input type="button" value="我是按钮" id="btn"/>
  </div>
</body>
<script>
  $(function () 
    $("#one").on('click', function (e) 
      alert('我是div的单击事件');
    )
    //给按钮注册一个单击事件a
    $('#btn').on('click',function (e) 
      alert('我是按钮的单击事件');
    )
  );
</script>

效果图如下：

结果显示，当触发按钮的单击事件时，按钮的父元素 div 的单击事件也会触发。当按钮的单击事件的函数加上 e.stopPropagation();，则会阻止事件冒泡。代码如下：

$('#btn').on('click',function (e) 
	alert('我是按钮的单击事件');
	e.stopPropagation();//阻止事件冒泡
)

阻止默认行为
a 超链接标签的跳转是默认行为，通过事件对象可阻止默认行为。

$('a').on('click',function (e) 
  alert('我是a标签的单击事件');
  //第一种方式
  e.stopPropagation();//阻止事件冒泡
  e.preventDefault();//阻止默认行为-阻止a标签的跳转
  //第二种方式
  //return false;//即能阻止事件冒泡又能阻止默认行为
)

给页面注册键盘按下事件

$(document).on('keydown',function (e) 
	//e.keyCode能获取按的那个键
	console.log(e.keyCode);//返回 ascall 值
)

五、链式编程

什么时候可以链式编程？
如果给元素调用一个方法，这个方法有返回值，并且返回的是一个 jQuery 对象，那就可以继续再点出 jQuery 方法，如：
$('div').width(100).height(100).css('backgroundColor','red');
必须是 jQuery 对象才能点出 jQuery 方法
console.log($('div').width(100).width()); //100
$('div').width(100).width().height(100); //报错了,因为数值不能点出jQuery方法
end() 返回上一状态（选择器）
$('#one').width(200).children().end().height(200) 等同于 $('#one').width(200).height(200)
注意：end() 方法也是 jQuery 方法，其也需要一个 jQuery 对象才能点出。如：
// width() 方法返回的是一个数值，数值不能点出end()方法。
$('div').width(100).width().end().height(100); //报错

六、显示迭代与隐式迭代

给每一个对象设置不同的值的时候（或不同处理）使用显示迭代。
作用：遍历 jQuery 对象集合，为每个匹配的元素执行不同函数。

$(选择器).each(function(索引，当前元素))

注意：返回 false 可用于及早停止循环。

$('#list').each(function (index,element) 
	console.log(index); //每一个li标签的索引
	console.log(element);//每一个li标签,是一个dom对象.
);

给每一个对象设置相同的值的时候（或相同处理）使用隐式迭代。
如：$('li').css('border', '1px solid red')

以上是关于jQuery 自学笔记的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 自学笔记

jQuery:自学笔记——Ajax

jQuery 自学笔记