题目1： 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+等。

jQuery库为Web脚本编程提供了通用(跨浏览器)的抽象层，使得它几乎适用于任何脚本编程的情形。jQuery通常能为我们提供以下功能：

1.方便快捷获取DOM元素

如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码：

$('div.content').find('p');

2.动态修改页面样式

使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下：

$('ul > li:first').addClass('active');

3.动态改变DOM内容

使用jQuery我们可以很容易地对页面DOM进行修改，例如，为ID为"container"的元素添加一个链接：

$('#container').append('<a href="more.html">more</a>');

4.响应用户的交互操作

jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

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

上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。

5.为页面添加动态效果

jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。

1    $(function () {
2             $("#btnShow").click(function () {
3                 $("#msubject").hide("slow");
4             });
5         });

6.统一Ajax操作

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

1 function (data, type) {
2     // 对Ajax返回的原始数据进行预处理
3     return data  // 返回处理后的数据
4 }

7.简化常见的JavaScript任务

除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。

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

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

1.联系:

jQuery对象可以通过jQuery包装DOM对象后产生
DOM对象也可以通过jQuery按索引取得

2.区别

1.jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr("src","test.jpg"); 这里的$("#img")就是 jQuery对象。
2.DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById("img").src = “test.jpg"；这里的document.getElementById("img")就是DOM 对象。
$("#img").attr("src","test.jpg");和document.getElementById("img").src = "test.jpg";是等价的，但是 $("#img").src = "test.jpg" ;或者 document.getElementById("img").attr("src","test.jpg");都是错误的。

3.转换

DOM对象转成jQuery对象
对于已经是一个 DOM 对象，只需要用$()把DOM对象包装起来，就可以获得一个 jQuery 对象了，$(DOM 对象) 注： var是定义变量
如:

1 var a = document.getElementById('a'); //DOM对象
2 var $a = $(a); //jQuery对象

转换后,就可以任意使用jQuery的对象

jQuery对象转成DOM对象
两种转换方式将一个 jQuery 对象转换成 DOM 对象： [index] 和 .get(index)；

(1)jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
如:

1 var $a = $('#a'); //jQuery 对象
2 var a = $a[0]; //DOM对象
3 alert(a.checked); //检测这个checkbox是否被选中

(2) jQuery本身提供,通过.get(index)方法得到相应的DOM

1 var $v = $("#v"); //jQuery 对象
2 var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
3 alert(v.checked); //检测这个 checkbox 是否被选中

总结:通过以上方法，可以任意的相互转换 jQuery 对象和 DOM 对象，需要再强调的是： DOM 对象才能使用DOM 中的方法，jQuery 对象是不可以使用DOM中的方法。

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

jQuery中使用on方法绑定事件,用off方法卸载事件
- bind、unbind、delegate、live都是jQuery1.7之前的方法,现已废弃,被on和off代替.
- bind和on都用于绑定事件
- unbind和off都用于卸载事件
- delegate与on都可实现事件代理
- live和bind绑定事件是一样的,但live方法会绑定相应的事件到document元素上
推荐使用on方法绑定事件,off方法卸载事件
用on事件使用事件代理的写法

.on( events [,selector ] [,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);

用off解绑事件使用事件代理的写法

.off( events [, selector ] [, handler ] )

示例:移除一个事件处理函数

function aClick() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});

$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});

trigger,根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('#foo').on('click', function() {
  console.log($(this).text())
});
$('#foo').trigger('click')

示例:创建一个点击事件并模拟点击执行

$('#foo').on('click', function() {
  alert($(this).text());
});
$('#foo').trigger('click');

题目4：jQuery 如何展示/隐藏元素？

通过设置css的display属性来实现

var $h1 = $('h1')
$h1.css('display','block')
$h1.css('display':'none')

通过增加或删除class来实现

//css部分
.status{
   display: none;
}
//js部分
var $h1 = $('h1')
$h1.addClass('status') //隐藏元素
$h1.removeClass('status') //展示元素

通过jQuery动画的hide、show、toggle方法实现

var $h1 = $('h1')
$h1.hide() //隐藏
$h1.show() //展示
$h1.toggle() //用于切换元素的隐藏显示

题目5： jQuery 动画如何使用？

四个参数:
duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
opacity：不透明度

基础用法:
- 隐藏元素
  .hide([duration ] [,easing ] [,complete ])
