7. 强大的jQuery

jQuery一款用原生JS封装的，操作DOM的类库: 它里面封装了大量的方法(在原先的版本v1.xxx中，这些方法兼容所有的浏览器),基于这些方法我们可以快速的进行DOM操作和项目开发;

API 源码 http://jquery.cuishifeng.cn/

JQ三大版本

• v1.xxx
• jquery-1.11.3.min.js
  第一代版本的特点：大而全，方法是兼容所有浏览器(包括IE6)，主要应用于需要考虑兼容的PC端项目中;
• v2.xxx
  主要是为了移动端的开发准备，不在兼容低版本浏览器(例如IE8一下)，配合出现的还有jQuery mobile 等UI库，但是第二代版本在移动端方面的处理不如Zepto.js;
• v3.xxx 第三代版本
  也不再兼容IE低版本浏览器了，从性能等方面都要比直线的强，但是angular/vue/React这种框架崛起;

JQ中常用的方法

1、获取DOM元素

**操作方法:JQ选择器(根据选择器类型快速获取需要的元素);**
  $([selector],[context])`
  $('#box')
  $('.box')
  $('.box a')
  $('a',box)
  
JQ支持的选择器，传统CSS3中的大部分都支持、还支持一些自己独有的，
  如：
:eq(n)获取索引为n的;
:gt(n)大于这个索引的;
:lt(n)小于这个索引的; 

**节点之间关系的属性;**

用JQ选择器获取的元素，我们设置变量名的时候一般都以$开始;
let $box = $('.box');
$box.children('a');
$box.find('a');获取对应的后代元素
$('a').filter('.active'); 同级筛选(在所有的A中筛选出具备CLASS=’active‘样式雷的A)
$box.prev();获得上一个哥哥，// 可以在括号内加标签名获取上一个哥哥元素内标签为P 的
$box.preAll();所有哥哥元素
$box.next();获得下一个弟弟元素
$box.nextAll();所有弟弟
$box.siblings();获取所有兄弟弟
$box.index();获取索引
$("p").parent();获取父元素
$("p").parent();获取所有的祖先元素，一直到document；

2、DOM的增删改

let str = `<div id="box" class='box'>
...
</div>`;

$("p").add("<span>Again</span>");创建P添加span;
[ <p>Hello</p>, <span>Hello Again</span> ]
$('body').append(str);追加到容器BODY的末尾
$(body).html(str);  等价于innerHTML
$(body).html();   不传参是获取BODY中的HTML内容，除了这个方法还有text方法，等价于innerText;


..............................................
$A.insertBefore($B); 把`$A`放在`$B`前面(`$A,$B`都是页面中已经存在的东西), insertAfter 放在元素后面
$A.insertAfter($B); //=>把$A放到$B的后面
$(`<div id="box" class='box'>
    哈哈
