JQuery（三）

短命女 2022-05-25 13:22 157阅读 0赞

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

（1）keydown() 事件：  
定义：完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开；  
当按钮被按下时，发生 keydown 事件；  
keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数；  
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生；  
提示：请使用 .which 属性来确定按下了哪个按键；  
  
实例：当按下按键时，改变文本域的颜色；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").keydown(function()\{  
    $("input").css("background-color","\#FFFFCC");  
  \});  
  $("input").keyup(function()\{  
    $("input").css("background-color","\#D6D6FF");  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>当发生keydown和keyup事件时，输入域会改变颜色。请试着在其中输入内容。</p>  
</body>  
  
.which属性：  
定义：which属性指示按了哪个键或按钮；  
语法：event.which；  
event：必需。规定要检查的事件。这个 event 参数来自事件绑定函数；  
实例：  
显示按了哪个键；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").keydown(function(event)\{  
    $("div").html("Key: " + event.which);  
  \});  
\});  
</script>  
<body>  
请随意键入一些字符：<input type="text" />  
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>  
</body>  
  
触发 keydown 事件：  
定义：触发被选元素的 keydown 事件；  
语法：$(selector).keydown();  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").keydown(function()\{  
    $("input").css("background-color","\#FFFFCC");  
  \});  
  $("input").keyup(function()\{  
    $("input").css("background-color","\#D6D6FF");  
  \});  
  $("\#btn1").click(function()\{  
    $("input").keydown();  
  \});    
  $("\#btn2").click(function()\{  
    $("input").keyup();  
  \});    
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>  
<p><button id="btn1">触发输入域的 keydown 事件</button></p>  
<p><button id="btn2">触发输入域的 keyup 事件</button></p>  
</body>  
  
