jq的基本结构

1、闭包的形式。不与外界框架冲突，把私有变量赋值给了全局变量 windows
2、一个工厂函数，函数返回的是一个构造函数的实例化对象
3、通过原型式继承，将工厂函数的原型对象 赋值给 构造函数的原型对象；便可以访问工厂函数里面的方法。
4、ready方法。封装监听了dom加载完毕，再回调函数，监听要兼容ie5(attachEvent)  谷歌addEventListener
5、封装了插件一些工具方法（插件）比如：isString; trim; isLikeArray 封装在jq的扩展方法extend上，也就是jq的静态方法上，在通过拷贝给this，$.isString()访问
6、入口函数分析：①判断是够为false 返回一个空的实例化对象
②、是否为函数、调用this.ready()
③、字符串
  1、是否是html，将一级标签一次key-value保存到实例化对象。
      var oDiv = document.createElement("div");
     oDiv.innerHTML = selector;
    [].push.apply(this, oDiv.children);
  2 判断是否是选择器。 [].push.apply(this, document.querySelectorAll(selector));
获取页面中所有指定的标签 + 把所有的标签都保存到实例对象中 + 添加length属性3、数组和伪数组

   
8、有一些方法each。map不仅在扩展方法（工厂函数的静态方法），在原型对象也封装了。$.each(参数1，函数) ，  $().each(函数)
  //具体实现:先遍历temp,然后把key-value传递给fn （遍历需要判断是否是数组，伪数组，对象）  在赋值key-value 并且this改变指向value
    for (var i = 0; i < temp.length; i++) {
                  var res = fn.call(temp[i],i,temp[i]);
                    if(res == false) break; }
9、一些原型对象方法是get、eq、first、last
  get获取的是没有解析的dom元素、而eq方法获取是dom里内容 只需要this.get(idnex)  相当于$(代码片段)
  get:function (index) {
            /*
        参数:正数(0|1|2) 表示获取key为0.1.2.对应的DOM元素
             负数(-1) 表示获取最后一个元素
             如果不传递参数,那么把所有的标签都放在数组中返回 (实例对象 -> 数组)
            * */
            //001 判断没有参数的情况
            if(arguments.length == 0)
            {
                return this.toArray();
            }else if(index >=0)
            {
                return this[index];
            }else if(index < 0)
            {
                //负数:
                //length 6
                //-1 倒数第一个  5  == length + (-1)
                //-2 倒数第二个  4  == length + (-2)
                return this[this.length + index];
            }
        },

10、代码的可读性，一些方法封装在工产函数的扩展属性html,text,remove,empty
 text:(innerText)
        001 没有参数:把所有选中的标签的innerText属性的值拼接成字符串返回
        002 传递参数(字符串|代码片段):把传入的参数作为innerText的属性值保存

11、操作一些属性节点，和属性
attr:设置(获取|修改和添加)属性节点
    //01 如果不传递参数,直接报错
    //02 传递1个参数(字符串):把指定的所有标签中的第一个标签中指定的属性节点对应的值返回 (getAttribute)
 //03 传递1个参数(对象):批量的设置(添加|修改)对象的属性节点
  //04 传递2个参数:相当于给所有选中的标签都添加属性节点,第一个参数是属性节点的名称,第二个参数是属性节点对应的值
removeAttr:删除属性节点  . removeAttribute删除属性节点
 //01 如果没有传递参数:返回实例化对象
 //判断是否有参数,如果传递了参数,那么就把所有标签中的属性节点删除
prop:设置(获取|修改和添加)属性   this.name=value添加
removePorp:删除属性     delete删除属性

12. css操作

01 jQuery基本结构:闭包(立即调用函数)
02 为什么要使用闭包? => 闭包的好处:为了避免和其他的框架产生冲突
03闭包的结构:
   函数的参数:形式参数 + 实际参数
   函数的调用:实际参数的值赋值给形参
   形式参数:window | undefined (本质上就是在函数内部声明一个临时的变量)
   实际参数:window
   window参数:
    (1) 方便代码压缩,压缩后的 window---> a
    (2) 提升性能(缩短查找链，能快速的访问window)
   undefined参数:
    (1) 方便代码压缩
    (2) 处理兼容性问题(老版本的浏览器|IE) 因此增加一个形参undefined
        001 在IE9-之前undefined可以被修改
        002 在IE5之前undefined不可以直接使用
04外部为什么可以访问$或者是jQuery?
    基本结构是立即调用函数,正常情况下函数外部无法访问函数内部的私有变量
    (1) 闭包,返回函数,在该函数中间接的访问私有数据
    (2) 把私有的数据绑定给全局的变量(jQuery)
     window.$ = window.XMGQuery = XMGQuery;

jq入口函数分析

