jquery 之事件处理

最新推荐文章于 2023-05-31 16:56:02 发布

snn1410

最新推荐文章于 2023-05-31 16:56:02 发布

阅读量631

点赞数

分类专栏： jquery 文章标签： jquery function button class css div

本文链接：https://blog.csdn.net/snn1410/article/details/7868848

版权

jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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）查明哪个鼠标键按下：

$('.buttons').mousedown( function(event){

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

});

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

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）

snn1410

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 之事件处理

jquery 之事件处理1、点击 // $(".buttons").bind("click",function(){ $(".buttons").click(function(){ alert('You have clicked '+$(this).text()+ ' button!'); }) 2、自动触发
复制链接

扫一扫