JQuery（四）

系统管理员 2022-05-25 13:38 42阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

(1)one() 方法:  
定义：one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数；  
当使用 one() 方法时，每个元素只能运行一次事件处理器函数；  
  
实例：当点击 p 元素时，增加该元素的文本大小；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").one("click",function()\{  
    $(this).animate(\{fontSize:"+=6px"\});  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>  
</body>  
  
语法：$(selector).one(event,data,function)；  
event：必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件；  
data：可选。规定传递到函数的额外数据；  
function：必需。规定当事件发生时运行的函数。  
  
(2)ready() 方法:  
定义：当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。  
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。  
ready() 函数规定当 ready 事件发生时执行的代码。ready() 函数仅能用于当前文档，因此无需选择器。  
允许使用以下三种语法:  
语法1：$(document).ready(function)；  
语法2：$().ready(function)；  
语法3：$(function)；  
function：必需。规定当文档加载后要运行的函数；  
提示：ready() 函数不应与 <body οnlοad=""> 一起使用；  
实例：在文档加载后激活函数；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").slideToggle();  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Toggle</button>  
</body>  
  
(3)resize() 方法：  
定义：当调整浏览器窗口的大小时，发生 resize 事件。  
resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数；  
实例：对浏览器窗口调整大小进行计数：  
<script type="text/javascript">  
x=0;  
$(document).ready(function()\{  
$(window).resize(function() \{  
  $("span").text(x+=1);  
\});  
  
\});  
</script>  
<body>  
<p>窗口大小被调整过 <span>0</span> 次。</p>  
<p>请试着重新调整浏览器窗口的大小。</p>  
</body>  
  
触发 resize 事件  
语法：$(selector).resize();  
<script type="text/javascript">  
x=0;  
$(document).ready(function()\{  
  $(window).resize(function() \{  
    $("span").text(x+=1);  
  \});  
  $("button").click(function()\{  
    $(window).resize();  
  \});  
\});  
</script>  
<body>  
<p>窗口的大小被调整了 <span>0</span> 次。</p>  
<p>请试着调整浏览器窗口的大小。</p>  
<button>触发窗口的 resize 事件</button>  
</body>  
  
将函数绑定到 resize 事件  
语法：$(selector).resize(function)  
function：可选。规定当发生 resize 事件时运行的函数。  
<script type="text/javascript">  
x=0;  
$(document).ready(function()\{  
$(window).resize(function() \{  
  $("span").text(x+=1);  
\});  
  
\});  
</script>  
<body>  
<p>窗口大小被调整过 <span>0</span> 次。</p>  
<p>请试着重新调整浏览器窗口的大小。</p>  
</body>  
  
(4)scroll() 方法：  
定义：当用户滚动指定的元素时，会发生 scroll 事件。  
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。  
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。  
实例：对元素滚动的次数进行计数：  
<script type="text/javascript">  
x=0;  
$(document).ready(function()\{  
  $("div").scroll(function() \{  
    $("span").text(x+=1);  
  \});  
\});  
</script>  
<body>  
<p>请试着滚动 DIV 中的文本：</p>  
<div style="width:200px;height:100px;overflow:scroll;">  
text. text. text. text. text. text. text. text. text. text. text. text. text.  
text. text. text. text. text. text. text. text. text.  
<br /><br />  
text. text. text. text. text. text. text. text. text. text. text. text. text.  
text. text. text. text. text. text. text. text. text. text. text. text. text.  
text. text. text. text. text. text. text.</div>  
<p>滚动了 <span>0</span> 次。</p>  
</body>  
  
触发 scroll 事件  
语法：$(selector).scroll()；  
<script type="text/javascript">  
x=0;  
$(document).ready(function()\{  
  $("div").scroll(function() \{  
    $("span").text(x+=1);  
  \});  
  $("button").click(function()\{  
    $("div").scroll();  
  \});  
\});  
</script>  
<body>  
<p>请试着滚动 DIV 中的文本：</p>  
<div style="width:200px;height:100px;overflow:scroll;">text. text. text. text. text. text. text.  
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.  
<br /><br />  
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.  
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.  
text.</div>  
<p>滚动了 <span>0</span> 次。</p>  
<button>触发窗口的 scroll 事件</button>  
</body>  
  
