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

题目1：jQuery 能做什么？

jQuery是什么：
官网解释：jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
简而言之，jQuery是一个JS库，可以更简单，快速的操控页面元素。
功能：

• 选择网页元素
• 改变结果集
• 元素的操作：取值和赋值
• 元素的操作：移动
• 元素的操作：复制、删除和创建
• 工具方法
• 事件操作
• 特殊效果
• AJAX

DOM能干的，它干的更理解易于简单，DOM不能干的，它也能干。

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

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。DOM对象可以使用原生JS进行操作。
jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，其可以使用jQuery里的方法。但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法，乱使用会报错。
jQuery对象转DOM对象：
jQuery对象是一个数据对象，可以通过[index]，get（index）的方法，来得到相应的DOM对象。

$('div')[index];
$('div').get(index);

注意：$（‘div’）.eq（index）返回的还是jQuery对象$（‘div’）.eq（index）[index]是DOM对象

DOM对象转jquery对象：
DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。

var btn = document.querySelector('button');//DOM对象
$btn =  $(btn)；//jQuery对象

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

jQuery提供了四种方法进行时间监听，on，bind，delegate，one（live已经弃用），相应的解除监听off，unbind，undelegate。

$('a').bind('click', handle);//给$('a')的‘click’事件绑定执行函数
$('a').unbind(['click']);//给$('a')解除所有绑定事件【‘click’事件】

jQuery 扫描文档找到所有 $(‘a’) 元素，然后给每一个找到的元素的 click 事件绑定处理函数。

$('a').live('click',handle });// $('a')绑定‘click’事件，执行函数
$('a').die('click',handle });// $('a')解除及‘click’事件执行函数

jQuery绑定处理函数到 $(document) 元素，并把 ‘click’ 和 ‘a’ 作为函数的参数。有事件冒泡到document节点的时候，检查这个事件是不是 click 事件，target element能不能匹配 ‘a’ css选择器，如果两个条件都是true，处理函数执行。

$('a', $('#container')[0]).live(...);

live方法也可以绑定到指定的元素（或者说“上下文(context)”）而不用绑定到document.

$('#container').delegate('a', 'click', handle);//$('#container')绑定‘click’事件，执行函数
$('#container').undelegate('a', 'click', handle);//$('#container')解除‘click’事件和执行函数

jQuery扫描文档找到 $(‘#container’)，绑定处理函数到他的 click 事件，’a’ css选择器作为函数的参数。当有事件冒泡到 $(‘#container’)，检查事件是不是 click，并检查target element是不是匹配css选择器，如果两者都符合，执行函数。

one()该方法绑定的事件触发一次后自动删除

$('.class').on( events [,selector ] [,data ], handler);//$('.class')绑定事件
$('.class').off（）$('.class')解除事件

on实现事件委托很简单， '.class'为父元素，on后面括号里的selector 参数为子元素，当‘.class’的事件触发时，判断事件来源是否子元素selector，若是，则执行处理函数，从而实现事件委托。
on是最基本的事件绑定方法，bind，delegate，live都是调用on来绑定事件，因此，推荐使用on来绑定事件。

//delegate源码
delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
}
//live源码
live: function( types, data, fn ) {
  jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
//bind源码
bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
}

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

首先，html中要隐藏元素，无外乎几种方法。

display：none;//展示形式为none，不占据文档空间
visibility：hidde；//可见性为hidden，看不见，占据文档空间
opacity：0；//不透明度为0，即为透明，占据文档空间
元素位置在窗口之外

jQuery有hide（），fadeOut（），slideDown（或slideUp（））方法都可以达到隐藏元素，对应的原理就是元素的display属性，opacity属性和文档位置。
推荐使用hide（）方法，简单，无副作用。

$(selector).hide([duration ] [,easing ] [,complete ])；//隐藏元素
$(selector).show( [duration ] [, easing ] [, complete ] );//展示元素

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

jQuery有几个简单的动画方法

$(selector).hide([duration ] [,easing ] [,complete ])；//隐藏元素
$(selector).show( [duration ] [, easing ] [, complete ] );//展示元素
$(selector).fadeIn( [duration ] [, easing ] [, complete ] )；//淡入
$(selector).fadeOut( [duration ] [, easing ] [, complete ] )；//淡出
$(selector).slideDown( [duration ] [, easing ] [, complete ] )；//下滑
$(selector).slideUp( [duration ] [, easing ] [, complete ] )；//上滑

然而，如此完美的jQuery还有大招---自定义动画

$(selector).animate( properties [, duration ] [, easing ] [, complete ] )；

animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

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

$(selector).html([string]);//设置或获取元素HTML内容
$(selector).text([string]);//设置或获取元素text内容

html（）和text（）都是读取两用的方法，没有参数时返回元素现有HTML或text内容，有参数时则将参数传递为HTML或text。

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

$(selector).val();//设置或获取input的value值
$(selector).attr();//设置或获取元素属性
$(selector).prop();//设置或获取元素的property
$(selector).css();//设置或获取元素的property

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

demo
效果

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

[

效果
demo

题目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'
}];

效果
demo

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

Screen Record_2017-08-12-02-08-39.mp4_1502474540.gif

效果
demo