jQuery代码节选(事件)
事件
1.ready()
$(document).ready(function() {
//代码
});
简写:
$(function( {
//代码
});
该事件是会在页面加载完后执行,相当于onloca(),但如果存在onloca()事件,ready()会失效
2.on()
<div class="div1">
<div class="div2"></div>
</div>
$("div").on("click mouseover",".div2",function(){
alert("hello world");
});
on()事件可绑定多个事件,能添加选择器筛选后代元素,上例子匹配div元素选择.div1元素的后代.div2
3.off()
$("div").off()
删除div元素上所有事件
$("div").off("click")
删除div元素上的单击事件
4.bind()
与on()事件相同,可绑定多个事件,目前本人发现的唯一区别是on()事件比bind()多了一个selector选择器
5.one()
与bin()事件相同,但one()绑定的事件是一次性的,使用一次过后就会被删除
6.trigger()
$("div").trigger("click");
触发div元素的单击事件
7.triggerHandler()
$("div").trigger("click");
改事件功能与trigger()相同,只是triggerHandler()只触发匹配到的集合的第一个元素,且如果触发的事件是浏览器默认的,那将不被触发。
8.unbind()
$("div").unbind();
删除div元素bind()绑定的所有事件
$("div").unbind("click");
删除div元素bind("click")绑定的事件
经测试unbind()的删除能力对on()事件绑定的事件一样有效
9.live()
已被删除
10.die()
不建议使用
11.delegate()
<ul class="div1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.div1').delegate('li','click',function(){
$(this).css('color','blue');
});
单击ul.div1元素的子元素li后,相对应的li颜色改变
该方法可为选定元素的子类添加事件,子类可为空 "",但不能不写,为空时事件为自身
12.undelegate()
$('.div1').undelegate('click')
$('.div1').undelegate('li','click')
两者效果相同,清除delegate()方法添加的事件
13.hover()
<ul class="div1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').hover(function(){
$(this).css('background','blue');
},function(){
$(this).css('background','red');
});
hover()是一个模仿悬停事件的方法,第一个function()是移入,第二个是移出,两者之间用逗号","隔开
14.blur()
<input type="text" id="text" autofocus>
$(function(){
$('#text').blur();
})
让文本框失去焦点
$('#text').blur(
function(){
clg('blur');
}
);
当文本框失去焦点时,触发事件
15.change()
<input type="text" id="text">
$(function(){
$('#text').change();
})
$('#text').change(
function(){
clg('change');
}
);
触发change()事件
16.click()
<input type="text" id="text">
$(function(){
$('#text').click();
})
$('#text').click(
function(){
clg('click');
}
);
触发click()事件
17.dblclick()
<input type="text" id="text">
$(function(){
$('#text').dblclick();
})
$('#text').dblclick(
function(){
clg('dblclick');
}
);
触发dblclick()双击事件
18.erroe()
19.focus()
<input type="text" id="text">
$(function(){
$('#text').focus();
})
$('#text').focus(function(){
clg('focus');
});
触发focus()双击事件
20.focusin()
<p class="ul2">
这里是p
<input type="text" id="text">
</p>
$("p").focusin(function() {
$(this).css('color', 'blue');
});
focusin()方法是当子元素获取焦点时触发的
21.focusout()
<p class="ul2">
这里是p
<input type="text" id="text">
</p>
$("p").focusout(function() {
$(this).css('color', 'blue');
});
p元素的子元素失去焦点时触发
22.keydown()
$(window).keydown(function(e){
clg(String.fromCharCode(e.keyCode))
})
按下键盘时触发该事件
23.keypress()
$(window).keypress(function(e){
clg(String.fromCharCode(e.keyCode))
})
该事件与keydown()事件功能相同,都是在键盘按下时触发
24.keyup()
$(window).keyup(function(e){
clg(String.fromCharCode(e.keyCode))
})
送开键盘时触发事件
25.mousedown()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').mousedown(function(e){
$(this).css('background','blue');
})
按匹配到的元素上按下鼠标触发该事件
26.mouseenter()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').mouseenter(function(e){
$(this).css('background','blue');
})
当鼠标指针穿过元素时,会发生 mouseenter 事件
27.mouseleave()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').mouseleave(function(e){
$(this).css('background','red');
})
当鼠标指针离开元素时,会发生 mouseleave 事件
28.mousemove()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').mousemove(function(e){
$(this).css('background','blue');
})
当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。
29.mouseout()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').mouseout(function(e){
$(this).css('background','red');
})
当鼠标指针从元素上移开时,发生 mouseout 事件。
30.mouseover()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').mouseover(function(e){
$(this).css('background','red');
})
当鼠标指针位于元素上方时,会发生 mouseover 事件。
31.mouseup()
<ul class="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('.ul1').mouseup(function(e){
$(this).css('background','red');
})
当在元素上放松鼠标按钮时,会发生 mouseup 事件。
32.resize()
$(window).resize(function(){
alert("窗口大小发生改变!")
})
当调整浏览器窗口的大小时触发事件
33.scroll()
$(window).scroll(function(){
alert("滚动条移动了")
})
匹配元素的滚动条移动时触发事件
34.select()
<input type="text" id="text">
$('#text').select(function(){
clg('select');
})
当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件
35.submit()
$('form').submit()
提交表单
$('form').submit(function(){
alert("提交表单")
})
当提交表单时,会发生 submit 事件。
jQuery代码节选(事件)的更多相关文章
- jQuery代码节选(css)
CSS 1.css<p class="p1">1</p> $("p").css("color");获取css属性值$ ...
- jQuery代码节选(筛选)
筛选...8.not()<p class="p1">1</p><p class="p2">2</p><p ...
- JavaScript之事件委托(附原生js和jQuery代码)
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- JQuery 自动触发事件
JQuery 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- ajax的status为201依然触发jquery的error事件的问题
昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...
- 如何编写高效的jQuery代码
jQuery的编写原则: 一.不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大.所以有原生方法可以使用的场 ...
随机推荐
- Ubuntu16.04 VTK7.1.0+QT4.8.6+QtCreator开发环境配置
VTK需要OpenGL3.0或更高版本的驱动,但虚拟机下的Ubuntu不支持OpenGL3.0,或者自己按网上教程配置之后也能支持,但过程相当繁琐,本人试验失败. 最终决心采用双系统,装好之后,执行g ...
- 如何正确的做WEB端的压力测试
1.对要测试的系统进行分析,明确需要对哪一块做压力测试.比如:淘宝网站双十一期间,秒杀跟支付,此模式用户操作中占比比较大 再比如:游戏,登录--开始战斗--结束战斗这种混合模式在用户操作中占比较大 那 ...
- 调用图片按钮的img图片
今天是我学前端的第12天.早上起床后活动筋骨时看了<JS的基本属性操作>,作业是模拟手机发送短信.文字都能传输到<div>上,就是图片不知道怎么传.折腾了好久才弄清楚,多亏了某 ...
- Android笔记:蓝牙
if (!BTAdapter.isEnabled()) { //没有打开,就启动确认窗口询问用户是否打开 Intent i = new Intent(BluetoothAdapter.ACTION_R ...
- KVO __ 浅谈
KVO :Key-Value Observing 它提供一种机制,当指定的对象的属性被修改后,则对象就会接受到通知.简单的说就是每次指定的被观察的对象的属性被修改后,KVO就会自动通知相应的观察者了. ...
- Mac php使用gd库出错 Call to undefined function imagettftext()
第一次在Mac下使用ThinkPHP,用到验证码功能时报如题的错误: Call to undefined function Think\imagettftext() 然后检查自己的GD库,发现安装上了 ...
- 【Java EE 学习 69 上】【struts2】【paramsPrepareParamsStack拦截器栈解决model对象和属性赋值冲突问题】
昨天有同学问我问题,他告诉我他的Action中的一个属性明明提供了get/set方法,但是在方法中却获取不到表单中传递过来的值.代码如下(简化后的代码) public class UserAction ...
- (转) Android开发性能优化简介
作者:贺小令 随着技术的发展,智能手机硬件配置越来越高,可是它和现在的PC相比,其运算能力,续航能力,存储空间等都还是受到很大的限制,同时用户对手机的体验要求远远高于PC的桌面应用程序.以上理由,足以 ...
- 好文分享_java堆栈的区别
Java Heap Memory Heap memory is used by java runtime to allocate memory to Objects and JRE classes. ...
- 代码在ie9中不能正确执行
<!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8&quo ...