jQuery事件操作

不懂事件操作，jQuery等于白学

页面事件

javascript中

window.onload = function(){}

jQuery中
//写法1：

$(document).ready(function(){})

//写法2：

jQuery(document).ready(function(){})

//写法3：建议这种写法

$(function(){})

//写法4：

jQuery(function(){})

区别：window.onload只能调用一次，如果多次调用，则只会执行最后一个
//解决方法

window.addEventListener("load", function(){}, false);

jQuery中，ready事件是可以多次执行的。从这里也可以看出jQuery近乎完美的兼容性。

鼠标事件

click 单击事件
mouseover 移入事件
mouseout 移出事件
mousedown 按下事件
mouseup 松开事件
mousemove 鼠标移动事件
jQuery事件比JavaScript事件只是少了“on”前缀。

$(function () {
            $("div").click(function(){
                alert("玩我么？")
            })
        })

click()方法自动触发点击事件实现图片轮播

$(function () {
            $("#btn").click(function () {
                alert("欢迎来到绿叶学习网！");
            }).click();
        })

mouseover和mouseout实现下拉菜单展开收缩功能
///
jQuery中，如果对同一个对象进行多种操作，则可以使用链式调用的语法。

$("div").mouseover(function(){$(this).css("color", "red");
}).mouseout(function () {$(this).css("color", "black");})

在实际开发中，mousedown、mouseup和mousemove经常用来配合实现拖拽、抛掷等效果

键盘事件

keydown和keyup

$("#txt").keyup(function(){
                var str = $(this).val();
                $("#num").text(str.length);
})//实现实时统计字符的长度

键盘事件一般有两个用途：**表单操作和动画控制。**对于动画控制，常见于游戏开发。

表单事件

focus与blur
focus表示获取焦点时触发的事件，blur表示失去焦点时触发的事件，两者是相反操作。
只有以下两种html元素有焦点事件
表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
超链接

 $("#search").focus(function(){
                if($(this).val() == txt){
                    $(this).val("");
                }
   })//focus()实现改变文本框内的默认值

$(function(){
            $("#txt").focus();
        })//focus()作为方法，实现打开网页自动获取焦点

select()

选中“单行文本框”或“多行文本框”中的内容时，就会触发select事件。

 $(function () {
            $("#search").click(function(){
                $(this).select();
            })
        })//作为方法，实现自动选中文本框中的所有内容

change()

<p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
 <label><input type="checkbox" class="fruit" value="苹果" />苹果</label>
  $(function () {
            $("#selectAll").change(function(){
                var bool = $(this).prop("checked");
                if(bool){
                    $(".fruit").prop("checked","checked");
                }else{
                    $(".fruit").removeProp("checked");
                }
            })
        })//实现复选框的全选与反选

<select>
        <option value="http://wwww.baidu.com">百度</option>
        <option value="http://www.qq.com">腾讯</option>
</select>
 $(function () {
            $("select").change(function(){
                var link = $(":selected").val();
                window.open(link);
            })
        })//实现下拉菜单选中时跳转网页

编辑事件

右键操作。

contextmenu事件

 $(function () {
            $("body").contextmenu(function(){
                return false;
            })
        })//禁用鼠标右键

  $(function () {
            $("div").contextmenu(function(){
                $(this).css("background-color", "hotpink");
            })
        })//点击右键切换颜色

滚动事件

拉动页面滚动条时触发的事件。

$().scroll(function(){})

///

$(function () {
            //获取box2距离顶部的距离
            var top = $("#box2").offset().top;
            //根据滚动距离判断定位
            $(window).scroll(function () {
                //当滚动条距离大于box2距离顶部的距离时，设置固定定位
                if ($(this).scrollTop() > top) {
                    $("#box2").css({ "position": "fixed", "top": "0" });
                }
                //当滚动条距离小于box2距离顶部的距离时，设置相对定位
                else {
                    $("#box2").css({ "position": "relative" });
                }
            });
        })//实现元素固定在窗口某个位置

offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
/

$(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $("div").css("display", "inline-block");
                }
                else {
                    $("div").css("display", "none");
                }
            })；
            $("div").click(function () {
                $("html,body").scrollTop(0);
            }); /*实现点击滚动回顶部*/