1、jQuery 能做什么？
- 方便快捷获取DOM元素
原生js用document.getElementById等方法来获取DOM元素，方法名称长，不方便且功能有限。jQuery定义了一套选择器规则，几乎支持所有类型的CSS3选择器，方便使用：
|选择器|含义|
|::|::|
|$("*")|匹配所有元素|
|$("#id")|id选择器|
|$(".class")|类选择器|
|$("element")|元素选择器|
|$("E,F")|多元素选择器，同时匹配元素E或元素F|
|$("E F")|后代选择器，匹配E元素所有的后代元素F|
|$("E>F")|子元素选择器，匹配E元素的所有直接子元素|
|$("E+F")|直接相邻选择器，匹配E元素之后的相邻的同级元素F|
|$("E~F")|普通相邻选择器，匹配E元素之后的同级元素F（无论直接相邻与否）|
|$(".class1.class2")|匹配类名中既包含class1又包含class2的元素|
|$("E:first")|所有E中的第一个|
|$("E:last")|所有E中的最后一个|
|$("E[attr]")|含有属性attr的E|
|$("E[attr=value]")|属性attr=value的E|
|$("E[attr!=value]")|属性attr！=value的E|
|$("E:nth-child(n)")|E的第n个子节点|
|$("E:nth-child(3n+1)")|E的index符合3n+1表达式的子节点|
|$("E:first-child")|所有E的第一个子节点|
|$("E:last-child")|所有E的最后一个子节点|
|$(":check")|被选中的checkbox或radio|
|$("option:select")|被选中的option|
|$("E:even")|所有E中index是偶数|
|$("E:old")|所有E中index是奇数|
|$("E:eq(n)")|所有E中index为n的元素|
|$("E:gt(n)")|所有E中index大于n的元素|
|$("E:lt(n)")|所有E中index小于n的元素|
|$("E:has(a)")|子元素中有F的元素，$('div:has(a)'):包含a标签的div|
|$("E:parent")|父元素是E的元素，$('td: parent'):父元素是td的元素|
- 修改页面样式
$("#id").addClass("class1 class2").removeClass("class3 class4"); //为元素增加class1,class2样式后删除class3,class4样式
var str= $("#id").css("width"); //获取元素宽度，返回的类型为字符串：如"200px"
$("#id").css("width","200px"); //设置元素宽度，绑定到元素的style属性中
$("#id").css({"width":"200px","height":"300px"}); //给元素设置多个样式，绑定到元素的style属性中
$("#id").hasClass("class1"); //检查元素中是否包含class1，若有，返回true
$("#id").toggleClass("class1") //切换元素中的class1的元素，若有class1，则删除，若没有，则增加
- 动态改变DOM内容
1、append():
//1.
$(".wrap").append('done');
//2.
helloI would like to say:
$(".wrap p").append($("span")); //移动span的元素和内容，等价于I would like to say:hello
//3.
I would like to say:
$(".wrap p").append(document.createTextNode("hello")); //等价于I would like to say:hello
2、appendTo():
//1.
$('done').appendTo($(".wrap"));
//2.
helloI would like to say:
$("span").appendTo($(".wrap p")); //移动span的元素和内容，等价于I would like to say:hello
3、prepend()、prependTo()和append()、appendTo()用法类似，只是添加元素的位置不同
4、
$( ".inner" ).before( "Test
" ); //在$(".inner")前面插入，和$(".inner")属于同级
$( "h2" ).insertBefore( $( ".container" ) ); //把$("h2")移动到$(".container")前面，和$(".container")属于同级
5、
$( ".inner" ).after( "Test
" ); //在$(".inner")后面插入，和$(".inner")属于同级
$( "h2" ).insertAfter( $( ".container" ) ); //把$("h2")移动到$(".container")后面，和$(".container")属于同级
6 、
$(".inner").remove(); //删除元素及其子元素
7、
$('body').empty(); //清空被元素内的所有元素
8、
$(".wrap").html(); //获取wrap内所有的元素，返回innerHtml
$(".wrap").html("hello"); //把wrap里面的元素换成hello
9、
$(".wrap").test(); //获取元素内的innerText
$(".wrap").test("hello"); //修改元素内的innerText
- 响应用户的交互操作
jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。
// 普通事件绑定，最简单的用法
$('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);
});
// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
console.log(e.data);
});
//
//off()的使用方法：
//定义函数
function aClick() {
$("div").show().fadeOut("slow");
}
//添加事件
$("#bind").click(function () {
$("body").on("click", "#theone", aClick)
.find("#theone").text("Can Click!");
});
//删除事件
$("#unbind").click(function () {
$("body").off("click", "#theone", aClick)
.find("#theone").text("Does nothing...");
});
//
//trigger()的使用方法：
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
- 统一Ajax操作
jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
- 简化常见的JavaScript任务
除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。
$.each(obj, function(key, value) {
total += value;
});
2、 jQuery 对象和 DOM 原生对象有什么区别？如何转化？
jQuery 对象是 DOM 对象被 jquery 包装后产生的对象，属于 jQuery 独有，可以使用 jQuery 的方法。
DOM 对象，就是原生的 DOM 对象。
jQuery 对象不等于DOM 对象，各自使用各自的方法。
document.getElementById(id) //dom对象
$(document.getElementById(id)) //jQuery对象
$('#id') //jQuery对象
$('#id') [0] //dom对象
3、jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
jQuery绑定事件：$("ul").on("click","li",function(){});
| 事件 | 作用 |
|---|---|
| .bind( eventType [, eventData ], handler ) | 为元素绑定事件，已被弃用。 |
| .unbind( eventType [, handler ] ) | 为元素解除事件，已被弃用。 |
| .delegate( selector, eventType, eventData, handler ) | 为元素绑定事件，且指定元素为特定根元素的子元素。以后有新的该元素出现，事件同样生效。已弃用。 |
| .live( events [, data ], handler ) | 为元素绑定事件，不仅仅是现在存在，也包括以后该元素新出现后。已经弃用。 |
| .on( events[, selector][, data ], handler(eventObject) ) | 为元素绑定事件，推荐使用 |
| .off( events, selector[, handler ] ) | 为元素解除事件，推荐使用 |
//用on绑定事件使用事件代理的写法
$('#list').on('click', 'li', function() {
//function code here.
});
4、jQuery 如何展示/隐藏元素？
//展示:
.show( [duration ] [, easing ] [, complete ] )
//隐藏:
.hide([duration ] [,easing ] [,complete ])
//duration：动画持续多久，5000（5秒）
//easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
//complete：在动画完成时执行的函数
5、 jQuery 动画如何使用？
.animate( properties [, duration ] [, easing ] [, complete ] )
//properties是一个CSS属性和值的对象,动画将根据这组对象移动。如:{"left":"100px","top":"10px"}
//duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
//easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
//complete：在动画完成时执行的函数
.stop( [clearQueue ] [, jumpToEnd ] )
//停止匹配元素当前正在运行的动画。
//如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。
//如果提供jumpToEnd参数，并且值为true时，当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。
6、如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
$('div').html() //获取
$('div').html(‘hhh’)//修改
$('div').text() //获取
$('div').text(‘hhh’)//修改
7、如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
$("input").val() //获取值
$("input").val(‘hhhh’) //修改
$("#input:checked").val()//获取表单选择内容
$("#input:checked").val(String)//设置表单选择内容
$('.target').attr(String)//获取元素属性
$('.target').attr('src',$img.attr('data-img'))//设置元素属性
8、 使用 jQuery实现如下效果
代码
9、使用 jQuery 实现如下效果
代码
10、实现如下效果
代码
11、 模仿视频6，完成 左右切换的 Tab 效果
代码
(mission 14)