1： jQuery 能做什么？
1 方便快捷的获取页面元素
找到所有应用了.box class样式的div中的所有p标签
$('.box').find('p')
找到所有的p标签
$('p')
返回一个类数组对象 [p,p,p]
2 动态修改页面元素样式
元素添加样式
$('p').addClass('样式class名')
元素删除样式
$('p').remveClass('样式名')
3 动态改变DOM内容
添加标签到html中
$('.box').append('<a href="more.html" >更多</a>')
4 响应用户的交互操作
jQuery提供了截获形形色色的页面事件（比如 用户点击某个新信息栏）
用户点击动作
$('#btn').on('click',function(){
consoel.log(‘hrmml’)
})
上面可以简写为
$('#btn').click(function(){
})
5 为页面添加动画效果
元素：隐藏、 显示
$('.box').hide(1000) //一秒时间去隐藏
$('.box').show(4000) //4秒去展示出来
$('.box').toggle() //切换
$('.BOX').fadeIn() //渐变，通过淡入的方式显示元素
$('.BOX').fadeOut() //淡出方式隐藏元素
$('.BOX').fadeToggle() //切换，展示的隐藏，隐藏的展示
元素： 滑动
$('.box').slideDown() //向下滑动动画显示一个匹配元素
$('.box').slideUp() //向上滑动
$('#btn').on('click',function(){
$('.box').hide('slow'); //缓慢的隐藏匹配元素
})
6 简化了常见的javascript任务
除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript结构（比如 迭代和数组操作）
$.each(obj, function(key, value) {
total += value;
});
//遍历输出每个li元素的文本
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
7 统一ajax操作
jQuery统一多种浏览器的ajax操作
function (data,type){
//对ajax返回的原始数据进行预处理
return data //返回处理后的数据
}
2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
区别：
(1) jQuery对象只能用jQuery对象方法
比如： $('p').html('123')
js对象只能用js原生对象方法
比如： document.getElement('p').innerHTML='123'
(2) 用jQuery获取元素时时 返回类数组 [p,p,p]
js 获取元素 返回html标签<p>123</p>
转换
(1) js对象——jQuery对象
document.getElement('p')
转成jQuery对象
$(document.getElement('p'))
(2) jquery对象——js对象
$(document.getElement('p'))
转为js对象
$(document.getElement('p'))[0]
3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
bind() 绑定事件
.bind( eventType [, eventData ], handler(eventObject) )
eventType
类型: String
一个包含一个或多个DOM事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。
eventData
类型: Object
一个对象，它包含的数据键值对映射将被传递给事件处理程序。
handler(eventObject)
类型: Function()
每当事件触发时执行的函数。
unbind() 删除附加在元素上的事件
delegate() 为所有匹配选择器的元素绑定事件
live() 匹配目标选择器的元素附加一个事件
.on() 为选定元素绑定事件
.on( events [, selector ] [, data ], handler(eventObject) )
参数1：
events 一个或多个空格分割色事件类型和可选命名空间
比如： click.hello
参数2
selector，可选
添加selector 比如'li', 表示选中元素中的后代li标签的元素
参数3
data ，可选
比如： {name:'tengg'}
当一个事件触发时，要传递给事件处理函数的event.data
参数4
handler(eventObject)， 可选
事件处理函数
事件触发执行该函数
.off() 解除绑定事件
.off( events [, selector ] [, handler(eventObject) ] )
$('.box').off(‘click’,'li',function(){
})
现在一般都使用 on off 绑定和解除事件，推荐使用
使用on绑定事件使用事件代理的写法
<div class="box">
<ul class='news'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<input id="ipt" type="text">
<button id="btn">添加</button>
<div class="wrap"></div>
// 1 输入框输入内容， 点击添加按钮， 内容添加到ul的最后面
//2 点击列表中的任意一个 都显示在下面的展示区
$('#btn').on('click',function(){
var value= $('#ipt').val();
console.log(value)
//$('news li:last').after($('#ipt').val());
$('.news').append('<li>'+value+'</li>')
})
//事件代理： ul容器绑定事件 ，li 为每个this，选定的元素
$('.box>ul').on('click','li',function(){
var $this=$(this)
var str=$this.text()
$('.wrap').text(str)
})
4：jQuery 如何展示/隐藏元素？
<body>
<div class="box">
</div>
<button id='btn1'>隐藏</button>
<button id='btn2'>显示</button>
</body>
//点击 隐藏
$('#btn1').on('click',function(){
$('.box').hide(3000)
})
//显示
$('#btn2').on('click',function(){
$('.box').show(1000)
})
5： jQuery 动画如何使用？
.animate( properties [, duration ] [, easing ] [, complete ] )返回: jQuery
描述: 根据一组 CSS 属性，执行自定义动画。
animate({left:'80'，top},5000，)
properties：一个CSS属性和值的对象,动画将根据这组对象移动。
duration: 动画持续多久，1000,2000...
easing: 过渡使用哪种缓动函数，
jQuery自身提供 linear swing 2种
conplete: 动画完成时执行的函数
6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
.html() 用于获取\修改元素的内部HTML内容
当没有参数传递时， 返回元素的innerHTML
.html('hello') 当有一个string参数时，修改为元素innerHTML为参数值
.text() 获取元素内部文本
.text('womwne ') 设置元素的内部文本--innerText
7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
.val() 获取输入框中的value内容
.val('1232323') 将value值修改设置为 1232323
.attr()
一个参数 ， 获取这个元素属性的属性值
两个参数，设置这个属性和他的属性值
8： 使用 jQuery实现如下效果
demo216
9：使用 jQuery 实现如下效果
8-2.gif840x607 615 KB
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' }];
题目11 模仿视频6，完成 左右切换的 Tab 效果
