jq的基本結(jié)構(gòu)

1竹习、閉包的形式摘昌。不與外界框架沖突哨坪，把私有變量賦值給了全局變量 windows
2肮蛹、一個(gè)工廠函數(shù)凡纳，函數(shù)返回的是一個(gè)構(gòu)造函數(shù)的實(shí)例化對(duì)象
3、通過原型式繼承子姜，將工廠函數(shù)的原型對(duì)象 賦值給 構(gòu)造函數(shù)的原型對(duì)象；便可以訪問工廠函數(shù)里面的方法弓叛。
4、ready方法诚纸。封裝監(jiān)聽了dom加載完畢邪码，再回調(diào)函數(shù)，監(jiān)聽要兼容ie5(attachEvent)  谷歌addEventListener
5咬清、封裝了插件一些工具方法（插件）比如：isString; trim; isLikeArray 封裝在jq的擴(kuò)展方法extend上闭专，也就是jq的靜態(tài)方法上，在通過拷貝給this旧烧，$.isString()訪問
6影钉、入口函數(shù)分析：①判斷是夠?yàn)閒alse 返回一個(gè)空的實(shí)例化對(duì)象
②、是否為函數(shù)掘剪、調(diào)用this.ready()
③平委、字符串
  1、是否是html夺谁，將一級(jí)標(biāo)簽一次key-value保存到實(shí)例化對(duì)象廉赔。
      var oDiv = document.createElement("div");
     oDiv.innerHTML = selector;
    [].push.apply(this, oDiv.children);
  2 判斷是否是選擇器。 [].push.apply(this, document.querySelectorAll(selector));
獲取頁面中所有指定的標(biāo)簽 + 把所有的標(biāo)簽都保存到實(shí)例對(duì)象中 + 添加length屬性3匾鸥、數(shù)組和偽數(shù)組

   
8蜡塌、有一些方法each。map不僅在擴(kuò)展方法（工廠函數(shù)的靜態(tài)方法）勿负，在原型對(duì)象也封裝了馏艾。$.each(參數(shù)1，函數(shù)) 奴愉，  $().each(函數(shù))
  //具體實(shí)現(xiàn):先遍歷temp,然后把key-value傳遞給fn （遍歷需要判斷是否是數(shù)組琅摩，偽數(shù)組，對(duì)象）  在賦值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锭硼、一些原型對(duì)象方法是get房资、eq、first檀头、last
  get獲取的是沒有解析的dom元素轰异、而eq方法獲取是dom里內(nèi)容 只需要this.get(idnex)  相當(dāng)于$(代碼片段)
  get:function (index) {
            /*
        參數(shù):正數(shù)(0|1|2) 表示獲取key為0.1.2.對(duì)應(yīng)的DOM元素
             負(fù)數(shù)(-1) 表示獲取最后一個(gè)元素
             如果不傳遞參數(shù),那么把所有的標(biāo)簽都放在數(shù)組中返回 (實(shí)例對(duì)象 -> 數(shù)組)
            * */
            //001 判斷沒有參數(shù)的情況
            if(arguments.length == 0)
            {
                return this.toArray();
            }else if(index >=0)
            {
                return this[index];
            }else if(index < 0)
            {
                //負(fù)數(shù):
                //length 6
                //-1 倒數(shù)第一個(gè)  5  == length + (-1)
                //-2 倒數(shù)第二個(gè)  4  == length + (-2)
                return this[this.length + index];
            }
        },

10、代碼的可讀性鳖擒，一些方法封裝在工產(chǎn)函數(shù)的擴(kuò)展屬性html,text,remove,empty
 text:(innerText)
        001 沒有參數(shù):把所有選中的標(biāo)簽的innerText屬性的值拼接成字符串返回
        002 傳遞參數(shù)(字符串|代碼片段):把傳入的參數(shù)作為innerText的屬性值保存

