1. 说说库和框架的区别？
库的英语为 Library ( 简写 Lib )，框架的英语为 Framework。
- 库是将代码集合成的一个产品，供程序员调用。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
- 框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。
开发者在使用框架的时候，必须使用这个框架的全部代码。
2. jQuery 能做什么？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
3. jQuery 对象和 DOM 原生对象有什么区别？如何转化？
1.jQuery选择器得到的jQuery对象和标准的 JavaScript中的document.getElementById()取得的DOM对象是两种不同的对象类型，两者不等价；
2.jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
例如：
$("#id").html();
document.getElementById("id").innerHTML;
意思是指：获取ID为id的元素内的html代码。这两段代码结果相同，但中间的取值过程不同。
即：$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
相互转换：
jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)
1、jQuery对象是一个数据对象，通过[index]的方法
如：var $v = $("#v") ; //jQuery对象
var v = $v[0]; //DOM对象
2、jQuery本身提供，通过.get(index)方法
如：var $v = $("#v"); //jQuery对象
var v = $v.get(0); //DOM对象DOM对象转成jQuery对象:
对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
4. jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
bin()为一个元素绑定一个或多个事件。
unbind()解除该元素绑定的事件。
delegate()为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；适用于当前或未来的元素（比如由脚本创建的新元素）。
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
-
on()在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能。
语法：.on( events [,selector ] [,data ], handler(eventObject) ) //事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上 $('div').on('click', 'span', function(){ console.log(this); }); off()用来移除on绑定的事件处理函数。
jQuery中推荐使用on()/off()方法
5. jQuery 如何展示/隐藏元素？
-
.hide([duration ] [,easing ] [,complete ])
用于隐藏元素，没有参数的时候等同于直接设置display属性
.css('display', 'none')
duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数 -
.show( [duration ] [, easing ] [, complete ] )
用于显示元素，用法和hide类似 -
.toggle( [duration ] [, easing ] [, complete ] )
用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似
6. jQuery 动画如何使用？
animate()方法用于创建自定义动画。
-
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。$('#clickme').click(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); }); -
.animate( properties, options )
options是一组包含动画选项的值的集合。 常用的选项:
duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
complete：在动画完成时执行的函数$('li').animate({ opacity: .5, height: '50%' }, { step: function(now, fx) { var data = fx.elem.id + ' ' + fx.prop + ': ' + now; $('body').append('<div>' + data + '</div>'); } });
7. 如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
-
html([string])
这是一个读写两用的方法，用于获取/修改元素的内部 HTML 内容。
当没有传递参数的时候，返回元素的innerHTML。
当传递了一个string参数的时候，修改元素的innerHTML为参数值。
看个例子:
$('div').html()
$('div').html('123') -
text()
操作的是DOM的innerText值，可以设置和获取元素内部文本，和html方法类似。
8. 如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
-
.val([value]) 设置和获取表单内容
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值$('input').val() $('input').val('newValue'); -
.attr()
.attr(attributeName)
获取元素特定属性的值var title = $( "em" ).attr( "title" ); .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"
});
$( "#greatphoto" ).attr( "title", function( i, val ) {
return val + " - photo by Kelly Clark";
});//这里用id选择符举例是不是function永远最多迭代一次？用类选择符是不是更好些？
9. 使用 jQuery实现如下效果
代码预览
加载JQuery库时，注意使用一致的网络协议（http或https），否则浏览器会阻止加载。
10. 使用 jQuery 实现如下效果
代码预览
加载JQuery库时，注意使用一致的网络协议（http或https），否则浏览器会阻止加载。
11. 实现如下效果
Ps:当点击按钮时使用如下数据
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: '珂兰 黄金转运珠 猴哥款',
price: '￥100.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂兰 黄金手链 3D猴哥款',
price: '￥45.00'
}
];
代码预览
加载JQuery库时，注意使用一致的网络协议（http或https），否则浏览器会阻止加载。
