jQuery03(未完）

表单作为 HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用 jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素。

我们可以使用 id、类(class)和元素名来获取表单字段，如果是表单元素，都必须含有 name属性，还可以结合属性选择器来精确定位。
$('input').val();//元素名定位，默认获取第一个
$('input').eq(1).val();//同上，获取第二个
$('input[type=password]').val();//选择 type 为 password 的字段
$('input[name=user]').val();//选择 name 为 user 的字段
那么对于 id 和类(class)用法比较类似，也可以结合属性选择器来精确的定位，在这里我们不在重复。对于表单中的其他元素名比如：textarea、select 和 button 等，原理一样，不在重复。

虽然可以使用常规选择器来对表单的元素进行定位，但有时还是不能满足开发者灵活多变的需求。所以，jQuery 为表单提供了专用的选择器。

jQuery 提供了四种表单过滤器，分别在是否可以用、是否选定来进行表单字段的筛选过滤。

举例：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<form>

</select>

</form>

$(":text");//选择type是text的input

$(":password");//选择type是password的input

$(":checkbox");//选择type是checkbox的input

$(":disabled");

$(":enabled");

$(":checked");

$(":selected");//下拉菜单中哪一项被选中

</script>

</body>

</html>

以上是所有的jquery过滤器的事件，是非常简单的，下面重点说一下事件及事件的用法：

绑定事件

    <button>按钮</button>
    <script>
        $("button").bind("click",function(){
            console.log("aaa");
            $(this).unbind("click");
        })
    </script>

运行结果如下：

添加绑定事件：

取消绑定事件之后

上面代码是老版本中的添加绑定事件和删除绑定事件

在新版本中如下

on添加事件

off删除事件

$("button").on("click",function(){

console.log("aaa");

$(this).off("click");//删除事件

})

</script>

运行结果与bind相同

on的特点：

1、同一个事件针对多个函数

 <button>按钮</button>
    <script>
       $("button").on("click",function(e){
           console.log("aaa");
       })
       $("button").on("click",function(e){
           console.log("bbb");
       })
    </script>

运行结果：

2、同一个元素如果增加多个事件，事件类型可以使用空格隔开

<button>按钮</button>
    <script>
        $("button").on("mousedown mouseup",function(e){
            console.log(e.type);
        })
    </script>

运行结果：

3、多个事件使用多个函数执行

 <button>按钮</button>
    <script>
        $("button").on({
            click:function(e){
                console.log(e.type);
            },
            mousemove:function(e){
                console.log(e.type);
            }
        })
    </script>

运行结果：

删除事件特点：

1、会删除所有的点击事件

<button>按钮</button>
    <script>
       $("button").on("click",function(){
           console.log("AAA");
           $("button").off("click");
       })
       $("button").on("click",function(){
           console.log("bb");
       })
    </script>

运行结果：

2、点击时删除指定事件的函数

<button>按钮</button>
    <script>
       $("button").on("click",clickHandler1);
       $("button").on("click",clickHandler2);

       function clickHandler1(){
           console.log("aaa");
           $("button").off("click",clickHandler1);
       }
       function clickHandler2(){
           console.log("bb");
       }
    </script>

运行结果：

3、事件的命名空间

匿名函数获得不到函数本身，采用arguments.callee

注：arguments.callee

在函数内部，有两个特殊的对象：arguments 和 this。其中， arguments 的主要用途是保存函数参数，但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数

<button>按钮</button>
    <script>
        $("button").on("click",function(){
            $(this).off("click",arguments.callee)
            console.log("aaa");
        })
        $("button").on("click",function(){
            console.log("bbb");
        })
    </script>

与上面代码功能相似的代码如下：这种方法叫做事件的命名空间

<button>按钮</button>
    <script>
        $("button").on("click.a",function(){
            $(this).off("click.a");
            console.log("aaa");
        })
        $("button").on("click.b",function(){
            console.log("bbb");
        })
    </script>

运行截图如下

中间插曲小例子：简写事件的拖拽

<script>
        var divs=$("<div></div>").css({
            width:50,
            height:50,
            backgroundColor:"red",
            position:"absolute"
        }).appendTo("body").mousedown(function(e){
            var div=$(this);
            $(document).mousemove(function(e1){
                div.css({
                    left:e1.clientX-e.offsetX,
                    top:e1.clientY-e.offsetY
                })
            }).mouseup(function(e2){
                $(document).off("mousemove mouseup")
            })
        })
        for(var i=0;i<10;i++){
            divs.clone(true).appendTo("body");
        }
    </script>