jQuery選擇器_Dom操作_樣式_事件處理_動畫

題目1：jQuery 能做什么倦春？

jQuery是什么：
官網(wǎng)解釋：jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
簡而言之馅闽，jQuery是一個JS庫丧慈，可以更簡單，快速的操控頁面元素兴泥。
功能：

選擇網(wǎng)頁元素
改變結(jié)果集
元素的操作：取值和賦值
元素的操作：移動
元素的操作：復制工育、刪除和創(chuàng)建
工具方法
事件操作
特殊效果
AJAX

DOM能干的，它干的更理解易于簡單搓彻，DOM不能干的如绸，它也能干。

題目2： jQuery 對象和 DOM 原生對象有什么區(qū)別旭贬？如何轉(zhuǎn)化竭沫？

文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結(jié)構(gòu)樹）提供了一個結(jié)構(gòu)化的表述并且定義了一種方式—程序可以對結(jié)構(gòu)樹進行訪問骑篙，以改變文檔的結(jié)構(gòu)，樣式和內(nèi)容森书。DOM對象可以使用原生JS進行操作靶端。
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象，jQuery對象是jQuery獨有的凛膏，其可以使用jQuery里的方法杨名。但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法猖毫，亂使用會報錯台谍。
jQuery對象轉(zhuǎn)DOM對象：
jQuery對象是一個數(shù)據(jù)對象，可以通過[index]吁断，get（index）的方法趁蕊，來得到相應的DOM對象。

$('div')[index];
$('div').get(index);

注意：$（‘div’）.eq（index）返回的還是jQuery對象$（‘div’）.eq（index）[index]是DOM對象

DOM對象轉(zhuǎn)jquery對象：
DOM對象仔役，只需要用$()把DOM對象包裝起來掷伙，就可以獲得一個jQuery對象了。

var btn = document.querySelector('button');//DOM對象
$btn =  $(btn)又兵；//jQuery對象

題目3：jQuery中如何綁定事件任柜？bind、unbind沛厨、delegate宙地、live、on逆皮、off都有什么作用宅粥？推薦使用哪種？使用on綁定事件使用事件代理的寫法电谣？

jQuery提供了四種方法進行時間監(jiān)聽粹胯，on蓖柔，bind，delegate风纠，one（live已經(jīng)棄用）况鸣，相應的解除監(jiān)聽off，unbind竹观，undelegate镐捧。

$('a').bind('click', handle);//給$('a')的‘click’事件綁定執(zhí)行函數(shù)
$('a').unbind(['click']);//給$('a')解除所有綁定事件【‘click’事件】

jQuery 掃描文檔找到所有 $(‘a(chǎn)’) 元素，然后給每一個找到的元素的 click 事件綁定處理函數(shù)臭增。

$('a').live('click',handle });// $('a')綁定‘click’事件懂酱，執(zhí)行函數(shù)
$('a').die('click',handle });// $('a')解除及‘click’事件執(zhí)行函數(shù)

jQuery綁定處理函數(shù)到 $(document) 元素，并把 ‘click’ 和 ‘a(chǎn)’ 作為函數(shù)的參數(shù)誊抛。有事件冒泡到document節(jié)點的時候列牺，檢查這個事件是不是 click 事件，target element能不能匹配 ‘a(chǎn)’ css選擇器拗窃，如果兩個條件都是true瞎领，處理函數(shù)執(zhí)行。

$('a', $('#container')[0]).live(...);

live方法也可以綁定到指定的元素（或者說“上下文(context)”）而不用綁定到document.

$('#container').delegate('a', 'click', handle);//$('#container')綁定‘click’事件随夸，執(zhí)行函數(shù)
$('#container').undelegate('a', 'click', handle);//$('#container')解除‘click’事件和執(zhí)行函數(shù)

