问答
1.说说库和框架的区别？
类库（Class Library）：类库就是一些类的集合，只要我们将一些可以复用的类集中放到一个Library中，我们就可以称其为一个类库。
类库解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如将一个解决复杂问题的功能模块封装成一个函数，提供一个简单的接口。
类库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们的代码结构。
类库有：jQuery等
框架（framework）：框架的第一含义是一个骨架，它封装了某领域内处理流程的控制逻辑，你只需要对它填充具体的业务逻辑。框架的目标性非常强，它专注于解决某一特定领域的问题，并为这一特定领域提供通用的解决方案。
这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架中也包含了很多元素，但是这些元素之间关系的紧密程度要远远大于类库中元素之间的关系。框架中的所有元素都为了实现一个共同的目标而相互协作。
框架有：react.js, angular.js, vue.js,backbone.js, Bootstrap等
业务代码、库、框架的关系可以参考下图：
区别：
①从结构上说，框架内部是紧密的，而类库内部则是相对松散的。
②框架封装了处理流程的控制逻辑，而类库几乎不涉及任何处理流程和控制逻辑。
由于框架对处理流程的控制逻辑进行了封装，才使得框架成为一个应用的骨架。框架中的处理流程和控制逻辑需要经过精心的设计，因为所有使用了该框架的应用程序都会复用该设计。
③框架具有IOC（控制反转）能力，而类库没有。
IOC，即俗称的好莱坞模式（Don’t call us, we will call you）。
对于类库中的元素来说，通常都是由我们的应用来调用它；而框架具有这种能力即在适当的时候调用我们应用中的逻辑。这种能力是通过框架扩展点（或称为“插槽”）来做到的即具体的应用通过扩展点注入自己的逻辑，而在适当的时候，框架会调用这个扩展点中已注册的逻辑。实际上，.NET中的事件（event）发布、预定机制就是IOC的一个代表性例子。
④框架专注于特定领域，而类库却是通用的。
框架作用于一个特定领域的解决方案的完整表达，而类库几乎不针对任何特定领域。
⑤框架通常建立在众多类库的基础之上，而类库一般不会依赖于某框架。
参考
2.jquery 能做什么？
Jquery是一个javaScript的函数库。
①简化常见的js任务
②dom操作
③ajax
④绑定事件
⑤实现动画和特效
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
jquery对象是通过jquery选择器选择的对象，得到的是类数组对象，有自己的独有的属性和方法；DOM原生对象是通过JS选择器获得的对象,有自己的属性和方法。二者不能够混用，否则会报错。
DOM对象 转化为jquery对象： 用( )包裹DOM对象，如(DOM对象)
var btn=document.getElementById('btn'); //dom对象
$btn=$(btn); //jquery对象
jquery对象转化为DOM对象：jQuery对象是一个类似数组的对象，可以使用它的下标，如[index]或者get[index]方法转换为DOM对象
var $test=$('#test') //jquery对象
var test1=$test[index] //dom对象
var test2=$test.get[index] //dom对象
var test3=$test.eq(index) //jquery对象
注意：用$选中的元素，无论一个还是多个，所得的都是类数组的对象。如果用eq(index)会得到jQuery对象，而用[index]会得到原生DOM对象。
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
jQuery绑定事件的方法有.bind()、.live()、.delegate()和.on()。下面同上一一对应的 .unbind()、.die()、.undelegate()和.off()是解除绑定的方法；其中的bind,live及die，在jQuery 1.7版本中，官方已废除了。
参考
bind、unbind、delegate、live 都在对应的在各个版本中弃用或者有局限性,而 on 和 off 兼容了上面绑定的所有方法,推荐使用on和off方法绑定和解除绑定
参考
①bind:对匹配到已经存在的元素绑定事件，可以绑定的多个事件以及处理方法，但是对新增加的元素不能绑定事件
//绑定单个事件
$(selector).bind(event,data,function)
//绑定多个事件
$(selector).bind({
click: function() {
// do something on click
},
mouseenter: function() {
// do something on mouseenter
}
});
//绑定多个事件类型
$('selecotr').bind('event1 event2', function() {
//do something on mouseenter
});
②unbind:用来解除bind方法绑定的事件。
$('#p').unbind('click')
③delegate:为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。(也就是可以指定事件代理的父元素，并且后来添加的元素也绑定了事件）
$(selector).delegate(childSelector,event,data,function)
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
解释：JQuery扫描文档查找(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。
④live:相当于自动使用了事件代理，默认事件冒泡到 document 节点。不仅能对能对已有的元素绑定事件，还能对未来插入的元素绑定事件
$('a').live('click', function() { });
//相当于$(document).delegate('a', 'click', function() { });
解释：JQuery把函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。
⑤on:在选定的元素上绑定一个或多个事件处理函数。从jQuery1.7开始，.on()方法提供了事件处理的所有功能。所以，为了统一和方便，推荐使用.on()方法作为绑定事件的方法
$(".ct").on("click","a",function(){
console.log($(this).text());
})
⑥off:用来移除用.on()方法绑定的事件。
移除所有段落上的事件：
$("p").off()
移除所有段落上的代理事件：
$("p").off( "click", "**" )
通过传入的第三个参数，仅移除先前绑定的事件处理函数：
var foo = function () {
// code to handle some kind of event
};
// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);
通过指定名字空间，解除绑定表单上所有的代理事件：
var validate = function () {
// code to validate form entries
};
// delegate events under the ".validator" namespace
$("form").on("click.validator", "button", validate);
$("form").on("keypress.validator", "input[type='text']", validate);
// remove event handlers in the ".validator" namespace
$("form").off(".validator");
5.jquery 如何展示/隐藏元素？
隐藏展示有
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
①可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
②可选的 callback 参数是隐藏或显示完成后所执行的函数。
③本质上是修改dom.style.display属性
//展示p1
$("#btn1").on('click', function(e){
$(".p1").show();
});
//隐藏p1
$("#btn2").on('click', function(){
$(".p1").hide();
});
//隐藏p1，持续时间1s之后再执行回调
$("#btn3").on('click', function(){
$(".p1").hide(1000, function(){
$(".p2").hide(2000, function(){
$(".p3").hide(3000);
});
});
});
$("#btn4").on('click', function(){
$(".p1").show(1000, function(){
$(".p2").show(2000, function(){
$(".p3").show(3000);
});
});
});
//状态切换
$("#btn5").on('click', function(){
$(".p1").toggle();
});
6.jquery 动画如何使用？
jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
①{params}必需的，包含样式属性及值的对象。例如：{width:'100px',height:'80px'}
②speed可选的，动画的时长。例如：slow/fast/毫秒数 。
③callback可选的，回调函数，在动画执行完毕后执行。
注意：只有数字值才能创建动画（比如 margin:30px）。字符串值无法创建动画（比如 background-color:red），写了之后会没有任何效果。
举例：
Examples
demo
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- .html()方法可以获取元素内部的html内容（包含html标签）;如果在html()方法内加参数，可以设置元素内部html内容。如果参数内含有html标签，会被解析。
$('div').html(); //获取内容
$('div').html('测试
') //设置内容
- .text()方法可以获取元素内部的文本内容（丢弃html标签）；如果在text()方法内加参数，可以设置元素内部的文本内容。如果内容含有html标签，则会被转义成字符串，而不会被浏览器解析，适合用来处理用户输入。
$('div).text(); //获取文本
$('div').text('我是文本') //设置文本
举例：
Examples
我是头部
demo
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- .val()方法可以获取表单用户输入或者选择的内容;在val()方法内加参数，可以设置表单内部输入或者选择的内容。
$('input').val(); // 获取值
$('input').val(); //设置值
- attr()方法可以获取元素的属性;在attr()方法内加参数，可以设置元素的属性。
$('img').attr('src'); // 获取属性
$('img').attr('src', newSrc); // 设置属性
demo
代码
1.代码运行结果
1.1范例
源码
2.代码运行结果
2.1范例
源码
问题： 点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决？
答：查看源代码我们可以发现，标签的
因为默认#是#top会自动回到顶部，因此不要使用#作为占位符。如果href=""，不设置占位符就相当于刷新整个页面，所以必须设置占位符。
解决方法：
1、href让其等于两个或四个“#”；（这种方式最安全）；
2.设置为
3.设置为
的返回值是undefined,也相当于什么都不会发生。
4.当被点击时，设置preventDefault()
3.代码运行结果
3.1范例
源码