一、jQuery概述

1、版本信息

分为压缩版的和未压缩版的，为压缩的有利于阅读，大部分主流网站用的版本是1.x

2、优点

(1)轻量级。核心文件才几十kb，不会影响页面的加载速度
(2)跨浏览器兼容，基本兼容了现在主流的浏览器
(3)链式编程、隐式迭代
(4)对事件、样式、动画支持，大大简化了DOM操作
(5)支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。
(6)免费、开源

二、jQuery基础

1、jQuery和js加载模式区别

1、原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
   jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
2、原生的JS如果编写了多个入口函数，后面编写的会覆盖前面的
   jQuery编写多个入口函数不会覆盖前面的
3、通过原生的JS入口函数可以拿到DOM元素，也可以拿到DOM元素的宽高
   通过jQuery的入口函数可以拿到DOM元素，但不可以拿到DOM元素的宽高

2、解决jQuery冲突问题

1、释放$的使用权:jQuery.noConflict();
注意点:释放操作必须写在其他jQuery代码之前
      释放之后就不能再使用$，改为使用 jQuery
2、自定义一个访问符号
var nj = jQuery.noConflict();
        nj(function(){
            alert('hello lng');
        })

3、jQuery核心函数

1、格式$()
2、接收一个函数
$(function(){})
3、接收一个字符串
(1)接收一个字符串选择器
返回一个jQuery对象，对象中保存了找到的DOM元素
var $box1  = $(".box1")
(2)接收一个字符串代码片段 
返回一个jQuery对象，对象中保存了创建的DOM元素
var $p = $('<p>我是段落</p>')
4、接收一个DOM元素
会包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName('span');
var $span = $(span);

4、jQuery静态方法

1、静态方法和实例方法

		// 1. 定义一个类
        function Aclass(){
        }
        // 2. 给这个类添加一个静态方法
        // 直接添加给类的就是静态方法
        Aclass.staticMethod = function(){
            alert('staticMethod');
        }
        // 静态方法通过类名调用
        Aclass.staticMethod();

        // 3. 给这个类添加一个实例方法
        Aclass.prototype.instanceMethod = function(){
            alert('instanceMethod');
        }
        // 实例方法通过类的实例调用
        // 创建一个实例(创建一个对象)
        var a = new Aclass();
        // 通过实例调用实例方法
        a.instanceMethod();

2、each方法

