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+等。^[1]

作用：

方便快捷获取DOM元素

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

动态修改页面样式

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

动态改变DOM内容

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

响应用户的交互操作

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

统一Ajax操作

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

简化常见的JavaScript任务

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

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

    jQuery就是JS的一个扩展库，工具库，提供很多方便快捷的方法，所以将JS对象转换为jQuery对象后，能更方便地操作这个对象。但是jQuery对象也不是万能的，有一些JS对象有的能，jQuery对象并没有提供，所以需要转换回JS对象，才能进行操作。另外一种情况可能是，你使用某些第三方库，接口函数只能接受JS对象或者jQuery对象，那么你就需要在这两者之间进行转换。

1、将jQuery转换为dom对象的方法 [index] 或者.get(index)：

a、$(“#form”)[index] ,该方法获取form元素的dom对象

b、$(“#form”).get(index)

2、将js的dom对象转换为jQuery对象，对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) ：

 Var a=document.getElementById(“form”);

 $a=$(a);

通过对象转换后$a就成为了封装的jQuery对象，可以调用jQuery封装好的方法

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

on():在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能。

  $('button').on('click',function(){
     $('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>')
      console.log($('p').length)
  })

off():用来移除on绑定的事件处理函数。

jQuery 如何展示/隐藏元素？

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery 动画如何使用？

jQuery animate() - 操作多个属性
生成动画的过程中可同时使用多个属性：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

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

$(‘selector’).html():获取元素内部HTML。
$(‘selector’).html(‘…’):设置元素内部HTML。
$(‘selector’).text():获取元素内部文本。
$(‘selector’).text(‘…’):设置元素内部文本。

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

$(‘selector’).val():获取表单用户输入值;
$(‘selector’).val(‘…’):设置输入值;
$(‘selector’).attr(‘name’):获取元素属性;
$(‘selector’).attr(‘name’,’xxx’):设置元素属性的值;

JQuery