//001 条件判断为false
    //比如:"" undefined null 0 false NaN等等
    //结果:空的jQuery实例对象  init{ };

002 字符串 （选择器）
比如： $('div')等；
返回的是一个伪数组； {0:div,1:div,2:div....num-1:div,length:num}

 003 字符串(代码片段)
$("<div>我是div</div>")
$("<div>我是div<strong>I am strong</strong></div><span>我是span</span>")
结果:把代码片段中所有的一级标签依次作为key为0.1.2.3..对应的value保存到实例对象中返回    {0:div,length:1 }  {0:div.1:span,length:2}

004数组
$(["demo01", "demo02", "demo03"])
结果;把数组中每个元素依次取出来,作为key为0.1.2.3..对应的value值保存到实例对象中返回  {0:demo01,1:demo02,2:demo03,length:3}

005伪数组
$({0:"name",1:"age",2:"color",length:3}）;
结果;把数组中每个元素依次取出来,作为key为0.1.2.3..对应的value值保存到实例对象中返回 {{0:"name",1:"age",2:"color",length:3}

006 Dom对象
 var oDiv = document.createElement("div");
$(oDiv)
结果：返回的是一个伪数组 {0:div,length :1}

007对象
  var obj = {name:"张三"};
    console.log($(obj));
结果返回一个伪数组；对象的内容保存在  {0:Object, length:1}

008 非0的数字 或者true
$(123);  $(true)
结果：也是一个伪数组
{0:123,length:1}   {0:true,length:1}

009 函数
基本用法
$(function(){});
$().ready(function(){})         作用：等页面加载完毕后，再执行回调函数
等价于 window.onload=function(){}

常用的jq方法

  1、条件判断为false的情况  " ",underfined, null,0,NAN
    返回一个空的对象 init{ } 

  2、 字符串(代码片段)
$("<div>我是div</div>")
$("<div>我是div<strong>I am strong</strong></div><span>我是span</span>")
结果:把代码片段中所有的一级标签依次作为key为0.1.2.3..对应的value保存到实例对象中返回    {0:div,length:1 }  {0:div.1:span,length:2}

  3、选择器 
 $('div') == 返回伪数组
    {0:div,1:div,2:div....num-1:div,length:num}

cal和applyl方法的介绍
call和apply
作用:
    借用其他对象的方法,并且绑定函数内部this
    对象1.方法.call(对象2)
    对象1.方法.apply(对象2)
区别:
      001 传递参数不一样
          对象1.方法.call(对象2,参数1,参数2....)
          对象1.方法.apply(对象2,[参数1,参数2....])
      002 length不一样
          call.length :1
         apply.length:2

4.trim方法
作用:清除字符串前面和后面的空格
注意点:兼容性问题(先判断当前环境是否支持,如果不支持那么自定义)

js：var str02 = " abc";      
    console.log(str02.trim()); == ‘abc’
jq：var content = $('#content').val();
    jQuery.trim(content)

工具方法处理；
处理思路:
    把工具方法写在jQuery自己身上或者是写在jQuery的实例对象的原型对象上面
    如果写在jQuery函数身上,那么在调用的时候,应该$.工具方法(建议)
    如果写在jQuery实例对象的原型对象上面,那么应该$().工具方法

建议:通常来说工具方法是不依赖实例对象的,因此建议把工具方法写在函数身上

原型对象上面的属性和方法:
    jquery:版本号
    selector:默认的选择器
    length:默认的长度
    toArray():把实例对象转换数组返回
    get():获取指定下标的元素，获取的是原生DOM
          参数:正数(0|1|2) 表示获取key为0.1.2.对应的DOM元素
               负数(-1) 表示获取最后一个元素  $('div').get(-1)
               如果不传递参数,那么把所有的标签都放在数组中返回

    eq():获取指定下标的元素,把该元素保存到实例对象中返回
          参数:正数(0|1|2) 表示获取key为0.1.2.对应的DOM元素,保存到实例对象中
            负数(-1) 表示获取最后一个元素,保存到实例对象中
            如果不传递参数,返回的是一个空的对象(并不是实例对象本身)
      $('div').eq(-1)  --> {0:div,length:1}

     first:获取指定标签中的第一个DOM元素,并且把该元素保存到实例对象中返回
    last:获取指定标签中的最后一个DOM元素,并且把该元素保存到实例对象中返回
    $("div").first() ==  $('div').eq(0)   结果 {0:div,length:1}

push: 给数组添加元素，返回数组得到长度
sort: 返回一个空数组
$().push(1, 3, "demo", "test","abc")  ==  5  = [].push
$().sort(1, 3, "demo", "test","abc")  ==  { }

each
使用方法:
    (1) $().each(function () {})   原型方法
    (2) $.each(obj,function (){}) 静态方法
功能:
    (1) 遍历对象|数组|伪数组,把对象的key-value传递给回调函数
    (2) 终止遍历过程
注意点:
    在回调函数中this并不是指向window,而是指向value的值
    为什么要设置this指向value:因为在回调中我们使用最多的就是value的值,this方便操作
    解决方法:绑定回调函数this - >value (call|apply)

map
使用方法:
    (1) $().map(function () {})   原型方法
    (2) $.map(obj,function (){})  静态方法
功能:
    (1) 遍历对象|数组|伪数组,把对象的key-value传递给回调函数(key-value相反)
    (2) 不能终止遍历过程
    (3) 能够收集回调函数中的返回值,组织成一个新的数组返回
    (4) this指向的是window

empty   清空标签的内容，返回标签清空的伪数组  $('div').empty()  ;  {0:div,1:div:length: 2}  
remove: 清除标签； 返回underfined
 html() 和 text() ；
$("div").html("<div>我是很好的div</div>")div里的内容为 “<div>我是很好的div</div>“” 不能解析标签
$("div").text("<div>我是很好的div</div>")  div里的内容为 “”我是很好的“”

操作CSS的方法
attr:设置(获取|修改和添加)属性节点
 //01 如果不传递参数,直接报错
    //console.log($("div").attr());
 //02 传递1个参数(字符串):把指定的所有标签中的第一个标签中指定的属性节点对应的值返回
    console.log($("div").attr("color")); //red
03 传递1个参数(对象):批量的设置(添加|修改)对象的属性节点
    console.log($("div").attr({
        age:"100",
        type:"typeTest",
        color:"yellow"
    }));
 //补充:如果传递一个参数,这个参数既不是字符串也不是对象那么就报错
04 传递2个参数:相当于给所有选中的标签都添加属性节点,第一个参数是属性节点的名称,第二个参数是属性节点对应的值
    console.log($("div").attr("age", "123"));

removeAttr:删除属性节点
 //01 如果没有传递参数:返回实例化对象
    //console.log($("div").removeAttr());
    //02 传递一个参数:删除所有标签中指定的属性节点
    console.log($("div").removeAttr("color"));

prop:设置(获取|修改和添加)属性
  属性和属性节点的区别：
属性|属性节点
属性:对象都有属性,直接保存在对象身上 {age:23}
属性节点:DOM元素才有属性节点,保存在attributes属性上 <div color=red></div>

//00 添加属性
    var ds = document.querySelectorAll("div");
    ds[0]["test"] = "testDemo1";
    ds[1]["test"] = "testDemo2";
    //01 不传递参数:直接报错
    $("div").prop();
    //02 传递1参数(字符串):把指定的所有标签中的第一个标签中指定的属性对应的值返回
    console.log($("div").prop("color"));
    //03 传递1个参数(对象):批量的设置(添加|修改)对象的属性
    console.log($("div").prop({
        "test1":"testA",
        "test2":"testB"
    }));
    //04 传递2个参数
    console.log($("div").prop("test3","texstC"));


removePorp:删除属性
 //01 如果没有传递参数:返回实例化对象
    //console.log($("div").removeProp());
    //02 传递一个参数:删除所有标签中指定的属性
    console.log($("div").removeProp("test"));

val:获取value的值
 //01 如果没有传递参数,那么表示获取第一个标签中的value
        //console.log($("input").val());

        //02 传递参数:修改所有标签的value
        console.log($("input").val("李四"));

        //补充(注意点):DOM对象中有两个value
        //(1)value属性节点
        //(2)value属性     实时更新

css:设置样式
hasClass:是否有class
 //00 如果不传递参数,总是返回false
    //console.log($("div").hasClass());
    //01 传入参数
    //判断页面中所有的div标签中是否存在a这个class
    //如果有,那么就返回true,如果没有那么就返回false,只要有那么就返回true
//    console.log($("div").hasClass("aabbc"));

addClass:添加class
removeClass:删除class
toggleClass:切换(如果有那么就删除,如果没有那么就添加)

JQ 工具方法

一些工具方法储存在jq的实例对象中，还有的储存在jq原型对象init函数的实例对象中$().，前面时候 $后面不需要加（）

例如：$.isString('123') = true 
常见的JQ静态方法工具方法有 $.isString()
isString 判断是否是字符串  
isHtml 判断是否为html标签
trim 去除空格 $.trim('   12')
isArray 判断是否是数组
isLikeArray  判断是否是伪数组
isObject   判断是否是对象
isWindow  判断是否是window的对象
isFunction 判断是否是函数
each 遍历对象 、数组  $.each(obj,function(index.item){  } )
map 遍历对象 、数组 $.map(obj,function(item.index){  } )

常见的jq原型对象的静态方法 $().empty()
empty
remove
text
html
appendTo
prependTo
append
prepend