前端（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 ...
随机推荐
- 算法系列：Shell 排序
Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...
- mysql 多表join
两个表可以简单地写为 select a.,b. from a left join b on a.id =b.id; 三个以上 select a.,b. from a left join b on a. ...
- ThinkPHP可以支持直接使用字符串作为查询条件
ThinkPHP可以支持直接使用字符串作为查询条件,但是大多数情况推荐使用数组或者对象来作为查询条件,因为会更加安全. 大理石平台哪家好 一.使用字符串作为查询条件 这是最传统的方式,但是安全性不高, ...
- ValueError: Variable conv1/weights already exists.
跑TensorFlow程序的过程中出现了错误,解决之后再次跑时,报如下错误: ValueError: Variable conv1/weights already exists, 原因: 这是因为我在 ...
- Leetcode937. Reorder Log Files重新排列日志文件
你有一个日志数组 logs.每条日志都是以空格分隔的字串. 对于每条日志,其第一个字为字母数字标识符.然后,要么: 标识符后面的每个字将仅由小写字母组成,或: 标识符后面的每个字将仅由数字组成. 我们 ...
- Spring整合JUnit单元测试
必须先有JUnit的环境(已经导入了Junit4的开发环境) 1.导入jar包 2.在测试类上添加注解 @RunWith(SpringJUnit4ClassRunner.class) @Context ...
- sql join 的一次小使用
表为: 列名:站号,模式名,偏差,日期,要素 试图查询每个站中最小的那个偏差的模式名 create table B as SELECT stationid,min(abserror) as minab ...
- git 命令行（一）-版本回退
1. 版本回退 在实际工作中,我们脑子里怎么可能记得一个几千行的文件每次都改了什么内容,不然要版本控制系统干什么.版本控制系统肯定有某个命令可以告诉我们历史记录,在Git中,我们用 git log 命 ...
- hihocoder 1084 (哈希)
题目链接 时间限制:4000ms 单点时限:4000ms 内存限制:256MB 描述 你知道KMP吗?它是用于判断一个字符串是否是另一个字符串的子串的算法.今天我们想去扩展它. 在信息理论中,在两个相 ...
- JSON操作总结（转自陈新汉）
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...