jquery基础之常用事件及jquery扩展

jquery事件：

　　常用事件：

　　focus ([[data],fn])              　　　　获取焦点
　　blur ([[data],fn])                  　　失去焦点
　　例如：搜索框未获得焦点时里边会有默认值，获取焦点之后默认值清空，移除时再次得到默认值
　　change  ([[data],fn])             　　　　　 当select下拉框中的元素发生改变的时候触发change事件(select例子)
　　例如：select响应
　　click  ([[data],fn]) 　　　　　　　　　   点击事件
　　dblclick  ([[data],fn]) 　　　　　　　　  鼠标双击事件
　　scroll([[data],fn]) 　　　　　　　　　    滚动
　　submit([[data],fn])　　　　　　　　　　    提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" value="一加五手机" ><button>搜索</button>
<script>
    $("input").focus(function () {
        var data=$("input").val()
        $("input").val("")
        $(this).attr("data-show",data)
    })
    $("input").blur(function () {
        $(this).val($(this).attr("data-show"))
    })
</script>
</body>
</html>

获取移除焦点代码示例

　　不怎么常用：

　error([[data],fn])
　　focusin([data],fn)
　　focusout([data],fn)
　　keydown([[data],fn])　　　　　　　　 按下
　　keypress([[data],fn]) 　　　　　　　　按
　　keyup([[data],fn])　　　　　　　　　  键松开
　　mousedown([[data],fn])　　　　　　　鼠标按下
　　mouseenter([[data],fn]) 　　　　　　   鼠标移进去
　　mouseleave([[data],fn]) 　　　　　　   鼠标离开：只有鼠标离开被选元素的时候，才会触发mouseleave事件
　　mousemove([[data],fn]) 　　　　　　   鼠标移动
　　mouseout([[data],fn]) 　　　　　　　　鼠标离开：无论鼠标离开被选元素还是任何子元素，都会触发mouseout事件
　　mouseover([[data],fn] 　　　　　　　　鼠标悬停
　　mouseup([[data],fn]) 　　　　　　　　 鼠标弹起
　　resize([[data],fn])　　　　　　　　　　元素窗口发生变化
　　select([[data],fn])
　　unload([[data],fn])

　　补充：
　　　　文档加载完之后才能绑定事件（大部分情况下）
　　　　简写：
　　　　$(function($){
　　　　　//绑定事件
　　　　})

jquery扩展：（自己写一个类似jquery的js文件）:

 //扩展方法1：(给juquery添加扩展):$.xxx()

$.extend({
        "GDP":function () {
            console.log("戴帽子")
        }
    });
//扩展方法2：(给jquery对象添加扩展方法):$("").xxx()
    
$.fn.extend({
        "BJG":function(){
            console.log("英语八级就是牛逼")
        }
    });

　　这样的话再定义一个func1方法，那在任意方法内都能调用到，可能会产生冲突，为了使func1不公共调用，加上匿名函数，将func1作为私有的方法：
　　

匿名函数：func方法只想自己用，不想让别人调用
(function () {
    $.extend({
       "GDP":function () {
           func1();
        console.log("戴帽子")
    }
});
    function func1() { // 函数的内部可以调用，外部就不可以调用了
    console.log("带啥色的帽子呢")
    }
})();


(function () {
    $.fn.extend({
    "BJG":function () {
       fyunc2();
        console.log("英语八级就是牛逼")
    }
});
    function func2() {
        console.log("厉害了")
    }
})();

　　实践证明：

　　如果既不可以让别人在外部随意调用，也可以避免别人修改$怎么办呢？

// 如果怕$被别人改，那么就传个参数进去
(function (jq) {
    jq.extend({
       "GDP":function () {
           func1();
          console.log("戴帽子")
       },   //可以扩展多个（加上逗号在写几个）
        "SGS":function () {
          console.log("你蛤蟆")
    }
});
    function func1() {
    console.log("带啥色的帽子啊")
    }
})(jQuery);


(function (jq) {
    jq.fn.extend({
    "BJG":function () {
        func2();
        console.log("英语八级就是牛逼")
    }
});
    function func2() {
        console.log("厉害了")
    }
})(jQuery);

解决修改$问题

简单的登录验证：

　　需要实现的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .error{
            color:red;
            display: inline-block;
            width: 180px;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div  style="text-align:center;500px">
    <form action="" style="text-align: right" >
    <p><label for="name">用户名</label>
        <input type="text" id="name" require="true" name="username"><span class="error"></span></p>
    <p><label for="pwd">密码</label>
        <input type="password" id="pwd" require="true" name="password"><span class="error"></span></p>
    <p><label for="phone">手机号</label>
        <input type="text" id="phone" required="true" name="phone"><span class="error"></span></p>

</form><p><button id="submit">提交</button></p>
</div>
<script>
    $("#submit").click(function () {
        var eleinputs=$("input")

        eleinputs.each(function () {
            var v=$(this).val()
            var drrentE=$(this).attr("name")
            if(v.length==0){
                $(this).next().text(drrentE+"不能为空")
                return false
            }
            if($(this).attr("type")==="password"){
                if(v.length<6){
                    $(this).next().text(drrentE+"不能少于6位")
                    return false
                }
            }
            if($(this).attr("name")==="phone"){
                if (!/^1[34578]d{9}$/.test(v)){
                        // 不合法的手机号
                        //  var currentLabel = $(this).prev().text();
                        $(this).next().text(drrentE+ "格式不正确");
                        return false;
                    }
            }
        })


    })


</script>

</body>
</html>

最基本的登录验证

表格的增删改查：

　　需要实现的功能：

持续更新.....