前端（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 ...
随机推荐
- 几道关于this的经典练习题的理解与分析
1. var num = 1; var myObject = { num: 2, add: function() { this.num = 3; (function() { console.log(t ...
- Echart使用过的属性总结
改变坐标轴颜色与粗细: axisLine: { lineStyle: {//设置轴的颜色 color: '#CD0000', width: 1,//轴的宽度 } } 改变坐标轴上刻度的间隔与倾斜方向: ...
- Python全栈开发：Mysql(二)
视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT *FROM (SELEC ...
- Ionic3 demo TallyBook 实例3
1.准备应用相关组件 echarts--直接 npm install 安装即可 2.home.ts import { Component,ViewChild,ElementRef } from '@a ...
- LUOGU P4777 【模板】扩展中国剩余定理（EXCRT）
传送门 解题思路 扩展 $crt$,就是中国剩余定理在模数不互质的情况下,首先对于方程 $\begin{cases} x\equiv a_1\mod m_1\\x\equiv a_2\m ...
- springboot与任务（邮件任务）
邮件发送需要引入spring-boot-starter-mail Spring Boot 自动配置MailSenderAutoConfiguration 定义MailProperties内容,配置在a ...
- LintCode_1 单例模式
从今天开始我的LintCode之旅,由于C/C++好久没有使用了,语法生疏不说,低级错误频繁出现,因此在做题之后,还会有部分时间复习语法项目. ---------------------------- ...
- Lint found fatal errors while assembling a release target问题的解决方案
此问题发生在编译为 release 版本时,出现错误提示如下: Lint found fatal errors while assembling a release target. To procee ...
- 关于obj文件的理解
编译器先编译.cpp为obj文件,看看文件内有没有冲突,然后再进行链接,链接头文件引入的lib库等等,然后就生成exe文件了,下面这个图说的很好:
- C#（.net）中的DllImport
大家在实际工作学习C#的时候,可能会问:为什么我们要为一些已经存在的功能(比如Windows中的一些功能,C++中已经编写好的一些方法)要重新编写代码,C#有没有方法可以直接都用这些原本已经存在的功能 ...