1. 么是jQuery？它的主要特點是什么？
2. 如何引入jQuery庫到網頁中？
3. 解釋jQuery選擇器及其不同類型的選擇器。
4. 如何使用jQuery來隱藏/顯示一個元素？
5. 如何使用jQuery添加/移除一個CSS類？
6. 如何使用jQuery實現元素的淡入淡出效果？
7. 如何使用jQuery綁定/解綁事件處理程序？
8. 如何使用jQuery在網頁中創建新的HTML元素？
9. 如何使用jQuery獲取和設置元素的屬性和內容？
10. 如何使用jQuery發送Ajax請求？
11. 解釋jQuery中的動畫隊列（Animation Queue）以及如何管理它。
12. 如何使用jQuery實現元素的滑動效果？
13. 如何使用jQuery遍歷和操作DOM樹？
14. 解釋jQuery中的事件冒泡和事件委托。
15. 如何使用jQuery實現元素的拖拽和排序功能？
16. 解釋jQuery中的deferred對象及其在異步操作中的應用。
17. 如何使用jQuery實現圖片的預加載？
18. 如何使用jQuery實現無限滾動（Infinite Scroll）效果？
19. 解釋jQuery中的插件機制及如何使用和編寫一個簡單的插件。
20. 如何使用jQuery實現表單驗證？
21. 如何使用jQuery實現元素的漸變動畫效果？
22. 解釋jQuery中的事件委托和事件代理的概念及其優勢。
23. 如何使用jQuery實現圖片輪播（Carousel）？
24. 如何使用jQuery實現頁面滾動效果？
25. 解釋jQuery中的鏈式調用（Chaining）及其優點。
26. 如何使用jQuery實現響應式布局？
27. 如何使用jQuery處理跨域請求？
28. 解釋jQuery中的AJAX方法$.ajax()和$.get()之間的區別。
29. 如何使用jQuery實現元素的拖放（Drag and Drop）功能？
30. 解釋jQuery中的數據緩存（Data Caching）及其用途。
31. 如何使用jQuery實現無限級聯下拉菜單（Dropdown Menu）？
32. 如何使用jQuery實現頁面的平滑滾動效果？
33. 解釋jQuery中的事件命名空間（Event Namespace）的概念及其用途。
34. 如何使用jQuery實現響應式圖像加載（Lazy Loading）？
35. 如何使用jQuery實現條件加載（Conditional Loading）？
36. 解釋jQuery中的動畫回調（Animation Callback）函數的作用。
37. 如何使用jQuery實現自動完成（Autocomplete）功能？
38. 如何使用jQuery實現表格排序（Table Sorting）功能？
39. 解釋jQuery中的延遲對象（Deferred Object）及其在異步編程中的應用。
40. 如何使用jQuery實現響應式菜單（Responsive Menu）？

Query就對javascript的一個擴展, 封裝, 就是讓javascript更好用, 更簡單。

人家怎么說的來著, jQuery就是要用更少的代碼, 漂亮的完成更多的功能。

javascript與jQuery常用方法比較

1 加載DOM區別

javascript： window.onload

實例

function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload=first;
window.onload=second;
//只會執行第二個window.onload；不過可以通過以下方法來進行改進：
window.onload=function(){
first();
second();
}

jQuery： $(document).ready() 簡化為$(function(){ //... })

實例1:

$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}}

實例2:

$(document).ready(function(){
first();
} )
$(document).ready(function(){
second();
} ) //兩條均會執行

可以簡化為:

$(function(){
first();
});
$(function(){
second();
});

jQuery加載與普通加載區別

方法 window.onload $(document).ready()

執行時機 必須等待網頁中的所有內容加載完畢后 網頁中的所有DOM結構繪制完畢后就執行,

(包括圖片才能執行) 可能DOM元素關聯的東西并沒有加載完

編寫個數 不能同時編寫多個(后者會"覆蓋"前者) 能同時編寫多個

簡化寫法 無 $()

2 獲取ID

javascript： document.getElementById('idName')

jQuery： $('#idName')

3 獲取name和class

javascript： document.getElementsByName('name') name屬性

jQuery： $('.className') class屬性

4 獲取TagName

javascript： document.getElementsByTagName('tagName')

jQuery： $('tagName')

js中元素不存在使用它會報錯

var div=document.getElementsByTagName("div")[0];

div.onclick=function(){

console.log("javascript");

}

jQuery不會報錯

var $div=$("div");

$div.click(function(){

console.log("jQuery");

})

5 創建對象并加入文檔中