11溉浙、操作一些屬性節(jié)點(diǎn)，和屬性
attr:設(shè)置(獲取|修改和添加)屬性節(jié)點(diǎn)
    //01 如果不傳遞參數(shù),直接報(bào)錯(cuò)
    //02 傳遞1個(gè)參數(shù)(字符串):把指定的所有標(biāo)簽中的第一個(gè)標(biāo)簽中指定的屬性節(jié)點(diǎn)對(duì)應(yīng)的值返回 (getAttribute)
 //03 傳遞1個(gè)參數(shù)(對(duì)象):批量的設(shè)置(添加|修改)對(duì)象的屬性節(jié)點(diǎn)
  //04 傳遞2個(gè)參數(shù):相當(dāng)于給所有選中的標(biāo)簽都添加屬性節(jié)點(diǎn),第一個(gè)參數(shù)是屬性節(jié)點(diǎn)的名稱,第二個(gè)參數(shù)是屬性節(jié)點(diǎn)對(duì)應(yīng)的值
removeAttr:刪除屬性節(jié)點(diǎn)  . removeAttribute刪除屬性節(jié)點(diǎn)
 //01 如果沒有傳遞參數(shù):返回實(shí)例化對(duì)象
 //判斷是否有參數(shù),如果傳遞了參數(shù),那么就把所有標(biāo)簽中的屬性節(jié)點(diǎn)刪除
prop:設(shè)置(獲取|修改和添加)屬性   this.name=value添加
removePorp:刪除屬性     delete刪除屬性

12. css操作

01 jQuery基本結(jié)構(gòu):閉包(立即調(diào)用函數(shù))
02 為什么要使用閉包? => 閉包的好處:為了避免和其他的框架產(chǎn)生沖突
03閉包的結(jié)構(gòu):
   函數(shù)的參數(shù):形式參數(shù) + 實(shí)際參數(shù)
   函數(shù)的調(diào)用:實(shí)際參數(shù)的值賦值給形參
   形式參數(shù):window | undefined (本質(zhì)上就是在函數(shù)內(nèi)部聲明一個(gè)臨時(shí)的變量)
   實(shí)際參數(shù):window
   window參數(shù):
    (1) 方便代碼壓縮,壓縮后的 window---> a
    (2) 提升性能(縮短查找鏈蒋荚，能快速的訪問window)
   undefined參數(shù):
    (1) 方便代碼壓縮
    (2) 處理兼容性問題(老版本的瀏覽器|IE) 因此增加一個(gè)形參undefined
        001 在IE9-之前undefined可以被修改
        002 在IE5之前undefined不可以直接使用
04外部為什么可以訪問$或者是jQuery?
    基本結(jié)構(gòu)是立即調(diào)用函數(shù),正常情況下函數(shù)外部無法訪問函數(shù)內(nèi)部的私有變量
    (1) 閉包,返回函數(shù),在該函數(shù)中間接的訪問私有數(shù)據(jù)
    (2) 把私有的數(shù)據(jù)綁定給全局的變量(jQuery)
     window.$ = window.XMGQuery = XMGQuery;

jq入口函數(shù)分析

//001 條件判斷為false
    //比如:"" undefined null 0 false NaN等等
    //結(jié)果:空的jQuery實(shí)例對(duì)象  init{ };

