进阶14-jQuery选择器_Dom操作_样式_事件处理_动画

题目1： jQuery 能做什么？

jQuery是一个JS的函数库，他可以让很多操作变得容易。例如DOM操作，创建动画，事件处理，以及Ajax程序处理。其链式语法也非常的方便。全球最受欢迎的10000个网站中，有65%使用了jQuery。

其对各种浏览器的兼容也很好，API友好，功能强大与时俱进。

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

jQuery对象和DOM原生对象是不同的对象，两者性质不同也不能等价。前者是一个伪数组，而后者可以是一个个体也可以是一个集合。

jQuery对象后加选中数组的第一个元素即可转化为DOM原生对象，如：
$("#id")[0]

原生DOM对象转化为DOM对象时需要用$进行包裹，如：
$(document.getElementById("#id"))

题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

jQuery的事件绑定主要是用on，解绑用off。也是推荐使用的方法。以下是普通事件绑定和解绑：

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

$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});

bind和unbind曾经是事件绑定和解绑的方法，但是从jQuery3.0起已经被废弃。
delegate和undelegate曾经是事件绑定和解绑的方法，但是从jQuery3.0起已经被废弃。
live也曾经是绑定附加事件的方法，但从jQuery1.7版本既已被废弃。

题目4：jQuery 如何展示/隐藏元素？

可以使用以下动画的方法展示和隐藏元素。
show()，hide()，fadeIn()，fadeOut()，toggle()，fadeToggle()

题目5： jQuery 动画如何使用？

当简单动画不能满足需求的时候，jquery提供了自定义动画行为的方法
.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个CSS属性和值的对象,动画将根据这组对象移动。内容如同写css一样，多个属性之间用逗号隔开即可。duration为持续时间，单位为毫秒。complete为动画结束时所采用的函数。

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

$("#id").html()//获取元素内部的html内容
$("#id").html("<li>good</li>")//设置html内容

$("#id").text()//获取元素内部的文本内容
$("#id").text("<li>good</li>")//设置文本内容

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

//以下语句分别是获取和设置表单用户输入或者选择的内容
$('input').val()

$('input').val('newValue');

//以下语句分别是获取和设置元素属性的方法。
var title = $( "em" ).attr( "title" );
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

题目8： 使用 jQuery实现如下效果

代码： http://js.jirengu.com/hohebokede/24/edit?html ,css,js,output
预览：http://js.jirengu.com/hohebokede/24

题目9：. 使用 jQuery 实现如下效果

代码： http://js.jirengu.com/vokahanocu/48/edit?html ,css,js,output
预览： http://js.jirengu.com/vokahanocu/42

题目10：实现如下效果

Ps:当点击按钮时使用如下数据

var products = [
	{
		img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
		name: '珂兰 黄金手 猴哥款',
		price: '￥405.00'
	},{
		img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
		name: '珂兰 黄金转运珠 猴哥款',
		price: '￥100.00'
	},{
		img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
		name: '珂兰 黄金手链 3D猴哥款',
		price: '￥45.00'
	}
];

代码： http://js.jirengu.com/coticodota/15/edit?html ,js
预览：http://js.jirengu.com/coticodota

题目11： 模仿视频6，完成 左右切换的 Tab 效果

代码： http://js.jirengu.com/wipimuvomo/28/edit?css ,js,output
预览： http://js.jirengu.com/wipimuvomo#