-----好記性不如爛筆頭。勤做筆記便于復(fù)習(xí)加深映像！

-----JQuery雖然有點(diǎn)過(guò)時(shí)书聚，但仍有借鑒作用雌续。學(xué)習(xí)時(shí)結(jié)合了網(wǎng)易云上的課程視頻的筆記和菜鳥教程網(wǎng)站的jq文檔知識(shí)，盡最大可能查漏補(bǔ)缺。so 將學(xué)習(xí)時(shí)的總結(jié)和領(lǐng)會(huì)記錄了下來(lái)藤肢、便于以后翻閱丑孩。
1.引入方式三種（放置位置要在使用地方之前,之后的話需要做一丟丟處理在（4）處已說(shuō)明）：

引入方式

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作吶!");
  });
});

3. 分清js原生對(duì)象和jq對(duì)象,寫的時(shí)候容易混用牡整，用原生對(duì)象就去調(diào)用jq方法了。原生對(duì)象無(wú)法調(diào)用后者方法，調(diào)用先轉(zhuǎn)換卓起，轉(zhuǎn)換方式$(需轉(zhuǎn)原生對(duì)象)就可以調(diào)用jq方法了奕筐。

this.html()//報(bào)錯(cuò):Uncaught TypeError: this.html is not a function
 $(this).html()//把原生對(duì)象的this轉(zhuǎn)為jq對(duì)象
var oTest = document.getElementById("test");
    //其他js對(duì)象轉(zhuǎn)jq對(duì)象
    console.log($(oTest))
console.log($("#test").get(0))//get(0)jq對(duì)象集合里獲取的第一個(gè)對(duì)象值

對(duì)象對(duì)比

//    書寫位置，若要寫在查找元素之前
    window.onload = function () {}//原生中寫法
    //jq中寫法
//方法一：
$(document).ready(function(){
    // 執(zhí)行代碼
});
//方法二：
    $(function () {
        $("#test")
    })

5.jq選擇器常用共8種，可根據(jù)css選擇器腾降，對(duì)比記憶呀。另外涕刚，選擇器中可使用css中的偽類選擇器

//1.id選擇器
$("#box").html()  // 用 #號(hào)
//2.類選擇器
$(".box").html   //用 . 號(hào)
//3.標(biāo)簽選擇器
$("div").html   //直接給標(biāo)簽名
//4.多元素選擇器
$("#box,.box,div").html();  // 幾種選擇器組合
//5.后代選擇器
$("#box p").html()  // 用空格隔開
//6.子元素選擇器
$("#box > p").html() ; // 用> 隔開
//7.偽類選擇器
$("p:nth-child(2)").css("background-color"))
//8.屬性選擇器
$("input[value=men]") ; //找 value=men的input元素
$("input[value*=men]") ; //找 value里面包含men的input元素
$("input[value^=men]") ; //找 value里面以men開頭的input元素
$("input[value$=men]") ; //找 value里面以men結(jié)尾的input元素

6.過(guò)濾方法

:first//用法: 
$(”tr:first”) ;// 匹配找到的第一個(gè)元素
:last //匹配找到的最后一個(gè)元素
:not(selector) //去除所有與給定選擇器匹配的元素
:even//匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)
:odd//匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù)
:eq(index) //匹配一個(gè)給定索引值的元素戴陡，從 0 開始計(jì)數(shù)
:gt(index) //匹配所有大于給定索引值的元素异吻，從 0 開始計(jì)數(shù)
:lt(index) //匹配所有小于給定索引值的元素裹赴，從 0 開始計(jì)數(shù)
$("p").filter(".url")//返回帶有類名 "url" 的所有 <p> 元素

7.jq中部分常用方法：

