jQuery

jQuery：

它是一个使用原生的JS来封装的常用方法的类库（解决了浏览器的兼容问题）
jQuery非常强大的地方在于它的链式写法（执行完成一个方法后返回的结果依然是一个jQuery对象，这样就可以继续的调用下一个方法就行了）

$box.css("backfround","lightblue").width();  //可以，因为.css之后仍是jQuery对象
$box.css("background","lightblue").width().position();  //报错，因为.width之后是数字，不是jQuery对象，不能再执行position

jQuery中提供的常用方法

核心：

window.jQuery=window.$=jQuery(jQuery就是闭包中的私有函数)

var jQuery=function(selector,context){
      return new jQuery.fn.init(selector,context);
//可以把这个理解为返回的是一个jQuery类的实例
};
jQuery.fn=jQuery.prototype={
      constructor:jQuery
};
jQuery.extend=jQuery.fn.extend=function(){
      jQuery.extend;  //把它当作一个普通的对象，在对象中增加了extend方法
      jQuery,fn.extend;  //在它的原型上也增加了一个extend方法
}

selector：[string]选择器的类型 [object]JS原生的对象（把原生的对象转换为jQuery对象） [function]回调函数（等价于我们的$(document).ready...）
context：document(传递的是一个原生JS对象能够上下文，如果是一个jQuery对象，它默认为会把其重构为选择器)
jQuery选择器：创建jQuery这个类的一个实例（jQuery对象）
在jQuery这个类的原型上定义了很多的属性和方法，而通过选择器获取的每一个实例都可以调用这些方法：属性、CSS、文档操作、筛选、动画、事件...eg：$("*").css();
**把jQuery当做一个普通的对象，在它自己的属性上增加了一些常用的方法：Ajax、工具...eg
:$.ajax
extend：扩展，向jQuery这个类库中增加一些其他常用的方法
（1）向jQuery属性名上扩展（把它当作一个对象），-->作用：完善类库，给类库增加核心的方法

jQuery.extend({
      aa:function(){
            console.log("aa");
      }
});
$.aa();  //--->aa

（2）向jQuery原型上扩展（把它当作一个类）--->作用：编写一些基于jQuery插件

jQuery.fn.extend({
      bb:function(){
            console.log("bb");
      }
});
$().bb(); //-->bb

选择器：

通过传递对应规则的内容（ID、标签名、样式类名....），获取到页面中指定的元素/元素集合
var $oDiv=jQuery("#div1"); //--->$oDiv=$("#div1") -->$===jQuery

1-->jQuery选择器获取到的结果是一个jQuery对象，可以使用jQuery中提供的那些属性和方法，但不能直接的使用浏览器内置的属性和方法(如clientWidth，getAttribute等)

2--->关于原生JS对象和jQuery对象之间的转换
原生转变为jQuery：$(原生JS对象)，如$(oDiv)
jQuery转变为原生：直接通过索引获取对应的元素即可
$oDiv[0]===$oDiv.get(0) 都是通过索引来获取指定位置的元素对象（JS原生对象）

属性：（常用）

1、jQUery的回调函数

var $call=$.Callbacks();  //-->创建一个回调函数的列表集合
$call.add(fn1);  //-->向集合中增加一个叫做fn1的函数
$call.fire(100);  //-->触发fire方法的时候，把回调函数集合中的方法执行，并且把对应的参数值传递给对应的方法-->“fn1:100”;
$call.remove(fn1);  //-->在集合中移除fn1这个方法

2、$(document).ready(function(){}); <===> $(function(){});和原生JS中的window.onload对应
window.onload的意思是：当页面中的HTML结构、图片、文字等所有资源都加载完成后才会触发这个行为，并且在一个页面中它只能执行一次，后面编写的会把前面的覆盖掉
$(document).ready(function(){});:只要HTML结构加载完成就会触发对应的行为，而且在一个页面中可以使用多次

