JQuery学习记录——事件

1、页面载入事件：$（document）.ready（function（）{}），可简写为：

$（function（）{

 

}）

$(document).ready()方法：在页面所有DOM元素（不包括图片等外部文件）加载完成就可以执行，此时我们就可以操作DOM。

window.onload方法：在页面所有DOM元素（包括图片等外部文件）加载完成之后才执行，此时我们才可以操作DOM。也就是说，除了元素加载完成（说白了就是HTML代码），元素所关联的文件（如img元素就关联了图片）也必须加载完成之后，才会执行window.onload方法。

 

2、鼠标事件

（1）click()：鼠标点击事件，任何元素我们都可以为它添加单击事件！

（2）mouseover()，mouseout()：鼠标移入和移出事件。

（3）mouseenter()，mouseleave()：鼠标移入和移出事件。

         mouseenter事件在鼠标进入某个元素的时候就会触发，这个跟mouseover事件相似。但是这两者也有区别：mouseover事件在鼠标移入“所选元素及其后代子元素”时都会触发；mouseenter事件只有鼠标移入“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。

        mouseleave事件在鼠标移出某个元素的时候就会触发，这个跟mouseout事件相似。但是这两者也有区别：mouseout事件在鼠标移出“所选元素及其后代子元素”时都会触发；mouseleave事件只有鼠标移出“所选元素”才会触发，如果鼠标仅仅移入“所选元素的后代子元素”的时候，并不会触发。

（4）mousedown()，mouseup()：鼠标按下和松开事件

注意点：

$("h3").mousedown(function () {

    $("p").slideToggle();

});

slideToggle方法通过使用滑动效果（高度变化）来切换元素的可见状态，实现动画化。

 

3、键盘事件

（1）keypress()：keypress事件是在键盘上的某个键被按下到松开“整个过程”中触发的事件。

demo：获取按下的键的字符

$(function () {

  $(window).keypress(function (event) {

  document.write("你输入的字符是：" + String.fromCharCode(event.which));

  });

})

其中event参数用于获取事件的基本信息，event.which用于获取按下了哪个键或按钮，返回的是某个键的ASCII码。String.fromCharCode()方法表示将ASCII码转换为字符。

（2）keydown()：在键盘的按键被按下时触发。与keypress()区别如下：

• keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown无论是按下“字符键”还是“功能键”都会触发；
• 按下“字符键”会同时触发keydown和keypress这2个事件，但是这2个事件有一定顺序：keydown>keypress；

（3）keyup()：keyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件。

 keyup在实际开发也常常用到，比如在用户注册登录中，判断密码强度、判断两次输入密码是否一致等地方就用到keyup事件。

 $(function () {

    $("#txt").keyup(function () {

         var str = $(this).val().toString();

         $("#num").text(str.length);

 })

})

 

4、表单事件

（1）focus()和blur()：focus表示获取焦点触发的事件，blur表示失去焦点触发的事件。

具有获得焦点和失去焦点事件的元素有3个（一定要记住啊）：

• （1）单行文本框text；
• （2）多行文本框textarea；
• （3）下拉列表select；

（2）change()：当用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。

具有获得onchange事件的元素有3个：

• （1）单行文本框text；
• （2）多行文本框textarea；
• （3）下拉列表select；

（3）select()：当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。select事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。

 

5、滚动事件

滚动事件：scroll()：

demo：

 /*根据滚动距离判断按钮是否显示或隐藏*/

 $(window).scroll(function () {

     if ($(this).scrollTop() > 300) {

           $("#back-to-top").css("display","inline-block");

       }

       else {

         $("#back-to-top").css("display","none");

       }

});

/*实现点击滚动回顶部*/

$("#back-to-top").click(function () {

      $("html,body").scrollTop(0);

});

 

6、绑定事件on()

on()：在文档加载完成后，我们可以使用on()方法为某些元素绑定一个事件或者多个事件。

语法：$().on(type , fn)

type为必选参数，表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。注意一下，这里type是一个字符串。

fn为必选参数，表示事件的处理函数。

demo：为已有元素添加事件：

$(function () {

            $("#btn").on("click", function () {

                alert("绿叶学习网jQuery入门教程！");

            })

        })

我们可以得出一个结论：在jQuery中，如果我们想要为某些元素添加某个事件来完成操作，可以有2种方法：

• （1）基本事件；
• （2）绑定事件；

基本事件，指的是使用click()、dbclick()这种“事件方法”。而绑定事件，指的是使用on()方法。

demo：绑定未来创建的元素：

$(function () {

            var $btn = $('<input id="btn" type="button" value="按钮"/>');

            $($btn).appendTo("body");

            $("#btn").on("click", function () {

                alert("绿叶学习网jQuery入门教程！");

            });

        })

在jQuery中，如果我们想要绑定事件，仅仅使用on()方法就可以完美兼容各大浏览器，而不需要像JavaScript那样写上一大堆兼容代码。这里再次展示了jQuery完美的兼容性。

 

7、解绑事件off()：

语法：$().off(type)

off()方法不仅可以解绑“使用绑定事件所添加的事件”，还可以解绑“使用基本事件所添加的事件”。

 

8、合成事件hover()：

语法：$().hover(fn1,fn2)

参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。

demo：

$(function () {

            $("h3").hover(function () {

                $("#content").css("display","block");

            }, function () {

                $("#content").css("display", "none");

            });

        })

hover()方法，准确来说是替代jQuery中的mouseenter()和mouseleave()，而不是替代mouseover()和mouseout()。

 

9、一次事件one()

语法：$().one(type , fn)

type表示事件类型，例如单击事件是“click”，双击事件是“dbclick”，以此类推。这里的type是一个字符串。

fn表示事件的处理函数。