题目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();
});
上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。
- 为页面添加动态效果jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。
$(function () {
$("#btnShow").click(function () {
$("#msubject").hide("slow");
});
});
- 统一Ajax操作
jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。
function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}
- 简化常见的JavaScript任务。 除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。
$.each(obj, function(key, value) {
total += value;
});
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
jQuery 对象是 DOM 对象被 jquery 包装后产生的对象，属于 jQuery 独有，可以使用 jQuery 的方法。
DOM 对象，就是原生的 DOM 对象。
jQuery 对象不等于DOM 对象，各自使用各自的方法。
var domObj = document.getElementById("btn");
var jQueryObj = $("#btn");
// domObj → jQueryObj
$(domObj);
// jQueryObj → domObj
jQueryObj[0]
jQueryObj.get(0)
// eq(0)返回的还是jQuery对象,而eq(0)[0]是DOM对象
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
绑定事件：
-
$("#btn").events([function(){}])
-
$("#btn").on(events[, selector][, data], handler(eventObject))
-
$(#btn).trigger(events)
-
bind：
.bind( eventType [, eventData ], handler )
为元素绑定事件，已被弃用。 -
unbind
.unbind( eventType [, handler ] )
取消元素的绑定事件，已被弃用。 -
delegate
.delegate( selector, eventType, eventData, handler )
为元素绑定事件，且指定元素为特定根元素的子元素。以后有新的该元素出现，事件同样生效。
已弃用。 -
live
.live( events [, data ], handler )
为元素绑定事件，不仅仅是现在存在，也包括以后该元素新出现后。
已经弃用。 -
on
.on( events[, selector][, data ], handler(eventObject) )
事件绑定函数，现在推荐的写法，可绑定一个或多个事件。 -
off
.off( events, selector[, handler ] )
取消元素的事件绑定，现在推荐的写法。
使用on绑定事件使用事件代理的写法
.on(events, selector[, data], handler)
events：事件类型
selector：触发事件的元素选择器（事件绑定元素的后代元素），这样就形成了事件代理。
data：事件处理函数需要接收的参数
handler：事件处理函数
题目4：jQuery 如何展示/隐藏元素？
$("#btn").show()
$("#btn").hide()
实际使用了 show hide 两个 jQuery 动画函数，但是没有传递参数，相当于立即 显示 / 隐藏
其它方法的思路：通过 jQuery 设置元素的 display 为 none 即隐藏。取消设置即可显示。
题目5： jQuery 动画如何使用？
.hide([duration ] [,easing ] [,complete ])
.show( [duration ] [, easing ] [, complete ] )
.toggle( [duration ] [, easing ] [, complete ] )
.fadeIn( [duration ] [, easing ] [, complete ] )
.fadeOut( [duration ] [, easing ] [, complete ] )
.fadeTo( duration, opacity [, easing ] [, complete ] )
.fadeToggle( [duration ] [, easing ] [, complete ] )
.slideDown( [duration ] [, easing ] [, complete ] )
.slideUp( [duration ] [, easing ] [, complete ] )
.slideToggle( [duration ] [, easing ] [, complete ] )
.animate( properties [, duration ] [, easing ] [, complete ] )
.animate( properties, options )
.stop( [clearQueue ] [, jumpToEnd ] )
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
$("#btn").html()
$("#btn").text()
//无参，获取内容；带参，设置内容。
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
$("#input").val()//获取表单输入内容
$("#input").val(String)//设置表单输入内容
$("#input:checked").val()//获取表单选择内容
$("#input:checked").val(String)//设置表单选择内容
$('.target').attr(String)//获取元素属性
$('.target').attr('src',$img.attr('data-img'))//设置元素属性
题目8： 使用 jQuery实现如下效果
http://js.jirengu.com/litumimani/1/edit
题目9： 使用 jQuery实现如下效果
http://js.jirengu.com/johowabari/1/edit
题目10： 使用 jQuery实现如下效果
http://js.jirengu.com/vayefeseme/1/edit
题目11： 使用 jQuery实现如下效果
http://js.jirengu.com/sujugobaho/1/edit
网友评论