jQuery事件绑定与常用事件
jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click、mousedown、keypress事件。jQuery绑定事件有2种方法,下面用最基本的例子做演示。
①直接绑定,$('selector').event(function () { 代码块;})
<button>click me</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('button').click(function () {
alert('hello world');
})
</script>
②通过bind绑定,$('selector').bind('event',function () { 代码块;})
通过这种方法可以解绑事件,$('selector').unbind('event')
<button>click me</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('button').bind('click',function () {
alert('hello world');
})
$('button').unbind('click' )
</script>
为了避免在文档未完全加载之前就运行jQuery代码导致错误,或者动态增加的标签不会自动绑定事件,可通过两种方法解决。
1.保证文档在完全加载之后再运行jQuery代码
$(document).ready(function(){
// 开始写 jQuery 代码...
}); //等价于
$(function(){
// 开始写 jQuery 代码...
});
②事件委托与绑定
<ul>
<li>11</li> <li>22</li> <li>33</li> <li>44</li>
</ul>
<button>add li</button> <!--按钮,点击增加li标签-->
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('button').click(function () {
var $ele=$('<li>')
$ele.html(($('li').length+1)*11); //新增li标签的文本内容
$('ul').append($ele)
})
$('li').bind('click',function () { //点击li标签,弹出提示框
alert('hello world');
})
</script>
对于上面这个例子,原本文档中的11、22、33和44标签,点击分别可弹出提示框,单只对于点击按钮后新增的55、66、77等标签,则不会自动绑定上原li标签的click事件,即点击不会弹出hello world提示框。为此,可将事件绑定在ul标签、并委托给ul标签的li标签。
//将原本li标签的click事件修改为如下
$('ul').bind('click','li',function () {
alert('hello world');
})
jQuery常见事件
①显示与隐藏:show()、hide()与toggle()
三个函数不加参数分别表示直接显示、隐藏与切换;加上时间参数如hide(1000),表示隐藏这个动作持续1000ms;也可使用'slow'或者'fast'作为参数。
<div style="width: 200px;background: pink">hello world</div><br>
<button id="showing">显示</button>
<button id="hiding">隐藏</button>
<button id="toggling">切换</button>
<script>
$('#showing').click(function () {
$('div').show();
})
$('#hiding').click(function () {
$('div').hide();
})
$('#toggling').click(function () {
$('div').toggle(); //切换,如果div是显示则隐藏,如果是隐藏则显示
})
</script>
②向上与向下滑动:slideUp()、slideDown()与slideToggle()
三个函数不加参数分别表示直接向上滑动、向下滑动与切换;加上时间参数如slideUp(1000),表示向上滑动这个动作持续1000ms;也可使用'slow'或者'fast'作为参数。
<div style="width: 200px;background: pink">hello world</div><br>
<button id="slideup">向上滑动</button>
<button id="slidedown">向下滑动</button>
<button id="slidetoggle">切换</button>
<script>
$('#slideup').click(function () {
$('div').slideUp(1000);
})
$('#slidedown').click(function () {
$('div').slideDown(1000);
})
$('#slidetoggle').click(function () {
$('div').slideToggle(1000); //切换,如果当前状态为向下滑动则向上滑动,如果当前状态为向上滑动则向下滑动
})
③淡入与淡出:fadeIn()、fadeOut()、fadeToggle()与fadeTo()
这四个参数实际是对标签的透明度进行设置,前三个参数的用法类似前面两个,而fadeTo()需要两个参数,第一个参数表示速度,可使用毫秒数或者'slow'和'fast',第二个参数为指定的透明度,在0和1之间。
<div style="width: 200px;background: pink">hello world</div><br>
<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="fadetoggle">切换</button>
<button id="fadeto">透明度</button>
<script>
$('#fadein').click(function () {
$('div').fadeIn(1000);
})
$('#fadeout').click(function () {
$('div').fadeOut(1000);
})
$('#fadetoggle').click(function () {
$('div').fadeToggle(1000);
})
$('#fadeto').click(function () {
$('div').fadeTo(1000,0.3);
})
</script>
对于上述三对方法,除了可以加上毫秒或者'slow'和'fast'作为第一个参数,还可以加上第二个参数即回调函数,表示原方法完成后执行的函数,语法
$(selector).event(speed,function() { //回调函数代码}),以下例子以第一对函数为例。点击点击隐藏按钮时,会先隐藏div标签,隐藏动作完成后会弹出“已隐藏”提示框;点击显示按钮时,会先显示div标签,显示动作完成后会弹出“已显示”提示框。
<div style="width: 200px;background: pink">hello world</div><br>
<button id="showing">显示</button>
<button id="hiding">隐藏</button>
<script src="baidu_jquery_2.1.4.js"></script>
<script>
$('#showing').click(function () {
$('div').show('slow',function () {
alert('已显示');
});
})
$('#hiding').click(function () {
$('div').hide('slow',function () {
alert('已隐藏');
});
})
</script>
jQuery事件绑定与常用事件的更多相关文章
- js和jQuery中的事件绑定与普通事件
普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 13-jQuery事件绑定和常用鼠标事件
# 关于事件 ## 事件绑定 1.**基本绑定** > $(element).click(function(){})>> $(element).dblclick(function() ...
- JQuery - on绑定多个事件
一.jquery为多个选择器绑定同一个事件 $("#start,#end").on("click",function(){ alert("The pa ...
- Jquery同时绑定多个事件
//JQ 同时绑定多个事件 $("div.div_grren a img").bind({ mouseover:function(){ $(this).attr('src',bor ...
- jquery on 绑定多个事件 多个元素
$('.wrap').on({ click:function(){ //事件1 ...... }, keyup:function() { //事件2 ....... }, keydown:functi ...
- JS中事件绑定函数,事件捕获,事件冒泡
1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...
- 学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
1.常用的事件: ① onload:页面加载 ② onblur: 失去焦点 onfocus: 获取焦点 ③ onclick:点击 ④ onmouseover:鼠标经过 onmouseout:鼠标离开 ...
随机推荐
- js 注意
1.如果想要动态加清除浮动的代码,可以这样做: document.getElementById("mainBody").innerHTML += "<div sty ...
- Page Lifecycle API
今天的现代浏览器有时在系统资源受限的情境下会暂停页面或完全放弃执行它.将来,浏览器会主动执行此操作,因此它们会消耗更少的电量和内存.在Chrome 68中提供的Page Lifecycle API提供 ...
- iOS - 数组字典模型根据模型属性key排序
方法一: NSArray *sortArray = [arrayM sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) { ...
- Tomb Raider
Lara Croft, the fiercely independent daughter of a missing adventurer, must push herself beyond her ...
- XML5个转义符:<,>,&,”,©;的转义字符分别如下: < >& " '
XML5个转义符:<,>,&,”,©;的转义字符分别如下: < >& " ' $search = array ...
- 3 Oracle 32位客户端安装及arcgis连接
关于Oracle服务器端安装及配置的过程详见第2篇文章,链接如下:http://www.cnblogs.com/gistrd/p/8494292.html,本篇介绍客户端安装配置及连接arcgis过程 ...
- html 中a标签的问题(无反应,跳转,调用方法)
让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成 1.<a href="javascri ...
- php 延迟静态绑定: static关键字
abstract class DomainObject { public static function create() { return new self(); } } class User ex ...
- 部署WEB项目到服务器(四)部署WEB项目Forum到linux服务器(Ubuntu)详解
突发奇想,想在自己电脑上部署一个web网站. 1,使用Navicat for MYSQL客户端创建WEB项目数据库: Navicat for MYSQL连接虚拟机中的mysql数据库 启动mysql数 ...
- (备忘)打开office2010总是在配置进度
1.同时按上键盘上面的windows键和R键,出现“运行” 2.输入“regedit”,回车进入注册表 3.点击“HKEY_CURRENT_USER”展开,依次“Software”--“Microso ...