将函数绑定到 keydown 事件：  
定义：规定当被选元素的 keydown 事件发生时运行的函数；  
语法：$(selector).keydown(function)；  
function：可选。规定当发生 keydown 事件时运行的函数；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").keydown(function()\{  
    $("input").css("background-color","\#FFFFCC");  
  \});  
  $("input").keyup(function()\{  
    $("input").css("background-color","\#D6D6FF");  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>  
</body>  
  
（2）keypress（）事件；  
定义：keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上；  
不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件；  
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数；  
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生；  
实例：计算在输入域中的按键次数；  
<script type="text/javascript">  
i=0;  
$(document).ready(function()\{  
  $("input").keypress(function()\{  
    $("span").text(i+=1);  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>Keypresses:<span>0</span></p>  
</body>  
  
触发keypress事件：  
定义：触发被选元素的 keypress 事件；  
语法：$(selector).keypress()；  
<script type="text/javascript">  
i=0;  
$(document).ready(function()\{  
  $("input").keypress(function()\{  
    $("span").text(i+=1);  
  \});  
  $("button").click(function()\{  
    $("input").keypress();  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>Keypresses:<span>0</span></p>  
<button>触发输入域的 keypress 事件</button>  
</body>  
  
将函数绑定到 keypress 事件：  
定义：规定当被选元素的 keypress 事件发生时运行的函数；  
语法：$(selector).keypress(function)；  
function：可选。规定当发生 keypress 事件时运行的函数；  
<script type="text/javascript">  
i=0;  
$(document).ready(function()\{  
  $("input").keypress(function()\{  
    $("span").text(i+=1);  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>Keypresses:<span>0</span></p>  
</body>  
  
（3）keyup()事件：  
定义：完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位；  
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上；  
keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数；  
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生；  
提示：请使用 .which 属性来确定按下了哪个按键；  
实例：当按下按键时，改变文本域的颜色；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").keydown(function()\{  
    $("input").css("background-color","\#FFFFCC");  
  \});  
  $("input").keyup(function()\{  
    $("input").css("background-color","\#D6D6FF");  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>  
</body>  
  
触发 keyup 事件：  
定义：触发被选元素的blur事件；  
语法：$(selector).keyup()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").keydown(function()\{  
    $("input").css("background-color","\#FFFFCC");  
  \});  
  $("input").keyup(function()\{  
    $("input").css("background-color","\#D6D6FF");  
  \});  
  $("\#btn1").click(function()\{  
    $("input").keydown();  
  \});    
  $("\#btn2").click(function()\{  
    $("input").keyup();  
  \});    
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>  
<p><button id="btn1">触发输入域的 keydown 事件</button></p>  
<p><button id="btn2">触发输入域的 keyup 事件</button></p>  
</body>  
  
将函数绑定到 keyup 事件：  
定义：规定当被选元素的 keydown 事件发生时运行的函数；  
语法：$(selector).keyup(function)；  
function：可选。规定当发生 keyup 事件时运行的函数；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("input").keydown(function()\{  
    $("input").css("background-color","\#FFFFCC");  
  \});  
  $("input").keyup(function()\{  
    $("input").css("background-color","\#D6D6FF");  
  \});  
\});  
</script>  
<body>  
Enter your name: <input type="text" />  
<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>  
</body>  
  
（4）live（）事件：  
定义：live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；  
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）；  
实例：当点击按钮时，隐藏或显示 p 元素；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").live("click",function()\{  
    $("p").slideToggle();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<button>请点击这里</button>  
</body>  
语法：$(selector).live(event,data,function)；  
event：必需。规定附加到元素的一个或多个事件；由空格分隔多个事件。必须是有效的事件；  
data：可选。规定传递到该函数的额外数据；  
function：必需。规定当事件发生时运行的函数；  
如何使用 live() 方法向尚未创建的元素添加事件处理器？  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").live("click",function()\{  
    $(this).slideToggle();  
  \});  
  $("button").click(function()\{  
    $("<p>This is a new paragraph.</p>").insertAfter("button");  
  \});  
\});  
</script>  
</head>  
<body>  
<p>这是一个段落。</p>  
<p>点击任意 p 元素会令其消失。包括本段落。</p>  
<button>在本按钮后面插入新的 p 元素</button>  
<p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p>  
</body>  
  
（5）load() 事件：  
定义：当指定的元素（及子元素）已加载时，会发生 load() 事件；  
该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）；  
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件；  
注释：还存在一个名为 load() 的 jQuery Ajax 方法，根据不同的参数而定；  
  
实例：当图像加载时，改变 div 元素的文本；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("img").load(function()\{  
    $("div").text("图像已加载");  
  \});  
\});  
</script>  
<body>  
<img src="/i/shanghai\_lupu\_bridge.jpg" />  
<div>图像正在加载中 ...</div>  
<p><b>注释：</b>根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。</p>  
</body>  
语法：$(selector).load(function)；  
function：必需。规定当指定元素加载完成时运行的函数；  
  
（6）mousedown() 事件：  
定义：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。  
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。  
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。  
  
实例：当按下鼠标按钮时，隐藏或显示元素；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").mousedown(function()\{  
    $("p").slideToggle();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<button>切换</button>  
</body>  
  
触发 mousedown 事件  
语法：$(selector).mousedown()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").mousedown(function()\{  
    $("div").slideToggle();  
  \});  
  $("\#mousePara").mouseover(function()\{  
    $("button").mousedown();  
  \});  
\});  
</script>  
</head>  
<body>  
<div>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
</div>  
<button>切换</button>  
<p id="mousePara">如果您把鼠标移动本段落上，会激活上面这个按钮的 mousedown 事件。</p>  
</body>  
  
将函数绑定到 mousedown 事件  
语法：$(selector).mousedown(function)  
function：可选。规定当发生 mousedown 事件时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").mousedown(function()\{  
    $("p").slideToggle();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<button>切换</button>  
</body>  
  
