jquery系列之四——事件

崔博伦一路有你 2016-01-22

1. $(document).ready(function(){  函数体 });

作用:表示dom已经加载完成,可以开始操作dom了。

它还有另外一种简单写法:$(function(){ 函数体 });

可以在同一个页面中无限次地使用$(document).ready()事件,其中注册的函数会按照(代码中的)先后顺序依次执行。

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

相关推荐

Web全栈笔记 / 0评论 2020-06-15