</div>`).insertBefore($A)  需要把新增加元素放到$A前面，需要把字符串用$()包起来，相当于创建了一个元素
   
..................................................................
$A.appendTo($B); //=>   `$B.append($A) `在\$B容器的末尾追加$A
$A.prependTo($B);  //=>`$B.prepend($A)` 在\$B容器的开头追加$A

..................................................................
$A.clone();  //=>实现元素的克隆
$A.remove(); //=>实现元素的删除

..................................................................
//=>操作表单元素的内容
$inp.val()     获取表单元素内容
$inp.val('AAA')      设置表单元素内容
//html和text方法是操作非表单元素内容的

3、操作自定义属性

$box.attr('data-type');获取自定义属性值；
$box.attr('data-type','B');设置自定义属性值；
$box.attr({
    'type':1,
    'name':'AA'
    }); 批量设置
$box.removeAttr('data-type') ; 移除自定义属性
  表单元素一般使用prop或者removeProp
$radio.prop('checked');
$radio.prop('checked',true);

4、操作CSS样式(盒子模型属性)

**设置样式**
$box.css('width',200); css 方法是设置或批量设置样式(原理是设置STYLE行内样式);
$box.css({with:200,height:200}),写的值不加单位，方法会帮我们自动设置上px单位;
$box.addClass('active')  设置样式类(原理是对className的操作)，`removeClass`验证是否存在某个样式类;
toggleClass 之前就是移除，没有就是新增;
**获取样式**
$box.css('width')    不设置值的时候就是获取  (原理是 getComputedStyle,所有经过计算的样式都可以获取);
$box.offset() 当前元素距离BODY的左偏移和上偏移;
$box.position()  当前元素距离父级的左偏移和上偏移
$box.innerWidth/.innerHeight/.outerWidth/.outerHeight() //=>等价于clientWidth/Height 和 offsetWidth/Height
$(document).scrollTop([val]); //=>可以获取或者设置scrollTop的信息，对应的方法 .scrollLeft
$box.width();获取盒子宽高(传递值进来就是设置)

5、获取样式

$box.css('width'); //=>不设置值的时候就是获取（原理是getComputedStyle，所有经过计算的样式都可以获取）
$box.offset(); //=>当前元素距离BODY的左偏移和上偏移
$box.position(); //=>当前元素距离父参照物的左偏移和上偏移
$box.innerWidth/.innerHeight/.outerWidth/.outerHeight() //=>等价于clientWidth/Height 和 offsetWidth/Height
$(document).scrollTop([val]); //=>可以获取或者设置scrollTop的信息，对应的方法 .scrollLeft

事件处理

//=>事件处理**strong text**
$元素.on([event type],[function])
$元素.off([event type],[function])
$元素.bind()  $元素.unbind()  $元素.delegate() ...
$元素.click() .mouseover .mouseout ...等常用事件的快捷绑定
$box.on('click',function(){});
$box.click(function(){});

//=>动画处理
.animate([目标样式],[总时间],[运动方式],[运动完做的事情])
.stop / .finish
$box.stop().animate({
    top:100,
    left:200
},1000,'linear',function(){});

//=>AJAX请求处理
let _DATA=null;
$.ajax({
    url:'json/product.json',
    method:'GET',
    async:false,
    dataType:'json',
    success:result=>{
        //result:当请求成功执行success函数，result就是从服务器获取的结果
        _DATA=result;
    }
});

//=>常用的工具方法
$.each([数组、类数组、对象],function(index,item){
    //=>遍历数组中的每一项 index:索引 item:当前循环这一项（对象：index是属性名 item属性值）
});
$('A').each(function(index,item){});

$.toArray()转换为数组  $.merge()数组合并  $.makeArray()把类数组转换为数组  $.uniqueSort()去重加排序  $.type数据类型检测 ...

JQ源码

基于JQ选择器创建出来的是JQ类的一个实例，就可以调取jQuery.prototype上的方法
1.创建出来的JQ实例是一个类数组（JQ对象） 基于makeArray创建出来的
2.SELECTOR支持三种数据格式

• [STRING]
  • 选择器 $('.box')
  • 创建元素 $('<div>...</div>')
• [元素对象：JS原生对象]
  • 把原生JS对象转换为JQ对象（只有这样才能调取JQ中的方法）
  • 把JQ对象转换为原生对象，直接基于索引获取即可，例如：$A[0]，真实项目中建议大家使用JQ自带的get方法实现，因为它更加完善，可以支持负数索引 $A.get(0)
  • eq方法也是根据索引获取集合中的某一项（也支持负数索引），只不过返回的结果不是原生JS对象，依然是JQ的一个实例
• [函数]
  • $(function(){}) 等待页面中的DOM结构加载完成再执行函数，等价于 $(document).ready(function(){})

JQ方法
jQuery给我们提供的方法放到了两个位置上

1.原型上 jQuery.prototype={get:...}
$().get()
只有jQuery的实例才可以调用

2.对象上 jQuery.ajax=...
$.ajax()
直接调取使用

JQ中只有一个EACH：用来遍历数组、对象、类数组中的每一项的，$a.each()最后也会转换为$.each($a)这种模式

each: function (callback) {
    //this:$navList
    return jQuery.each(this, callback);
}
each: function (obj, callback) {
    var length, i = 0;
    if (isArrayLike(obj)) {
        length = obj.length;
        for (; i < length; i++) {
            if (callback.call(obj[i], i, obj[i]) === false) {
                //=>每循环一次，执行一次函数，把函数中的this设置为循环项
                //传递索引和循环项
                break;
            }
        }
    } else {
        for (i in obj) {
            if (callback.call(obj[i], i, obj[i]) === false) {
                break;
            }
        }
    }
    return obj;
}

检测当前对象是数组还是类数组

function isArrayLike(obj) {
    // Support: real iOS 8.2 only (not reproducible in simulator)
    // `in` check used to prevent JIT error (gh-2145)
    // hasOwn isn't used here due to false negatives
    // regarding Nodelist length in IE
    var length = !!obj && "length" in obj && obj.length,
        type = toType(obj);
    if (isFunction(obj) || isWindow(obj)) {
        return false;
    }
    return type === "array" || length === 0 ||
        typeof length === "number" && length > 0 && (length - 1) in obj;
}