jQuery 1.x 版本和 2.x 版本有什么區(qū)別
- 2.x版本不在支持IE6\7\8嫉髓，如果在IE9/10版本中使用“兼容性視圖”模式也將會受到影響。
- jQuery2.x的體積減少12%
介紹 jQuery 常見的選擇器邑闲，以及以下 api 的用法算行，給出范例
jQuery定義了一套選擇器規(guī)則，和CSS選擇器目的一樣苫耸，都是為了選擇出符合特定規(guī)則的元素州邢。講jQuery不得不提到其選擇器，這是jQuery能夠快速流行的非常重要的原因褪子，為了方便使用者jQuery刻意和CSS選擇器使用相同的語法量淌，幾乎支持所有類型的CSS3選擇器骗村，當(dāng)然也有一些其特定的選擇器
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="ok">ok</div>
</div>
</body>
</html>
.eq
對于一個特定結(jié)果集，我們想獲取到指定index的jQuery對象呀枢，可以使用eq方法
$('.contaniner').eq(3); // 獲取class為child的結(jié)果集中的下標(biāo)為3的jQuery對象
.next / .prev
next取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合叙身。如果提供一個選擇器，那么只有緊跟著的兄弟元素滿足選擇器時硫狞，才會返回此元素信轿。prev正好相反，獲取元素之前的同輩元素
$('.child').eq(1).next()//獲取class為child且下標(biāo)為1的元素緊跟著的同輩元素
$('.child').eq(1).prev()//獲取class為child且下標(biāo)為1的元素之前的同輩元素
.nextAll / .prevAll
nextAll獲得每個匹配元素集合中每個元素所有后面的同輩元素残吩，選擇性篩選的選擇器财忽，prevAll與之相反，獲取元素前面的同輩元素泣侮。
$('.child').eq(2).nextAll()//獲取class為child且下標(biāo)為1的元素后面的所有同輩元素
$('.child').eq(2).prevAll()//獲取class為child且下標(biāo)為1的元素前面的所有同輩元素
.siblings
獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器即彪。
$('.ok').sibings()//獲取class為ok的所有鄰居
.parent / .parents
- .parent([selector])
取得匹配元素集合中，每個元素的父元素隶校，可以提供一個可選的選擇器
$('.box').parent()//獲取class為ok的父元素 - .parents([selector])
獲得集合中每個匹配元素的祖先元素，可以提供一個可選的選擇器作為參數(shù)
$('.box').parent()//獲取class為ok的所有的祖先元素
.children / .find
- .children([selector])
獲得匹配元素集合中所有直接子元素铜犬，選擇器選擇性篩選
$('.container').children('.box')//獲取class為container的所有直接子元素中class為box的元素
.find([selector])
查找符合選擇器的后代元素
$(''body").find('.child')//獲取class為container的所有直接子元素中class為child的元素
區(qū)別：
.children(selector)方法是返回匹配元素集合中每個元素的所有子元素（僅兒子輩）敛劝。參數(shù)可選夸盟，添加參數(shù)表示通過選擇器進(jìn)行過濾上陕，對元素進(jìn)行篩選唆垃。
.find(selector)方法是返回匹配元素集合中每個元素的后代。參數(shù)是必選的沉删，可以為選擇器、jquery對象可元素來對元素進(jìn)行篩選砖茸。
.find()方法要注意的知識點(diǎn)：
- find是遍歷當(dāng)前元素集合中每個元素的后代凉夯。只要符合劲够，不管是兒子輩征绎，孫子輩都可以人柿。
- 與其他的樹遍歷方法不同忙厌，選擇器表達(dá)式對于 .find() 是必需的參數(shù)逢净。如果我們需要實(shí)現(xiàn)對所有后代元素的取回婶芭，可以傳遞通配選擇器 '*'着饥。
- find只在后代中遍歷宰掉，不包括自己孟害。
- 選擇器 context 是由 .find() 方法實(shí)現(xiàn)的挪拟；因此，
$('li.item-ii').find('li')等價于$('li', 'li.item-ii')丁侄。
.filter(selector), .filter(function(index))
篩選當(dāng)前結(jié)果集中符合條件的對象鸿摇，參數(shù)可以是一個選擇器或者一個函數(shù)
$('.child').filter(function(index, node){
return node.innerText.search('3') > -1
})//獲取class為child的元素中包含文本‘3’的元素
.has
.has(selector), .has(dom)
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的所有后代元素
$('.container').has.('.box')
.is
判斷當(dāng)前匹配的元素集合中的元素拙吉，是否為一個選擇器，DOM元素变逃，或者jQuery對象揽乱，如果這些元素至少一個匹配給定的參數(shù)损拢，那么返回true
$('.ok').is.('.ok')//true
使用 jQuery和原生js實(shí)現(xiàn) Tab 切換效果
以下 jQuery 方法有什么作用福压？如何使用荆姆？給出范例
.append()
將指定的內(nèi)容插入匹配元素集合中每個元素的末尾胆筒。
- 可以一次添加多個內(nèi)容仆救，內(nèi)容可以是DOM對象彤蔽、HTML string庙洼、 jQuery對象
- 如果參數(shù)是function，function可以返回DOM對象、HTML string叠聋、 jQuery對象虏束，參數(shù)是集合中的元素位置與原來的html值
$( ".inner" ).append( "<p>Test</p>" );//在class為innner的元素的末尾添加標(biāo)簽
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );//在標(biāo)簽p內(nèi)的末尾加入字符串strong
$( "p" ).append( document.createTextNode( "Hello" ) );
.prepend()
向?qū)ο箢^部追加內(nèi)容镇匀，用法和append類似汗侵，內(nèi)容添加到最開始
$( ".inner" ).prepend( "<p>Test</p>" );//在class為innner的元素的開頭添加標(biāo)簽
.before()
在對象前面(不是頭部，而是外面熟妓，和對象并列同級)插入內(nèi)容只恨，參數(shù)和append類似
$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );
.after()
和before相反官觅，在對象后面(不是尾部缰猴，而是外面，和對象并列同級)插入內(nèi)容疑故，參數(shù)和append類似
$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );
.remove()
刪除被選元素（及其子元素）
$("#div1").remove();//刪除ID為div1的元素及其子元素
我們也可以添加一個可選的選擇器參數(shù)來過濾匹配的元素
$('div').remove('.test');//刪除ID為div1且class為test的元素
.empty()
清空被選擇元素內(nèi)所有子元素
$('body').empty();
.html()
這是一個讀寫兩用的方法纵势，用于獲取/修改元素的innerHTML
- 當(dāng)沒有傳遞參數(shù)的時候钦铁，返回元素的innerHTML
- 當(dāng)傳遞了一個string參數(shù)的時候佛点，修改元素的innerHTML為參數(shù)值
$('div').html()
$('div').html('123')
后續(xù)這種讀寫兩用的方法很多超营，原理都類似
如果結(jié)果是多個進(jìn)行賦值操作的時候會給每個結(jié)果都賦值
如果結(jié)果多個演闭，獲取值的時候，返回結(jié)果集中的第一個對象的相應(yīng)值
注：當(dāng)傳遞參數(shù)時见间，會將里面的數(shù)據(jù)放進(jìn)去執(zhí)行米诉，如果內(nèi)含script史侣，會容易引發(fā)xss攻擊
.text()
和html方法類似，操作的是DOM的innerText值
創(chuàng)建一個節(jié)點(diǎn)税朴，然后把數(shù)據(jù)用.text()放入節(jié)點(diǎn)內(nèi)部正林，再把節(jié)點(diǎn)放在頁面上
$node.text()和$node.html()有什么區(qū)別？
node.html()會將其進(jìn)行解析之后再顯示出來。若有傳遞包含script的參數(shù)瞳脓，就會執(zhí)行塑娇，可能會引入xss攻擊容易形成漏洞。
text就不會這種問題劫侧，可創(chuàng)建一個節(jié)點(diǎn)刽宪，若是惡數(shù)據(jù)泻骤，只會展示垄潮。
介紹以下 jQuery 函數(shù)的用法桩卵，給出范例
.val()
這是一個讀寫雙用的方法棘催，用來處理input的value劲弦，當(dāng)方法沒有參數(shù)的時候返回input的value值画畅，當(dāng)傳遞了一個參數(shù)的時候淫僻，方法修改input的value值為參數(shù)值
$('input').val()
$('input').val('newValue');
.attr()
.attr(attributeName)
獲取元素特定屬性的值
var title = $( "em" ).attr( "title" );//獲取標(biāo)簽<em>屬性tiitle的值.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
為元素屬性賦值
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
.removeAttr()
為匹配的元素集合中的每個元素中移除一個屬性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點(diǎn)是可以直接在一個 jQuery 對象上調(diào)用該方法迎吵，并且它解決了跨瀏覽器的屬性名不同的問題荡灾。
$('div').removeAttr('id');
.prop()
$('input').prop('value')//獲取input中value屬性
jQuery的attr與prop
.css()
這是個和attr非常相似的方法皆警，用來處理元素的css
- .css(propertyName) / .css(propertyNames)
獲取元素style特定property的值 - .css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
設(shè)置元素style特定property的值
$('#header').css("background-color","red")//更改id為header的元素的background-color為red
.addClass()
為元素添加class豆瘫，不是覆蓋原class昵宇，是追加，也不會檢查重復(fù)
$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {
return "item-" + index;
});
.removeClass()
移除元素單個/多個/所有class
$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {
return $( this ).prev().attr( "class" );
});
.hasClass()
檢查元素是否包含某個class，返回true/false
$( "#mydiv" ).hasClass( "foo" )
.toggleClass()
toggle是切換的意思腰湾，方法用于切換
如果沒有就添加附井，如果有就刪除
<div class="tumble">Some text.</div>
第一次執(zhí)行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次執(zhí)行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
jQuery 對象和原生 Dom 對象有什么區(qū)別崔赌？如何相互轉(zhuǎn)換？
- 聯(lián)系：
1锥咸、jQuery對象：通過jQuery包裝DOM對象后產(chǎn)生的對象；
2、兩者之間可以相互轉(zhuǎn)換； - 區(qū)別：
1、jquery選擇器得到的jquery對象和標(biāo)準(zhǔn)的 javascript中的document.getElementById()取得的dom對象是兩種不同的對象類型昌罩，兩者不等價；
2蒿褂、jQuery無法使用DOM對象的任何方法削葱，同理DOM對象也不能使用jQuery里的方法. 亂使用會報錯螃宙。 - 相互轉(zhuǎn)換：
jQuery對象轉(zhuǎn)成DOM對象---兩種轉(zhuǎn)換方式：[index]和.get(index)
1闲先、jQuery對象是一個數(shù)據(jù)對象，通過[index]的方法
如：
var $v = $("#v") ; //jQuery對象
var v = $v[0]; //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中
2累驮、jQuery本身提供拦焚，通過.get(index)方法
如：
var $v = $("#v"); //jQuery對象
var v = $v.get(0); //DOM對象
alert(v.checked) //檢測這個checkbox是否被選中
DOM對象轉(zhuǎn)成jQuery對象:
對于DOM對象妓笙，只需用$()把DOM對象包裝起來近忙，就可得到j(luò)Query對象
如：
var v=document.getElementById("v"); //DOM對象
var $v=$(v); //jQuery對象
參考Dom原生對象和jQuery對象的聯(lián)系竭业、區(qū)別智润、相互轉(zhuǎn)換
介紹以下 jQuery 方法的用法，給出范例
.each()
遍歷一個jQuery對象未辆，為每個匹配元素執(zhí)行一個函數(shù)
$( "p" ).each(function( index ) {
console.log( index + ':' + $(this).text())
})
$.extend()
- 當(dāng)我們提供兩個或多個對象給
$.extend()窟绷，對象的所有屬性都添加到目標(biāo)對象（target參數(shù)）。 - 如果只有一個參數(shù)提供給
$.extend()咐柜，這意味著目標(biāo)參數(shù)被省略兼蜈。在這種情況下，jQuery對象本身被默認(rèn)為目標(biāo)對象拙友。這樣饭尝，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的
目標(biāo)對象（第一個參數(shù)）將被修改献宫，并且將通過$.extend()返回钥平。然而，如果我們想保留原對象姊途，我們可以通過傳遞一個空對象作為目標(biāo)對象：
var object = $.extend({}, object1, object2);
在默認(rèn)情況下涉瘾，通過$.extend()合并操作不是遞歸的;
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
.clone()
.clone()方法深度復(fù)制所有匹配的元素集合，包括所有匹配元素捷兰、匹配元素的下級元素立叛、文字節(jié)點(diǎn)
通常我們將頁面上一個元素插入到DOM里另一個地方，它會被從老地方移走贡茅，類似剪切的效果秘蛇。如果我們要保留原元素，可以先clone一個再插入顶考。
$('.hello').clone().appendTo('.goodbye');//class為hello的元素會保留
.index()
從給定集合中查找特定元素index
沒參數(shù)返回第一個元素index
如果參數(shù)是DOM對象或者jQuery對象赁还，則返回參數(shù)在集合中的index
如果參數(shù)是選擇器，返回第一個匹配元素index驹沿，沒有找到返回-1
看個例子
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
.ready()
當(dāng)DOM準(zhǔn)備就緒時艘策，指定一個函數(shù)來執(zhí)行。
雖然JavaScript提供了load事件渊季，當(dāng)頁面呈現(xiàn)時用來執(zhí)行這個事件朋蔫，直到所有的東西，如圖像已被完全接收前却汉，此事件不會被觸發(fā)驯妄。
在大多數(shù)情況下，只要DOM結(jié)構(gòu)已完全加載時合砂，腳本就可以運(yùn)行青扔。傳遞處理函數(shù)給.ready()方法，能保證DOM準(zhǔn)備好后就執(zhí)行這個函數(shù)，因此赎懦，這里是進(jìn)行所有其它事件綁定及運(yùn)行其它 jQuery 代碼的最佳地方雀鹃。
如果執(zhí)行的代碼需要在元素被加載之后才能使用時，（例如励两，取得圖片的大小需要在圖片被加載完后才能知道）黎茎，就需要將這樣的代碼放到 load 事件中。
下面兩種語法全部是等價的：
$(document).ready(handler)
$(handler)
我們經(jīng)常這么使用
$(function(){
console.log('ready');
});
window.onload和$(document).ready有什么區(qū)別当悔？document.onDOMContentLoaded呢?
window.onload事件觸發(fā)時傅瞻，頁面上所有的DOM，樣式表盲憎，腳本嗅骄，圖片，flash都已經(jīng)加載完成了饼疙。
$(document).ready()時DOM結(jié)構(gòu)繪制完畢后就執(zhí)行溺森，不必等到加載完畢。
document.onDOMContentLoaded等html文檔被完全加載和解析時觸發(fā)窑眯，而不等待樣式表和圖像等的加載屏积。
MDN-Window.onload
MDN-DOMContentLoaded
jQuery-.ready
