( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\jQuery\jquery_08.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000360216{main}( )...\jquery_08.php:0

( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\jQuery\jquery_08.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000360216{main}( )...\jquery_08.php:0

( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\jQuery\jquery_08.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000360216{main}( )...\jquery_08.php:0

页面加载后执行的函数

①. $(document).ready(function(){……});

②. $(function(){……});


简单说明:$(document).ready() 相当于 window.onload,与其相比,这种jQuery语法更加先进强大,它不必在网页所有内容(代码、图片、多媒体等)全部加载完成之后执行,只需在网页结构加载完成之后即可执行,非常安全,window.onload 还有一个特点——一个网页中只能出现一次,有些时候可能会造成不便,而jQuery的这种语法很好的弥补了它的不足,$(document).ready() 可以出现多次。


绑定/取消元素事件

绑定 ①:

$(content).bind(type,[data],fn)

type:事件名称,如单击事件,click。

data:向 fn 函数传递的参数系列,使用大括号包括参数名和值对,无参数时可省略。

fn:要绑定的函数。

$(function(){

$('p').bind('click',function(){

$(this).hide();});

});

绑定 ②:

$(content).type(fn)

$(function(){

$('p').click(function(){

$(this).hide();});

})

解绑:

unbind(type,fn);


可以进行绑定/解绑的事件:

click、dblclick、keydown、keypress、keyup、

mousedown、mouseup、mouseover、mouseout、mousemove、

blur、change、error、focus、load、unload、submit、select、scroll、resize


事件的特殊绑定

$(content).one(Type,[data,]fn)

功能:在元素或元素集上绑定事件,执行一次后自动删除,函数失效。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
点击我会弹出对话框,你会知道真相!
点击我会弹出对话框,你会知道真相!
  • <div>点击我会弹出对话框,你会知道真相!</div>

<div> CSS:

width:600px; height:150px; text-align:center; line-height:150px;

background:#bbb; border:1px solid #666;

  • $("div").one('click',function(){alert("提示:绑定的函数已经失效,当你再次点击灰色区域,依旧无法弹出此对话框。");});

鼠标经过/离开的事件

$(content).hover(fnOver,fnOut)

fnOver:鼠标经过时调用的函数。

fnOut :鼠标离开时调用的函数。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
  • <div></div>

<div> CSS:

width:600px; height:150px; background:#bbb; border:1px solid #666;

  • $("div").hover(
  • function(){$(this).css('background','#dcdcdc')},
  • function(){$(this).css('background','#bbbbbb')}
  • );

单击元素后切换调用不同函数

$(content).toggle(fn,fn,fn,…)

fn,fn,fn,…:为循环切换的系列函数。

一般设置两个函数,实现两种状态的切换。例如点击一个按钮,来控制另一个元素的显示与隐藏。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
  • <div></div>

<div> CSS:

width:600px; height:150px; background:#bbb; border:1px solid #666;

  • $("div").toggle(
  • function(){$(this).css('background','#000')},
  • function(){$(this).css('background','#444')},
  • function(){$(this).css('background','#bbb')},
  • function(){$(this).css('background','#fff')}
  • );

触发事件

$(content).trigger(Type)

功能:它可以模拟浏览器合法事件,如 click、mouseover、keypress 等等。

注意:此命令所模拟出来的,并不是产生真正的事件,而是直接调用了事件所绑定的函数,所以相应也就无法使用 Event 实例了。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
请双击我。
请双击我。
  • <div>请双击我。</div>
  • <input type="button" value="点击我会触发灰色区域中的双击事件" />

<div> CSS:

width:600px; height:150px; text-align:center; line-height:150px;

background:#bbb; border:1px solid #666;

  • $("div").toggle(
  • function(){$(this).css('background','#000')},
  • );

显示框架
显示框架
显示框架
显示框架