JQuery事件支持

最新推荐文章于 2022-09-17 15:05:42 发布

NationSoftware

最新推荐文章于 2022-09-17 15:05:42 发布

阅读量141

点赞数

分类专栏： JavaScript /JS框架/CSS/AJAX 文章标签： jQuery CSS 浏览器 HTML ViewUI

JavaScript /JS框架/CSS/AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery 拥有比较简洁的事件支持，我们只需要写少量JS代码，就可以处理页面的事件。

以下为一个事件实例：

<html> 
  <head> 
    <script type="text/javascript" src="scripts/jquery-1.2.1.js"> 
    </script> 
    <script type="text/javascript"> 
      $(function(){
        $('#vstar')[0].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
      <div  id="inner1">Inner 1</div> 
    </div> 
    <div  id="outer2"> 
      Outer 2
      <div  id="inner2">Inner 2</div> 
    </div> 
    <div id="console"></div> 
  </body> 
</html>