将函数绑定到 scroll 事件  
语法：$(selector).scroll(function)；  
function：可选。规定当发生 scroll 事件时运行的函数。  
<script type="text/javascript">  
x=0;  
$(document).ready(function()\{  
  $("div").scroll(function() \{  
    $("span").text(x+=1);  
  \});  
\});  
</script>  
<body>  
<p>请试着滚动 DIV 中的文本：</p>  
<div style="width:200px;height:100px;overflow:scroll;">text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.  
<br /><br />  
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>  
<p>滚动了 <span>0</span> 次。</p>  
</body>  
  
(5)select() 方法:  
定义：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。  
select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。  
实例：在文本域后添加文本，以显示出提示文本：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").select(function()\{  
    $("input").after(" Text marked!");  
  \});  
\});  
</script>  
<body>  
<input type="text" name="FirstName" value="Hello World" />  
<p>请试着选取输入域中的文本，看看会发生什么。</p>  
</body>  
  
触发 select 事件  
语法：$(selector).select()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").select(function()\{  
    $("input").after(" Text marked!");  
  \});  
  $("button").click(function()\{  
    $("input").select();  
  \});    
\});  
</script>  
<body>  
<input type="text" name="FirstName" value="Hello World" />  
<p>请试着选取输入域中的文本，看看会发生什么。</p>  
<button>触发输入域中的 select 事件</button>  
</body>  
  
将函数绑定到 select 事件  
语法：$(selector).select(function)  
function：可选。规定当发生 select 事件时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").select(function()\{  
    $("input").after(" Text marked!");  
  \});  
\});  
</script>  
<body>  
<input type="text" name="FirstName" value="Hello World" />  
<p>请试着选取输入域中的文本，看看会发生什么。</p>  
</body>  
  
(6)submit() 方法：  
定义：当提交表单时，会发生 submit 事件。  
该事件只适用于表单元素。  
submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。  
实例：当提交表单时，显示警告框：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("form").submit(function(e)\{  
    alert("Submitted");  
  \});  
\});  
</script>  
<body>  
<form name="input" action="" method="get">  
First name:  
<input type="text" name="FirstName" value="Mickey" size="20">  
<br />Last name:  
<input type="text" name="LastName" value="Mouse" size="20">  
<br />  
<input type="submit" value="Submit">  
</form>  
</body>  
  
触发 submit 事件  
语法：$(selector).submit()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("form").submit(function(e)\{  
    alert("Submitted");  
  \});  
  $("button").click(function()\{  
    $("form").submit();  
  \});    
\});  
</script>  
<body>  
<form name="input" action="" method="get">  
First name:  
<input type="text" name="FirstName" value="Mickey" size="20">  
<br />Last name:  
<input type="text" name="LastName" value="Mouse" size="20">  
<br />  
<input type="submit" value="Submit">  
</form>  
<button>触发表单域的 submit 事件</button>  
</body>  
  
将函数绑定到 submit 事件  
语法：$(selector).submit(function)  
function：可选。规定当发生 submit 事件时运行的函数  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("form").submit(function(e)\{  
    alert("Submitted");  
  \});  
\});  
</script>  
<body>  
<form name="input" action="" method="get">  
First name:  
<input type="text" name="FirstName" value="Mickey" size="20">  
<br />Last name:  
<input type="text" name="LastName" value="Mouse" size="20">  
<br />  
<input type="submit" value="Submit">  
</form>  
</body>  
  
阻止提交按钮的默认 action；  
使用 preventDefault() 函数来阻止对表单的提交。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("form").submit(function(e)\{  
    e.preventDefault();  
    alert("Submit prevented");  
  \});  
\});  
</script>  
</head>  
<body>  
<form name="input" action="" method="get">  
First name:  
<input type="text" name="FirstName" value="Mickey" size="20">  
<br />Last name:  
<input type="text" name="LastName" value="Mouse" size="20">  
<br />  
<input type="submit" value="Submit">  
</form>  
</body>  
  
(7)toggle() 方法：  
定义：toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。  
该方法也可用于切换被选元素的 hide() 与 show() 方法。  
hide() 方法：  
定义：如果被选的元素已被显示，则隐藏该元素；  
实例：隐藏可见的 <p> 元素  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").hide();  
  \});  
  $(".btn2").click(function()\{  
  $("p").show();  
  \});  
\});  
</script>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Hide</button>  
<button class="btn2">Show</button>  
</body>  
  
语法：$(selector).hide(speed,callback)  
speed：可选。规定元素从可见到隐藏的速度。默认为 "0"。  
  
