jquery

####**题目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#