一、常用事件

1-1 click()

单击事件

  1. $("p").click(function(){
  2.   $(this).hide();
  3. });

1-2 dblclick()

双击事件

  1. $("p").dblclick(function(){
  2.   $(this).hide();
  3. });

1-3 mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

  1. $("#p1").mouseenter(function(){
  2.     alert('您的鼠标移到了 id="p1" 的元素上!');
  3. });

1-4 mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

  1. $("#p1").mouseleave(function(){
  2.     alert("再见，您的鼠标离开了该段落。");
  3. });

1-5 hover()

hover()方法用于模拟光标悬停事件。

  1. $("#p1").hover(
  2.     function(){
  3.         alert("你进入了 p1!");
  4.     },
  5.     function(){
  6.         alert("拜拜! 现在你离开了 p1!");
  7.     }
  8. );

二、触发事件

  1. $(selector).trigger('click');  //通过代码触发click事件(模拟点击)
  3. <input type="button" value="第一个按钮" id="btn1"/>
  4. <input type="button" value="第二个按钮" id="btn2"/>
  5. $(function () {
  6.     $("#btn1").click(function () {
  7.         $(this).css("backgroundColor","red");
  8.     });
  9.     //点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
  10.     $("#btn2").click(function () {
  11.         //触发事件
  12.         //$("#btn1").click();
  13.         //trigger()方法中需要写上触发事件的名字
  14.         $("#btn1").trigger("click");//触发事件
  15.     });
  16. });

三、事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

  1. // screenX和screenY    对应屏幕最左上角的值
  2. // clientX和clientY    距离可视区左上角的位置（忽视滚动条）
  3. // pageX和pageY        距离页面最顶部的左上角的位置（会计算滚动条的距离）
  5. // event.keyCode     按下的键盘代码
  6. // event.data         存储绑定事件时传递的附加数据
  8. // event.stopPropagation()    阻止事件冒泡行为
  9. // event.preventDefault()    阻止浏览器默认行为
  10. // return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
  1. //阻止事件冒泡
  2. <script type="text/javascript">
  3.     $(document).ready(function(){
  4.     $("#innerDiv").click(function(event){
  5.         alert("inner");
  6.         //阻止事件冒泡方式一：
  7.         //return false;
  9.         //阻止事件冒泡方式二：
  10.         event.stopPropagation();
  11.     });
  12.     $("#outerDiv").click(function(){
  13.         alert("outerDiv");
  14.     });
  15. });
  16. </script>
  19. //阻止默认事件
  20. $(function(){
  21.     //href 就是a标签的默认行为，现在想弹出提示框后阻止默认行为
  22.     $("a").click(function(event){
  23.         alert("aaa");
  24.         //阻止默认行为方式1：
  25.         //return false;
  27.         //阻止默认行为方式2：
  28.         event.preventDefault();
  29.     });
  30. });

四、jQuery的data方法

jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。

  1. ##1.基本使用：
  2. $("div").data("key","value");
  3. $("div").data("key");
  4. $("div").removeData("key");
  6. ##2.原理：
  7. jQuery的data方法并不是将数据直接放到当前的jQuery对象或者dom对象上的，而是通过jQuery.cache对象来缓存的数据。
  9. 具体上来说：
  10. 1.先给dom对象新增一个jquery.expando属性，这个属性的值为id(id是从1开始递增的)
  11. 2.而id又作为jQuery.cache的属性（key）。这样dom对象就与jQuery.cache建立了联系。

jquerycache.png

五、案例

5-1 替换a标签的默认提示

  1. <script type="text/javascript">
  2.     $(function(){
  3.     //替换提示1  提示2  默认的提示文字
  4.     $(".mytooltip").mouseover(function(event){
  5.         //获取绑定的数据
  6.         var title = $(this).data("mytitle");
  7.         //如果第一次移到标签上面
  8.         if(!title){
  9.             //获取title属性值
  10.             title = $(this).attr("title");
  11.             //移除默认的提示
  12.             $(this).removeAttr("title");
  13.             //缓存数据
  14.             $(this).data("mytitle",title);
  15.         }
  16.         //创建提示的div
  17.         var $new = $("<div id='tooltip'>XXX</div>");
  18.         $new.html(title);
  19.         //设置位置
  20.         //$new.offset({"left":0,"top":0});
  21.         $new.offset({"left":event.pageX+5,"top":event.pageY-20});
  22.         //追加到body并显示
  23.         $new.appendTo("body").show();
  24.     }).mouseout(function(){
  25.         $("#tooltip").remove();
  26.     }).mousemove(function(event){
  27.         $("#tooltip").offset({"left":event.pageX+5,"top":event.pageY-20});
  28.     });
  29. });
  30. </script>

5-2 图片提示

  1. $(function(){
  2.     var x = 10;
  3.     var y = 20;
  4.     var href;
  6.     $("a[class=tooltip]").mouseover(function(e){
  7.         //1 获取对应标签的自带提示
  8.         //var title = $("a[class=tooltip]").attr("title");
  9.         //this代表的是DOM对象(页面中的元素)
  10.         href = this.href;
  11.         //删除自带提示
  12.         this.href = "";
  13.         //2 创建标签用于自定义提示
  14.         var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>");
  15.         //3 将自定义提示的标签，添加到body标签下
  16.         $("body").append($div);
  17.         //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)
  18.         $("#tooltip").css({
  19.             "top" : e.pageY + y + "px",
  20.             "left" : e.pageX + x + "px"
  21.         }).show(1000);
  22.     }).mouseout(function(){
  23.         this.href = href;
  24.         $("#tooltip").remove();
  25.     }).mousemove(function(e){
  26.         $("#tooltip").css({
  27.             "top" : e.pageY + y + "px",
  28.             "left" : e.pageX + x + "px"
  29.         });
  30.     });
  31. });