javascript：

var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
//將p元素追加為Id為div1的lastchild子節點，如果想將新創建的p元素插入到已存在的某個元素之前，可以使用insertBefore()方法

jQuery：

jQuery提供了4種將新元素插入到已有元素（內部）之前或者之后的方法：

append()、appendTo(目標)、prepend()、prependTo(目標)。 (prepend()、prependTo(目標)插在子元素之前)

格式：$(html);

HTML代碼：

<p>World!</p>

jQuery代碼:

$('p').append('<b>Hello!</b>'); //輸出：<p>World!<b>Hello!</b></p>
$('<b>Hello!</b>').appendTo('p'); //輸出：同上
$('p').prepend('<b>Hello!</b>'); //輸出：<p><b>Hello!</b>World! </p>
$('<b>Hello!</b>').prependTo('p'); //輸出：同上

6 插入新元素

javascript：

insertBefore() 語法格式：

parentElement.insertBefore(newElement,targetElement)

將一個img元素插入一個段落之前。

HTML代碼：

<img src="image.jpg" id="imgs" />

<p>這是一段文字</p>

javascript代碼：

var imgs=document.getElementById('imgs');
var para=document.getElementsByTag('p');
para.parenetNode.insertBefore(imgs,para);

jQuery：

jQuery提供了4種將新元素插入到已有元素（外部）之前或者之后的方法：before()、insertBefore(目標)、after()、insertAfter(目標)。

格式：$('html');

HTML代碼：

<p>World!</p>

jQuery代碼

$('p').after('<b>Hello!</b>'); //輸出：<p>World! </p><b>Hello!</b>
$('<b>Hello!</b>').insertAfter ('p'); //輸出：同上
$('p').before('<b>Hello!</b>'); //輸出：<b>Hello!</b><p>World! </p>
$('<b>Hello!</b>').insertBefore('p'); //輸出：同上

7 復制節點

javascript：

reference=node.cloneNode(bool)

這個方法只有一個布爾型的參數, 它的可取值只能是true或者false。該參數決定是否把被復制節點的子節點也一同復制到新建節點里去。

jQuery：

clone() //復制節點后，被復制的新元素并不具有任何行為 ,默認值false,也復制子節點

clone(true) //復制節點內容及其綁定的事件

備注：該方法通常與appendTo()、prependTo()等方法結合使用。

8 刪除節點

javascript：

reference=element.removeChild(node)

removeChild()方法將一個給定元素里刪除一個子節點

jQuery：

remove();

remove()方法作用就是從DOM中刪除所有匹配的元素，remove()方法還可以與其他的過濾選擇器結合使用，非常方便。

將ul li下的title不是"Hello"的li移除：

$('ul li').remove(li[title!='Hello']);

empty(); 刪除匹配的元素集合中所有的子節點。

從DOM中把所有段落刪除

HTML 代碼:

<p>Hello</p> how are <p>you?</p>

jQuery 代碼:

$("p").remove();

把所有段落的子元素(包括文本節點)刪除

HTML 代碼:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代碼:

$("p").empty();結果:

<p></p>

9 包裹節點

javascript： javascript暫無

jQuery：

wrap() //將匹配元素用其他元素的結構化標記單獨包裹起來

wrapAll() //將所有匹配的元素用一個元素包裹起來

wrapInner() //將匹配元素的子內容用其他結構化的標記包裹起來

把所有的段落用一個新創建的div包裹起來

jQuery 代碼:

$("p").wrap("<div class='wrap'></div>");

用一個生成的div將所有段落包裹起來

jQuery 代碼:

$("p").wrapAll("<div></div>");

把所有段落內的每個子內容加粗

jQuery 代碼:

$("p").wrapInner("<b></b>");

10 屬性操作：設置屬性節點、查找屬性節點

javascript：

document.getElementsByTagName('tagName').title
document.getElementsByTagName('tagName').title="My title";
document.getElementsByTagName('tagName')['title']="My title";
document.getElementsByTagName('tagName').getAttribute('My title');
document.getElementsByTagName('tagName').setAttribute('title','My title');
document.getElementsByTagName('tagName').removeAttribute('title','My title');

jQuery：

jQuery中設置和查找屬性節點都是：attr() 。

$('p').attr('title'); //獲取p元素的title屬性
$('p').attr('title','My title'); //設置p元素的title屬性
$('p').removeAttr('title') //刪除p元素的title屬性
$('p').attr('title':'My title','class':'myClass'); //當需要添加多個屬性時, 可以用"屬性":"值"對的形式, 中間用逗號隔開。

