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() 设置或返回匹配元素相对滚动条顶部的偏移。