（1）addClass() //為每個(gè)匹配的元素添加指定的樣式名
$('div').addClass('box'); //為頁(yè)面中所有的div添加一個(gè)box樣式
（2）removeClass()// 移除集合中每個(gè)匹配元素上一個(gè)、多個(gè)或全部樣式
$('p,.box').removeClass('classname')//classname只需類名即可诀浪，不需要加"."
（3）toggleClass() //樣式切換棋返，如果有就刪除，如果沒(méi)有就添加
$("p").click(function () {
      $(this).toggleClass("highlight");
});
（4）$('p').html() //獲取p標(biāo)簽里面的內(nèi)容
$('p').html('床前明月光')雷猪；//設(shè)置html里面的內(nèi)容
（5）$('p').text();
$('p').text('床前明月光')睛竣；
 //tml方法功能和原生方法innerHTML一樣 ，text方法功能和原生方法innerText一樣求摇。val() 獲取或者設(shè)置表單元素的值射沟，這里要注意的是 獲取的是表單元素的值 不要和html 以及 text方法搞混
（6）$("input").val(text);
//獲取屬性值 attr()和prop() 方法用于獲取屬性值。
（7）$("#aa").attr("href")
（8）$("#aa").prop("href")
//相同點(diǎn)：兩者獲取的屬性有值与境，返回指定屬性值
//不同點(diǎn)：沒(méi)有相應(yīng)的屬性验夯，prop()返回值是空字符串,attr()返回值是 undefined
//HTML元素本身就帶有的固有屬性用------>prop(),自定義的DOM屬性則用---->attr()
//具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()摔刁，使用attr的話屬性效果無(wú)法實(shí)現(xiàn)挥转。

attr和prop屬性使用參考圖

//用attr（）設(shè)置屬性值
//1.$("#aa").attr( "href","http://www.baidu.com");
//2.同時(shí)設(shè)置多個(gè)屬性,例如href 和 title 屬性
$("#aa").attr({
        "href" : "http://www.baidu.com",
        "title" : "jQuery"
    });
//2.回調(diào)函數(shù),兩參數(shù)：第一個(gè)為被選元素列表中當(dāng)前元素的下標(biāo)，以及原始（舊的）值
$("#aa").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
}）
（9）//removeAttr() 刪除屬性
$("input").removeAttr("data");
（10）//removeProp()同上
$("input").removeProp("checked");

（11）//設(shè)置樣式的css()方法
$('div').css('color','red'); //設(shè)置所有div字體顏色為紅色
$('div').css('color')  //獲取顏色
//批量設(shè)置法一：
//index參數(shù)：選中的div的遍歷集合共屈，從0開始绑谣；item參數(shù)：
$('div').css('color',function(index,item){
//console.log(index)打印查看
//console.log(item)
//奇數(shù)設(shè)置處理if(index%2==0){
      if(index<=4){
           return  'blue'; 
      }
}) //下標(biāo)小于4的都設(shè)置成藍(lán)色
//批量設(shè)置法二：
$('div').css({"color":"yellow","font-size":"25px"})//對(duì)象傳入設(shè)置
（12）//each()方法 后臺(tái)傳來(lái)的數(shù)據(jù)，數(shù)組對(duì)象拗引〗柘可遍歷
$("li").each(function(index, item){
   //index 為li的下標(biāo)  item表示每個(gè)li（元素或?qū)ο螅?   console.log(index, item)   
]})

8.添加元素：

    var txt1="<p>文本。</p>";              // 使用 HTML 標(biāo)簽創(chuàng)建文本
    var txt2=$("<p></p>").text("文本寺擂。");  // 使用 jQuery 創(chuàng)建文本
    var txt2=$("<p>"+"拼接加入"+"</p>"); //拼接動(dòng)態(tài)文本數(shù)據(jù)進(jìn)入
    var txt3=document.createElement("p");
    txt3.innerHTML="文本暇务。";               // 使用 DOM 創(chuàng)建文本 text with DOM

append/prepend和after/before的區(qū)別。兩組的意思都為---->從后面插入/從前面插入怔软。兩者的區(qū)別：
(1).append/prepend 是在選擇元素內(nèi)部嵌入垦细。
(2).after/before 是在元素外面追加。
(3).當(dāng)選中最小一層的元素或者無(wú)嵌套的元素挡逼，兩者效果一樣