jQuery掃描文檔找到 $(‘#container’)九默，綁定處理函數(shù)到他的 click 事件，’a’ css選擇器作為函數(shù)的參數(shù)宾毒。當有事件冒泡到 $(‘#container’)驼修，檢查事件是不是 click，并檢查target element是不是匹配css選擇器诈铛，如果兩者都符合乙各，執(zhí)行函數(shù)。

one()該方法綁定的事件觸發(fā)一次后自動刪除

$('.class').on( events [,selector ] [,data ], handler);//$('.class')綁定事件
$('.class').off（）$('.class')解除事件

on實現(xiàn)事件委托很簡單幢竹， '.class'為父元素觅丰，on后面括號里的selector 參數(shù)為子元素，當‘.class’的事件觸發(fā)時妨退，判斷事件來源是否子元素selector妇萄，若是，則執(zhí)行處理函數(shù)咬荷，從而實現(xiàn)事件委托冠句。
on是最基本的事件綁定方法，bind幸乒，delegate懦底，live都是調(diào)用on來綁定事件，因此罕扎，推薦使用on來綁定事件聚唐。

//delegate源碼
delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
}
//live源碼
live: function( types, data, fn ) {
  jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
//bind源碼
bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
}

題目4：jQuery 如何展示/隱藏元素丐重？

首先，html中要隱藏元素杆查，無外乎幾種方法扮惦。

display：none;//展示形式為none，不占據(jù)文檔空間
visibility：hidde亲桦；//可見性為hidden崖蜜，看不見，占據(jù)文檔空間
opacity：0客峭；//不透明度為0豫领，即為透明，占據(jù)文檔空間
元素位置在窗口之外

jQuery有hide（）舔琅，fadeOut（）等恐，slideDown（或slideUp（））方法都可以達到隱藏元素，對應的原理就是元素的display屬性备蚓，opacity屬性和文檔位置课蔬。
推薦使用hide（）方法，簡單星著，無副作用。

$(selector).hide([duration ] [,easing ] [,complete ])粗悯；//隱藏元素
$(selector).show( [duration ] [, easing ] [, complete ] );//展示元素

題目5： jQuery 動畫如何使用虚循？

jQuery有幾個簡單的動畫方法

$(selector).hide([duration ] [,easing ] [,complete ])；//隱藏元素
$(selector).show( [duration ] [, easing ] [, complete ] );//展示元素
$(selector).fadeIn( [duration ] [, easing ] [, complete ] )样傍；//淡入
$(selector).fadeOut( [duration ] [, easing ] [, complete ] )横缔；//淡出
$(selector).slideDown( [duration ] [, easing ] [, complete ] )；//下滑
$(selector).slideUp( [duration ] [, easing ] [, complete ] )衫哥；//上滑

然而茎刚，如此完美的jQuery還有大招---自定義動畫

$(selector).animate( properties [, duration ] [, easing ] [, complete ] )；

animate() 方法執(zhí)行 CSS 屬性集的自定義動畫撤逢。
該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)膛锭。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動畫效果蚊荣。
只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）初狰。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）。
注釋：使用 "+=" 或 "-=" 來創(chuàng)建相對動畫（relative animations）互例。

題目6：如何設置和獲取元素內(nèi)部 HTML 內(nèi)容奢入？如何設置和獲取元素內(nèi)部文本？

$(selector).html([string]);//設置或獲取元素HTML內(nèi)容
$(selector).text([string]);//設置或獲取元素text內(nèi)容

html（）和text（）都是讀取兩用的方法媳叨，沒有參數(shù)時返回元素現(xiàn)有HTML或text內(nèi)容腥光，有參數(shù)時則將參數(shù)傳遞為HTML或text关顷。

題目7：如何設置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設置和獲取元素屬性武福？

$(selector).val();//設置或獲取input的value值
$(selector).attr();//設置或獲取元素屬性
$(selector).prop();//設置或獲取元素的property
$(selector).css();//設置或獲取元素的property

題目8：使用 jQuery實現(xiàn)如下效果

demo
效果

題目9：. 使用 jQuery 實現(xiàn)如下效果

[

效果
demo

題目10：實現(xiàn)如下效果

[

Ps:當點擊按鈕時使用如下數(shù)據(jù)

var products = [
{
    img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', 
    name: '珂蘭 黃金手 猴哥款',
    price: '￥405.00'
 },{
    img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', 
    name: '珂蘭 黃金轉(zhuǎn)運珠 猴哥款',
    price: '￥100.00' 
},{
    img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', 
    name: '珂蘭 黃金手鏈 3D猴哥款',
    price: '￥45.00'
}];

效果
 demo

題目11：模仿視頻6议双，完成左右切換的 Tab 效果

Screen Record_2017-08-12-02-08-39.mp4_1502474540.gif