jQuery---绑定事件
jQuery—绑定事件
文章目录
- 一、最常用方法
- 二、bind函数
- 三、on函数
- 两个形参
- 三个形参
- 四、delegate函数
- 五、总结
一、最常用方法
$(“选择器”).事件名称(匿名函数)
举例1:
//这里的button为元素选择器,click为鼠标点击事件
$("button").click(function(){//函数内容})
举例2:
//这里的#btn1为id选择器即id名为btn1的元素,mouseenter为鼠标聚焦事件
$("#btn1").mouseenter(function(){//函数内容})
举例3:
//这里的.ps为类选择器即class名为ps的所有元素,mouseleave为鼠标离焦事件
$(".ps").mouseleave(function(){//函数内容})
二、bind函数
$(“选择器”).bind({“事件名称”:匿名函数})
举例1:
//button为元素选择器,bind的中文意思为‘绑定’
$("button").bind({"click":function(){//函数内容}})
举例2:
//这里的#btn1为id选择器即id名为btn1的元素,mouseenter为鼠标聚焦事件
$("#btn1").bind({"mouseenter":function(){//函数内容}})
举例3:
//这里的.ps为类选择器即class名为ps的所有元素,mouseleave为鼠标离焦事件
$(".ps").bind({"mouseleave":function(){//函数内容}})
注
:这里的bind函数参数为一个大括号
包裹的字典,key值为双引号下的事件名称,value值为函数内容,一定一定一定
要注意格式。
三、on函数
两个形参
$(“选择器”).on(“事件名称”,匿名函数)
举例:
$("button").on("click",function(){//函数内容})
注
:含有两个形参的on函数,和bind函数使用方法类似,只是格式不同,可以一起记忆。
三个形参
含有三个参数,非常适合含有多个孩子的父节点使用,可以统一控制孩子节点事件
$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)
举例:
$("ul").on("click","li",function(){$(this).css("color","blue"); //this表明当前点中的对象,此语句表明,当点击li标签时候,将该li标签颜色变为blue})
注
:一定要注意含有三个参数的使用场景,并且注意this关键字的使用
四、delegate函数
delegate函数有三个形参,和on函数有着相似之处,区别是参数位置不同。
$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)
$("ul").delegate("li","click",function(){$(this).css("color","blue");})
注
:一定要注意这里的参数排列顺序和on函数的参数排列顺序不同。
五、总结
- 纵观上面的绑定事件,可以发现,不同的绑定事件只是换了一个关键字以及相对应的参数列表;
- 它们共有的都是
$("选择器").函数名(参数列表)
;参数列表内容无外乎为事件名称,和匿名函数,或者是子节点选择器, - 这里的匿名函数,实际上就是一个存放代码体的地址,相当于参数是一个地址,只是为了减少代码量,直接将函数地址用匿名函数的形式代替了。
模板 | |
---|---|
最常用 | $(“选择器”).事件名称(匿名函数) |
bind函数 | $(“选择器”).bind({“事件名称”:匿名函数}) |
on函数 | $(“选择器”).on(“事件名称”,匿名函数) |
$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数) | |
delegate函数 | $(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数) |
关于jQuery的绑定事件,在实际开发过程中,往往使用的是链式编程,详见我的另外一篇文章《jQuery—链式编程》
jQuery---绑定事件相关推荐
- updatepanel失效怎么办_【点滴积累】解决jQuery绑定事件在updatepanel更新后失效的方法...
背景 接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单.其次就是当使用鼠标点击 ...
- jQuery绑定事件的三种常见方式(bind、one、【change、click、keydown、hover】)
一.bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数. 也可以同时给一个元素绑定多个事件,我们来看一下例子: <!DOCTYPE html> < ...
- Jquery绑定事件(bind和live的区别)[转]
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- 【JavaScript】jQuery绑定事件
jquery中直接绑定事件:只能用在程序中一开始就存在的html代码 目标元素.click(function(){ }) jquery中间接绑定事件: 如果目标元素是js生成的,则需要间接绑定事件,用 ...
- 50 jQuery绑定事件 阻止默认事件发生 内置动画 each data
主要内容 1 阻止后续事件继续执行 return false: 常用于表单提交 event.preventDefault : 阻止默认事件发生 <body> <form acti ...
- JQuery 绑定事件
在日常写代码的时候 不免有绑定代码,对于新手的我,对JQ中事件的绑定做一个大致的区分. jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,child ...
- jQuery绑定事件的方法四种方法
jq给元素绑定事件的方法有4种, 1.bind() 2.live() 3.live() 4.on() //on常用 一:bind(type,[data],function(eventObjec ...
- 【JQuery】JQuery绑定事件并传参
文章目录 问题出现 问题分析 解决方法 结论 纠正一个错误 事情是这样的,因为最近在学习前端的知识,学完了需要巩固下知识,所以在网上找的题来做.遇到这样的题.(包含遇到问题的详细过程,觉得例子无趣 ...
- jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), ...
- JQuery绑定事件 时如何传递参数
如题,比如我想在$(":text").bind("keyup",funcionName);将当前的文本框作为参数传递给 functionName所代表的函数,应 ...
最新文章
- Neo4j和Titan的对比
- SpringMVC通过注解方式读取properties文件中的值
- linux日志文件存放目录,Log4j 日志文件Linux/Mac/Windows通用存放位置设置方法
- js javascript变量提升
- 一个C实现的线程池(产品暂未运用)
- [html] html5中的form怎么关闭自动完成?
- mongodb 索引详解
- 双11即将来临,淘宝内测“购物车分享”功能
- 关于FP Spread for Web Forms 2.0.0.0
- 如何快速优化 Linux 内核 UDP 收包效率? | CSDN 博文精选
- 心理正常与异常的区分_正常心理与异常心理的区分
- 如何为 MySQL 选择 CPU?
- hmcl手机版_hmcl启动器整合包安卓版下载-我的世界hmcl启动器安卓版v1.17.10最新版_新绿资源网...
- 嵌入式系统与人工智能 1
- 关于Navicat 数据库一直激活不成功的解决方法
- 计算机里怎样打字,电脑知识:如何电脑快速打字
- 【博弈论】耶鲁大学公开课--博弈论Problem Set 1--Solution
- POJ 3626 Mud Puddles(超简单BFS)
- loadrunner录制脚本时无法打开IE浏览器
- 单元测试|Unittest setup前置初始化和teardown后置操作