说说库和框架的区别？
库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式形成的也叫函数库。再函数库中可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
框架则是为解决一个（一类）问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。也就是说框架是库的升级版。开发者使用框架的时候，必须使用这个框架的全部代码。
jquery 能做什么？
jquery是个轻量级的“写的少，做的多”的js库。
jQuery的功能：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
jquery 对象和 DOM 原生对象有什么区别？如何转化？
- jQeury对象是通过jQuery的API构造的jQuery对象（类数组），拥有自己的属性和方法。
- DOM原生对象是通过DOM的API构造的DOM对象（DOM节点），也拥有自己的属性和方法。
var $jquery=$('#jquery');
var dom=document.getElementById('dom');
//dom对象转化为jquery对像
var $dom=$(dom);
//jquery对象转化为dom对象
var jquery=$jquery[0];
//对于一个特定的结果集，获取指定index的jQuery对象
$jquery.eq(0);
jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
可以像原生dom一样绑定事件$(selector).click()
jQuery也可以使用bind()/delegate()/live()/on绑定事件，unbind()和off()为对应bind()和on()解绑事件
-
bind()
为一个元素绑定一个事件处理程序，再jQuery1.7以前使用。对于早期版本，.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象当前选中的元素、所以在绑定的时候这些元素必须已经存在。
基本用法：
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
-
.delegate()
为所有匹配选择器的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。从1.7版本开始已被取代。
使用方法：
$("table").on("click", "td", function() {
$(this).toggleClass("chosen");
});
-
.live()
附加一个事件处理程序到匹配目前选择器的所有元素，现在和未来
从jQuery1.7开始， .live()方法已经过时了。
基本用法：
$("a").live("click", function() { return false; })
-
.on( events [,selector ] [,data ], handler(eventObject) )推荐
在选定的元素上绑定一个或多个事件处理函数
从1.7版本之后，.on()方法提供了绑定事件的所有功能。
各个参数的意义：
- events：一个或多个空格分割的事件类型和可选择的命名空间，或仅仅是命名空间。
- selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。若果选择器是null或忽略了该选择器，那么被选中的元素总是能触发事件。
- data：当一个事件被触发时，要传递给事件处理函数event.data
- handler(eventObject)：事件被触发时，执行的函数。
//普通绑定事件
$('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);
});
// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
console.log(e.data);
});
jquery 如何展示/隐藏元素？
- 隐藏元素：
.hide([duration][,easing][,complete])
用于隐藏元素，没有参数的时候等同于直接设置display属性。
.css('display','none')
- duration：动画持续多久
- easing：表示过渡时使用那种缓冲函数，jquery自身提供
linear和swing - complete：动画完成时执行的函数
- 显示元素：
.show( [duration ] [, easing ] [, complete ] )
用法类似于hide。
jquery 动画如何使用？
jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
参数：
- 必需的 params 参数定义形成动画的 CSS 属性。
- 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
- 可选的 callback 参数是动画完成后所执行的函数名称。
如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
-
text()：设置或返回所选元素的文本内容 -
html()：设置或返回所选元素的内容(包括HTML标记)
如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
-
val()：设置或返回表单字段的值 -
attr()：设置或返回元素的属性
代码
使用 jquery实现如下效果
Paste_Image.png
在线预览
使用 jquery 实现如下效果
Paste_Image.png
问题： 点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决
原因是在
href属性中使用了#做页面跳转，可以使用javascript:void(0)在线预览
实现如下效果
Paste_Image.png
提示
1.使用代理
2.当点击按钮时使用如下数据
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'
}
];