- 显示元素
  .show( [duration ] [, easing ] [, complete ])
- 切换元素
  .toggle( [duration ] [, easing ] [, complete ])
渐变
- 淡入显示
  .fadeIn( [duration ] [, easing ] [, complete ] )
- 淡出隐藏
  .fadeOut( [duration ] [, easing ] [, complete ] )
- 调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果
  .fadeTo( duration, opacity [, easing ] [, complete ] )
- 调整匹配的元素的不透明度动画来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，元素不再影响页面的布局。
  .fadeToggle( [duration ] [, easing ] [, complete ] )
滑动
- 滑动显示，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
  .slideDown( [duration ] [, easing ] [, complete ] )
- 滑动隐藏，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0时，display 样式属性被设置为none，该元素不再影响页面布局。
  .slideUp( [duration ] [, easing ] [, complete ] )
- 用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
  如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。
  .slideToggle( [duration ] [, easing ] [, complete ] )
自定义
- properties是一个CSS属性和值的对象,动画将根据这组对象移动。
  .animate( properties [, duration ] [, easing ] [, complete ] )
- options是一组包含动画选项的值的集合。
  animate( properties, options )
- 当一个元素调用.stop()，当前正在运行的动画（如果有的话）立即停止。
  .stop( [clearQueue ] [, jumpToEnd ] )

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

用html方法获取/修改元素的innerHTML
- 没有传递参数时直接返回元素的innerHTML
  $('div').html()
- 传递了一个string参数时修改元素的innerHTML为参数值
  $('div').html('hello world')
用text方法获取/修改元素的innerText
- 没有传递参数时直接返回元素的innerText
  $('div').text()
- 传递了一个string参数时修改元素的innerText为参数值
  $('div').text('hello world')

这种读写两用的方法很多，原理都类似

如果结果是多个，进行赋值操作的时候会给每个结果都赋值
如果结果多个，获取值的时候，$node.html()返回结果集中的第一个对象的相应值，$node.text()返回结果集中的所有值组成的字符串。

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

用val方法设置和获取表单用户输入或者选择的内容
也是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

$('input').val()//获取用户输入或选择的内容
$('input').val('newValue');//设置用户输入或选择的内容

用attr和prop方法来设置和获取元素属性

//获取元素属性
$node.attr('id')
$node.attr('src')
//获取元素自定义属性
$node.prop('data-title')
//设置元素属性
$node.attr('id','newId')
$node.attr('src','newSrc')
//设置元素自定义属性
$node.prop({
  data-title: "newTitle",
  data-href: "new href"
})

attr多用于html原有属性，prop多用于自定义属性。

题目8:使用 jQuery实现如下效果

代码实现(http://js.jirengu.com/boyinuqiwi/5/edit)

题目9：. 使用 jQuery 实现如下效果

代码实现(http://js.jirengu.com/wuxes/5/edit)

题目10：实现如下效果

代码实现(http://js.jirengu.com/kafefewopu/2/edit)

题目11：完成左右切换的 Tab 效果

代码实现(http://js.jirengu.com/hezisujore/2/edit)

进阶14:jQuery

进阶14:jQuery

题目1： jQuery 能做什么？

1.方便快捷获取DOM元素

2.动态修改页面样式

3.动态改变DOM内容

4.响应用户的交互操作

5.为页面添加动态效果

6.统一Ajax操作

7.简化常见的JavaScript任务

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

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

题目4：jQuery 如何展示/隐藏元素？

题目5： jQuery 动画如何使用？

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

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

题目8:使用 jQuery实现如下效果

题目9：. 使用 jQuery 实现如下效果

题目10：实现如下效果

题目11：完成左右切换的 Tab 效果

进阶14:jQuery

题目1： jQuery 能做什么？

1.方便快捷获取DOM元素

2.动态修改页面样式

3.动态改变DOM内容

4.响应用户的交互操作

5.为页面添加动态效果

6.统一Ajax操作

7.简化常见的JavaScript任务

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

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

题目4：jQuery 如何展示/隐藏元素？

题目5： jQuery 动画如何使用？

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

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

题目8:使用 jQuery实现如下效果

题目9：. 使用 jQuery 实现如下效果

题目10：实现如下效果

题目11： 完成 左右切换的 Tab 效果

题目11：完成左右切换的 Tab 效果