jquery 之 事件处理

1、点击

// $(".buttons").bind("click",function(){
   $(".buttons").click(function(){
             
     alert('You have clicked '+$(this).text()+ '  button!');         
    })


2、自动触发事件

$('#myform').trigger('submit');
$('.italic').trigger('click'); -- 自动触发class='italic'的click事件


3、利用事件对象的目标属性，事件对象的其中一个属性称为target（目标），可以用来查明那个元素发生了事件

$(".buttons").click(function(event){
    var $target = $(event.target);
    if($target.is('.bold')){
      alert('You have click the bold button!');
     }
    if($target.is('.italic')){
      alert('You have click the italic button!');
     }     
  })

4、unbind -- bind()的反向操作，从每一个匹配的元素中删除绑定的事件

--用于点击之后禁止按钮的点击事件

$(".buttons").click(function(){       
            alert('You have clicked '+$(this).text()+ '  button!'); 
            $(".buttons").unbind("click");

5、鼠标事件：

1）mousedown() --- 指鼠标指针在指定的元素上时按下鼠标键

2）mouseup()  -- 一旦鼠标指针在元素上并且释放鼠标键，就会触发mouseup事件。

3）mouseover() --- 一旦鼠标指针进入指定元素的区域，则发生了mouseover事件。

4）mouseout()    一旦鼠标指针离开指定的元素，就会发生mouseout事件。

5）查明哪个鼠标键按下：

event){
            
         if(event.button == 1){
          $("p.show").text("left mouse is pressed ");
       }
      if(event.button == 2){
          $("p.show").text("right mouse is pressed ");
       } 
            
 });

 

6)查找鼠标按下时的屏幕坐标

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
   
     $('img').mousedown( function(event){
          $('p').text('Mouse is clicked at horizen corordinate:'+event.screenX+ ' and at vertical coordinate: '+event.screenY);      
   })
   
  });
    
 </script>
 <body>
  <img src="test2.jpg" />
  <p></p>
 </body>


 

6、高亮显示文本      （设置样式style）    

$('p.msg').mouseover(function(){
       $(this).css({
             'background-color':'cyan',
              'font-weight':'bold',
              'color':'blue' -- 字体颜色
      })    })

 

7、随着鼠标移动使图像明亮或是模糊

$('img').mouseover(function(event){    
        $(this).css('opacity',0.4);//透明度
         $(this).css('width',function(){return $(this).width()+50;});//增加图片长度
  })
    $('img').mouseout(function(event){    
          $(this).css('opacity',1.0);
           $(this).css('width',function(){return $(this).width()-50;});

8、.hover(handler1,handler2) 悬停效果：

将两个事件处理程序附加到指定的元素。一个事件处理程序在鼠标指针进入元素时触发，另一事件处理程序在鼠标指针离开元素时触发。 

 

9、切换应用一个css类 toggleClass(class) 指定元素上要应用class类（尚未应用），或将要删除的css类（如果已经应用）

$(this).togggleClass('hover');

 

10、toggle()  此方法为指定的元素附加两个事件处理函数。

       第一个事件处理函数是在事件偶数次发生时被执行，而第二个事件处理函数是在事件奇数次发生时执行，从0开始计数。换句话说，在指定元素上第一次发生事件

      如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数

 

11、增加文本，删除文本

$(".add").click(function(){
          $('div').prepend("<p>hello nice to meet you </p>");  // 添加文本         })
   $(".remove").click(function(){
          $('p').remove(); //删除文本         })

 

12、返回顶部（锚点）

$('<a href="#topofpage"> return to top page   </a>').insertAfter('p');
   $('<a id="topofpage" name="topofpage">3333</a>').prependTo('body');

 

13、确定被按下的键

 1）

$("p").text("Character typed is :"+event.keyCode);  // 按下键的数字编码
    $("p").text("Character typed is :"+String.fromCharCode(event.keyCode));  //把按下键的数字代码转换为字符格式

 2）