- 浏览: 65040 次
文章分类
最新评论
-
小色帝:
我是天才是打发
Jquery实现的Tabs页 -
小色帝:
小色帝 写道1111而温热
Jquery实现的Tabs页 -
小色帝:
1111而温热
Jquery实现的Tabs页
Jquery事件
(一)、事件列表。
1.blur() 当失去焦点时触发。包括鼠标点击离开和TAB键离开。
2.change() 当元素获取焦点后,值改变失去焦点事触发。
3.click() 当鼠标单击时触发。
4.dblclick() 当鼠标双击时触发。
5.error() 当javascript出错或img的src属性无效时触发。
6.focus() 当元素获取焦点时触发。注意:某些对象不支持。
7.focusin() 当元素或其子元素获取焦点时触发,与focus()区别在于能够检测其内部子元素获取焦点的情况。
8.focusout() 当元素或者其子元素失去焦点时触发,与focusout()区别在于能够检测内部子元素失去焦点的情况。
9.keydown() 当键盘按下时触发。
10.keyup() 当按键松开时触发。
11.mousedown() 当鼠标在元素上点击后触发。
12.mouseenter() 当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是,鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。
13.mouseleave() 当鼠标从元素上移出时触发。
14.mousemove() 当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。
15.mouseout() 当鼠标从元素上移开时触发。
16.mouseover() 当鼠标移入元素时触发。
17.mouseup() 当鼠标左键按下释放时触发。
18.resize() 当浏览器窗口大小改变时触发。 $(window).resize();
19.scroll() 当滚动条发生变化时触发。
20.select() 当input里的内容被选中时触发。
21.submit() 提交选中的表单。
22.unload() 当页面卸载时触发。
(二)、事件常用方法
1、绑定事件
语法:bind(type,[data],fn) type参数可以是顶部的22个方法(注意:不能带括号); 参数data是属性值传递给事件对象的额外数据,fn是处理函数。可以bind多个事件,也可以为同一事件绑定多个函数。
$("#div1").bind("change",function(){ alert("你好!"); })
$("#div1").bind("click mouseout",function(){ alert("你好!"); })
2、切换事件
语法:hover(fn1,fn2); 鼠标移入执行第一个函数,鼠标移出执行第二个函数。相当于mouseenter与mouseleave。
$("#div1").hover(function(){alert("鼠标移入我啦");},function(){alert("鼠标移出我啦!");})
3、顺序执行事件
语法:toggle(fn1,fn2,fn3...) 当鼠标单击时,依次执行绑定的事件
$("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})
4、unbind 移除事件
语法:unbind([type],[fn]) 移除元素已经绑定的事件,type:指定要移除的事件,fn指定要移除的方法。当没有参数时,所有的事件都移除。注意,用live()方法绑定的方法移出不了,live()绑定的方法要用它自己的die()来移出。
$(":button").unbind(); 移除按钮的所有事件。
$(":button").unbind("click"); 移除按钮的单击事件。
$(":button").unbind("click",fn1); 移除按钮的单击事件中的fn1函数,如果该事件绑定了多个函数,对其他函数没影响。
5、one 仅执行一次的事件
语法:one(type,[data],fn) 绑定一个仅执行一次的事件
$("#div1").one("click",function(){ alert("我只执行一次!"); })
6、trigger DOM加载完毕后自动执行的事件
语法:trigger(type,[data]) DOM元素加载完成后自动执行
$("#div1").bind("bclick",function(){ alert("你好"); });
$("#div1").trigger("bclick"); //注意,trigger一定要放在绑定的事件之后,否则不执行。
7、live() DOM根节点绑定事件
语法:live(type,[fn]) String,Function
live(type,[data],false) String,Array,bool
live()在根节点绑定事件,通过事件冒泡到DOM根节点($(ducoment)),再对比触发事件的元素来判断事件是否应该执行。效率不高,因此不能完全替代bind()但是有个好处,就是后期加载出来的元素同样能够绑定。但是有个缺点,就是live()方法仅仅能使用CSS选择器选择被绑定元素。
如$('a').live('click', function(){alert("你好!");}) JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。
live(type,data,fn)
$("#div1").live("click",function(){ alert("你好"); }) //即使页面一开始不存在id="div1"的元素,是后期AJAX或js加载上去的,但是依然有效。
$("#div1").live("click mouseout",function(){ alert("你好"); }) //可以live()多个事件。
8、die() 解除live()方法绑定的事件 //绑定与解除是对应的,die()解除不了bind()和delegate绑定的方法。 可以为一个元素live多个事件,也可以为同一事件live多个函数。
语法die(type,[fn]) string Function其中Function为可选方法。
$("#div1").die();
$("#div1").die("click");
$("#div1").die("click",fn1); //其中fn1为某函数名。如果是绑定的是一个匿名函数,第二个参数用于当为同一事件live了多个函数的时候,解除一个函数对其他函数没影响。
9、delegate() 为指定的元素添加一个或多个事件,并绑定处理函数,一个事件也可以绑定多个函数。注意:此函数要1.4.2版添加。delegate()允许在父元素中将时间绑定当前页面还未的元素,这点与Live()类似,但是即使是$(document).delegate()也比live()方法的效率要高,另外delegate()还能将尚未出现的元素绑定到离它更近的父元素上。
语法:
delegate(selector,[type],fn) String String Function //selector必须为所选元素的子元素
delegate(selector,[type],[data],fn) String String Object Function
delegate(selector,events) String String
如:
$('#container').delegate('a', 'click', function() { alert("你好!") });
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
$("#div1").delegate("#button1","click",function(){ alert("你好啊!"); }); //注意:#button1必须为#div1的子元素
10、undelegate() 删除有delegate()函数绑定的一个或多个事件处理函数
语法:
undelegate(selector,[type]) String String
undelegate(selector,[type],fn) String String Function
undelegate(selector,events) String String
undelegate(namespace) String
11、ready() 当DOM元素加载完成后绑定处理事件
$(document).ready()
(一)、事件列表。
1.blur() 当失去焦点时触发。包括鼠标点击离开和TAB键离开。
2.change() 当元素获取焦点后,值改变失去焦点事触发。
3.click() 当鼠标单击时触发。
4.dblclick() 当鼠标双击时触发。
5.error() 当javascript出错或img的src属性无效时触发。
6.focus() 当元素获取焦点时触发。注意:某些对象不支持。
7.focusin() 当元素或其子元素获取焦点时触发,与focus()区别在于能够检测其内部子元素获取焦点的情况。
8.focusout() 当元素或者其子元素失去焦点时触发,与focusout()区别在于能够检测内部子元素失去焦点的情况。
9.keydown() 当键盘按下时触发。
10.keyup() 当按键松开时触发。
11.mousedown() 当鼠标在元素上点击后触发。
12.mouseenter() 当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是,鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。
13.mouseleave() 当鼠标从元素上移出时触发。
14.mousemove() 当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。
15.mouseout() 当鼠标从元素上移开时触发。
16.mouseover() 当鼠标移入元素时触发。
17.mouseup() 当鼠标左键按下释放时触发。
18.resize() 当浏览器窗口大小改变时触发。 $(window).resize();
19.scroll() 当滚动条发生变化时触发。
20.select() 当input里的内容被选中时触发。
21.submit() 提交选中的表单。
22.unload() 当页面卸载时触发。
(二)、事件常用方法
1、绑定事件
语法:bind(type,[data],fn) type参数可以是顶部的22个方法(注意:不能带括号); 参数data是属性值传递给事件对象的额外数据,fn是处理函数。可以bind多个事件,也可以为同一事件绑定多个函数。
$("#div1").bind("change",function(){ alert("你好!"); })
$("#div1").bind("click mouseout",function(){ alert("你好!"); })
2、切换事件
语法:hover(fn1,fn2); 鼠标移入执行第一个函数,鼠标移出执行第二个函数。相当于mouseenter与mouseleave。
$("#div1").hover(function(){alert("鼠标移入我啦");},function(){alert("鼠标移出我啦!");})
3、顺序执行事件
语法:toggle(fn1,fn2,fn3...) 当鼠标单击时,依次执行绑定的事件
$("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})
4、unbind 移除事件
语法:unbind([type],[fn]) 移除元素已经绑定的事件,type:指定要移除的事件,fn指定要移除的方法。当没有参数时,所有的事件都移除。注意,用live()方法绑定的方法移出不了,live()绑定的方法要用它自己的die()来移出。
$(":button").unbind(); 移除按钮的所有事件。
$(":button").unbind("click"); 移除按钮的单击事件。
$(":button").unbind("click",fn1); 移除按钮的单击事件中的fn1函数,如果该事件绑定了多个函数,对其他函数没影响。
5、one 仅执行一次的事件
语法:one(type,[data],fn) 绑定一个仅执行一次的事件
$("#div1").one("click",function(){ alert("我只执行一次!"); })
6、trigger DOM加载完毕后自动执行的事件
语法:trigger(type,[data]) DOM元素加载完成后自动执行
$("#div1").bind("bclick",function(){ alert("你好"); });
$("#div1").trigger("bclick"); //注意,trigger一定要放在绑定的事件之后,否则不执行。
7、live() DOM根节点绑定事件
语法:live(type,[fn]) String,Function
live(type,[data],false) String,Array,bool
live()在根节点绑定事件,通过事件冒泡到DOM根节点($(ducoment)),再对比触发事件的元素来判断事件是否应该执行。效率不高,因此不能完全替代bind()但是有个好处,就是后期加载出来的元素同样能够绑定。但是有个缺点,就是live()方法仅仅能使用CSS选择器选择被绑定元素。
如$('a').live('click', function(){alert("你好!");}) JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。
live(type,data,fn)
$("#div1").live("click",function(){ alert("你好"); }) //即使页面一开始不存在id="div1"的元素,是后期AJAX或js加载上去的,但是依然有效。
$("#div1").live("click mouseout",function(){ alert("你好"); }) //可以live()多个事件。
8、die() 解除live()方法绑定的事件 //绑定与解除是对应的,die()解除不了bind()和delegate绑定的方法。 可以为一个元素live多个事件,也可以为同一事件live多个函数。
语法die(type,[fn]) string Function其中Function为可选方法。
$("#div1").die();
$("#div1").die("click");
$("#div1").die("click",fn1); //其中fn1为某函数名。如果是绑定的是一个匿名函数,第二个参数用于当为同一事件live了多个函数的时候,解除一个函数对其他函数没影响。
9、delegate() 为指定的元素添加一个或多个事件,并绑定处理函数,一个事件也可以绑定多个函数。注意:此函数要1.4.2版添加。delegate()允许在父元素中将时间绑定当前页面还未的元素,这点与Live()类似,但是即使是$(document).delegate()也比live()方法的效率要高,另外delegate()还能将尚未出现的元素绑定到离它更近的父元素上。
语法:
delegate(selector,[type],fn) String String Function //selector必须为所选元素的子元素
delegate(selector,[type],[data],fn) String String Object Function
delegate(selector,events) String String
如:
$('#container').delegate('a', 'click', function() { alert("你好!") });
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
$("#div1").delegate("#button1","click",function(){ alert("你好啊!"); }); //注意:#button1必须为#div1的子元素
10、undelegate() 删除有delegate()函数绑定的一个或多个事件处理函数
语法:
undelegate(selector,[type]) String String
undelegate(selector,[type],fn) String String Function
undelegate(selector,events) String String
undelegate(namespace) String
11、ready() 当DOM元素加载完成后绑定处理事件
$(document).ready()
发表评论
-
项目里 Jquery 日期空间,vilidation,highchars控件
2017-03-06 11:24 0项目中用到了一个Jquery 日期控件,挺好用的,特意总结下 ... -
开源轻量级移动端友好的JS地图库——leaflet学习教程
2017-01-05 18:57 1160开源轻量级移动端友好的JS地图库——leaflet学习教程 ... -
$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
2016-12-15 10:38 299这个标题似乎有些奇怪,但这些都是合法有效的jQuery选择器。 ... -
type="button" ,"submit" 的区别(转)
2016-07-22 11:16 450type="button" ,"submit" 的区别 ... -
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2016-07-21 14:10 390Jquery中$.get(),$.post(),$.a ... -
Ztree用法事例
2016-05-17 01:11 499【简介】 zTree 是利用 jQuery 的核心代码,实现一 ... -
jQuery 数据缓存data(name, value)详解及实现
2016-05-16 10:35 397本文要讨论的是最流行的JavaScript框架jQuery的数 ... -
jQuery数据缓存$.data 的使用以及源码解析
2016-05-16 00:49 392jQuery数据缓存$.data 的使用以及源码解析 实现原 ... -
jQuery.data()
2016-05-16 00:48 299jQuery.data() 所属分类:数据操作 | 工具类 E ... -
jQuery之AJAX
2016-05-16 00:16 378jQuery之AJAX 一、load() 加载页面数据 ... -
JQuery OrgChart
2016-05-15 12:36 540Query OrgChart 是一个jQuery插件能够让帮你 ... -
JS横向树(组织结构)
2016-05-15 11:19 2898最近看到不少人有类似的需求,实现组织架构的横向展开,显示,无聊 ... -
我也来说说怎么封装jQuery插件
2016-05-14 19:32 367http://www.w3cfuns.com/notes/17 ... -
echarts 各个属性意义注释
2016-05-14 18:27 1031<!DOCTYPE html PUBLIC " ... -
jQuery插件原来如此简单 jQuery插件的机制及实战
2016-05-14 01:00 453jQuery插件原来如此简单 ... -
Echarts 仪表盘实例
2016-05-14 00:51 5228HTML 首先引入Echarts,然后在需要放置图表的地方加上 ... -
Jquery封装对象实例
2016-05-14 00:48 535jQuery自定义类封装 jQuery自定义类封装: ( ... -
Jquery 选择器总结
2015-04-15 19:21 481jQuery 的选择器可谓之强 ... -
关于SS框架后台代码开发规范实例
2013-02-01 17:20 961工作半年了,接触的第一个项目就是SS为后台的框架的开发。 ... -
jquery 里面的.find() .each() .parent() .value(parseInt())
2013-02-01 09:33 19871.find() 方法获得当前元素集合中每个元素的后代,通过选 ...
相关推荐
JQuery常用工具集合为用户整理了众多jquery的插件,用户下载后可以直接使用,可以完美兼容各大浏览器,给用户编写代码带来无限便捷 个人把常用的一些jquery插件做了一个demo。 Jquery继prototype之后又一个优秀的...
整理了一套JQuery的常用方法,常用的选择器,各个选择器的区别,实际开发中遇到的问题,与解决问题的常用方法。
这个是本人总结整理的 jquery常用方法总结,里面有jQuery对象与dom对象的转换 的一些方法
个人根据Jquery即学即用的书,整理的Jquery常见用法。
自己亲自整理的常用jquery 特效 共享
帮大家整理了jquery所有版本,我常用的是1.7.2,注意IE8兼容要用2.0以下版本的jquery
主要介绍了小编日常收集整理的关于jQuery中常用动画效果函数的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
自己整理的一些jquery常用收集,与大家一起分向
《从零开始学JQuery》Word版书籍 1-15章整理成word版 附带常用jquery ajax函数表 加一个用户名验证实例
有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧,需要了解的朋友可以参考下
从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (八) 插播:jQuery实施方案 从零开始学习jQuery (九) ...
jquery最好用的第一手资料,省得大家一页一页的翻书,所有关键技术都被整理出来,是快速学习和掌握jquery的绝好资料,不过此文档适合有一定jquery基础的朋友学习。
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等。 jQuery是继prototype之后又一个优秀的Javascrīpt框架。其...
理论篇:对选择器、事件、常用函数方法、外观效果、查找筛选、文档处理、Ajax处理的基础知识,以及《锋利的JQUERY》读书笔记精华完整版。 实践篇:Tab菜单栏源码、手风琴菜单源码、圆角效果源码、网页弹出对话框...
自己在开发中整理的一些常用小方法,希望能帮助到小新。 大神绕。
使用jQueryUI完成制作网站的大部分常用功能. 经过公司内部收集, 整理了一些经常使用javascript实现的功能. 实现这些功能的主角不是让人眼花缭乱的jQuery插件, 而是jQuery UI. 如果你还在为了一个小小的特效而...
在jquery中,jquery动画事件和动画函数经常用的到,今天小编抽时间给大家整理了些关于常用的jquery动画事件和动画函数,对jquery动画函数和动画事件相关知识感兴趣的朋友一起学习吧
本文整理了一些常用的特效示例,如:.jQuery fadeIn() 用于淡入已隐藏的元素、jQuery fadeToggle()方法可以在 fadeIn()与 fadeOut()方法之间进行切换等等,感兴趣的朋友可以参考下哈
jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画。 clearQueue():对被选元素移除所有排队的函数(仍未运行的)。 delay():对被选元素的所有排队函数(仍未运行)设置延迟。 dequeue():运行被选...