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