var arr = [1,3,5,7,9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// 第一个参数是遍历到的元素 第二个参数是当前遍历到的索引
// 注意点:原生的forEach方法只能遍历数组，不能遍历维数组
// arr.forEach(function(value,index){
//    console.log(value,index);
// })
// obj.forEach(function(value,index){
//     console.log(value,index);
// })

// 1. 利用jQuery的each静态方法遍历数组
如果针对于同一类元素做不同操作，需要用到遍历元素
// 第一个参数:当前遍历到的索引，可以自己指定索引号的名称，第二个参数:遍历到的元素
// 注意点:jQuery的each方法是可以遍历伪数组的
// $.each(arr,function(index,value){
//     console.log(index,value);
// })
$.each(obj,function(index,value){
     console.log(index,value);
})

3、map方法

		var arr = [1,3,5,7,9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        // 1. 利用原生JS的map方法遍历
        // 第一个参数是当前遍历到的元素，第二个参数是当前遍历到的索引，第三个参数是当前遍历的数组
        // 注意点:和原生的forEach一样，不能遍历伪数组
        // arr.map(function(value,index,array){
        //    console.log(index,value,array);
        // })
        // obj.map(function(value,index,array){
        //    console.log(index,value,array);
        // })
        // 第一个参数:要遍历的数组
        // 第二个参数:每遍历一个元素之后要执行的回调函数
        // 回调函数的参数:第一个是遍历到的元素，第二个是遍历到的索引
        // 注意点:和jQuery中的each静态方法一样,map静态方法也可以遍历伪数组
        // $.map(arr,function(value,index){
        //     console.log(index,value);
        // });
        var res1 = $.map(obj,function(value,index){
            console.log(index,value);
            return value + index;
        });
        var res2 = $.each(obj,function(index,value){
            console.log(index,value);
            return value + index;
        });
        // jQuery中的each静态方法和map静态方法的区别:
        // each静态方法默认的返回值就是遍历谁就返回谁,不支持在回调函数中对遍历的数组进行处理
        // map静态方法默认的返回值是一个空数组，可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回
        console.log(res1);
        console.log(res2);

4、其他静态方法

(1) $.trim()
 作用：去除字符串两端的空格
 参数：需要去除空格的字符串
 返回值：去除空格之后的字符串
        */
        // var str = "    lnj    ";
        // var res = $.trim(str);
        // console.log("----"+ str + "------");
        // console.log("----"+ res + "------");
        

        /*
(2) $.isWindow()
 作用：判断传入的对象是否是window对象
 返回值：true/false
        */
        // 真数组
        var arr = [1,3,5,7,9];
        // 伪数组
        var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        // 对象
        var obj = {'name':'lnj',age:'33'};
        // 函数
        var fn = function(){}
        // window对象
        var w = window;
        // var res = $.isWindow(w);
        // console.log(res);
        
        /*
(3) $.isArray()
  作用：判断传入的对象是否是真数组
  返回值：true/false
        */
        // var res = $.isArray(arr);
        // console.log(res);

        
        /*
(4) $.isFunction()
  作用：判断传入的对象是否是函数
  返回值：true/false
  注意点：jQuery框架本质上是一个函数
        (function(window,undefined){})(window); 
        */
        var res = $.isFunction(jQuery);
        console.log(res);
(5) $.holdready(true):暂停入口函数执行
jQuery的入口函数要等到页面的DOM元素加载完后就会执行，如果想先做一些其他操作，等其他操作执行完后再执行入口函数，可以在入口函数前面加上 $.holdready(true)就可以暂停它执行。 $.holdready(false)可以解开。

5、jQuery对象

1、jquery对象和DOM对象

1、区别：
(1)jQuery对象：用jquery获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行来包装(伪数组形式存储)
(2)DOM对象：用原生js获取过来的对象就是DOM对象
(3)jQuery对象只能用jQuery方法，DOM对象则使用原生的javascript属性和方法
2、相互转换
(1)DOM对象转换为jquery对象
$('vide0')  直接获取得到的就是jquery对象
(2)jQuery对象转换成DOM对象
$('video')[0].play();

2、jQuery的选择器

1、基本筛选器

2、层级选择器

1、 父 parent() 返回的是最近一级的父元素
2、 子
(1) 亲儿子 children() 子代选择器 ul>li
(2) 可以选择里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器
3、兄弟元素 siblings() 除了自身元素之外的亲兄弟
4、第n个元素 eq()

3、内容选择器

(1):empty 
作用：找到既没有文本内容也没子元素的指定元素
           //  var $div = $('div:empty');
           //  console.log($div);
(2):parent 
作用：找到有文本内容或有子元素的指定元素
           //  var $div = $('div:parent');
           //  console.log($div);
(3):contains(text) 
作用：找到包含指定文本内容的指定元素
           //  var $div = $('div:contains("我是div")');
           //  console.log($div);
(4):has(selector) 
作用：找到包含指定子元素的指定元素
           //  var $div = $("div:has('span')");
           //  console.log($div);
           
<body>
    <div></div>
    <div>我是div</div>
    <div>我是div123</div>
    <div><span></span></div>
    <div><p></p></div>
</body>

6、属性

1、属性

1、attr(name|pro|key,val|fn)
作用：获取或者设置属性节点的值
            可以传递一个参数，也可以传递两个参数
            如果传递一个参数，获取属性节点的值
            $('span').attr('class')
            如果传递两个参数，设置属性节点的值
            $('span').attr('class','box')
注意点：
(1)如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值。
(2)如果是设置：找到多少个元素就会设置多少个元素,如果设置的属性节点不存在，那么系统会自动新增。
2、removeAttr(name)
作用：删除属性节点
注意点：会删除所有找到元素指定的属性节点
3、prop()
 特点和attr方法一样
 注意点：prop方法不仅能操作属性，还能操作属性节点
4、removeProp()
特点和attr方法一样
5、区分
官方推荐在操作属性节点时，具有 true 和 false两个属性值的属性节点 如 checked、selected、disabled使用prop(),其他使用attr()
<input type="checkbox" checked>
console.log($('input').prop('checked')); 
// true / false
console.log($('input').attr('checked')); 
// checked / undefined

2、CSS类

1、addClass(class|fn)
  作用：添加类，如果要添加多个，多个类名之间用空格隔开即可
  相当于追加类名，不影响以前的类名
2、removeClass([class|fn])
  作用：删除类
3、toggleClass(class|fn[,sw])
  作用：切换类，有就删除，没有就添加

3、文本值

1.html([val|fn]) 获取设置元素内容
 和原生JS中的innerHTML一样
 $('div').html('<p>我是段落<span>我是span</span></p>')
 插入的内容会显示层级关系
2.text([val|fn]) 获取设置文本内容
 和原生的JS中的innerText一样
 $('div').text('<p>我是段落<span>我是span</span></p>')
 单纯的文本，不会有层级关系
3.val([val|fn|arr]) 获取设置表单值
$('input').val('请输入内容');
console.log($("input").val());

7、CSS

1、CSS

$(function(){
   // 1.逐个设置
   $('div').css('width','100px');
   $('div').css('height','100px');
   $('div').css('background','red');
            
   // 2.链式设置
   // 注意：链式操作如果大于三步，建议分开           $('div').css('width','100px').css('height','100px').css('background','blue');

   // 3.批量设置
   $('div').css({
      width:'100px',
      height:'100px',
      background:'red'
   });

   // 获取css样式值
   console.log($('div').css('width'));
});

2、位置

(1)offset([coordinates])
作用：获取元素距离窗口的偏移位
(2)position()
作用：获取元素距离定位元素的偏移位
注意点：position方法只能获取不能设置
(3)scrollTop([val])
被卷去的头部
(4)scrollLeft([val])
被卷去的左侧

3、尺寸

(1)width() / height()
获取设置元素 width和height大小
(2)innerWidth() / innerHeight()
获取设置元素 width和height + padding大小
(3)outerWidth() / outerHeight()
获取设置元素 width和height + padding + border 大小
(4)outerWidth(true) / outerHeight(true)
获取设置元素 width和height + padding + border + margin 大小

8、事件

1、事件处理

1.1 事件绑定和解绑

1、绑定
(1)eventName(fn)
编码效率略高 部分事件jQuery没有实现，所以不能添加
(2)on(eventName,fn)
编码效率略低，所有js事件都可以添加
注意点：可以添加多个相同或者不同类型的事件，不会覆盖
(2-1)on可以绑定1个或者多个事件处理程序
$("div").on({
    mouseenter: function() {
       $(this).css("background", "skyblue");
    },
    click: function() {
       $(this).css("background", "purple");
    },
    mouseleave: function() {
       $(this).css("background", "blue");
    }
});
(2-2)on可以实现事件委托（委派）
 $("ul").on("click", "li", function() {
   alert(11);
 });
//click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
(2-3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
   alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

2、解绑 off()
(1)off方法如果不传递参数，会移出所有的事件
(2)如果传递一个参数，会移出所有指定类型的事件
(3)如果传递两个参数，会移出指定类型的指定事件

1.2 事件冒泡和默认行为

1、什么是事件冒泡
2、如何阻止事件冒泡
(1)return false;
(2)e.stopPropagation();
3、什么是默认行为
4、如何阻止默认行为
(1)return false;
(2)e.preventDefault();

1.3 事件自动触发

1、trigger：自动触发事件，会触发事件冒泡，会触发默认行为
2、triggerHandler：自动触发事件，不会触发事件冒泡，不会触发默认行为

1.4 自定义事件

想要自定义事件，必须满足两个条件：1.事件必须通过on绑定的 2.事件必须通过trigger来触发
 $('.son').myClick(function(e){
      alert('son');
 });  // 不存在myClick方法
 
 $('.son').on('myClick',function(){
              alert('son');
 });
 $('.son').trigger('myClick');

1.5 事件命名空间

1、事件命名空间类似css的类，我们在事件类型的后面通过点加名称的方式来给事件添加命名空间
2、想要事件的命名空间有效，必须满足两个条件
(1)事件是通过on来绑定的
(2)通过trigger触发事件

$('.father').on('click.ls',function(){
   alert('father click1');
});
$('.father').on('click',function(){
   alert('father click2');
});
$('.son').on('click.ls',function(){
   alert('son click1');
});
$('.son').trigger('click');
3、命名空间的匹配规则
(1)利用trigger触发子元素带命名空间的事件，父元素带相同命名空间的事件也会被触发，而没有命名空间的不会被触发(命名空间的冒泡)
(2)只要触发带命名空间的事件，该事件不带命名空间的监听器就不会被触发
(3)当触发不带命名空间的事件时，该事件所有的监听器都会触发

2、事件委派

1、概念：利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
2、原理：请别人帮忙做事情，然后将做完的结果反馈给我们
3、用法：如在ul里面要动态添加li，在入口函数执行前我们不能直接拿到新增的这个li，但ul是之前就存在的，可以请ul来实现
$('ul').append('<li>我是新增的li</li>')
(1)on()
$(function(){
   $("ul").on("click","li",function(event){
       var target = $(event.target);
       target.css("background-color","red");
   })
})
(2)delegate()
$(function(){
   $("ul").delegate("li","click",function(event){
      var target = $(event.target);
      target.css("background-color","red");
   })
})
执行事件委托的时候只有子元素（本文中的li）会触发事件，而代为执行的父元素（本文中为ul）不会触发事件

3、事件切换

1、hover
(1)概述:当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数
(2)参数
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
2、toggle

9、效果

1、基本效果

(1)show()显示
(2)hide()隐藏
(3)toggle()切换

2、滑动

(1)slideDown()
(2)slideUp()
(3)slideToggle()
(4)参数可以有：speed(slow / normal / fast / 500)
             easing(切换效果,默认是swing,可以用linear)
             fn(在动画完成时执行的函数)

3、淡入淡出

(1)淡入fadeIn()
(2)淡出fadeOut()
(3)淡入淡出切换fadeToggle()
(4)修改透明度fadeTo() 
   这个速度和透明度要必须写

4、自定义动画

 第一个参数：接收一个对象，可以在对象中修改属性
 第一个参数：指定动画时长
 第一个参数：指定动画节奏，默认是swing
 第一个参数：动画执行完毕之后的回调函数
 $(".one").animate({
   marginLeft:500，
   width:"+=100"
   },5000,function(){
   });

5、stop和dely方法

1、在Jquery的{}中可以同时修改多个属性，多个属性的动画也会同时执行
2、delay()方法的作用就是告述系统延迟时长
3、stop() 放在动画方法之前
(1)立即停止当前动画，继续执行后续的动画
 $("div").stop();
 $("div").stop(false);
 $("div").stop(false,false);
(2)立即停止当前和后续的所有动画
$("div").stop(true);
$("div").stop(true,false);
(3)立即完成当前的，继续执行后续动画
$("div").stop(false,true);
(4)立即完成当前的，并且停止后续所有的
$("div").stop(true,true);

10、文档处理

1、创建节点

var $li = $("<li>新增的li</li>")

2、添加节点

1、内部插入：
(1)会将元素添加到指定元素内部的最后面
append(content|fn)
appendTo(content)
$("ul").append($li)
$li.appendTo("ul")
(2)会将元素添加到指定元素内部的最前面
prepend(content|fn)
prependTo(content)
2、外部插入
(1)会将元素添加到指定元素外部的后面
after(content|fn)
insertAfter(content)
(2)会将元素添加到指定元素外部的前面
before(content|fn)
insertBefore(content)

3、删除节点

(1)remove([expr])
删除指定元素
(2)empty()
删除指定元素的内容和子元素，指定元素自身不会被删除
(3)detach([expr])

4、替换节点

(1)replaceWith(content|fn)
替换所有匹配的元素为指定的元素
(2)replaceAll(selector)

5、复制节点

clone([Even[,deepEven]])
(1)如果传入false就是浅复制，传入true就是深复制
(2)浅复制只会复制元素，不会复制元素的事件，而深复制会复制元素，也会复制元素的事件