可能的值：  
    毫秒 （比如 1500）  
    "slow"  
    "normal"  
    "fast"  
  
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。  
callback：可选。hide 函数执行完之后，要执行的函数。  
除非设置了 speed 参数，否则不能设置该参数。  
  
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。  
使用 speed 参数  
使用 speed 参数来隐藏和显示元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").hide(1000);  
  \});  
  $(".btn2").click(function()\{  
  $("p").show(1000);  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Hide</button>  
<button class="btn2">Show</button>  
</body>  
  
使用 speed 和 callback 参数  
使用 speed 和 callback 参数来隐藏和显示元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").hide(1000);  
  \});  
  $(".btn2").click(function()\{  
  $("p").show(1000,showColor);  
  $("p").css("background-color","red");  
  \});  
\});  
function showColor()\{  
$("p").css("background-color","green");  
\}  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Hide</button>  
<button class="btn2">Show</button>  
</body>  
  
show() 方法：  
定义：如果被选元素已被隐藏，则显示这些元素：  
实例：显示出隐藏的 <p> 元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").hide();  
  \});  
  $(".btn2").click(function()\{  
  $("p").show();  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Hide</button>  
<button class="btn2">Show</button>  
</body>  
  
语法：$(selector).show(speed,callback);  
speed:可选。规定元素从隐藏到完全可见的速度。默认为 "0"。  
可能的值：  
  
    毫秒 （比如 1500）  
    "slow"  
    "normal"  
    "fast"  
在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。  
callback:可选。show 函数执行完之后，要执行的函数。  
除非设置了 speed 参数，否则不能设置该参数。  
  
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。  
注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。  
  
  
实例：切换不同的背景色：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").toggle(function()\{  
    $("body").css("background-color","green");\},  
    function()\{  
    $("body").css("background-color","red");\},  
    function()\{  
    $("body").css("background-color","yellow");\}  
  );  
\});  
</script>  
</head>  
<body>  
<button>请点击这里，来切换不同的背景颜色</button>  
</body>  
  
向 Toggle 事件绑定两个或更多函数  
当指定元素被点击时，在两个或多个函数之间轮流切换。  
如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。  
语法：$(selector).toggle(function1(),function2(),functionN(),...)  
function1()：必需。规定当元素在每偶数次被点击时要运行的函数。  
function2()：必需。规定当元素在每奇数次被点击时要运行的函数。  
functionN(),...：可选。规定需要切换的其他函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").toggle(function()\{  
    $("body").css("background-color","green");\},  
    function()\{  
    $("body").css("background-color","red");\},  
    function()\{  
    $("body").css("background-color","yellow");\}  
  );  
\});  
</script>  
<body>  
<button>请点击这里，来切换不同的背景颜色</button>  
</body>  
  
切换 Hide() 和 Show()  
检查每个元素是否可见。  
如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。  
语法：$(selector).toggle(speed,callback)  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").toggle(1000);  
  \});  
\});  
</script>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Toggle</button>  
</body>  
speed：可选。规定 hide/show 效果的速度。默认是 "0"。  
可能的值：  
    毫秒（比如 1500）  
    "slow"  
    "normal"  
    "fast"  
callback：可选。当 toggle() 方法完成时执行的函数。  
Callback 函数：  
Callback 函数在当前动画 100% 完成之后执行。  
jQuery 动画的问题  
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。  
例子：$("p").hide("slow")  
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。  
实例：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
  $("p").hide(1000);  
  \});  
\});  
</script>  
</head>  
<body>  
<button type="button">隐藏</button>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
</body>  
  
由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。  
为了避免这个情况，您可以以参数的形式添加 Callback 函数。  
  
jQuery Callback 函数  
当动画 100% 完成后，即调用 Callback 函数。  
典型的语法：$(selector).hide(speed,callback)  
callback 参数是一个在 hide 操作完成后被执行的函数。  
  
错误（没有 callback）  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
  $("p").hide(2000);  
  alert("The paragraph is now hidden");  
  \});  
\});  
</script>  
<body>  
<button type="button">Hide</button>  
<p>This is a paragraph with little content.</p>  
</body>  
  
正确（有 callback）  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
  $("p").hide(1000,function()\{  
    alert("The paragraph is now hidden");  
    \});  
  \});  
\});  
</script>  
<body>  
<button type="button">Hide</button>  
<p>This is a paragraph with little content.</p>  
</body>  
  
显示或隐藏元素：  
规定是否只显示或只隐藏所有匹配的元素。  
语法：$(selector).toggle(switch)  
witch：必需。布尔值，规定 toggle() 是否应只显示或只隐藏所有被选元素。  
true - 显示元素  
false - 隐藏元素  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").toggle(true);  
  \});  
