jQuery选择器

题目1： 说说库和框架的区别？

库： 类似于小工具的集合，需要用的时候直接调用就可以，作用是简化流程
框架：类似于房子的构架，对其进行填充来创建项目

题目2： jquery 能做什么？

jQuery是一个兼容多浏览器的JavaScript库，核心理念是write less，do more，它的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等。除此之外，jQuery还提供API让开发者编写插件。总之，使用jQuery能使开发者很轻松的开发出功能强大的静态或动态页面

题目3： jquery 对象和 DOM 原生对象有什么区别？如何转化？

区别：DOM原生对象是个特殊的对象。jQuery对象是一个类数组对象。
转化：
DOM原生转jQuery：$(Element)；
jQuery转DOM原生：Element[0]；

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

• bind/ unbind
  用于jquery1.7之前，是老的绑定事件的写法，已废弃
• delegate
  为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
• live
  为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。也适用于当前或未来的元素（比如由脚本创建的新元素）。但是live是将document作为代理元素，不推荐使用。
• on/off
  现在使用的绑定事件的写法（推荐使用）

// 普通事件绑定，最简单的用法
$('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);
});

题目5：jquery 如何展示/隐藏元素？

展示：.show([duration ] [,easing ] [,complete ])
隐藏：.hide([duration ] [,easing ] [,complete ])

duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
没有参数的时候等同于直接设置display属性

 $('#book').hide(300, function() {
alert('Animation complete.');

题目6： jquery 动画如何使用？

• .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是一组包含动画选项的值的集合。 常用的选项:
  1、duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
  2、easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
  3、step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
  4、complete：在动画完成时执行的函数

$('li').animate({ opacity: .5, height: '50%' }, { step: function(now, fx) {

 var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
 $('body').append('
' + data + '
');
} });

题目7：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

• 如何设置和获取元素内部 HTML 内容？
  html([string])
  这是一个读写两用的方法，用于获取/修改元素的innerHTML：
  1.当没有传递参数的时候，返回元素的innerHTML
  2.当传递了一个string参数的时候，修改元素的innerHTML为参数值

$('span').html()
$('span').html('123')

• 如何设置和获取元素内部文本？
  text()
  和html方法类似，操作的是DOM的innerText值

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

• 如何设置和获取表单用户输入或者选择的内容？
  $('input').val()/.selected()/.checked()/.disabled()/.enabled()
• 如何设置和获取元素属性？
  $('xxx').attr();

题目9：

demo

题目10：

demo

题目11：

demo