`

jquery系列之四——事件

 
阅读更多

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();
}  

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    2014-10-04-深入理解jQuery(1)——jQuery对象1

    在jQuery的原型上,定义了一系列的方法,这些方法是所有jQuery对象都可以访问的。例如,`init`方法是jQuery对象的构造器,它负责根据传入的选择器(selector)和上下文(context)来查找和初始化DOM元素。`jquery`...

    2014-11-15-深入理解jQuery(5)——Data1

    深入理解jQuery之Data jQuery中的Data机制是为了解决在DOM节点上绑定数据时出现的一系列问题,如数据与展示混淆、DOM结构复杂化、属性值只能是字符串等问题。Data机制的出现解决了这些问题,并提供了一种高效、安全...

    JQuery的使用——实例讲解

    本篇文章将深入探讨jQuery的使用,并通过一系列实例来帮助理解其核心概念和功能。 首先,jQuery的核心理念是“Write Less, Do More”,即用更少的代码实现更多的功能。它提供了丰富的API接口,涵盖了DOM操作、事件...

    【练习向】jQuery基础教程第四版章节源码——Book02_jQuery_选择元素

    《jQuery基础教程第四版》是学习JavaScript库jQuery的重要参考资料,其中"Book02_jQuery_选择元素"这一章节主要探讨了如何在DOM(文档对象模型)中高效地选取和操作元素,这是jQuery的核心功能之一。在jQuery中,...

    jQuery validation——Jquery表单验证插件

    在jQuery Validation 1.6版本中,包含了一系列的类库文件和示例(demo),这些资源可以帮助开发者快速理解和应用这个插件。主要的类库文件`jquery-validate.js`是核心验证引擎,提供了丰富的验证规则和错误消息处理...

    jquery——>api

    选择器是jQuery的核心功能之一,用于在DOM(文档对象模型)中查找元素。常见的选择器包括: 1. **ID选择器**: `$("#elementID")` - 通过元素的ID查找单个元素。 2. **类选择器**: `$(".className")` - 查找所有具有...

    jQuery图表制作——jqchart的应用1

    jQuery图表制作——jqChart的应用1 在Web开发中,数据可视化是至关重要的,它能够帮助用户更好地理解复杂的信息。jQuery库提供了一种简单且高效的方式来实现这一目标,这就是jqChart。jqChart是一款基于jQuery的...

    jqueryeasyui——1.25jar包

    在1.25版本的jar包中,我们可以找到一系列用于构建现代Web应用程序的工具和资源。这个框架的核心理念是通过简单的HTML标记和JavaScript代码,实现复杂的用户交互和界面设计,从而提高开发效率,降低开发难度。 ...

    jq22jqueryslider4678201807262215.zip

    jQuery Slider通常提供一系列可配置的选项,允许开发者根据需求定制轮播图的行为。这些选项可能包括但不限于: - `autoplay`: 是否自动播放 - `interval`: 自动播放间隔时间 - `pagination`: 是否显示分页指示器 - ...

    jquery.cookie.js,jquery.min.js

    在压缩包中,我们有两个jQuery相关的文件——`jquery.min.js`和`jquery-1.11.0.min.js`。`jquery.min.js`可能是指较新的版本,而`jquery-1.11.0.min.js`是jQuery 1.11.0的压缩版本,它提供了基本的DOM操作和功能,如...

    JQuery1.4.1与JQuery1.8.3

    这个压缩包包含了两个版本的 jQuery —— 1.4.1 和 1.8.3。这两个版本分别代表了 jQuery 发展的不同阶段,各自具有特定的功能和改进。 ### jQuery 1.4.1 发布于2010年,jQuery 1.4.1 是一个里程碑式的版本,引入了...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    本篇将深入探讨jQuery的核心库以及两个重要的插件——jQuery File Upload和jQuery Iframe Transport。 首先,jQuery的核心库jQuery-1.8.3.min.js和jQuery-2.1.4.min.js是其发展过程中的两个稳定版本。1.8.3属于1.x...

    网页模板——jQuery实现人事物关系拓扑图代码.zip

    3. **动画效果**:jQuery提供了一系列动画方法,可以实现平滑的过渡效果。在拓扑图中,这些动画可以用来展示节点的移动、大小变化或线条的增删。 4. **Ajax交互**:如果拓扑图的数据来源于服务器,jQuery的Ajax功能...

    网页模板——jQuery实现的微信联系人二维码生成器源码.zip

    网页模板——jQuery实现的微信联系人二维码生成器源码是一个基于JavaScript库jQuery开发的工具,用于生成微信联系人的二维码图片。这个源码可以帮助开发者在网页上集成一个功能,让用户能够轻松地分享自己的微信...

    jquery-1.7.1.min.js

    这里我们关注的是jQuery 1.7.1的两个版本——"jquery-1.7.1.js"和"jquery-1.7.1.min.js",它们是这个强大库的普通版和压缩优化版。 首先,"jquery-1.7.1.js"是原始的、未压缩的版本,包含了完整的jQuery源代码,...

    jquery2.2.2

    jQuery 2.2.2包含了一系列常用的函数和方法,如选择器(Selectors)用于选取DOM元素,操作DOM(Traversing)用于改变页面结构,事件处理(Events)用于响应用户交互,以及Ajax(Ajax)用于实现异步数据交换。...

    jquery-1.8.3

    6. **插件生态**:jQuery拥有庞大的插件生态系统,如jQuery UI提供了一系列的用户界面组件,jQuery Validation插件方便表单验证,以及许多第三方动画、图表、轮播图等插件,极大地扩展了jQuery的功能。 7. **版本...

    网页模板——jQuery实现按下键盘对应字母亮灯的字母墙动画效果源码.zip

    该压缩包文件“网页模板——jQuery实现按下键盘对应字母亮灯的字母墙动画效果源码.zip”提供了一个基于jQuery的互动网页模板,该模板能够实现一个有趣的字母墙动画效果。当用户在键盘上按下对应的字母时,字母墙上的...

    jquery1.8.3_api jquery中文开发文档

    首先,我们要了解jQuery的核心概念——选择器。在`jquery选择器介绍.txt`中,详细列出了jQuery支持的各种选择器,包括基本选择器(如ID选择器"#id",类选择器".class",元素选择器"tag"),层次选择器(如后代选择器...

    jquery-1.4.3.js+jquery-1.7.2.js包下载

    此版本的最大亮点是引入了新的事件处理模型——事件委托(Event Delegation)。通过使用.on()方法,开发者可以更加高效地处理动态生成的元素事件,大大降低了内存占用。此外,1.7.2版本还改进了AJAX的Promise支持,...

Global site tag (gtag.js) - Google Analytics