\});  
</script>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<p style="display:none">This is another paragraph.</p>  
<p>把 switch 参数设置为 false，可以隐藏所有段落。</p>  
<button class="btn1">显示所有 p 元素</button>  
</body>  
  
（8） trigger() 方法：  
定义：trigger() 方法触发被选元素的指定事件类型。  
实例：触发 input 元素的 select 事件：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").select(function()\{  
    $("input").after("文本被选中！");  
  \});  
  $("button").click(function()\{  
    $("input").trigger("select");  
  \});  
\});  
</script>  
</head>  
<body>  
<input type="text" name="FirstName" value="Hello World" />  
<br />  
<button>激活 input 域的 select 事件</button>  
</body>  
  
触发事件  
规定被选元素要触发的事件。  
语法：$(selector).trigger(event,\[param1,param2,...\])  
event：必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。  
\[param1,param2,...\]：可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").select(function()\{  
    $("input").after("文本被选中！");  
  \});  
  $("button").click(function()\{  
    $("input").trigger("select");  
  \});  
\});  
</script>  
<body>  
<input type="text" name="FirstName" value="Hello World" />  
<br />  
<button>激活 input 域的 select 事件</button>  
</body>  
  
使用 Event 对象来触发事件  
规定使用事件对象的被选元素要触发的事件。  
语法：$(selector).trigger(eventObj)  
eventObj：必需。规定事件发生时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").select(function()\{  
    $("input").after("文本被选中！");  
  \});  
  var e = jQuery.Event("select");  
  $("button").click(function()\{  
    $("input").trigger(e);  
  \});  
\});  
</script>  
<body>  
<input type="text" name="FirstName" value="Hello World" />  
<br />  
<button>激活 input 域的 select 事件</button>  
</body>  
  
（9）triggerHandler() 方法:  
定义：  
triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。  
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。  
与 trigger() 方法相比的不同之处  
它不会引起事件（比如表单提交）的默认行为  
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。  
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。  
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。  
此外，如果没有处理程序被触发，则这个方法返回 undefined。  
实例：触发 input 元素的 select 事件：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").select(function()\{  
    $("input").after("发生 Input select 事件！");  
  \});  
  $("button").click(function()\{  
    $("input").triggerHandler("select");  
  \});  
\});  
</script>  
<body>  
<input type="text" name="FirstName" value="Hello World" />  
<br />  
<button>激活 input 域的 select 事件</button>  
<p>请注意，与 trigger() 方法不同，triggerHandler() 方法不会引起所发生事件的默认行为（文本不会被选中）。</p>  
</body>  
  
触发事件  
规定被选元素要触发的事件。  
语法：$(selector).triggerHandler(event,\[param1,param2,...\])  
event：必需。规定指定元素要触发的事件。  
\[param1,param2,...\]：可选。传递到事件处理程序的额外参数。  
  
（10）unbind() 方法：  
定义：unbind() 方法移除被选元素的事件处理程序。  
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。  
ubind() 适用于任何通过 jQuery 附加的事件处理程序。  
实例：移除所有 p 元素的事件处理器：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").click(function()\{  
    $(this).slideToggle();  
  \});  
  $("button").click(function()\{  
    $("p").unbind();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落可以令其消失。包括本段落。</p>  
<button>删除 p 元素的事件处理器</button>  
</body>  
  
取消绑定元素的事件处理程序和函数  
规定从指定元素上删除的一个或多个事件处理程序。  
如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。  
语法：$(selector).unbind(event,function)  
event：可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。  
function：可选。规定从元素的指定事件取消绑定的函数名。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").click(function()\{  
    $(this).slideToggle();  
  \});  
  $("button").click(function()\{  
    $("p").unbind();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落可以令其消失。包括本段落。</p>  
<button>删除 p 元素的事件处理器</button>  
</body>  
  
使用 Event 对象来取消绑定事件处理程序  
规定要删除的事件对象。用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。  
如果未规定参数，则 unbind() 方法会删除指定元素的所有事件处理程序。  
语法：$(selector).unbind(eventObj)  
eventObj：可选。规定要使用的事件对象。这个 eventObj 参数来自事件绑定函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  var x=0;  
  $("p").click(function(e)\{  
    $("p").animate(\{fontSize:"+=5px"\});  
    x++;  
    if (x>=2)  
      \{  
      $(this).unbind(e);  
      \}  
  \});  
\});  
</script>  
<body>  
<p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p>  
</body>  
  
  
取消绑定特定的函数  
如何使用 unbind() 方法取消绑定元素指定事件的具体函数。  
<script type="text/javascript">  
function alertMe()\{  
alert("Hello World!");  
\}  
  