11 替換節點

javascript：

var reference=element.replaceChild(newChild,oldChild)

該方法是將一個給定父元素里的一個子節點替換為另外一個節點。

jQuery：

replaceWith()、replaceAll()

replaceWith() 與 replaceAll() 作用相同。差異在于語法：內容和選擇器的位置, 以及 replaceAll() 無法使用函數進行替換。

$(selector).replaceWith(content) 用指定的HTML內容或元素替換被選元素

$(content).replaceAll(selector) 用指定的HTML內容或元素替換被選元素。

<p>hello</p> 想替換為： <h2>Hi</h2>

jQuery代碼：

$('p') .replaceWith('<h2>Hi</h2>');

或者可以寫成：

$('<h2>Hi</h2>').replaceAll('p');

12 刪除節點

javascript：removeChild()

var list=document.getElementById("myList");

list.removeChild(list.childNodes[0]);

jQuery:

$("p").remove();

13 CSS操作

javascript：

格式：element.style.property

CSS-DOM能夠讀取和設置style對象的屬性, 其不足之處是無法通過它來提取外部CSS設置的樣式信息, 而jQuery的css()方法是可以的。

document.body.style.backgroundColor="red";

jQuery：

格式：$(selector).css()

css()方法獲取元素的樣式屬性

此外, jQuery還提供了height()和width()分別用來獲取元素的高度和寬度(均不帶單位), 而css(height)、css(width)返回高寬, 且帶單位。

$("p").css({color: "#ff0011", background: "blue", "font-size":"16px" });

$("p").css({color: "#ff0011", background: "blue", fontSize:"16px" }); jQuery也支持

注意點：CSS中的如"font-size"這樣有"-"的屬性, 要使用首字母小寫的駝峰式表示, 如fontSize。

jQuery中的css()的帶橫線的屬性可以原樣輸出, 但需帶引號, 也可以使用首字母小寫的馱峰式表示。

javascript：

className屬性

DOM對象.className="className";

DOM對象.className +=" claaaName";

DOM對象.className="";

jQuery：

addClass(class|fn)

removeClass(class|fn)

toggleClass(class|fn)

14 表單value值的操作

javascipt：

formNode.value

formNode.attr('value');

formNode.attr('value',信息值);

jQuery：

val([val|fn|arr])

$().val(); //獲得value屬性值

$().val(value值); //設置value屬性的值(文本框)

$().val([,,]); //設置value屬性的值(單選框、復選框、下拉式列表)

該val()方法在復選框、單選按鈕、下拉列表的使用有凸出表現。

15 事件的屬性

相同之處

altKey Alt鍵是否被按下. 按下返回true

ctrlKey ctrl鍵是否被按下, 按下返回true

shiftKey Shift鍵是否被按下, 按下返回true

screenX/Y 對于鼠標事件, 獲取事件相對于屏幕原點的水平/垂直坐標

type 事件的名稱,如click、mouseover等

以上為javascript和jQuery相同的屬性

不同之處

javascript：

clientX/Y 鼠標指針在客戶端區域的坐標, 不包括工具欄、滾動條

jQuery:

pageX/Y 鼠標指針在客戶端區域的坐標, 不包括工具欄，滾動條;

16 事件的兼容性

事件目標:

javascript：

IE:srcElement 標準DOM:targe

jQuery:

target 引起事件的元素/對象

keyCode和CharCode:

javascript：

charcode keycode(keypress) keycode(keydown、keyup)

IE 無 按鍵的Unicode值 按鍵的數字代碼

標準DOM 按鍵的Unicode值 按鍵的數字代碼 按鍵的數字代碼

jQuery:

keyCode 對于keyup和keydown事件返回被按下的鍵。不區分大小寫, a和A都返回65;

鼠標事件,值對應按下的鼠標鍵

javascript：

button IE中的按鍵 Firefox中的按鍵

0 未按下案件 左鍵

1 左鍵 中鍵(滑輪)

2 右鍵 右鍵

3 同時按下左、右鍵 不支持組合鍵，未按下任何鍵時button值為undefined

4 中鍵(滑輪)

5 同時按下左、中鍵

6 同時按下右、中鍵

7 同時按下左、中、右鍵

jQuery:

which 對于鍵盤事件, 返回觸發事件的鍵的數字編碼。對于鼠標事件, 返回鼠標按鍵號(1左,2中,3右);

15 事件設置

DOM1級事件設置

<input type="text" onclick="過程性代碼" value=’tom’ />

