1. jQuery能做什么？

jQuery 是一个 JavaScript 库， 极大地简化了 JavaScript编程。

$("#id")  相当于 document.getElementById("id")
$(".class") 相当于 document.getElementByClassName("class")
$("css选择器 ").css("css","css属性值") 设置元素的某一css属性
$("css选择器").on("event",function(){})  给元素添加监听事件

总而言之，jquery极大简化了js编程，对许多操作都进行了封装，而且兼容性也很好，掌握之后能大幅提高编程速度。

2. jQuery对象与dom对象有什么区别？怎么相互转化？

jquery对象只能使用jquery中的提供的方法，不能用原生js中的方法。dom对象也只能用原生js中提供的方法，不能使用jquery中提供的方法。
他们之间相互转化 ：

<div id="test"></div>

$("#test")  //jquery对象
document.getElementById("test")  //dom对象
转化
$("#test")[0]  // 此时是dom对象,只能使用原生js提供的方法
$(document.getElementById("test") )  // jquery对象，只能使用jquery提供的方法。

3. jQuery中如何绑定事件？bind,unbind,delegate,live,on,off都有什么用？推荐使用哪种？使用on绑定事件的事件代理的写法。

jquery提供了四种事件绑定的方式 bind,delegate,live,on

1. bind(event, [data], function(eventObject))
看实例是了解某一方法的最好方式
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

evnet  事件类型
data 一个对象，它包含的数据键值对映射将被传递给事件处理程序
function 每当事件触发时执行的函数

bind对应的解绑方法是unbind()，在jQuery 3.0中，.bind()已被标记为弃用。

2.delegate(selector, event, [data], fn)

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

selector用来指定触发的目标元素，监听器被绑定在调用此方法的元素上
data fn同上

对应的解绑方式是undelegate()

3.live(type, [data], fn)
从jQuery1.7开始，.live() 方法已经过时了 所以就不做过多的了解

对应的解绑方式是 die()

4.on(type, [selector],  [data], fn )
没有selector时，就和bind一样
有selector时，就像delegate一样
on综合上述几个方法，所以最推荐使用，对应解绑方式 off()

on绑定事件使用事件代理的方式
$('table').on('click', 'th', function(e){
    console.log(this);
})

4. jQuery如何展示/隐藏元素？

1 .show()方法
$('.target').show();
匹配的元素将被立即显示，没有动画。这大致相当于调用.css('display', 'block')
对应的隐藏方法是 .hide();

2 .fadeIn()      动画表现形式淡入
.fadeIn( [duration ] [, complete ] )
第一个参数  动画用时
第二个参数  动画完成后执行的函数
$('.target').fadeIn(1000,function(){});   

对应的隐藏方法是 fadeOut()，互相切换是 fadeToggle()
 
3 .slideDown()  动画表现形式下拉
.slideDown( [duration ] [, complete ] )
$('.target').slideDown(1000,function(){});   

对应的隐藏方法是slideUp(),互相切换是slideToggle()

5. jQuery动画如何使用？

.animate( properties [, duration ] [, easing ] [, complete ] )
方括号都是可选，
properties  元素的属性值，动画也是根据此来进行
duration  动画持续时间
easing 动画过渡函数
complete 动画完成后执行函数
$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, 
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

$('.target').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle',
    fontSize: "3em"
}, 1000) 
.animate() {
  // 多个动画  按序执行
};

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

$(‘selector’).html():获取元素内部HTML。

$(‘selector’).html(‘…’):设置元素内部HTML。
eg. 
$('div.demo-container').html('<p>This is a test.</p>');
输出   This is a test.
$(‘selector’).text():获取元素内部文本。

$(‘selector’).text(‘…’):设置元素内部文本。
eg.
$('div.demo-container').text('<p>This is a test.</p>');
输出   <p>This is a test.</p>

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

$(‘selector’).val():获取表单用户输入值;
$(‘selector’).val(‘…’):设置输入值;

$(‘selector’).attr(‘name’):获取元素属性;
$(‘selector’).attr(‘name’,’xxx’):设置元素属性的值;

8. 实现下列效果

9. 实现如下效果

10. 实现下列效果（带ajax请求）

11. 实现左右切换的 Tab 效果

效果都在→效果