jQuery 能做什么？
jQuery是一个快速、简洁的JavaScript框架；一个优秀的JavaScript代码库，jQuery设计的宗旨是“write Less，Do More”；它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
(1). 选择网页元素：
可以方便快捷的获取网页元素，使用原生javascript的方式来遍历或者查找DOM元素的某个部分会造成编写很多冗余代码。而jQuery一行代码就够了。
$(' div .content').find('p')；//查找符合选择器的后代元素
$(' ul > li ').eq(0).siblings();//选择兄弟节点
$('ul > li').parent();//选取父亲节点
$('#box').children();//选取儿子节点
(2). 元素的操作：取值和赋值
可以方便快速的取值和赋值，例如：
$('#box').html();
$('#box').text();
$('#box').val();//主要是选中表单输入框中的值。
//传递参数为设置值，不传参数为获取值。
(3). 元素的操作：复制，删除和创建
包括DOM内部插入节点：
append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中。
prependTo()把所有匹配的元素前置到另一个指定的元素集合中。
after()与before()表示用来对相对选中元素外部增加相邻的兄弟节点2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面。
before()、after()与insertBefore()。insertAfter()的除了目标与位置的不同外，后面的不支持多参数处理 ;
before 是前面是基准后面是要插入的元素，insertBefore是前面是要插入的内容，后面是基准。after()和insertAfter()类似。
DOM节点删除内容：
empty()：empty它只移除指定元素中的所有子节点（自身不移除）。这个方法不仅移除子元素（和其他后代元素）同样移除元素里的文本。
remove()：remove移除元素，自身包括后代全都移除。
detach()：detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。当你append之后，又重新回到了文档流中。就又显示出来了。
DOM拷贝clone()：
clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。如果节点有事件或者数据之类的其他处理，我们需要通过clone(true)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。
(4). 工具方法
常用方法：each()遍历一个jQuery对象，为每个匹配元素执行一个函数；
$(' ul > li ').each(function(value,index){})
index()从给定集合中查找特定元素index；没参数返回第一个元素index；如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index；如果参数是选择器，返回第一个匹配元素index，没有找到返回-1。
$('.active').index();
map()通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
$(' div ').map(function(index,item){})
ready()当DOM准备就绪时，指定一个函数来执行。与window.onload不同的是不必等待图片等其他资源加载完毕就可以执行。
(5). jQuery事件操作
on(events ,[ selector ] ,[ data ])和off()：
各个参数的含义：
events：一个或多个空格分隔的事件类型和可选的命名空间；
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素；
data：当一个事件被触发时，要传递给事件处理函数的event.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);
});
委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。在确保所选择的元素已经存在的情况下，进行事件绑定时，可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。
off(events [, selector ] [, handler ] )
类似于on，但为移除一个事件的处理函数。
trigger()：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
(6). 特殊效果
hide([duration ] [,easing ] [,complete ])
duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
用于隐藏元素，没有参数的时候等同于直接设置display属性
show()同上，用于显示元素。
toggle()切换，用于切换元素的隐藏显示。
$('#box').hide();
$('#box').show();
$('#box').toggle();
fadeIn( [duration ] [, easing ] [, complete ] )，fadeOut
淡入和淡出，fadeToggle淡入和淡出切换
$('#box').fadeIn('slow',function(){})
slideDown( [duration ] [, easing ] [, complete ] )，slideUp滑动卷上或者滑下；slideToggle两者切换
$('#box').slideUp('slow', function() {
});
animate(properties [, duration ] [, easing ] [, complete ])
自定义动画
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
duration是一个字符串或者数字决定动画将运行多久。
easing是一个字符串，表示过渡使用哪种缓动函数。
complete：在动画完成时执行的函数
stop()，finish()
stop()表示动画停止并停留在当前状态；finish()表示动画立即结束并返回最初状态。
(7). AJAX
$.ajax({
url:'xxx',//请求的url地址
method: 'GET',//请求的方式GET或者POST
data:{name:'lzj',age:24},//传递的参数
success:function(data){},//成功执行的回调
...//还可以配置很多参数
})
async:布尔值，表示请求是否异步处理。默认是 true。
cache:布尔值，表示浏览器是否缓存被请求页面。默认是 true。
dataType:规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。
context：这个对象用于设置Ajax相关回调函数的上下文。 默认情况下，这个上下文是一个ajax请求使用的参数设置对象
headers：一个额外的{键:值}对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;因此，请求头中的设置值，会被beforeSend 函数内的设置覆盖。
jQuery 对象和 DOM 原生对象有什么区别？如何转化？
DOM对象是我们用传统的javaScript方法获得的对象，jQuery对象就是用jQuery的类库选择器获得的对象。
JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；DOM对象能使用javascript固有的方法，但是不能使用jQuery里面的方法。例如：
$(' #box ').html();//jQuery对象的方法与下面的DOM对象方法等同
document.getElementById('box').innerHTML;
jQuery对象和DOM对象的相互转换
$('#box')[0];//jQuery对象转换成DOM对象
var box = document.getElementById('box');//dom对象转换为jQuery对象
var $box = $(box);
jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
绑定事件$('#box').on('click',function(){})
$(selector).bind(event,data,function,map)
bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
$(selector).unbind(event,function,eventObj)
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
$(selector).delegate(childSelector,event,data,function)
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
$(selector).live(event,data,function)
live() 方法为被选元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数.
$(selector).on(event,childSelector,data,function,map)
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。map规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
$(selector).off(event,selector,function(eventObj),map)
off() 方法通常用于移除通过 on()方法添加的事件处理程序。
推荐on()和off()
使用on事件代理的写法：
$('ul').on('click','li',function(){代理的绑定事件})
jQuery 如何展示/隐藏元素？
使用show()和hide()方法
$('#box').show();
$('#box').hide();
$('#box').toggle();//切换隐藏或显示
使用fadeIn()和fadeOut()淡入淡出
$('#box').fadeIn();
$('#box').fadeOut();
$('#box').fadeToggle();//切换隐藏或显示
使用slideUp()和slideDown()滑入滑出
$('#box').slideUp();
$('#box').slideDown();
$('#box').slideToggle();//切换隐藏或显示
jQuery 动画如何使用？
animate(properties , duration , easing ,callback)自定义动画
必须参数 properties 参数定义形成动画的 CSS 属性。
可选的 duration 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 easing 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。"swing" - 在开头/结尾移动慢，在中间移动快。"linear" - 匀速移动;
可选的 callback 参数是动画完成后所执行的函数名称。
PS:注意properties 驼峰命名。
如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
$('#box').html('xxx');
$('#box').html();
$('#box').text('xxx');
$('#box').text();
如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
$('input').val('xxx');
$('input').val();
$('div').attr(attrName,attrValue);
$('div').attr(attrName);
网友评论