1驶拱、jQuery 能做什么伦糯？
- 方便快捷獲取DOM元素
原生js用document.getElementById等方法來(lái)獲取DOM元素，方法名稱長(zhǎng)靠娱，不方便且功能有限沧烈。jQuery定義了一套選擇器規(guī)則，幾乎支持所有類型的CSS3選擇器像云，方便使用：
|選擇器|含義|
|::|::|
|$("*")|匹配所有元素|
|$("#id")|id選擇器|
|$(".class")|類選擇器|
|$("element")|元素選擇器|
|$("E,F")|多元素選擇器锌雀，同時(shí)匹配元素E或元素F|
|$("E F")|后代選擇器，匹配E元素所有的后代元素F|
|$("E>F")|子元素選擇器苫费，匹配E元素的所有直接子元素|
|$("E+F")|直接相鄰選擇器汤锨，匹配E元素之后的相鄰的同級(jí)元素F|
|$("E~F")|普通相鄰選擇器，匹配E元素之后的同級(jí)元素F（無(wú)論直接相鄰與否）|
|$(".class1.class2")|匹配類名中既包含class1又包含class2的元素|
|$("E:first")|所有E中的第一個(gè)|
|$("E:last")|所有E中的最后一個(gè)|
|$("E[attr]")|含有屬性attr的E|
|$("E[attr=value]")|屬性attr=value的E|
|$("E[attr!=value]")|屬性attr百框！=value的E|
|$("E:nth-child(n)")|E的第n個(gè)子節(jié)點(diǎn)|
|$("E:nth-child(3n+1)")|E的index符合3n+1表達(dá)式的子節(jié)點(diǎn)|
|$("E:first-child")|所有E的第一個(gè)子節(jié)點(diǎn)|
|$("E:last-child")|所有E的最后一個(gè)子節(jié)點(diǎn)|
|$(":check")|被選中的checkbox或radio|
|$("option:select")|被選中的option|
|$("E:even")|所有E中index是偶數(shù)|
|$("E:old")|所有E中index是奇數(shù)|
|$("E:eq(n)")|所有E中index為n的元素|
|$("E:gt(n)")|所有E中index大于n的元素|
|$("E:lt(n)")|所有E中index小于n的元素|
|$("E:has(a)")|子元素中有F的元素，$('div:has(a)'):包含a標(biāo)簽的div|
|$("E:parent")|父元素是E的元素牍汹，$('td: parent'):父元素是td的元素|
- 修改頁(yè)面樣式
$("#id").addClass("class1 class2").removeClass("class3 class4"); //為元素增加class1,class2樣式后刪除class3,class4樣式
var str= $("#id").css("width"); //獲取元素寬度铐维，返回的類型為字符串：如"200px"
$("#id").css("width","200px"); //設(shè)置元素寬度柬泽，綁定到元素的style屬性中
$("#id").css({"width":"200px","height":"300px"}); //給元素設(shè)置多個(gè)樣式，綁定到元素的style屬性中
$("#id").hasClass("class1"); //檢查元素中是否包含class1嫁蛇，若有锨并，返回true
$("#id").toggleClass("class1") //切換元素中的class1的元素，若有class1睬棚，則刪除第煮，若沒有，則增加
- 動(dòng)態(tài)改變DOM內(nèi)容
1抑党、append():
//1.
$(".wrap").append('<div><span>done</span></div>');
//2.
<div class="wrap"><span>hello</span><p>I would like to say:</p></div>
$(".wrap p").append($("span")); //移動(dòng)span的元素和內(nèi)容包警，等價(jià)于<div class="wrap"><p>I would like to say:<span>hello</span></p></div>
//3.
<div class="wrap"><p>I would like to say:</p></div>
$(".wrap p").append(document.createTextNode("hello")); //等價(jià)于<div class="wrap"><p>I would like to say:hello</p></div>
2、appendTo():
//1.
$('<div><span>done</span></div>').appendTo($(".wrap"));
//2.
<div class="wrap"><span>hello</span><p>I would like to say:</p></div>
$("span").appendTo($(".wrap p")); //移動(dòng)span的元素和內(nèi)容底靠，等價(jià)于<div class="wrap"><p>I would like to say:<span>hello</span></p></div>
3害晦、prepend()、prependTo()和append()暑中、appendTo()用法類似壹瘟，只是添加元素的位置不同
4、
$( ".inner" ).before( "<p>Test</p>" ); //在$(".inner")前面插入鳄逾，和$(".inner")屬于同級(jí)
$( "h2" ).insertBefore( $( ".container" ) ); //把$("h2")移動(dòng)到$(".container")前面稻轨，和$(".container")屬于同級(jí)
5、
$( ".inner" ).after( "<p>Test</p>" ); //在$(".inner")后面插入雕凹，和$(".inner")屬于同級(jí)
$( "h2" ).insertAfter( $( ".container" ) ); //把$("h2")移動(dòng)到$(".container")后面殴俱，和$(".container")屬于同級(jí)
6 、
$(".inner").remove(); //刪除元素及其子元素
7请琳、
$('body').empty(); //清空被元素內(nèi)的所有元素
8粱挡、
$(".wrap").html(); //獲取wrap內(nèi)所有的元素，返回innerHtml
$(".wrap").html("<span>hello</span>"); //把wrap里面的元素?fù)Q成<span>hello</span>
9俄精、
$(".wrap").test(); //獲取元素內(nèi)的innerText
$(".wrap").test("hello"); //修改元素內(nèi)的innerText
- 響應(yīng)用戶的交互操作
jQuery提供了截獲形形色色的頁(yè)面事件（比如用戶單擊某個(gè)鏈接）的適當(dāng)方式询筏，而不需要使用事件處理程序拆散HTML代碼。此外竖慧，它的事件處理API也消除了經(jīng)常困擾Web開發(fā)人員瀏覽器的不一致性嫌套。
// 普通事件綁定，最簡(jiǎn)單的用法
$('div').on('click', function(e){
console.log(this);
console.log(e);
});
// 事件委托或者事件代理圾旨，想讓div 下面所有的span綁定事件踱讨，可以把事件綁定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
// 可以在綁定的時(shí)候給事件處理程序傳遞一些參數(shù)
$('div').on('click', {name: 'Byron', age: 24}, function(e){
console.log(e.data);
});
//
//off()的使用方法：
//定義函數(shù)
function aClick() {
$("div").show().fadeOut("slow");
}
//添加事件
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
//刪除事件
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
//
//trigger()的使用方法：
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
- 統(tǒng)一Ajax操作
jQuery統(tǒng)一了多種瀏覽器的Ajax操作，使得開發(fā)人員更多的專注服務(wù)器端開發(fā)砍的。
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
- 簡(jiǎn)化常見的JavaScript任務(wù)
除了這些完全針對(duì)文檔的特性之外痹筛，jQuery也改進(jìn)了對(duì)基本的JavaScript數(shù)據(jù)結(jié)構(gòu)（例如迭代和數(shù)組操作等）。
$.each(obj, function(key, value) {
total += value;
});
2、 jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別帚稠？如何轉(zhuǎn)化谣旁？
jQuery 對(duì)象是 DOM 對(duì)象被 jquery 包裝后產(chǎn)生的對(duì)象，屬于 jQuery 獨(dú)有滋早，可以使用 jQuery 的方法榄审。
DOM 對(duì)象，就是原生的 DOM 對(duì)象杆麸。
jQuery 對(duì)象不等于DOM 對(duì)象搁进，各自使用各自的方法。
document.getElementById(id) //dom對(duì)象
$(document.getElementById(id)) //jQuery對(duì)象
$('#id') //jQuery對(duì)象
$('#id') [0] //dom對(duì)象
3昔头、jQuery中如何綁定事件饼问？bind、unbind减细、delegate匆瓜、live、on未蝌、off都有什么作用驮吱？推薦使用哪種？使用on綁定事件使用事件代理的寫法萧吠？
jQuery綁定事件：$("ul").on("click","li",function(){});
| 事件 | 作用 |
|---|---|
| .bind( eventType [, eventData ], handler ) | 為元素綁定事件左冬，已被棄用。 |
| .unbind( eventType [, handler ] ) | 為元素解除事件纸型，已被棄用拇砰。 |
| .delegate( selector, eventType, eventData, handler ) | 為元素綁定事件，且指定元素為特定根元素的子元素狰腌。以后有新的該元素出現(xiàn)除破，事件同樣生效。已棄用琼腔。 |
| .live( events [, data ], handler ) | 為元素綁定事件瑰枫，不僅僅是現(xiàn)在存在，也包括以后該元素新出現(xiàn)后丹莲。已經(jīng)棄用光坝。 |
| .on( events[, selector][, data ], handler(eventObject) ) | 為元素綁定事件，推薦使用 |
| .off( events, selector[, handler ] ) | 為元素解除事件甥材，推薦使用 |
//用on綁定事件使用事件代理的寫法
$('#list').on('click', 'li', function() {
//function code here.
});
4盯另、jQuery 如何展示/隱藏元素？
//展示:
.show( [duration ] [, easing ] [, complete ] )
//隱藏:
.hide([duration ] [,easing ] [,complete ])
//duration：動(dòng)畫持續(xù)多久洲赵，5000（5秒）
//easing：表示過(guò)渡使用哪種緩動(dòng)函數(shù)鸳惯，jQuery自身提供"linear" 和 "swing"
//complete：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
5商蕴、 jQuery 動(dòng)畫如何使用？
.animate( properties [, duration ] [, easing ] [, complete ] )
//properties是一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)悲敷。如:{"left":"100px","top":"10px"}
//duration (default: 400)：一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久究恤。默認(rèn)值: "normal"俭令， 三種預(yù)定速度的字符串("slow", "normal", 或 "fast"或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000) ）
//easing (default: swing)：一個(gè)字符串后德，表示過(guò)渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear" 和 "swing"抄腔，其他效果可以使用jQuery Easing Plugin插件
//complete：在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)
.stop( [clearQueue ] [, jumpToEnd ] )
//停止匹配元素當(dāng)前正在運(yùn)行的動(dòng)畫瓢湃。
//如果同一元素調(diào)用多個(gè)動(dòng)畫方法，尚未被執(zhí)行的動(dòng)畫被放置在元素的效果隊(duì)列中赫蛇。這些動(dòng)畫不會(huì)開始绵患，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候悟耘，隊(duì)列中的下一個(gè)動(dòng)畫立即開始落蝙。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行。
//如果提供jumpToEnd參數(shù)暂幼，并且值為true時(shí)筏勒，當(dāng)前動(dòng)畫將停止，但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫的目標(biāo)值旺嬉。
6管行、如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本邪媳？
$('div').html() //獲取
$('div').html(‘hhh’)//修改
$('div').text() //獲取
$('div').text(‘hhh’)//修改
7捐顷、如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性雨效？
$("input").val() //獲取值
$("input").val(‘hhhh’) //修改
$("#input:checked").val()//獲取表單選擇內(nèi)容
$("#input:checked").val(String)//設(shè)置表單選擇內(nèi)容
$('.target').attr(String)//獲取元素屬性
$('.target').attr('src',$img.attr('data-img'))//設(shè)置元素屬性
8迅涮、 使用 jQuery實(shí)現(xiàn)如下效果
9、使用 jQuery 實(shí)現(xiàn)如下效果
10徽龟、實(shí)現(xiàn)如下效果
11叮姑、 模仿視頻6，完成 左右切換的 Tab 效果
(mission 14)
