jQuery来了--事件

事件

jQuery是为事件处理特别设计的

事件的定义：页面对不同访问者的响应

事件处理程序：当HTML中发生某些事件时所调用的方法

常见的事件：

jQuery事件方法语法：

$("选择器").方法名(function(){
    //事件触发后执行的代码
});

常用的jQuery事件方法：

某个方法触发某个事件时，会运行 规定此事件发生时的函数

1.$(document).ready()

$(document).ready()方法：在文档完全加载完后执行函数

$(document).ready(function(){
   $("选择器").方法名(function(){
   //执行函数;
   //执行函数;
   //执行函数;
   });
  $("选择器").方法名(function(){
   //执行函数;
   //执行函数;
   //执行函数;
   });
});

2.click()

单击元素，发生click事件

例.

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

3.dblclick()

双击元素，发生dblclick事件

例.

<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

4.mouseenter()

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

例.

<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
  });
});
</script>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

5.mouseleave()

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

例.

<script>
$(document).ready(function(){
   $("p1").mouseleave(function(){
        alert("再见，您的鼠标离开了该段落。");
   });
});
</script>

<p id="p1">这是一个段落。</p>

6.mousedown()

鼠标指针移动到元素上，并按下鼠标按键时，会发生mousedown事件

例.

<script>
$(document).ready(function(){
   $("#p1").mousedown(function(){
      alert("鼠标在该段落上按下！");
   });
});
</script>

<p id="p1">这是一个段落</p>

7.mouseup()

当在元素上松开鼠标按钮时，会发生mouseup事件

例.

<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});
</script>

<p id="p1">这是一个段落。</p>

8.hover()

模拟光标悬停事件

例.

<script>
$(document).ready(function(){
    $("#p1").hover(
        function(){
            alert("你进入了 p1!");   //鼠标移动到元素上时，触发此函数（mouseenter事件）
        },
        function(){
            alert("拜拜! 现在你离开了 p1!");    //鼠标离开元素上时，触发此函数（mouseleave事件）
        }
    );
});
</script>

<p id="p1">这是一个段落。</p>

9.focus()

当元素获得焦点时，发生focus事件

获得焦点的方式：鼠标点击选中元素或通过tab键定位到元素时

10.blur()

当元素失去焦点时，发生blur事件

例.

<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

运行结果：