前端（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 ...
随机推荐
- 在js中使用Razor
@foreach (var tem in Model) { <text> time.push("@tem.CreateTime.ToString("G")&q ...
- 【珍惜时间】vue-websocket
这个项目可能是个有始无终的项目?跟我一起分析吧,比较简单的一个项目 另外,我也想跟自己说,我好像失去了那个努力的自己了.要珍惜时间,好好加油啊~ 项目地址为:https://github.com/xi ...
- php链表笔记：合并两个有序链表
<?php /** * Created by PhpStorm. * User: huizhou * Date: 2018/12/2 * Time: 15:29 */ /** * 合并两个有序链 ...
- 移动端自定义键盘的vue组件 ----keyboard
<style scoped lang="less"> .keyboard { /* height: 250px; */ width: 100%; position: f ...
- 用maven创建Spring MVC项目
用maven创建Spring MVC项目 mvn archetype:generate -DgroupId=fry-arthur -DartifactId=spring-mvc-study -Darc ...
- redhat4.4下安装GMT4.5.11
GMT是地学界常用的开源软件,不仅是因为其开源的特性,还有着独特的魅力. 所需要的软件如下 安装步骤: 1. Put the soft packages in one folder, i.e. /ho ...
- vue swiper点击后返回不能自动播放
解决方法: 在返回时重新开启轮播 组件中: <swiper :options="swiperOption" ref="mySwiper" :class=& ...
- mybatis-输入输出映射-动态sql-关联查询-mybatis与spring-逆向工程
1.1. 输入映射和输出映射 Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 1.1.1. 环境准备 1. 复制昨天的工程 ...
- error C2440 “static_cast” 无法从“void (__thiscall C* )(void)...
1.VC6中,说可以把函数在头文件中定义为:afx_msg void OnProgress()这样 但是在VS2005及以上,要求很严格,必须函数返回值为LRESULT类型,所以在VS2005及以上, ...
- osg::BlendFunc来设置透明度
osg::BlendFunc介绍 混合是什么呢?混合就是把两种颜色混在一起.具体一点,就是把某一像素位置原来的颜色和将要画上去的颜色,通过某种方式混在一起,从而实现特殊的效果. 假设我们需要 ...