//例如括改，選中ul下的第二個(gè)li,前兩個(gè)和后兩個(gè)效果一致
$("ul li").get(1).prepend("<li>追加列表項(xiàng)</li>");
$("ul li").get(1).append(" <li>追加列表項(xiàng)</li>");
$("ul li").get(1).before("<li>追加列表項(xiàng)</li>");
$("ul li").get(1).after("<li>追加列表項(xiàng)</li>");

(4).appendTo/prependTo ,insertAfter/insertBefore方法與append/prepend，after/before方法就是小學(xué)所學(xué)“把”和“被”的關(guān)系

$(li).appendTo($("#ul")); //把li元素添加到ul中 家坎，這個(gè)元素被添加到ul中原有元素的后面
$(li).appendTo($("#ul")); //把li添加到ul中 嘱能，這個(gè)元素被添加到ul中原有元素的前面
$("#li2").insertAfter($("#li1")); // 把li2 添加到li1 后面
$("#li2").insertBefore($("#li1")); // 把li2 添加到li1 前面

9.刪除元素：
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素

$("#div1").empty();
$("#div1").remove();
//可接受一個(gè)參數(shù)吝梅，允許對(duì)被刪元素進(jìn)行過(guò)濾
 $("p").remove(".italic");//對(duì)類名為.italic的p元素刪除

10.遍歷方法（關(guān)系查找方法）,包括兄弟關(guān)系（同級(jí)同代）、祖先后代關(guān)系（隔代）--------應(yīng)用中最重要的就是可以傳入過(guò)濾條件進(jìn)行篩選Ｈ锹睢Ｋ招！对粪。
兄弟關(guān)系（同級(jí)同代）：
（1）prev()和prevAll(),next()和nextAll()右冻，prevtUntil()和nexttUntil()，siblings()方法五個(gè)返回的都是jq對(duì)象Ｖ谩纱扭！

$(".box").prev() //獲取前面一個(gè)兄弟節(jié)點(diǎn)
$(".box").prevAll() //獲取前面所有的兄弟節(jié)點(diǎn)
$(".box").prevAll("p")//可傳入過(guò)濾條件，獲取上面所有元素的p元素
$(".box2").prevtUntil(".box1");//返回.box1和.box2之間的所有元素,向上找
$(".box").prev() //獲取前面所有的兄弟節(jié)點(diǎn)
$(".box").next() //獲取后面一個(gè)兄弟節(jié)點(diǎn)
$(".box").nextAll() //獲取后面所有的兄弟節(jié)點(diǎn)
$(".box1").nextUntil(".box2");//返回.box1和.box2之間的所有元素儡遮，向下找
$(".box").siblings() //獲取所有的兄弟節(jié)點(diǎn)

祖先后代關(guān)系（隔代）：
（1）長(zhǎng)輩：parent()乳蛾，parents()，parentsUntil()及closest()方法

$("span").parent()//返回每個(gè) <span> 元素的的直接父元素,它爸爸
$("span").parents();//返回所有 <span> 元素的所有祖先,它一路向上直到文檔的根元素 "<html>"
$("span").parentsUntil("div");//返回介于 <span> 與 <div> 元素之間的所有祖先元素,位置不可換鄙币，輩分‘小’---->‘大’
$("input").closest('li');//找到input上面最近的li父級(jí)

（2）后輩：find()肃叶，children()方法；index(),get()爱榔，eq()方法（順便補(bǔ)充）

