题目1： jQuery 能做什么？
- 方便快捷获取DOM元素
如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码：
$('div.content').find('p'); - 动态修改页面样式
使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下：
$('ul > li:first').addClass('active'); - 动态改变DOM内容
使用jQuery我们可以很容易地对页面DOM进行修改，例如，为ID为"Container"的元素添加一个链接：
$('#container').append('<a href="more.html">more</a>'); - 响应用户的交互操作
jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。$('button.show-details').click(function() { $('div.details').show(); }); - 为页面添加动态效果
jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。$(function () { $("#btnShow").click(function () { $("#msubject").hide("slow"); }); });
上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。
- 统一Ajax操作
jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。function (data, type) { // 对Ajax返回的原始数据进行预处理 return data // 返回处理后的数据 } - 简化常见的JavaScript任务。
除了这些完全针对文档的特性之外，jQuery也改进了对基本的javascript数据结构（例如迭代和数组操作等）。$.each(obj, function(key, value) { total += value; });
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
DOM原生对象：w3c标准用于操作文档的API。
jQuery对象：通过jQuery包装DOM对象后产生的对象。
-
区别：
- jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
- jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
例如：
$("#id").html();
document.getElementById("id").innerHTML;
意思是指：获取ID为id的元素内的html代码。这两段代码结果相同，但中间的取值过程不同。
即：$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
-
相互转换：
jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)- jQuery对象是一个数据对象，通过
[index]的方法
如：
var $v = $("#v") ; //jQuery对象
var v = $v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中 - jQuery本身提供，通过
.get(index)方法
如：
var $v = $("#v"); //jQuery对象
var v = $v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
如：
var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
- jQuery对象是一个数据对象，通过
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- jQuery绑定事件用bind、或delegate、或live、或on
-
bind()为一个元素绑定一个事件处理程序，示例如下：$(‘button’).bind(‘click’,function(){console.log(this)});$(‘p’).bind(‘mouseenter mouseleave’,function({$(this).toggleClass(‘change’)})；
-
unbind()从元素上删除一个以前附加事件处理程序，示例如下：-
$('p').unbind('mouseenter');
在最简单的情况下，不带参数的.unbind() 将移除元素上所有绑定的处理程序
-
-
delegate()为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。 -
live()附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。 -
on()在选定的元素上绑定一个或多个事件处理函数。$('button').on('click',function(){ $('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>'); console.log($('p').length); }); -
off()移除用.on()绑定的事件处理程序
绑定事件和解绑事件推荐使用on()和off()
- 使用on绑定事件使用事件代理
//让.ct>ul中的所有li绑定事件 $('.ct>ul').on('click','li',function(){ var $this=$(this); var str=$this.text(); $('.wrap').text(str); })
题目4：jQuery 如何展示/隐藏元素？
- jQuery展示元素：
2.通过淡入的方式显示匹配元素$('.btn').on('click',function(){ $('.show').show(3000,'linear',function(){ alert('welcome'); }); });
3.用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式$('.btn').on('click',function(){ $('.show').fadeIn(3000); });$(.btn).on('click',funtion(){ $('.show').sildeDown(3000); }) - jQuery隐藏元素
1.$('.show').hide(1000);
2.通过淡出的方式隐藏匹配元素
3.用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。$('.btn').on('click',funtion(){ $(.show).fadeOut(3000,'slow'); });$('.btn').on('click',funtion(){ $(.show).fadeOut(3000,'slow'); });
题目5： jQuery 动画如何使用？
.animate( properties [, duration ] [, easing ] [, complete ] )
用法：jquery对象.animate(执行动作(一般都是css样式),回调函数(可选));
例子：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#ct {
border: 1px solid black;
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
</head>
<body>
<div id="ct">animate</div>
<button type="button">动画</button>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
$('button').on('click', function a() {
$('#ct').animate({
left: '300px',
}, 3000);
$('#ct').animate({
top: '300px',
left: '0'
}, 'slow');
$('#ct').animate({
left: '300'
}, 'slow');
$('#ct').animate({
left: '0',
top: '0'
}, 'slow');
});
</script>
</body>
</html>
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 获取元素内部HTML内容
console.log($('.html').html()); - 设置元素内部内容
$('.html').html('<p>设置内部HTML内容</p>'); - 获取元素内部文本
console.log($('.text').text()); - 设置元素内部文本
$(.text).text('设置元素内部文本');
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- 获取和设置表单用户输入或者选择的内容
$('input').val();
$('input').val('newValue');
当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值 - 获取和设置元素属性
//获取元素特定属性的值 var title = $( "em" ).attr( "title" ); //为元素属性赋值 $( ".greatphoto" ).attr( "alt", "Beijing Brush Seller" ); $( ".greatphoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" }); $( ".greatphoto" ).attr( "title", function( i, val ) { return val + " - photo by Kelly Clark"; });
