jQuery

1.jQuery事件

1.1.事件的基本使用

页面中指定一个点击事件：

$("p").click();// 表示给p标签绑定一个点击事件

下一步是定义触发事件的内容：

$("p").click(function(){

 //动作触发后执行都代码 

})

示例：

    <script>
        $(function(){
            var btn=$('button:first');
            // 绑定事件 on(事件类型,传参（可选）,事件处理程序)
            btn.on('click',[1,2,3],function(event){
                console.log(event,'事件对象');
                console.log(event.data);
                $(event.target).html('不想被点');//event.target为btn，因此点击后button中的文本变成了'不想被点'
            });
            // 模拟点击事件
            btn.trigger('click');
            // 解绑事件
            btn.off('click');
            // 绑定事件方法 bind绑定 参数(事件类型,要绑定的对象(可选),事件处理程序)
            btn.bind('click',[1,2,3],function(e){
                console.log(e,'事件对象');
            });
            btn.unbind();//无参代表全部解绑事件
            // one 绑定事件
            btn.one('click',function(e){
                console.log('我被绑定了',e);
            });
            
        })
    </script>

1.2.事件代理

  <button>点我啊</button>
  <!-- 引入jquery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
  <script>
    // 点击body
    // on(事件类型,代理对象,事件处理程序)
    $('body').on('click','button',function(){
    $('button').html('我被点击了')
    })
    // 事件解绑 移除代理 使用off(event事件,[selector]移除代理对象,fn)
    // $('body').off('click', 'button')
    // 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
    $('button').trigger('click', [1, 2])
  </script>

1.3.事件类型

常用的jQuery事件快速绑定方法

（1）$(document).ready()

允许我们在文档完全加载完后执行函数

（2）click()

当按钮点击事件被触发时会调用一个函数

（3）dbclick()

当双击元素时，会发生dbclick事件

（4）mouseenter()

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

（5）mouseleave()

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

（6）mousedown()

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

（7）mouseup()

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

（8）hover()

用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

（9）blur()

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

（10）keydown()

键盘事件：按键按下事件

（11）keyup()

键盘事件：按键抬起事件

    <script>
        $(function(){
            // 双击鼠标 控制台输出我被双击了
            $('button').dblclick(function(){
                console.log('我被双击了');
            });
            // 鼠标进入事件 按钮的背景颜色变红
            $('button').mouseenter(function(){
                $(this).css({
                    backgroundColor:'red'
                })
            });
            // 鼠标离开元素按钮颜色变蓝
            $('button').mouseleave(function(){
                $(this).css({
                    backgroundColor:'blue'
                })
            })
            // 鼠标聚焦是文本框变红色
            $('input[type="text"]').focus(function(){
                $(this).css({
                    backgroundColor:'red'
                })
            })
            // 失去焦点变为蓝色
            $('input[type="text"]').blur(function(){
                $(this).css({
                    backgroundColor:'blue'
                })
            })
            // 键盘按下文本框变绿
            $('input[type="text"]').keydown(function(){
                $(this).css({
                    backgroundColor:'green'
                })
            })
            // 松开键盘文本框变黄
            $('input[type="text"]').keyup(function(){
                $(this).css({
                    backgroundColor:'yellow'
                })
            })
        })
    </script>

2.jQueryDOM操作

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。

插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter

包裹方法：wrap、unwrap、wrapAll、wrapInner、

替换方法：replaceWith、replaceAll

移除方法：empty、remove、detach

克隆方法：clone

通过 jQuery，可以很容易地添加新元素/内容。

2.1插入方法

（1）append()

在被选元素的结尾插入内容（仍然在该元素的内部）