$(document).ready(function()\{  
  $("p").click(alertMe);  
  $("button").click(function()\{  
    $("p").unbind("click",alertMe);  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落可以触发一个提示框。包括本段落。</p>  
<button>从 p 元素的 click 事件删除提示框函数</button>  
</body>  
  
(11)undelegate() 方法:  
定义：undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。  
实例：从所有元素删除由 delegate() 方法添加的所有事件处理器：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("body").delegate("p","click",function()\{  
    $(this).slideToggle();  
  \});  
  $("button").click(function()\{  
    $("body").undelegate();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落可以令其消失。包括本段落。</p>  
<button>从所有元素删除由 delegate() 方法添加的事件处理器</button>  
</body>  
语法：$(selector).undelegate(selector,event,function)  
selector：可选。规定需要删除事件处理程序的选择器。  
event：可选。规定需要删除处理函数的一个或多个事件类型。  
function：可选。规定要删除的具体事件处理函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").click(function()\{  
    $(this).slideToggle();  
  \});  
  $("button").click(function()\{  
    $("p").unbind();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落可以令其消失。包括本段落。</p>  
<button>删除 p 元素的事件处理器</button>  
</body>  
  
删除事件处理程序，由 delegate() 添加，来自具体选择器  
如何使用 undelegate() 方法从指定元素删除所有事件处理程序。  
<script type="text/javascript">  
function changeSize()\{  
  $(this).animate(\{fontSize:"+=3px"\});  
  \}  
function changeSpacing()\{  
  $(this).animate(\{letterSpacing:"+=2px"\});  
  \}  
  
$(document).ready(function()\{  
  $("body").delegate("p","click",changeSize);  
  $("body").delegate("p","click",changeSpacing);  
  $("button").click(function()\{  
    $("body").undelegate("p");  
  \});  
\});  
</script>  
</head>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>  
<button>从 p 元素删除由 delegate() 方法添加的所有事件处理器</button>  
</body>  
  
删除指定事件类型的事件处理程序，由 delegate() 添加，来自指定元素  
如何使用 undelegate() 方法从指定元素删除具体事件类型的所有事件处理程序。  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
function changeSize()\{  
  $(this).animate(\{fontSize:"+=3px"\});  
  \}  
function changeSpacing()\{  
  $(this).animate(\{letterSpacing:"+=2px"\});  
  \}  
  
$(document).ready(function()\{  
  $("body").delegate("p","click",changeSize);  
  $("body").delegate("p","click",changeSpacing);  
  $("button").click(function()\{  
    $("body").undelegate("p","click");  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>  
<button>从 p 元素删除由 delegate() 方法添加的所有 "click" 事件处理器</button>  
</body>  
  
删除由 delegate() 添加的具体函数  
如何使用 undelegate() 方法为事件处理程序删除来自特定事件类型的特定函数。  
<script type="text/javascript">  
function changeSize()  
  \{  
  $(this).animate(\{fontSize:"+=3px"\});  
  \}  
function changeSpacing()  
  \{  
  $(this).animate(\{letterSpacing:"+=2px"\});  
  \}  
  
$(document).ready(function()\{  
  $("body").delegate("p","click",changeSize);  
  $("body").delegate("p","click",changeSpacing);  
  $("button").click(function()\{  
    $("body").undelegate("p","click",changeSize);  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<p>点击任何段落增加字体大小和字符间距。包括本段落。</p>  
<button>从 p 元素删除由 delegate() 方法添加的事件处理器 changeSize()</button>  
</body>      
  
（12）unload 属性：  
定义：当用户离开页面时，会发生 unload 事件。  
具体来说，当发生以下情况时，会发出 unload 事件：  
    点击某个离开页面的链接  
    在地址栏中键入了新的 URL  
    使用前进或后退按钮  
    关闭浏览器  
    重新加载页面  
unload() 方法将事件处理程序绑定到 unload 事件。  
unload() 方法只应用于 window 对象。  
语法：event.unload(function)  
function：必需。规定当触发 unload 事件时运行的函数。  
实例：当用户点击链接离开本页时，弹出一个消息框：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(window).unload(function()\{  
    alert("再见！");  
  \});  
\});  
</script>  
</head>  
<body>  
<p>当您点击 <a href="http://w3school.com.cn">这个链接</a> 时，或者关闭窗口，会触发一个警告框。</p>  
</body>