JQuery事件支持
JQuery 拥有比较简洁的事件支持，我们只需要写少量JS代码，就可以处理页面的事件。以下为一个事件实例：
<html> <head> <script type="text/javascript" src="scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(function(){ $('#vstar').onmouseover = function(event) { say('Whee!'); } }); function say(text) { $('#console').append('<div>'+new Date()+' '+text+'</div>'); } </script> </head> <body> <div id="vstar">JUST HI</div> <div id="console"></div> </body> </html>
这里只要我们的鼠标一移动到id为vstar的DIV上，一但激活onmouseover事件，就会立刻在id为console的DIV后面被连接（使用append方法）上<div>'+new Date()+' '+text+'</div>。
从这个例子中可以看出，因为有了JQuery强大的选择器，包括一些实用方法，使得这个原本繁杂的JS代码，变的简洁了许多。而且此代码还可以继续的缩减。
现在有了JQuery，我们可以让事件处理变的更简单有效。我们可以建立事件处理程序而无须浏览器特定代码。
我们可以使用BIND（）方法，可以在DOM元素上建立事件处理程序。如：
$("#img").bind('click',function(event){alert("Hi,i am here");});
利用JQuery选择器，选择了id为img的DOM元素，利用bind方法，只要一对此ID为img的DOM元素，一进行click事件，立刻就弹出Hi,i am here。
比如以下HTML：
<html> <head> <script type="text/javascript" src="scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(function(){ $('#vstar') .bind('click',function(event) { say('Whee once!'); }) .bind('click',function(event) { say('Whee twice!'); }) .bind('click',function(event) { say('Whee three times!'); }); }); function say(text) { $('#console').append('<div>'+text+'</div>'); } </script> </head> <body> <img id="vstar" src="vstar.jpg"/> <div id="console"></div> </body> </html>
我们使用了JQUERY事件模型，而无需二级DOM模型。
下面的例子是使用JQuery的toggle()方法，每次click事件发生，就会互换。toggle(funtion1,funtion2)：
<html> <head> <script type="text/javascript" src="scripts/jquery-1.2.1.js"> </script> <script type="text/javascript"> $(function(){ $('#vstar').toggle( function(event) { $(event.target).css('opacity',0.4); }, function(event) { $(event.target).css('opacity',1.0); } ); }); </script> </head> <body> <img id="vstar" src="vstar.jpg"/> </body> </html>
JQuery监控Hover事件的例子：
<html> <head> <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script> <script type="text/javascript"> function report(event) { $('#console').append('<div>'+event.type+'</div>'); } $(function(){ $('#outer1') .bind('mouseover',report) .bind('mouseout',report); $('#outer2').hover(report,report); }); </script> </head> <body> <div id="outer1"> Outer 1 <divid="inner1">Inner 1</div> </div> <divid="outer2"> Outer 2 <divid="inner2">Inner 2</div> </div> <div id="console"></div> </body> </html>
这里有了一个新方法，hover(overListener,outListener)，它几乎可以代替以bind('evenName',function)这种显示的检测方法。hover()可以自动监听mouseover或mouseout。
页:
[1]