前端（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 ...
随机推荐
- Luogu P1039 侦探推理(模拟+枚举)
P1039 侦探推理 题意 题目描述 明明同学最近迷上了侦探漫画<柯南>并沉醉于推理游戏之中,于是他召集了一群同学玩推理游戏.游戏的内容是这样的,明明的同学们先商量好由其中的一个人充当罪犯 ...
- Georgia and Bob
Georgia and Bob 给出一个严格递增的正整数数列\(\{a_i\}\),每一次操作可以对于其中任意一个数减去一个正整数,但仍然要保证数列的严格递增性,现在两名玩家轮流操作,不能操作的玩家判 ...
- 廖雪峰Java15JDBC编程-2SQL入门-2insert/select/update/delete
1. INSERT用于向数据库的表中插入1条记录 insert into 表名 (字段1,字段2,...) values (数据1,数据2,数据3...) 示例 -- 如果表存在,就删除 drop t ...
- DataV教你如何给可视化应用一键美颜
视频观看地址:https://yunqivedio.alicdn.com/user-upload/T4WEb4C5Fc.mp4 如果你平时经常接触数据统计.数据展示和决策分析,相信你对DataV一定有 ...
- 莫烦PyTorch学习笔记(五)——分类
import torch from torch.autograd import Variable import torch.nn.functional as F import matplotlib.p ...
- jeecms v9库内新增对象的流程及其他技巧
cms 开发 ———— 库内新增对象 Products 的流程说明及其他技巧 第一步:Entity com.jeecms.cms.entity.assist.base下建立模型基础类BaseCmsPr ...
- spark生态圈简介
原文引自:http://www.cnblogs.com/shishanyuan/p/4700615.html 1.简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algori ...
- 两台linux 服务器同步
准备: 主服务器 192.168.0.1 备份服务器 192.168.0.2 备份服务器 注意需要开放873端口 而且小心selinux 开始: sudo vim /etc/rsyncd.passwd ...
- day65作业
有 红.黄.蓝 三个按钮,以及一个200x200矩形框box,点击不同的按钮,box的颜色会被切换为指定的颜色 <body> <div id="app"> ...
- JavaSE_02_Thread类01
1.1 并发与并行 并发:指两个或多个事件在同一个时间段内发生. 这在单 CPU 系统中,每一时刻只能有一道程序执行,即微观上这些程序是分时的交替运行,只不过是给人的感觉是同时运行,那是因为分时交替运 ...