<input type="text" onclick="函數()" />

node.onclick=function(){}

node.onclick=函數;

DOM2級事件設置

node.addEventListener(類型，處理，事件流);

node.removeEventListener(類型，處理，事件流);

node.attachEvent();

node.detachEvent();

jquery事件設置

$().事件類型(事件處理函數fn); //設置事件

$().事件類型(); //觸發事件執行

$().bind('事件類型',fn); //綁定事件

$().one('事件類型',fn); //綁定事件(一次)

$().live('事件類型',fn); //綁定事件(委派)

16 處理頁面中的元素

javascript：

使用javascript腳本獲取頁面內容的方式主要有兩種, 第一種是通過表單獲取表單元素的value值。格式為：

表單名稱.元素名.value;

該方式只能獲取表單中的元素值，對于其他標簽元素則無能為力。

第二種方式通過id名來獲取頁面中任意標簽的內容。格式為：

document.getElementById('id'). value;

document.getElementById ('id').innerText;

使用第二種方式時要注意, 標簽的id名必須存在且唯一, 否則就會出現錯誤。

為標簽內容賦值時, 則使用如下格式：

id.innerHTML='要顯示的內容';

jQuery:

html([val|fn]) 返回值:String

取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。

在一個 HTML 文檔中, 我們可以使用html()方法來獲取任意一個元素的內容。

如果選擇器匹配多于一個的元素, 那么只有第一個匹配元素的 HTML 內容會被獲取。

val String

function(index, html) Function

此函數返回一個HTML字符串。接受兩個參數, index為元素在集合中的索引位置, html為原先的HTML值。

text()

text([val|fn]) 返回值:String

val String 用于設定HTML內容的值

function(index, html) Function 此函數返回一個HTML字符串。接受兩個參數，index為元素在集合中的索引位置，html為原先的HTML值。

17 事件對象

javascript：

node.onclick=function(oEvent){
if(window.event) oEvent=window.event; //兼容性寫法
}

在IE瀏覽器中事件對象是window對象的一個屬性window.event；

在標準的DOM中規定event對象必須作為唯一的參數傳給事件處理函數。

因此, javascript要處理好各瀏覽器的事件對象的兼容性。

jQuery:

$().bind('click',function(evt){ window.event });
$().click(function(evt){});
$().bind('mouseover',f1);
function f1(evt){}

事件對象：就直接使用的evt即可, 在jQuery框架內部對各瀏覽器的事件對象作出了兼容處理。

18 阻止瀏覽器默認動作、阻止事件冒泡

javascript：

DOM2級瀏覽器默認動作阻止：

事件對象.preventDefault(); 主流瀏覽器

事件對象.returnValue=false; IE(6,7,8)瀏覽器

DOM2級事件冒泡阻止：

事件對象.stopPropagation(); 主流瀏覽器

事件對象.cancelBubule=true; IE(6,7,8)瀏覽器

jQuery：

$().bind('click',function(evt){
evt.preventDefault();
evt.stopPropagation();
});

preventDefault()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對各瀏覽器作出了兼容處理。

stopPropagation()方法是jQuery的方法, 名字與javascript底層代碼的名字一致, 并且對各瀏覽器作出了兼容處理。

return false 與event.preventDefault()區別

1. return false 實際上執行了三種操作

event.preventDefault()

event.stopPropation()

終止函數執行并立即執行

2 .為了避免對程序執行過多的隱式操作造成的Bug，建議

只需要阻止事件默認行為時，應該使用event.preventDefault()

只需要阻止事件冒泡時，應該使用event.stopPropagation()

只有當同時阻止事件冒泡和阻止事件默認行為時,才使用return false

19 頁面滾動

javascript：

scrollBy() 按照指定的像素值來滾動內容。

scrollTo() 把內容滾動到指定的坐標。

<script>
function scrollWindow(){
window.scrollTo(100,500);
}
</script>
<input type="button" onclick="scrollWindow()" value="滾動條" />

jQuery:

offset([coordinates]) 獲取匹配元素在當前視口的相對偏移。

返回的對象包含兩個整型屬性: top 和 left, 以像素計。此方法只對可見元素有效。

$("p:last").offset({ top: 10, left: 30 });

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>獲得 offset</button>
</body>
</html>

輸出結果: 本段落的偏移是 8 left 和 8 top。

scrollLeft() 設置或返回匹配元素相對滾動條左側的偏移。

scrollTop() 設置或返回匹配元素相對滾動條頂部的偏移。