1. $(document).ready(function(){ 函数体 });
作用:表示dom已经加载完成,可以开始操作dom了。
它还有另外一种简单写法:$(function(){ 函数体 });
可以在同一个页面中无限次地使用$(document).ready()事件,其中注册的函数会按照(代码中的)先后顺序依次执行。
它与onload事件的区别,请查看:http://guwq2014.iteye.com/blog/2270133
2.给匹配的元素绑定事件:.bind(type,[data],fn)
示例1:每个段落被点击的时候,弹出其文本。
jquery:
$("p").bind("click", function(){
alert( $(this).text() );
});
也可以同时绑定多个事件。
jquery:
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
jquery:
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
3.删除元素的绑定事件:.unbind(type,[data],fn)
示例1:把所有段落的所有事件取消绑定。
jquery:
$("p").unbind()
示例2:将段落的click事件取消绑定。
jquery:
$("p").unbind( "click" )
示例3:将删除特定函数的绑定。
jquery:
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo
4.模仿悬停事件:.hover([over,]out)
示例:鼠标移入/移除的表格加上/删除特定的类。
jquery:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
5.切换事件:.toggle([speed],[easing],[fn])
如果不带参数,表示如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
示例1:对表格切换显示/隐藏。
jquery:
$('td).toggle();
如果带function参数,表示切换执行。
示例2:对表格的切换一个类。
jquery:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
6.当元素失去焦点时触发 blur 事件:.blur([[data],fn])
示例:任何段落失去焦点时弹出一个 "Hello World!"。
jquery:
$("p").blur(function(){alert("Hello World!");});
7.当元素的值发生改变时,会发生 change 事件:.change([[data],fn])
注意:该事件仅适用于文本域(text field),以及 textarea 和 select 元素。当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
示例1:触发被选元素的 change 事件。
jquery:
$(selector).change();
示例2:给所有的文本框增加输入验证。
jquery:
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
8.触发每一个匹配元素的click事件:.click([[data],fn])
示例:将页面内所有段落点击后隐藏。
jquery:
$("p").click(function(){$(this).hide();});
9.当双击元素时,会发生 dblclick 事件:.dblclick([[data],fn])
注意:当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。在很短的时间内发生两次 click,即是一次 double click 事件。提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题。
示例:给页面上每个段落的双击事件绑上 "Hello World!" 警告框。
jquery:
$("p").dblclick(function(){alert("Hello World!");});
10.当元素获得焦点时,触发 focus 事件:.focus([[data],fn])
示例:当页面加载后将 id 为 'login' 的元素设置焦点:。
jquery:
$(document).ready(function(){
$("#login").focus();
});
11.当元素获得焦点时,触发 focusin 事件:.focusin([data],fn)
注意:focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
示例:获得焦点后会触发动画。
html:
<p>
<input type="text" />
<span>focusout fire</span>
</p>
<p>
<input type="password" />
<span>focusout fire</span>
</p>
jquery:
$("p").focusin(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
12.当元素失去焦点时触发 focusout 事件:.focusout([data],fn)
注意:focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。
示例:失去焦点后会触发动画。
html:
<p>
<input type="text" />
<span>focusout fire</span>
</p>
<p>
<input type="password" />
<span>focusout fire</span>
</p>
jquery:
$("p").focusout(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
13.当键盘或按钮被按下时,发生 keydown 事件:.keydown([[data],fn])
示例:在页面内对键盘按键做出回应。
jquery:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// ...
}
});
14.当按钮被松开时,发生 keyup 事件:.keyup([[data],fn])
注意:它发生在当前获得焦点的元素上。
示例:当松开按键时,改变文本域的颜色。
jquery:
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
15.当调整浏览器窗口的大小时,发生 resize 事件:.mouseenter([[data],fn])
示例:让人每次改变页面窗口的大小时很郁闷的方法:。
jquery:
$(window).resize(function(){
alert("Stop it!");
});
16.当用户滚动指定的元素时,会发生 scroll 事件:.scroll([[data],fn])
注意:scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
示例:当页面滚动条变化时,执行函数。
jquery:
$(window).scroll( function() { /* ...do something... */ } );
16.在当用户离开页面时,会发生 unload 事件:.unload([[data],fn])
具体来说,当发生以下情况时,会发出 unload 事件:
a.点击某个离开页面的链接
b.在地址栏中键入了新的 URL
c.使用前进或后退按钮
d.关闭浏览器
e.重新加载页面
示例:页面卸载的时候弹出一个警告框。
jquery:
$(window).unload( function () { alert("Bye now!"); } );
17.显示隐藏的元素:.show([speed,[easing],[fn]])
注意:无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。
示例:将隐藏的段落用将近4秒的时间显示出来,并在之后执行一个反馈。
html:
<p style="display: none">Hello</p>
jquery:
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
18.隐藏显示的元素:.hide([speed,[easing],[fn]])
示例:用200毫秒将段落迅速隐藏,之后弹出一个对话框。
html:
<p>Hello</p>
jquery:
$("p").hide("fast",function(){
alert("Animation Done.");
});
19.切换显示/隐藏元素:.toggle([speed],[easing],[fn])
即:如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
示例1:对表格切换显示/隐藏。
jquery:
$('td).toggle();
示例2:如果这个参数为true ,那么匹配的元素将显示;如果false ,元素是隐藏的。
jquery:
$('#foo').toggle(showOrHide);
//相当于
if (showOrHide) {
$('#foo').show();
} else {
$('#foo').hide();
}
相关推荐
后来慢慢的接触多了,觉得这些也是so easy的嘛,于是为了加深对js、jQuery的理解以及探究网站上各种效果的实现方法,就有了jQuery插件之路这样一个系列,当然为了纪念当初对轮播的执念,于是就从轮播开始写了一个...
《jquery》 ——深入浅出系列精品教程
jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。 编辑本段Jquery对象 jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象...
jQuery事件原型——Dean Edwards的跨浏览器AddEvent()设计 源码解读 //事件添加方法 function addEvent(element, type, handler) { //保证每个不同的事件响应函数只有唯一一个id if (!handler.$$guid)
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween ://www.jb51.net/article/75821.htm a.动画入口jQuery.fn.animate函数执行流程详解 ——————————————————————————– ...
主要介绍了jQuery 1.9.1源码分析系列(十) 事件系统——绑定事件的相关资料,需要的朋友可以参考下
该企业库的设计思想是为了协助开发商解决企业级应用开发过程中所面临的一系列共性的问题, 如安全(Security)、日志(Logging)、数据访问(Data Access)、配置管理(Configuration Manage)等,并将这些广泛使用的应用程序...
JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的高度和宽度 jquery获得和设置下拉框值的代码 基于jquery的跨域调用文件 ================================= 7...
in action系列的又一经典,介绍JQuery框架的入门和提升。 JQuery: jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan...
不知不觉,已经进行到了jquery tools六大功能的第五个功能——expose的学习了,废话不多说,直接进入正题。
一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个...5.jquery.js——jquery模块,对 jQuery库的模块化封装,由init载入。6.style.css——CSS样式表,作为style模块由init载入。7.sea.js和jquery.
接着上次scrollable的学习,今天继续jquery tools六大功能的第四个功能——overlay的学习。
———————————————— 版权声明:本文为CSDN博主「项目花园范德彪」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:...
我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery,以加快前端开发的速度,并提供丰富的UI组件和交互效果。 我们的项目源码还使用了一些其他的技术和工具,以提高系统的性能和可靠性。我们使用了缓存技术来...
示例 CRUD 应用程序 这是示例 Java 应用程序,表示为: 后端的 前端的 应用技术 以下是基于 Java 的技术堆栈: ... jQuery 验证插件——客户端验证; HandlebarsJS — 带有预编译功能的类似Mustache的模板引擎; G
参考博客:JS组件系列——Form表单验证神器: BootstrapValidator 参考博客:bootstrapvalidator之API学习 表单HTML,如下: <form role=form id=roleForm> <input type=text class=fo
第1章 服务器控件概述及开发环境部署 .1 1.1 自定义服务器控件 1 1.2 服务器控件在软件开发过程中的作用 1 ...附录a .net 3.5技术教程系列——collection/asp.net ajax/ silverlight/jquery ...646
ES6 DessertES6小点心系列,包括通用弹窗,楼层定位,倒计时等等。...依赖 jQuery由于需要操作DOM,果断选择了王者级库——jQuery。但这可能会限制小点心的机动性,毕竟 MVVM 使得越来越多的项目逐渐去 jQuery 化。
还记得前面的那篇文章吗——这个系列的开篇(JavaScript插件化开发教程一)。主要讲述了以“jQuery的方式如何开发插件”, 那么今天我们带着昨天的疑问来继续我们的插件开发之旅。之前的问题如下: (1),如果项目...