jQuery选择器和事件
Posted nnnlillian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery选择器和事件相关的知识，希望对你有一定的参考价值。
jQuery选择器
其实官网中已经有很完全和很好的解释了--jQuery选择器
以下是一些常用选择器总结
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6 <!--引入jQuery-->
7 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
8</head>
9<body>
10 <p id="pId">one</p>
11 <p class="pClass">two</p>
12 <button>click me</button>
13</body>
14 <script>
15 // 确定文档加载完全
16 $("document").ready(function () {
17 $("button").click(function () {
18 // 元素选择器
19 $("p").text("p元素被修改");
20 // id选择器
21 $("#pId").text("id=pId的元素被修改")
22 // 类选择器
23 $(".pClass").text("class=pClass的元素被修改")
24 })
25 })
26 </script>
27</html>
jQuery事件
- 常用事件方法：参考--jQuery事件
例如：1$("button").click(function (){}); // 单击事件
2$("button").dblclick(function (){}); // 双击事件
- 绑定事件和解绑事件
传统使用：
1 $("document").ready(function () {
2 $("button").click(function (){
3 alert("clicked me")
4 }); // 当事件非常多、文档很大、要书写的代码过于庞大时，这种方式非常消耗内存。所以选用jQuery提供的绑定和解除绑定的方式来做监听事件
5 });使用绑定和解除绑定的方式来做监听事件
1$("document").ready(function () {
2 $("button").bind("click", clickHandel); // 添加绑定，解除绑定就是unbind。
3 });
4 function clickHandel(e) {
5 alert("bind")
6 }在jQuery 1.7之后，可以用on/off代替bind/unbind
- 事件的目标和事件的冒泡
DOM事件三个阶段
当一个DOM事件被触发时，它不仅仅只是单纯地在本身对象上触发一次，而是会经历三个不同的阶段：- 捕获阶段：先由文档的根节点document往事件触发对象，从外向内捕获事件对象；
- 目标阶段：到达目标事件位置（事发地），触发事件；
- 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。
产生现象
多个元素相应一个事件.例如网页上有两个元素,其中一个元素嵌套在另一个元素中,并且2着都绑定了click事件,同时body也绑定了click事件,当点击里层元素,也会触发外层元素的点击事件
阻止事件冒泡
(1). 事件对象：为函数添加一个参数,这个事件的独有事件对象就创建了,当事件处理函数执行完毕,事件对象就被销毁
(2). 停止事件冒泡：使用事件对象调用stopPropagation()函数
(3). 博文参考-- jQuery事件---阻止冒泡和默认行为
- 自定义事件
参考博文--JQuery 自定义事件
以上是关于jQuery选择器和事件的主要内容，如果未能解决你的问题，请参考以下文章