$(function () {
        $("li").click(function () {
 // alert($(this).html())
          alert($(this).index()) //快熟獲取的當(dāng)前元素的下標(biāo)
        })
//獲取集合中的某個(gè)元素,2為獲取元素的下標(biāo)被环，返回原生的元素，不可用jq方法详幽，需轉(zhuǎn)換
 console.log($("li").get(2))
//eq()同上get（）方法一樣效果,但返回的是jq對(duì)象筛欢！
  console.log($("li").get(2))
//find()方法返回的是一個(gè)jq對(duì)象！４狡浮０婀谩！迟郎！
$(".box").find("p"); //找到box類下面所有的p標(biāo)簽
$(".box").find(".aa");//找到box類下面所有的含類名為aa的標(biāo)簽
 console.log(111,$(".box").find($(".innerBox")))//找到對(duì)象
$("div").children();//返回被選元素的所有直接子元素 $("div").children("p.aa");//返回類名為 "aa" 的所有 <p> 元素
    })

11.jq中的事件
元素效果事件常用有：
①click() 方法是當(dāng)按鈕點(diǎn)擊事件被觸發(fā)
②dblclick ()方法雙擊元素時(shí)剥险，會(huì)發(fā)生 dblclick 事件
③mouseenter()方法當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)，會(huì)發(fā)生 mouseenter 事件
④mouseleave()當(dāng)鼠標(biāo)指針離開元素時(shí)宪肖，會(huì)發(fā)生 mouseleave 事件
⑤mousedown()當(dāng)鼠標(biāo)指針移動(dòng)到元素上方表制，并按下鼠標(biāo)按鍵時(shí)，會(huì)發(fā)生 mousedown 事件
⑥mouseup()當(dāng)在元素上松開鼠標(biāo)按鈕時(shí)控乾，會(huì)發(fā)生 mouseup 事件
⑦h(yuǎn)over()方法當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)么介，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)
⑧focus()當(dāng)元素獲得焦點(diǎn)時(shí)蜕衡，發(fā)生 focus 事件
⑨blur()當(dāng)元素失去焦點(diǎn)時(shí)壤短，發(fā)生 blur 事件
鍵盤事件常用有：
①.keydown：在鍵盤上按下某鍵時(shí)發(fā)生,一直按著則會(huì)不斷觸發(fā)（opera瀏覽器除外）, 它返回的是鍵盤代碼;
②keypress：在鍵盤上按下一個(gè)按鍵，并產(chǎn)生一個(gè)字符時(shí)發(fā)生, 返回ASCII碼。注意: shift久脯、alt纳胧、ctrl等鍵按下并不會(huì)產(chǎn)生字符（返回的是空白字符）
③keyup：用戶松開某一個(gè)按鍵時(shí)觸發(fā), 與keydown相對(duì), 返回鍵盤代碼.

$(window).keydown( function(event){
   // 通過(guò)event.which可以拿到按鍵代碼.  如果是keypress事件中,則拿到ASCII碼.
} );

上面的所有事件一般傳入函數(shù)，實(shí)現(xiàn)效果帘撰！

事件的綁定方法：
①on方法綁定

