jQuery

jQuery能做什么

jQuery是一个优秀的JavaScript库。jQuery凭借着简洁的语法以及跨平台的兼容性，极大简化了遍历HTML，操作DOM，处理事件，执行动画和开发ajax操作。jquery有如下优势

轻量级：采用UglifyJS压缩后，大小保持在30k。
强大的选择器：允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jquery独创的高级选择器。
出色的DOM操作封装
可靠的事件处理机制
完善的ajax：jquery将ajax操作封装到一个函数$.ajax()里
不污染顶级变量：jquery只简历一个名为jQuery的对象，其所有的函数方法都在这个对象之下。
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层与结构层的分离
丰富的插件支持
完善的文档
开源

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

DOM原生对象都可以表示成一棵树，一个html文档中的比如

，

等节点都是DOM元素节点，可以通过JavaScript方法中的getElementById或者getElementsByTagName来获取元素节点。像这样得到的元素就是DOM对象。DOM对象可以使用JavaScript中的方法。
而jQuery对象就是通过jQuery包装之后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。
但是在jQuery对象中无法使用DOM对象的任何方法，同样的，DOM对象也不能使用jQuery的方法。
如果要将二者相互转换，首先要明白，如果获取的对象是jquery对象，那么在变量前加上$，比如

var $variable = jQuery对象

如果获取的是DOM对象，则

var variable = DOM对象

其次，jquery提供了两种方法将jquery对象转换为DOM对象，即[index]和get(idnex)。
(1)首先，jquery是一个类数组对象，可以通过[index]来得到相应的DOM对象。jquery对象如下

var $cr = $('#cr')   //jquery对象
var cr = $cr[0]; //DOM对象

(2)另一种方法是jquery提供的，可以通过get(index)方法来将其转化为dom对象。jquery代码如下

var $cr = $('#cr') //jquery对象
var cr = $cr.get(0) //DOM对象

如果是将DOM对象转换为jquery对象的话，可以利用$()将DOM对象包装起来，就可以获得一个jquery对象。

var cr = document.getElementById('cr') //DOM对象
var $cr = $(cr) //jquery对象

jQuery中如何绑定事件？

bind()

可以利用bind()方法来对匹配的元素进行事件的绑定，具体的bind()方法为

bind( type [.data] . fn)

bind()方法有三个参数，具体如下

第1个参数是事件的类型，类型包括click、blur、focus、mouseover、mousemove等，当然也可以是自定义的名称。
第2个参数为可选参数，作为event data属性值传递给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。

unbind()

unbind()作用是解除jquery对象的事件绑定，能够移除所有的，或者是被选定的事件处理程序，或者是当事件发生时候终止事件的运行。

delegate()

delegate()的方法是为指定的元素绑定一个或者多个事件，并且规定这些事件发生时候运行的函数。使用delegate()方法一般用于当前元素或者未来元素(比如由脚本创建的元素)。
delegate()里面有这几个参数，delegate(childSelector,event,data,function)

childSelector：必需，规定要附加事件的一个或者多个子元素。
event：必需，规定附加到元素的一个或多个事件。
data：可选，规定传递到函数的额外数据。
function：必需，规定当事件发生时运行的函数。

live()

live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
基本的语法为live(event, data,function)。

event：必需，规定附加到元素的一个或多个事件。
data：可选，规定传递到函数的额外数据。
function：必需，规定当事件发生时运行的函数。

on()

on()，一般的用法为.on( events [,selector ] [,data ], handler(eventObject) )，其参数意义如下所述

events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data：当一个事件被触发时，要传递给事件处理函数的event.data
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。

off()

off()，用来移除一个事件的处理函数，基本用法为.off( events [, selector ] [, handler ] )。参数意义和on()基本类似。

常用的方法

一般情况下常用的方法为on()/off()方法来绑定事件以及移除事件处理函数，利用on()来绑定事件的写法是，例子如下

$('div').on('click', function(e){
    console.log(this);
    console.log(e);
});

jQuery 如何展示/隐藏元素？

展示元素可以利用show：
$(selector).show(speed,callback);
可选的参数speed：规定元素从隐藏到完全可见的速度，默认为0。
可选的参数callback：show函数执行完之后，要执行的函数。
本质上show方法是修改元素的display为block。
隐藏元素可以利用
$(selector).hide(speed,callback);
参数同上（这里的speed表示从显示到隐藏的速度），本质上hide方法是修改元素的display为none。

jQuery动画使用

可以利用animate()来创建自定义动画，基本语法如下

.animate({params}, speed, callback);

参数意义分别是：
params 定义形成动画的 CSS 属性(动画结束后的CSS)必选
speed 规定效果的时长.值:slow,fast或毫秒,可选
callback 动画完成后所执行的函数,可选
.delay()设置一个定时器，以延迟执行队列中后续的项目。
.clearQueue()从队列中删除所有还没有运行过的项目。
.stop()在匹配的元素上停止当前正在运行的动画。
.finish()针对匹配的元素停止当前正在运行的动画，删除所有队列中的动画，并结束所有动画

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

可以分别利用$(selector).html()来获取元素html内容
可以利用$(selector).text()来获取文本内容
如果要修改元素内部文本和html内容，可以在.html()以及.text()括号内加入传递的参数。即arguments。

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

对于获取表单信息可以利用

$(selector).val(); //获取表单用户输入值
$(selector).val(arguments); //设置输入值
$(selector).attr(attrName); //获取元素属性
$(selector).attr(attrName , 'xxx'); //设置元素属性的值