前端（jQuery）（2）-- JQuery选择器和事件
1、选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("p元素被修改了");
$("#p2").text("id为p2的元素被修改了。")
});
});
</script>
</head>
<body>
<p>p1</p>
<p id="p2">p2</p>
<button id="btn">按钮</button>
</body>
</html>
需要什么工具直接查找API就可以了。
2、事件常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(this).hide();/*单击隐藏*/
});
$("#btn2").dblclick(function(){
$(this).hide();/*双击隐藏*/
});
$("#btn3").mouseleave(function(){
$(this).hide();/*当鼠标移动到按钮上的时候*/
});
$("#btn4").mousedown(function(){
$(this).hide();/*当鼠标按下去，click是点击完*/
});
$("#btn5").mouseout(function(){
$(this).hide();/*当鼠标从上面离开*/
});
$("#btn6").mouseover(function(){
$(this).hide();/*当鼠标在上面*/
});
});
</script>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
</body>
</html>
3、事件绑定、解除绑定事件
3.1、jQuery事件：
常用事件方法
绑定事件
解除绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
/*$("#clickMeBtn").click(function(){
alert("hello");/!*这种方法在方法特别多，文档特别大的时候是非常耗时的*!/
});*/
$("#clickMeBtn").on("click",clickHandler1);
$("#clickMeBtn").bind("click",clickHandler2);
// $("#clickMeBtn").unbind("click");/*全部解除*/
$("#clickMeBtn").unbind("click",clickHandler2);/*解除一个事件*/
/*
* on和off添加和解除事件是一样的（不过on和bind必须在jQuery1.7之后才可以使用）
* 官方推荐使用on和off
* */
});
function clickHandler1(){
console.log("clickHandler1");
}
function clickHandler2(){
console.log("clickHandler2");
}
</script>
</head>
<body>
<button id="clickMeBtn">按钮</button>
</body>
</html>
4、事件目标与冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("body").on("click",bodyHandler);
$("div").on("click",divHandler1);
$("div").on("click",divHandler2);
/*$("li").on("click",liHandler);*/
});
function bodyHandler(event){
console.log(event);
}
function divHandler1(event){
console.log(event);
/*stopImmediatePropagation()阻止当前事件的所有后续冒泡行为，所以后面的divHandler2不会执行*/
//event.stopImmediatePropagation();
/*stopPropagation()仅阻止当前事件的父事件的执行，不会阻止自己的后续动作，所以divHandler2还会执行*/
event.stopPropagation();
}
function divHandler2(event){
console.log(event);
}
// function liHandler(event){
// console.log(event);
// // event.stopPropagation();
// // event.stopImmediatePropagation();
// }/*冒泡只会往上冒一次，不会无限制的网上冒泡。*/
</script>
</head>
<body>
<div style="width:300px; height:300px; background-color: aqua;">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</body>
</html>
这里可以将console.log(event)封装在一个函数之中，便于以后调试程序信息出错;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("body").on("click",bodyHandler);
$("div").on("click",divHandler1);
$("div").on("click",divHandler2);
/*$("li").on("click",liHandler);*/
});
function bodyHandler(event){
conlog(event);
}
function divHandler1(event){
conlog(event);
event.stopPropagation();
}
function divHandler2(event){
conlog(event);
}
function conlog(event){
console.log(event);
}
</script>
</head>
<body>
<div style="width:300px; height:300px; background-color: aqua;">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
</body>
</html>
5、自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
var ClickMeBtn;
$(document).ready(function(){
ClickMeBtn = $("#btn");
ClickMeBtn.click(function(){
var e = jQuery.Event("MyEvent");/*设置自定义事件的原因就是为了编写人员
在触发某一事件时能够更加直观地知道是什么事件被触发了。*/
ClickMeBtn.trigger(e);/*意思是以代码方式触发ClickMeBtn的e事件*/
});
ClickMeBtn.on("MyEvent",function(event){
console.log(event);
});
});
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
前端（jQuery）（2）-- JQuery选择器和事件的更多相关文章
- webform（九）——JQuery基础（选择器、事件、DOM操作）
JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
- Webform——JQuery基础（选择器、事件、DOM操作）
一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选择:用空格隔开 代码用法展示: ...
- JQuery基础（选择器、事件、DOM操作）
一.选择器 1.基本选择器 ①id选择器 ②class选择器 ③标签名选择 ④并列选择 ⑤后代选择 代码用法展示: <title></tit ...
- JQuery（选择器、事件、DOM操作）
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
- 前端笔记之jQuery（上）加载函数的区别&对象&操作HTML/CSS&动画&选择器
一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...
- jQuery 学习01——定义、安装引用、语法、选择器及事件
什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HT ...
- JQuery 基本知识，选择器，事件，DOM操作
一.基本知识 Jquery是什么? 它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库.它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的AP ...
- jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性
使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...
随机推荐
- Nand Flash 控制器中的硬件 ECC 介绍
ECC 产生方法 ECC 是用于对存储器之间传送数据正确进行校验的一种算法,分硬件 ECC 和软件 ECC 算法两种,在 S3C2410 的 Nand Flash 控制器中实现了由硬件电路(ECC 生 ...
- Invalid prop: type check failed for prop "maxlength". Expected Number, got String.
1.项目中,使用element-ui的input表单的maxlength属性报错 2.使用场景: <el-input v-model="fname" maxle ...
- 思维构造，建图——cf1159E
很好的题 /* nexti:pi右边第一个比pi大的数的下标 把每个[i,a[i]]都看成一段区间,区间只能在端点处交叉,以此来判断是否有解 特别的,如果a[i]=-1,那么把a[i]=i+1,不对其 ...
- zabbix--------配置邮件报警功能---服务器上配置---------
--------配置邮件报警功能---服务器上配置--------- [www.aa.com@ ~]# yum install mailx -y [www.aa.com@ ~]# vi /etc/ma ...
- Linux网桥端口的arp问题
Linux的brctl addif命令可以将一个接口加入到既有的网桥中,接下来,这个接口就成了brport,属于一个从属的接口,然而你还是可以看到它的,并且可以为它添加IP地址,然后route命令会显 ...
- 《DSP using MATLAB》Problem 8.13
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- EF中的DbContext类
使用先前的数据上下文,可以通过使用LINQ查询,按字母顺序检索出所有专辑,代码如下
- 提示microsoft incremental linker已停止工作解决方法
解决方案一:项目->属性->链接器->常规 下面的“启用增量链接”,将“是(/INCREMENTAL)”改为“否(/INCREMENTAL:NO)”.不过这又引入了另外一个警 告:F ...
- sprignboot 中thymeleaf和freemarker 都存在时，默认选择哪个
我们 无聊的时候想到,freemarker和thymeleaf都是springboot默认支持的模板,当这2个同时存在并有相同名字的时候,springboot会默认选择哪个模板来显示呢 ? 所以今天我 ...
- STL与泛型编程-第一周笔记-Geekband
1, 模板观念与函数模板 简单模板: template< typename T > T Function( T a, T b) {- } 类模板: template struct Obje ...