一、说说库和框架的区别？

• 库( Library）：库试讲代码集合成的一个产品，供程序员调用。面对对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。
  在函数库中的可以直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
• 框架（framework）：框架则是为解决一个（一类）问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，就可以实现全部功能。可以说，框架是库的升级版。
  开发者在使用框架的时候，必须使用这个框架的全部代码。
• 框架和库的比较可以想像为:
  假如我们要买一台电脑。框架为我们提供了已经装好的电脑，我们只要买回来就能用，但你必须把整个电脑买回来。这样用户自然轻松许多，但会导致很多人用一样的电脑，或你想自定义某个部件将需要修改这个框架。
  而库就如自己组装的电脑。库为我们提供了很多部件，我们需要自己组装，如果某个部件库未提供，我们也可以自己做。库的使用非常灵活，但没有框架方便。
• 框架与类库的区别主要表现在以下几个方面：
  （1）从结构上说，框架内部是高内聚的，而库内部是相对松散的。
  （2）框架封装了处理流程的控制逻辑，而库几乎不涉及任何处理流程和控制逻辑。
  （3）框架具有控制反转能力，而库没有。对于库中的元素来说，通常是由我们的应用来调用它；而框架在适当的时候会自己调用我们应用中的逻辑。
  （4）框架专注于特定的领域，而库更通用的。

二、jquery能做什么？

• jquery是一个快速、简洁和功能丰富的JavaScript库。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
• jQuery通常能为我们提供以下功能：
  1、方便快捷获取DOM元素。例如：找到所有以div中应用了.content class样式的p标签。
  $('.content').find('p');
  2、修改页面样式。即使是在css页面呈现之后，jQuery仍能改变文档中某个部分的类或者个别的样式属性。例如：找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式.
  $('ul>li:first').addClass('active');
  3、改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序，甚至对 HTML文档的整个结构都能重写和扩充。例如：为ID为container的元素添加一个连接。
  $('#container').append('<a href="more.html">more</a>');
  4、响应用户的交互操作。jquery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。例如：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。

$('button.show-details').click(function() {
   $('div.details').show(); 
 });

5、为页面添加动态效果。
$('div.details').slideDown();
6、简化常见的JavaScript任务。除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。

 $.each(obj, function(key, value) {
     total += value;
 });

7、统一Ajax操作。jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。

三、jquery对象和DOM原生对象有什么区别？如何转化？

• DOM原生对象和jquery对象的区别：
  1.js获取的dom是一个对象，jquery对象就是一个伪数组对象，是选择出来元素的数组集合。
  jquery选择器得到的jquery对象和标准的JavaScript中的document.getElementByld()取得的dom对象是两种不同的对象类型，两者不等价。
  2.jquery无法使用DOM对象的任何方法，同理DOM对象也不能使用jquery里的方法。
• 相互 转换：
  1.jquery对象转换为原生DOM对象

var $li = $('li'); //jquery对象
var li = $li[0]; //DOM对象
var $div = $('div');  //jquery对象
var div = $div.get(0);  //DOM对象

2.DOM对象转换成jquery对象
对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象。

var li = document.getElementByid('li'); //DOM对象
var $li = $(li);  //jquery 对象

四、jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件代理的写法？

• jquery绑定事件的方法有： bind()、live()、delegate()、on()。解除绑定的方法有：unbind()、die()、undelegate()、off()`。
• bind()、live()、delegate()逐渐被on()替代。unbind()、die()、undelegate()逐渐被off()代替。off()、on()方法给api带来更多的便利。推荐使用该方法。
• on()方法在被选元素及子元素上添加一个或多个事件处理程序。

$('.child').on('click',function(){
    console.log('ok')
})  //监听子元素
$('.parent').on('click','.child',function(){
    console.log('ok')
})  //监听父元素

• off()移除事件处理程序。
  $('.parent').off('click');

五、jquery如何展示/隐藏元素？

基本的展示和隐藏元素

• 隐藏：.hide([duration ] [,easing ] [,complete ])用于隐藏元素，没有参数的时候等同于直接设置display属性。例如：

 $('.target').hide(); //等价于 $('.target').css('display', 'none')

 $('#book').hide(300, 'linear', function() {
    alert('Animation complete.');
  }) // 300秒之内缓慢的沿直线的形式消失并弹出一个对话框

• 展示：.show( [duration ] [, easing ] [, complete ] )用法与hide类似。
• 隐藏、展示切换：.toggle( [duration ] [, easing ] [, complete ] )用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似。
  其中参数的意义：
  duration：动画持续多久；
  easing：过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"；
  complete：在动画完成时执行的函数。

渐变式展示和隐藏

• 渐入方式展示：.fadeIn( [duration ] [, easing ] [, complete ] )
• 渐出方式隐藏：.fadeOut( [duration ] [, easing ] [, complete ] )
  调整匹配元素的透明度：.fadeTo( duration, opacity [, easing ] [, complete ] )
• 渐入和渐出间的切换：.fadeToggle( [duration ] [, easing ] [, complete ] )通过匹配元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。元素不透明度一旦达到0，display样式属性设置为none。
  其中参数的意义和上一条中相同。例如：

$("button:first").click(function() {
     $("p:first").fadeToggle("slow", "linear");
});

滑动式展示和隐藏

• 下滑方式展示：.slideDown( [duration ] [, easing ] [, complete ] )
• 上滑方式隐藏：.slideUp( [duration ] [, easing ] [, complete ] )
• 下滑和上滑间的切换：.slideToggle( [duration ] [, easing ] [, complete ] )
  其中参数的意义和上一条中相同。

$('#book').slideDown('slow', function() {
  //Animation complete.
});

六、jquery动画如何使用？

• 上面几个简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法：
• .animate( properties [, duration ] [, easing ] [, complete ] )
  参数意义：
  properties：一个CSS属性和值的对象,动画将根据这组对象移动。
  例1
  例2
  参考
• .clearQueue
  清除动画队列中未执行的动画。
• .finish
  停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。
• .stop( [clearQueue ] [, jumpToEnd ] )
  停止当前正在运行的动画。
  参数意义：
  clearQueue(default: false)
  jumpToEnd(default: false)

七、如何设置和获取元素内部html内容？如何设置和获取元素内部的文本？

$('div').html('abc');     //设置元素内部HTML内容为"abc"

$('div').html();     //获取元素内部HTML内容

$('div').text('abc');     //设置元素内部文本为"abc"

$('div').text();     //获取元素内部文本

八、如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素的属性？

$('input').val('abc');     //设置表单用户输入或者选择的内容为"abc"

$('input').val();     //获取表单用户输入或者选择的内容

$('div').attr('class','abc');     //设置元素的class属性为"abc"

$('div').attr('class');     //获取元素的class属性