<script>
    $(function(){
        // append插入内容到元素尾部
        $('div:first').append('<p>我是一个p标签</p>');
        // 创建一个div添加到body尾部
        $('<div>我是块级元素</div>').appendTo('body');
        // 获取body标签内部的内容
        //html() -> innerHTML 作用一样识别代码片段
        console.log($('body').html());
/*
    <button>确定</button>
    <div>我是一个div<p>一个p标签</p></div><div>第2个div</div>

<div>我是块级元素</div>
*/
        //text() -> innerText 作用一样识别标签内的文本内容
        console.log($('body').text());
/*    确定
    我是一个div一个p标签第2个div

我是块级元素*/
</script>
<div>我是一个div</div>

（2）prepend()

在被选元素的开头插入内容

（3）after()

在被选元素之后插入内容

（4）before()

在被选元素之前插入内容

    <script>
        $(function(){
            // append插入内容到元素尾部
            $('div:first').append('<p>一个p标签</p>');
            // 创建一个div添加到body尾部
            $('<div>我是块级元素</div>').appendTo('body');
            // 获取body标签内部的内容
            console.log($('body').html());//innerHTML 识别代码片段
            console.log($('body').text());//innerText
            // prepend() - 在被选元素的开头插入内容
            $('div:first').prepend('<p>第二个p标签</p>');
            // after() - 在被选元素之后插入内容
            $('button').after('<p>第三个p标签</p>');
            // before() - 在被选元素之前插入内容
            $('button').before('<p>第四个p标签</p>');
        })
    </script>
</head>
<body>
    <button>确定</button>
    <div>我是一个div</div><div>第2个div</div>

运行结果：

2.2克隆方法

克隆节点

原生DOM有 cloneNode(true/false) 浅克隆false只复制节点 深克隆true既克隆节点又克隆节点内部的内容。默认浅克隆。jQuery对象的克隆方法clone(true/false) 与原生一样M浅克隆false，深克隆true。区别：浅克隆和深克隆都复制节点和内容，浅克隆不克隆事件 深克隆克隆事件

<!-- 参数为true时 克隆事件 点击原有的button和克隆的button,两个的文本内容都变为了我被点了 -->
<script>
    $(function(){
        // 克隆节点 针对事件 浅克隆不克隆事件 深克隆克隆事件
        $('button').click(function(){
            $(this).html('我被点了');
        })
        // clone方法无参 浅克隆 有参true 深克隆
        $('button').clone(true).appendTo('body');
    })
</script>
<button>确定</button>
<!-- 参数为false时 不克隆事件 点击两个按钮，只有原有的按钮文本内容发生了改变 -->
<script>
    $(function(){
        // 克隆节点 针对事件 浅克隆不克隆事件 深克隆克隆事件
        $('button').click(function(){
            $(this).html('我被点了');
        })
        // clone方法无参 浅克隆 有参true 深克隆
        $('button').clone(true).appendTo('body');
    })
</script>
<button>确定</button>

2.3属性操作和元素操作

jQuery 拥有可操作 HTML 元素和属性的强大方法

属性：attr、removeAttr、prop、removeProp

<script>
    $(function(){
        // 获取div的id属性值
        // attr:参数1 获取该属性名对应的属性值
        // 参数:2 给当前dom元素设置/修改属性
        console.log($('div:first').attr('id','newId'));
        // removeAttr 删除属性
        $('div:first').removeAttr('title');
    })
</script>
<div>我是一个div</div><div>第2个div</div>

css：addClass、removeClass、toggleClass、wrapInner

<script>
    $(function(){
        // 添加类名
        $('div:first').addClass('active');
        // 删除类名 删除对应的样式
        $('div:first').removeClass('two');
        // 切换类名 --对应的是删除或者是添加类名 
        $('div:first').click(function(){
        $(this).toggleClass('active')
        });
    })
</script>
<div>我是一个div</div><div>第2个div</div>

内容：html、text、val

text() - 设置或返回所选元素的文本内容

//替换按钮的内容 
<script>
    $(function(){
        $('button').click(function(){
            $(this).text('我被点了');
            console.log($(this).text()); //我被点了
        })
    })
</script>
<button>确定</button>

html() - 设置或返回所选元素的内容（包括 HTML 标记）

//替换按钮的内容 
<script>
    $(function(){
        $('button').click(function(){
            $(this).html('我被点了');
            console.log($(this).html()); // 我被点了
        })
    })
</script>
<button>确定</button>

val() - 设置或返回表单字段的值

 <script>
    $(function(){
        $('input').click(function(){
            $(this).val('我被点了');
            console.log($(this).val()); // 我被点了
        })
    })
</script>
<input type="text">

3.jQuery静态方法

静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法

3.1 数组及对象操作

each()

通用遍历方法，可用于遍历对象和数组

有两个参数，第一个参数：要遍历的数组/对象 第二个参数为一个回调函数

<script>
    $(function(){
        var obj={
            name:'zhangsan',
            age:12
        }
        //回调函数拥有两个参数(对象成员/数组索引，对应的变量或内容)
        $.each(obj,function(key,value){
            console.log(key,value);//name zhangsan
        });
        var arr=[1,2,3];
        $.each(arr,function(index,item){
            console.log(index,item);// 0--1 1--2 2--3
        });
    })
</script>

map()

将一个数组中的元素映射到另一个数组中

作为参数的回调函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。回调函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组。

<script>
    $(function(){
        var arr=[1,2,3];
        // map 映射 参数:要操作的数组 回调函数
        var res=$.map(arr,function(item,index){
            return item+4
        });
        console.log(res);// 5--0 6--1 7--2
    })
</script>

**toArray() **

这是一个实例方法不属于静态方法，静态方法可以直接$调用，不如上面的方法，$.map()

把jQuery集合中所有DOM元素恢复成一个数组

// toArray 将类数组转成数组--实例方法
console.log($('div').toArray());

merge()

合并两个数组，只能合并两个（原生js中的concat()方法可以合并任意多个，且不改变原数组）

返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。去除重复项，可以使用$.unique()

var arr = [1,2,3] ;
var arr2 = [2,3,4] ;
var arr3 = [4,5,6] ;
console.log($.merge(arr,arr2));// [ 1, 2, 3, 2, 3, 4 ]
//第一次合并后arr已经变成了[ 1, 2, 3, 2, 3, 4 ]
console.log($.merge(arr,arr2,arr3));//[ 1, 2, 3, 2, 3, 4, 2, 3, 4 ]
console.log(arr);// [ 1, 2, 3, 2, 3, 4, 2, 3, 4 ]
console.log(arr2);//[ 2, 3, 4 ]

其他关于数组及对象的操作，请移步jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

3.2 字符串操作

param()

将表单元素数组或者对象序列化。

parseJSON()

解析json字符串转换为js对象/数组

var obj={
    page:1,
    pageSize:10
}
console.log($.param(obj)); // page=1&pageSize=10
var obj1='{"name":"zhangsan","age":12}';
console.log($.parseJSON(obj1)); // Object { name: "zhangsan", age: 12 }

trim()

去掉字符串起始和结尾的空格,多用于用户数据的清洗

console.log('--'+$.trim(" hello, how are you? ")+'--');//--hello, how are you?--