3、属性（常用）
--->attr:获取和设置元素的自定义属性，等价于原生JS中的set/getAttribute
$("#div1").attr("haha"); //获取自定义属性haha
$(#div1").attr("haha",100); //设置自定义属性haha的值
$("#div1").attr({ index:1, name:"haha" }); //批量设置自定义属性
$("#div1").removeAttr("haha"); //移除haha这个自定义属性
--->prop：获取和设置元素的属性（和attr是不同的两套方式，两者之间不能相互混用：用attr设置的只能用attr删除或修改或获取，同理用prop设置的，也只能用prop操作）
prop内置的属性可以在HTML结构中体现出来，但是不是内置的属性是体现不出来的（但可以获取到值）
attr与prop的区别：attr一般都是用来设置和操作元素的自定义属性的，而prop一般是用来操作元素的内置属性的（尤其是表单元素的操作，大部分都在使用prop）

4、关于jQuery内置遍历机制和手动循环的方法
--->addClass/removeClass/toggleClass(toggle系列都是之前有就是移除，没有就是新增)：通过jQuery选择器获取到一个集合，然后让集合直接调用jQuery中提供的方法，相当于给集合中的每一个元素都调取了对应的方法（jQuery内置循环操作）
eg：$DivList.addClass("w1"); //给所有div都添加了w1类，不用循环操作了

each：可以遍历jQuery集合中的每一项（和数组的forEach类似）

$DivList.each(function(index,item){
  //this->就是我们当前遍历的这一项的内容：item
  $(this).addClass("w1");
});

jQuery（selector，context） context一般不需要传递，默认是document，但也可以指定具体的上下文来获取元素

筛选：

1、eq(index)、first() 、last()、hasClass(strClass)（检测当前的元素中是否包含某一个样式类名，有则为true）
2、filter、children、find：常用的三个筛选方法
filter：同级过滤，首先通过选择器获取一个集合，在获取的内容中再进行二次筛选
$("*",$box).filter(); //什么都没有，所以必须filter中得写东西
children：子集过滤
find：后代过滤，$box.find(); //-->结果是个空集合 ，find中也必须写东西
-->jQuery这个元素对象的私有属性中叫做selector这个属性存储的值是当前本次查找的选择器的内容；context是当前本次查找的上下文

$("*",$box)  //-->context:document  selector:"#box *"
$("*",document.getElementById("box")  //--->context:div#box  selector:"*"

3、map：遍历jQuery集合中的每一项，并且可以支持返回值把每一项进行修改，类似于数组中的map方法
4、parent：父亲节点
5、parents：所有的父亲节点（从当前开始一直找到HTML，把每一项都记录下来）
6、next、nextAll、siblings、prev、prevAll等

CSS：

1、css：获取或者设置（批量设置）当前元素的样式值

var $box=$("#box");
$box.css("width");  //一个参数是获取
$box.css({  //批量设置
    background:"red";
    opacity:0.5;
});

2、offset：不管父级参照物是谁，获取当前元素距离BODY的偏移距离（top/left）;而position：获取当前元素距离父级参照物的偏移（top/left）
3、scrollTop/scrollLeft：获取或设置元素的卷去高度/宽度
4、width/height：获取或设置元素的width/height
5、innerWidth/innerHeight：获取或设置元素可视区域的宽高（获取的时候等价于clientWidth/clientHeight），设置的时候保留padding的值，把width的值进行改变（width的值最小是0）
$box.innerWidth(true); //加true是指默认加上margin的值
6、outerWidth/outerHeight：获取或设置元素可视区域的宽高（包含边框）；设置具体的值的时候和上面的效果一样

文档处理：

1、append：向指定元素的末尾位置追加一个新的元素 容器.append(元素)
appendTo：元素.appendTo(容器)
2、prepend/prependTo:向指定元素的开头位置追加一个新的元素
3、after/before：在当前元素的后面/前面追加新的元素
4、insertAfter/insertBefore：把选择器获取到的元素追加到指定元素的前面或者后面

var oDiv=document.createElement("div");
oDiv.id="div5";
$(oDiv).insertAfter($box);  //-->把创建的oDiv追加到$box的后面，和$box是同级的

5、replaceAll(selector)：用匹配的结果替换所有selector匹配的元素

var oDiv=document.createElement("div");
oDiv.id="div5";
$(oDiv).replaceAll("ul");  //页面中所有的ul都用oDiv给替换了

6、remove：把匹配的结果在页面中移除掉
$box.remove(); //把box移除掉

事件：

同一个事件同一个元素可以绑定多个方法

var $box=$("#box");
$box.on("click",function(){
    console.log(1);   //-->this:当前元素（JS原生对象）  $(this):jQuery对象
});
$box.on("click",function(){
    console.log(2);
});

效果（动画）：

1、animate():用于创建自定义动画的函数。参数有四个，分别是目标（最终）元素的属性值，运动总时长，运动方式（效果：如匀速/非匀速等），运动完成后执行的回调函数。
$("#box").animate({left:xxx,top:xxx,...},duration,"linear/swing",function(){});
2、stop：结束之前正在运行的动画，开启一个新的动画（结束上一个动画，下一个动画紧接着当前位置开始运动的），让上一个动画停止
$("#box").stop().animate({},1000,function(){});
3、delay：延迟
4、finish：直接让上一个动画完成（结束上一个动画，并且让元素快速的到达目标位置，再开始下一个动画）
5、fadeIn（淡入）、fadeOut（淡出）、fadeToggle
6、show（显示）、hide（隐藏）、toggle
7、slideUp（折起）、slideDown（展开）、slideToggle

Ajax：

$.ajax({
      url:"json/test.txt?_="+Math.random(),
      type:"get",
      dataType:"json",  //-->支持"text"、"html"、"jsonp".....
      success:function(data){
            console.log(data);
      }
});

工具：

1、each:jQuery中有两个each，(也有两个map，和each原理一样，只是可以支持返回值)一个是:循环选择器获取得到的jQuery集合中的每一项

$("div").each(function(index,item){
      console.log(item);
});

另一个是：循环数组、类数组、对象中的每一项

$.each([12,23,34],function(index,item){
       console.log(item);
});
$.each(document.getElementsByTagName("*"),function(index,item){
        console.log(item);
});
$.each({name:"gaoqi",age:24},function(index,item){
        console.log(item);
});

2、$.makeArray===>listToArray将类数组对象转换为数组对象