（7）mouseenter() 事件：  
定义：当鼠标指针穿过元素时，会发生 mouseenter 事件。  
该事件大多数时候会与 mouseleave 事件一起使用。  
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。  
注释：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。  
如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。请看下面例子的演示。  
亲自试一试：mouseenter 与 mouseover 的不同；  
<script type="text/javascript">  
x=0;  
y=0;  
$(document).ready(function()\{  
  $("div.over").mouseover(function()\{  
    $(".over span").text(x+=1);  
  \});  
  $("div.enter").mouseenter(function()\{  
    $(".enter span").text(y+=1);  
  \});  
\});  
</script>  
<body>  
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>  
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>  
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">  
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>  
</div>  
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">  
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>  
</div>  
</body>  
实例：当鼠标指针进入（穿过）元素时，改变元素的背景色；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseenter(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseleave(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到这个段落上。</p>  
</body>  
  
触发 mouseenter 事件  
语法：$(selector).mouseenter()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseenter(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseleave(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
  $("\#btn1").click(function()\{  
    $("p").mouseenter();  
  \});    
  $("\#btn2").click(function()\{  
    $("p").mouseleave();  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到段落上。</p>  
<button id="btn1">触发段落的 mouseenter 事件</button><br />  
<button id="btn2">触发段落的 mouseleave 事件</button>  
</body>  
  
将函数绑定到 mouseenter 事件  
语法：$(selector).mouseenter(function)  
function：可选。规定当发生 mouseenter 事件时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseenter(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseleave(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到这个段落上。</p>  
</body>  
  
（8）mouseleave() 方法：  
定义：当鼠标指针离开元素时，会发生 mouseleave 事件。  
该事件大多数时候会与 mouseenter 事件一起使用。  
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。  
注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。  
如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。  
亲自试一试：mouseleave 与 mouseout 的不同：  
<script type="text/javascript">  
x=0;  
y=0;  
$(document).ready(function()\{  
  $("div.out").mouseout(function()\{  
    $(".out span").text(x+=1);  
  \});  
  $("div.leave").mouseleave(function()\{  
    $(".leave span").text(y+=1);  
  \});  
\});  
</script>  
<body>  
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>  
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>  
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">  
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>  
</div>  
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">  
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>  
</div>  
</body>  
  
实例：当鼠标指针离开元素时，改变元素的背景色；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseenter(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseleave(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到这个段落上。</p>  
</body>  
  
触发 mouseleave 事件  
语法：$(selector).mouseleave()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseenter(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseleave(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
  $("\#btn1").click(function()\{  
    $("p").mouseenter();  
  \});    
  $("\#btn2").click(function()\{  
    $("p").mouseleave();  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到段落上。</p>  
<button id="btn1">触发段落的 mouseenter 事件</button><br />  
<button id="btn2">触发段落的 mouseleave 事件</button>  
</body>  
  
将函数绑定到 mouseleave 事件  
语法：$(selector).mouseleave(function)；  
function：可选。规定当发生 mouseleave 事件时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseenter(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseleave(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到这个段落上。</p>  
</body>  
  
（9）mousemove() 方法：  
定义：当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。  
mousemove() 方法触发 mousemove 事件，或规定当发生 mousemove 事件时运行的函数。  
注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件；  
实例：获得鼠标指针在页面中的位置；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(document).mousemove(function(e)\{  
    $("span").text(e.pageX + ", " + e.pageY);  
  \});  
\});  
</script>  
<body>  
<p>鼠标位于坐标： <span></span>.</p>  
</body>  
  
触发 mousemove 事件  
语法：$(selector).mousemove()；  
  
将函数绑定到 mousemove 事件  
语法：$(selector).mousemove(function)；  
function：可选。规定当发生 mousemove 事件时运行的函数；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(document).mousemove(function(e)\{  
    $("span").text(e.pageX + ", " + e.pageY);  
  \});  
\});  
</script>  
<body>  
<p>鼠标位于坐标： <span></span>.</p>  
</body>  
  
（10）mouseout() 事件：  
定义：当鼠标指针从元素上移开时，发生 mouseout 事件。  
该事件大多数时候会与 mouseover 事件一起使用。  
mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数。  
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。  
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。  
亲自试一试：mouseleave 与 mouseout 的不同  
<script type="text/javascript">  
x=0;  
y=0;  
$(document).ready(function()\{  
  $("div.out").mouseout(function()\{  
    $(".out span").text(x+=1);  
  \});  
  $("div.leave").mouseleave(function()\{  
    $(".leave span").text(y+=1);  
  \});  
\});  
</script>  
<body>  
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>  
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>  
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">  
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>  
</div>  
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">  
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>  
</div>  
</body>  
  
触发 mouseout 事件  
语法：$(selector).mouseout()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseover(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseout(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
  $("\#btn1").click(function()\{  
    $("p").mouseover();  
  \});    
  $("\#btn2").click(function()\{  
    $("p").mouseout();  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到段落上。</p>  
<button id="btn1">触发段落的 mouseover 事件</button><br />  
<button id="btn2">触发段落的 mouseout 事件</button>  
</body>  
  
将函数绑定到 mouseout 事件  
语法：$(selector).mouseout(function)；  
function：可选。规定当发生 mouseout 事件时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseover(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseout(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到这个段落上。</p>  
</body>  
  
（11）mouseover() 方法：  
定义：当鼠标指针位于元素上方时，会发生 mouseover 事件。  
该事件大多数时候会与 mouseout 事件一起使用。  
mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数。  
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。  
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。  
亲自试一试：mouseenter 与 mouseover 的不同  
<script type="text/javascript">  
x=0;  
y=0;  
$(document).ready(function()\{  
  $("div.over").mouseover(function()\{  
    $(".over span").text(x+=1);  
  \});  
  $("div.enter").mouseenter(function()\{  
    $(".enter span").text(y+=1);  
  \});  
\});  
</script>  
</head>  
<body>  
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>  
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>  
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">  
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>  
</div>  
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">  
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>  
</div>  
</body>  
实例：当鼠标指针位于元素上方时时，改变元素的背景色；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseover(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseout(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到这个段落上。</p>  
</body>  
  
触发 mouseover 事件  
语法：$(selector).mouseover()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseover(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseout(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
  $("\#btn1").click(function()\{  
    $("p").mouseover();  
  \});    
  $("\#btn2").click(function()\{  
    $("p").mouseout();  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到段落上。</p>  
<button id="btn1">触发段落的 mouseover 事件</button><br />  
<button id="btn2">触发段落的 mouseout 事件</button>  
</body>  
  
将函数绑定到 mouseover 事件  
语法：$(selector).mouseover(function)；  
function：可选。规定当发生 mouseover 事件时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("p").mouseover(function()\{  
    $("p").css("background-color","yellow");  
  \});  
  $("p").mouseout(function()\{  
    $("p").css("background-color","\#E9E9E4");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:\#E9E9E4">请把鼠标指针移动到这个段落上。</p>  
</body>  
  
（12）mouseup() 事件：  
定义：当在元素上放松鼠标按钮时，会发生 mouseup 事件  
与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。  
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数；  
  
实例：当松开鼠标按钮时，隐藏或显示元素；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").mouseup(function()\{  
    $("p").slideToggle();  
  \});  
\});  
</script>  
</head>  
<body>  
<p>这是一个段落。</p>  
<button>切换</button>  
</body>  
  
触发 mouseup 事件  
语法：$(selector).mouseup()；  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").mouseup(function()\{  
    $("div").slideToggle();  
  \});  
  $("\#mousePara").mouseover(function()\{  
    $("button").mouseup();  
  \});  
\});  
</script>  
<body>  
<div>  
<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
</div>  
<button>切换</button>  
<p id="mousePara">如果您把鼠标移动本段落上，会激活上面这个按钮的 mouseup 事件。</p>  
</body>  
  
将函数绑定到 mouseup 事件  
语法：$(selector).mouseup(function)；  
function：可选。规定当发生 mouseup 事件时运行的函数。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").mouseup(function()\{  
    $("p").slideToggle();  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<button>切换</button>  
</body>