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

题目1： jQuery 能做什么？

相较于JavaScript Jquery拥有大量简洁，兼容性能良好的api，所以可以快速的操作dom元素。

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

jQuery对象就是通过jQuery包装DOM对象后产生的对象(集合对象)。jQuery对象是jQuery独有的，可以使用jQuery里的方法。
因此jQuery对象和DOM对象是不一样的，不能调用对方定义的方法。
注意！dom对象须使用dom方法，jq对象需使用jq方法

$(‘#test’).innerHTML会报错，document.getElementById(‘#test’)[0].html()也会报错。

转化：

普通的DOM对象可以用$()包装起来转换为jQuery对象：$(document.getElementById(‘#test’)).html();//正常

jQuery对象jquery对象本身是一个集合，要转换为DOM对象，可通过数组索引取出：
第一种方式：$(‘#test’)[0]
第二种方式：$(‘#test’).get(0)
注： eq(0)返回的还是jQuery对象,eq(0)[0]是DOM对象。

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

从jQuery 1.7开始，事件绑定只推荐on()、off()这两个方法，
jQuery中，bind、delegate、live、on都能够绑定事件。

1. bind ：在jQuery1.7以前的版本中使用，用于为元素绑定事件，语法为：
   $(selector).bind(event,data,function)
   其中event可以为单个或多个事件；data为需要传递的参数（可选项）；function为事件处理函数。
2. unbind ：在jQuery1.7以下版本使用，用于删除元素上绑定的事件，语法为：
   $(selector).unbind(event,function)
   其中event可以为单个或多个事件；function为可选项，规定从元素的指定事件取消绑定的函数名。
3. delegate ：在jQuery1.9以下版本使用，为指定的元素（被选元素的子元素）绑定事件，语法为：
   $(selector).delegate(childSelector,event,data,function)
   其中childSelector为需要添加事件处理程序的元素，一般为selector的子元素；event可以是单个或多个事件；data是可选项，需要传递的参数；function为事件处理函数。
4. live ：在jQuery1.7以下版本使用，live()方法实际上是将事件处理程序绑定在document上，通过冒泡来绑定事件和匹配的元素。一旦事件冒泡到document的时候，jQuery判断选择器和事件处理程序是否有匹配到的，如果有的话，则调用对应的事件处理程序。语法同bind()。
5. on ：为指定的元素绑定事件。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。语法为：
   $(selector).on(event,childselector,data,function)
   其中event可以是单个或多个事件；childSelector是可选项，需要添加事件处理程序的元素，一般为selector的子元素；data是可选项，需要传递的参数；function为事件处理函数。
6. off ：为指定元素删除绑定事件的一个处理函数，语法为：$(selector).off(event,childselector,function)

推荐使用：on和off方法进行事件的绑定和解绑，因为其他方法在jQuery的更新中已经被淘汰，on方法融合了这些方法的优点。
on方法的事件代理：

//把div下的span上的事件绑定在div上
$('div').on('click', 'span', function(e){
    console.log(this);
})

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

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，语法为：

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

可选的 speed 参数规定隐藏/显示的速度，可以取"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
例如：

$('.hide').on('click',function(){
  $('.box').hide(2000);
});  //点击按钮后以2000毫秒的速度隐藏class为box的元素。

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

可以使用animate() 方法创建自定义动画，语法为：
$(selector).animate({params},speed,callback)
其中：params 是必须项，参数定义形成动画的 CSS 属性。
speed 参数是可选项，规定效果的时长，可取"slow"、"fast" 或毫秒。
callback 参数是可选项，动画完成后所执行的函数名称。
例如:

$('button').on('click',function(){
    $('.box').animate({
    marginTop:'500px',
    'border-radius':'50px'
    },1000,function(){
    console.log('welcome to china');
    });
});

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

$('.div1').html('<p>设置的html内容</p>');//设置内容
$('.div1').html();//获取内容
//text()方法
$('.div1').text('设置的内容');//设置内容
$('.div1').text();//获取内容

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

//获取内容使用val();
$('.text1').val(); // 获得id为text1的元素的内容
//设置和获取元素属性
$('.text1').attr('attributeName', 'value');//设置值
$('.text1').attr('attributeName');//获取值

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

[图片上传失败...(image-eb191-1514011938030)]
demo
14-8

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

[图片上传失败...(image-c7f46b-1514011938031)]
14-9

题目10：实现如下效果

[图片上传失败...(image-282ef4-1514011938031)]
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'
    }
];

14-10

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

14-11

题目12：说说库和框架的区别？

your code calls a library but a framework calls your code.
当你在调用library的时候， 你按照自己的意愿来control他（比如jQuery）。
而，对于framework， 那么control就是倒转过来了，是他在调用你（比如bootstrap,vue)。
比较