$('#box').on('click',function(){//上面的方法都可使用on方法跑慕，替換"click"即可
    alert("on監(jiān)聽(tīng)事件");
})
$('#box').on('click mouseleave',function(){//用空格隔開可監(jiān)聽(tīng)多個(gè)事件
alert("on監(jiān)聽(tīng)多個(gè)事件");
}

②直接綁定

$("#box").click(function(){
     alert("直接使用"）
})

刪除事件：

$("#box").off("blur");  //刪除事件

事件冒泡：
事件冒泡就是事件會(huì)從元素內(nèi)部往外傳播的一種現(xiàn)象，事件冒泡的好處就是可以節(jié)約代碼骡和，比如說(shuō)相赁，有個(gè)需求是，點(diǎn)擊某個(gè)按鈕btn1 的時(shí)候顯示一個(gè)div慰于，點(diǎn)擊其他元素的時(shí)候隱藏div，這個(gè)時(shí)候唤衫，如果沒(méi)有冒泡機(jī)制婆赠，要實(shí)現(xiàn)這個(gè)需求就要給除了btn1 以外的所有元素都綁定上點(diǎn)擊事件，如果當(dāng)前頁(yè)面有成千上萬(wàn)個(gè)元素佳励，那么事件就會(huì)被重復(fù)綁定成千上萬(wàn)次休里，如果有了事件冒泡機(jī)制就可以把事件綁定給document，通過(guò)冒泡機(jī)制赃承，點(diǎn)擊其他的元素都會(huì)觸發(fā)document身上的點(diǎn)擊事件妙黍，從而節(jié)約代碼，此時(shí)瞧剖，只需要把btn1身上的點(diǎn)擊事件阻止冒泡就行了

$("#btn1").on("click",function(ev){
      ev.stopPropagation();
})

事件委托:

//兩中方法拭嫁，on（）和delegate（）都可
//1.7版本后on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
$("ul").on("click","li",function(){
     $(this).css("background","#ccc");
})
$("ul").delegate("li","click",function(){
     $(this).css("background","#ccc");
})

阻止默認(rèn)行為：
瀏覽器會(huì)自帶一些默認(rèn)行為抓于，比如說(shuō)右鍵菜單做粤，表單提交等，如果要實(shí)現(xiàn)自定義右鍵菜單或者表單驗(yàn)證這些功能的時(shí)候就需要把這些默認(rèn)行為阻止掉

$("#btn1").on("click",function(ev){
      ev.preventDefault();
})
$(function () {
        $(document).contextmenu(function (ev) {
            // ev.preventDefault()
            return false;//既可以阻止默認(rèn)行為捉撮，也可以阻止冒泡
        })

• 阻止默認(rèn)行為總結(jié)： 在jquery中可以直接return false 怕品；return false 具有阻止瀏覽器默認(rèn)行為和阻止冒泡的功能
  11.AJAX相關(guān)方法
  1.$.ajax() 執(zhí)行一個(gè)異步的ajax請(qǐng)求

$.ajax({
    url:'http://www.wp.com/getData.php',       //跨域到http://www.wp.com，另巾遭，http://test.com也算跨域
    type:'GET',                                //jsonp 類型下只能使用GET,不能用POST,這里不寫默認(rèn)為GET
    dataType:'jsonp',                          //指定為jsonp類型
    data:{"name":"Zjmainstay"},                //數(shù)據(jù)參數(shù)
    jsonp:'callback',                          //服務(wù)器端獲取回調(diào)函數(shù)名的key肉康，對(duì)應(yīng)后臺(tái)有$_GET['callback']='getName';callback是默認(rèn)值
    jsonpCallback:'getName',                   //回調(diào)函數(shù)名
    success:function(result){                  //成功執(zhí)行處理，對(duì)應(yīng)后臺(tái)返回的getName(data)方法灼舍。
        $("#myData").html('1吼和、My name is '+result.name+'.I\'m '+result.age+' years old.<br />');
    },
    error:function(msg){
        alert(msg.toSource());                 //執(zhí)行錯(cuò)誤
    }
});

2.get()和post()方法

//get()語(yǔ)法：$.get(URL,data,function(data,status,xhr),dataType);
$.get("test.php", function(data){
   alert("Data: " + data);
});

//post()語(yǔ)法$(selector).post(URL,data,function(data,status,xhr),dataType)
$("input").keyup(function(){
    txt=$("input").val();
    $.post("demo_ajax_gethint.html",{suggest:txt},function(result){
        $("span").html(result);   
    });
});

12.jq的效果方法
①hide()、show()片仿、toggle()方法：
語(yǔ)法：
$(selector).hide(速度纹安，動(dòng)畫效果，回調(diào)函數(shù));
$(selector).show(速度，動(dòng)畫效果厢岂，回調(diào)函數(shù));
$(selector).toggle(速度光督，動(dòng)畫效果，回調(diào)函數(shù));
速度以毫秒為單位或fast/slow也行塔粒；動(dòng)畫效果jq提供"linear"(勻速)结借，"swing"(先慢后快，推薦)卒茬；回調(diào)函數(shù)自定義

$("#hide").click(function(){
  $(".p1").hide();
 $(".p1").hide(1000,"swing");//一秒船老，先慢后快消失
$(".p1").hide(1000,"swing"，function(){
alert("消失后的事件函數(shù)")
});
});
$("#show").click(function(){
  $("p").show();//使用方式同上
});
$("button").click(function(){
  $("p").toggle();//使用方式同上
});

②fadeIn()圃酵、fadeOut()柳畔、fadeToggle()、fadeTo()方法：
語(yǔ)法：
$(selector).fadeIn(speed,callback);//用于淡入已隱藏的元素,參數(shù)speed可用三種同hide()方法
$(selector).fadeOut(speed,callback);//用于淡出可見(jiàn)元素
$(selector).fadeToggle(speed,callback);//在 fadeIn() 與 fadeOut() 方法之間進(jìn)行切換
$(selector).fadeTo(speed,opacity,callback);//fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeOut("slow");
  $("#div3").fadeToggle(3000);
  $("#div3").fadeTo(1000,0.25);//0為全透明了
});

③slideDown()郭赐、slideUp()薪韩、slideToggle()方法：
語(yǔ)法：
(selector).slideUp(speed,callback);//向上滑動(dòng)元素
$(selector).slideToggle(speed,callback);//在 slideDown() 與 slideUp() 方
法之間進(jìn)行切換

$("#flip").click(function(){
$("#panel01").slideDown();
  $("#panel02").slideUp(1000);
$("#panel02").slideslideToggle(1000,function(){
alert("來(lái)回切換")
});
});

④動(dòng)畫animate()方法：
語(yǔ)法：
$(selector).animate({params},speed,callback);//{params}為要改變的css樣式，來(lái)形成動(dòng)畫

$("button").click(function(){
//方式一：可以多個(gè)屬性
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
//方式二：部分效果可以使用相對(duì)值（該值相對(duì)于元素的當(dāng)前值）捌锭。需要在值的前面加上 += 或 -=;
$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
//方式三：使用預(yù)定義的值俘陷，屬性的動(dòng)畫值設(shè)置為 "show"、"hide" 或 "toggle"
$("div").animate({
    height:'toggle'
  });
//方式四：動(dòng)畫隊(duì)列观谦，給一個(gè)對(duì)象綁定多個(gè)動(dòng)畫拉盾，逐步執(zhí)行。但是使用stop()終止中途某一動(dòng)畫后豁状，之后的動(dòng)畫不在執(zhí)行捉偏。
var div=$("div");//選擇需要?jiǎng)赢嫷膶?duì)象
    div.animate({height:'300px',opacity:'0.4'},"slow");//執(zhí)行順序：1
    div.animate({width:'300px',opacity:'0.8'},"slow");//2
    div.animate({height:'100px',opacity:'0.4'},"slow");//3
    div.animate({width:'100px',opacity:'0.8'},"slow");//4
});

//animate() 方法幾乎可以操作所有 CSS 屬性，但要改為駝峰命名的樣式
//比如替蔬，必須使用 paddingLeft 而不是 padding-left告私，使用 marginRight 而不是 margin-right

⑤停止動(dòng)畫stop()方法：
語(yǔ)法：
$(selector).stop(stopAll,goToEnd);//兩個(gè)參數(shù)都是可選的，stopAll 參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列承桥。默認(rèn)是 false驻粟，即僅停止活動(dòng)的動(dòng)畫，下一個(gè)動(dòng)畫開始凶异，為true蜀撑，則停止所有動(dòng)畫效果而不是只停止當(dāng)前動(dòng)畫； goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫剩彬。默認(rèn)是 false酷麦；

//默認(rèn)地，stop() 會(huì)清除在被選元素上指定的當(dāng)前動(dòng)畫
$("#stop").click(function(){
  $("#panel").stop();
});

革命尚未成功喉恋！仍需進(jìn)一步努力Ｎ秩摹母廷！加油！：簟琴昆！