002 字符串 （選擇器）
比如： $('div')等；
返回的是一個(gè)偽數(shù)組馆蠕； {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>")
結(jié)果:把代碼片段中所有的一級(jí)標(biāo)簽依次作為key為0.1.2.3..對(duì)應(yīng)的value保存到實(shí)例對(duì)象中返回    {0:div,length:1 }  {0:div.1:span,length:2}

004數(shù)組
$(["demo01", "demo02", "demo03"])
結(jié)果;把數(shù)組中每個(gè)元素依次取出來,作為key為0.1.2.3..對(duì)應(yīng)的value值保存到實(shí)例對(duì)象中返回  {0:demo01,1:demo02,2:demo03,length:3}

005偽數(shù)組
$({0:"name",1:"age",2:"color",length:3}）;
結(jié)果;把數(shù)組中每個(gè)元素依次取出來,作為key為0.1.2.3..對(duì)應(yīng)的value值保存到實(shí)例對(duì)象中返回 {{0:"name",1:"age",2:"color",length:3}

006 Dom對(duì)象
 var oDiv = document.createElement("div");
$(oDiv)
結(jié)果：返回的是一個(gè)偽數(shù)組 {0:div,length :1}

007對(duì)象
  var obj = {name:"張三"};
    console.log($(obj));
結(jié)果返回一個(gè)偽數(shù)組期升；對(duì)象的內(nèi)容保存在  {0:Object, length:1}

008 非0的數(shù)字 或者true
$(123);  $(true)
結(jié)果：也是一個(gè)偽數(shù)組
{0:123,length:1}   {0:true,length:1}

009 函數(shù)
基本用法
$(function(){});
$().ready(function(){})         作用：等頁面加載完畢后惊奇，再執(zhí)行回調(diào)函數(shù)
等價(jià)于 window.onload=function(){}

常用的jq方法

  1、條件判斷為false的情況  " ",underfined, null,0,NAN
    返回一個(gè)空的對(duì)象 init{ } 

  2播赁、 字符串(代碼片段)
$("<div>我是div</div>")
$("<div>我是div<strong>I am strong</strong></div><span>我是span</span>")
結(jié)果:把代碼片段中所有的一級(jí)標(biāo)簽依次作為key為0.1.2.3..對(duì)應(yīng)的value保存到實(shí)例對(duì)象中返回    {0:div,length:1 }  {0:div.1:span,length:2}

  3颂郎、選擇器 
 $('div') == 返回偽數(shù)組
    {0:div,1:div,2:div....num-1:div,length:num}

cal和applyl方法的介紹
call和apply
作用:
    借用其他對(duì)象的方法,并且綁定函數(shù)內(nèi)部this
    對(duì)象1.方法.call(對(duì)象2)
    對(duì)象1.方法.apply(對(duì)象2)
區(qū)別:
      001 傳遞參數(shù)不一樣
          對(duì)象1.方法.call(對(duì)象2,參數(shù)1,參數(shù)2....)
          對(duì)象1.方法.apply(對(duì)象2,[參數(shù)1,參數(shù)2....])
      002 length不一樣
          call.length :1
         apply.length:2

4.trim方法
作用:清除字符串前面和后面的空格
注意點(diǎn):兼容性問題(先判斷當(dāng)前環(huán)境是否支持,如果不支持那么自定義)

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

工具方法處理；
處理思路:
    把工具方法寫在jQuery自己身上或者是寫在jQuery的實(shí)例對(duì)象的原型對(duì)象上面
    如果寫在jQuery函數(shù)身上,那么在調(diào)用的時(shí)候,應(yīng)該$.工具方法(建議)
    如果寫在jQuery實(shí)例對(duì)象的原型對(duì)象上面,那么應(yīng)該$().工具方法

建議:通常來說工具方法是不依賴實(shí)例對(duì)象的,因此建議把工具方法寫在函數(shù)身上

原型對(duì)象上面的屬性和方法:
    jquery:版本號(hào)
    selector:默認(rèn)的選擇器
    length:默認(rèn)的長度
    toArray():把實(shí)例對(duì)象轉(zhuǎn)換數(shù)組返回
    get():獲取指定下標(biāo)的元素容为，獲取的是原生DOM
          參數(shù):正數(shù)(0|1|2) 表示獲取key為0.1.2.對(duì)應(yīng)的DOM元素
               負(fù)數(shù)(-1) 表示獲取最后一個(gè)元素  $('div').get(-1)
               如果不傳遞參數(shù),那么把所有的標(biāo)簽都放在數(shù)組中返回

    eq():獲取指定下標(biāo)的元素,把該元素保存到實(shí)例對(duì)象中返回
          參數(shù):正數(shù)(0|1|2) 表示獲取key為0.1.2.對(duì)應(yīng)的DOM元素,保存到實(shí)例對(duì)象中
            負(fù)數(shù)(-1) 表示獲取最后一個(gè)元素,保存到實(shí)例對(duì)象中
            如果不傳遞參數(shù),返回的是一個(gè)空的對(duì)象(并不是實(shí)例對(duì)象本身)
      $('div').eq(-1)  --> {0:div,length:1}

     first:獲取指定標(biāo)簽中的第一個(gè)DOM元素,并且把該元素保存到實(shí)例對(duì)象中返回
    last:獲取指定標(biāo)簽中的最后一個(gè)DOM元素,并且把該元素保存到實(shí)例對(duì)象中返回
    $("div").first() ==  $('div').eq(0)   結(jié)果 {0:div,length:1}

push: 給數(shù)組添加元素乓序，返回?cái)?shù)組得到長度
sort: 返回一個(gè)空數(shù)組
$().push(1, 3, "demo", "test","abc")  ==  5  = [].push
$().sort(1, 3, "demo", "test","abc")  ==  { }

each
使用方法:
    (1) $().each(function () {})   原型方法
    (2) $.each(obj,function (){}) 靜態(tài)方法
功能:
    (1) 遍歷對(duì)象|數(shù)組|偽數(shù)組,把對(duì)象的key-value傳遞給回調(diào)函數(shù)
    (2) 終止遍歷過程
注意點(diǎn):
    在回調(diào)函數(shù)中this并不是指向window,而是指向value的值
    為什么要設(shè)置this指向value:因?yàn)樵诨卣{(diào)中我們使用最多的就是value的值,this方便操作
    解決方法:綁定回調(diào)函數(shù)this - >value (call|apply)

map
使用方法:
    (1) $().map(function () {})   原型方法
    (2) $.map(obj,function (){})  靜態(tài)方法
功能:
    (1) 遍歷對(duì)象|數(shù)組|偽數(shù)組,把對(duì)象的key-value傳遞給回調(diào)函數(shù)(key-value相反)
    (2) 不能終止遍歷過程
    (3) 能夠收集回調(diào)函數(shù)中的返回值,組織成一個(gè)新的數(shù)組返回
    (4) this指向的是window

empty   清空標(biāo)簽的內(nèi)容，返回標(biāo)簽清空的偽數(shù)組  $('div').empty()  ;  {0:div,1:div:length: 2}  
remove: 清除標(biāo)簽坎背； 返回underfined
 html() 和 text() 替劈；
$("div").html("<div>我是很好的div</div>")div里的內(nèi)容為 “<div>我是很好的div</div>“” 不能解析標(biāo)簽
$("div").text("<div>我是很好的div</div>")  div里的內(nèi)容為 “”我是很好的“”

操作CSS的方法
attr:設(shè)置(獲取|修改和添加)屬性節(jié)點(diǎn)
 //01 如果不傳遞參數(shù),直接報(bào)錯(cuò)
    //console.log($("div").attr());
 //02 傳遞1個(gè)參數(shù)(字符串):把指定的所有標(biāo)簽中的第一個(gè)標(biāo)簽中指定的屬性節(jié)點(diǎn)對(duì)應(yīng)的值返回
    console.log($("div").attr("color")); //red
03 傳遞1個(gè)參數(shù)(對(duì)象):批量的設(shè)置(添加|修改)對(duì)象的屬性節(jié)點(diǎn)
    console.log($("div").attr({
        age:"100",
        type:"typeTest",
        color:"yellow"
    }));
 //補(bǔ)充:如果傳遞一個(gè)參數(shù),這個(gè)參數(shù)既不是字符串也不是對(duì)象那么就報(bào)錯(cuò)
04 傳遞2個(gè)參數(shù):相當(dāng)于給所有選中的標(biāo)簽都添加屬性節(jié)點(diǎn),第一個(gè)參數(shù)是屬性節(jié)點(diǎn)的名稱,第二個(gè)參數(shù)是屬性節(jié)點(diǎn)對(duì)應(yīng)的值
    console.log($("div").attr("age", "123"));

removeAttr:刪除屬性節(jié)點(diǎn)
 //01 如果沒有傳遞參數(shù):返回實(shí)例化對(duì)象
    //console.log($("div").removeAttr());
    //02 傳遞一個(gè)參數(shù):刪除所有標(biāo)簽中指定的屬性節(jié)點(diǎn)
    console.log($("div").removeAttr("color"));

prop:設(shè)置(獲取|修改和添加)屬性
  屬性和屬性節(jié)點(diǎn)的區(qū)別：
屬性|屬性節(jié)點(diǎn)
屬性:對(duì)象都有屬性,直接保存在對(duì)象身上 {age:23}
屬性節(jié)點(diǎn):DOM元素才有屬性節(jié)點(diǎn),保存在attributes屬性上 <div color=red></div>

//00 添加屬性
    var ds = document.querySelectorAll("div");
    ds[0]["test"] = "testDemo1";
    ds[1]["test"] = "testDemo2";
    //01 不傳遞參數(shù):直接報(bào)錯(cuò)
    $("div").prop();
    //02 傳遞1參數(shù)(字符串):把指定的所有標(biāo)簽中的第一個(gè)標(biāo)簽中指定的屬性對(duì)應(yīng)的值返回
    console.log($("div").prop("color"));
    //03 傳遞1個(gè)參數(shù)(對(duì)象):批量的設(shè)置(添加|修改)對(duì)象的屬性
    console.log($("div").prop({
        "test1":"testA",
        "test2":"testB"
    }));
    //04 傳遞2個(gè)參數(shù)
    console.log($("div").prop("test3","texstC"));


removePorp:刪除屬性
 //01 如果沒有傳遞參數(shù):返回實(shí)例化對(duì)象
    //console.log($("div").removeProp());
    //02 傳遞一個(gè)參數(shù):刪除所有標(biāo)簽中指定的屬性
    console.log($("div").removeProp("test"));

val:獲取value的值
 //01 如果沒有傳遞參數(shù),那么表示獲取第一個(gè)標(biāo)簽中的value
        //console.log($("input").val());

        //02 傳遞參數(shù):修改所有標(biāo)簽的value
        console.log($("input").val("李四"));

        //補(bǔ)充(注意點(diǎn)):DOM對(duì)象中有兩個(gè)value
        //(1)value屬性節(jié)點(diǎn)
        //(2)value屬性     實(shí)時(shí)更新

css:設(shè)置樣式
hasClass:是否有class
 //00 如果不傳遞參數(shù),總是返回false
    //console.log($("div").hasClass());
    //01 傳入?yún)?shù)
    //判斷頁面中所有的div標(biāo)簽中是否存在a這個(gè)class
    //如果有,那么就返回true,如果沒有那么就返回false,只要有那么就返回true
//    console.log($("div").hasClass("aabbc"));

addClass:添加class
removeClass:刪除class
toggleClass:切換(如果有那么就刪除,如果沒有那么就添加)

JQ 工具方法

一些工具方法儲(chǔ)存在jq的實(shí)例對(duì)象中，還有的儲(chǔ)存在jq原型對(duì)象init函數(shù)的實(shí)例對(duì)象中$().得滤，前面時(shí)候 $后面不需要加（）

例如：$.isString('123') = true 
常見的JQ靜態(tài)方法工具方法有 $.isString()
isString 判斷是否是字符串  
isHtml 判斷是否為html標(biāo)簽
trim 去除空格 $.trim('   12')
isArray 判斷是否是數(shù)組
isLikeArray  判斷是否是偽數(shù)組
isObject   判斷是否是對(duì)象
isWindow  判斷是否是window的對(duì)象
isFunction 判斷是否是函數(shù)
each 遍歷對(duì)象 陨献、數(shù)組  $.each(obj,function(index.item){  } )
map 遍歷對(duì)象 、數(shù)組 $.map(obj,function(item.index){  } )

常見的jq原型對(duì)象的靜態(tài)方法 $().empty()
empty
remove
text
html
appendTo
prependTo
append
prepend