jQuery

题目1： jQuery 能做什么？

1.方便快捷获取DOM元素
2.动态修改页面样式
3.动态改变DOM内容
4.响应用户的交互操作
5.为页面添加动态效果
6.统一Ajax操作
7.简化常见的JavaScript任务
http://blog.csdn.net/jiary5201314/article/details/38311809

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

1. jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法
2. jQuery选择器得到的jQuery对象和DOM 原生对象是两种不同的对象类型，两者不等价；

jQuery对象转换成DOM对象：

• [index]
  jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
  如：var $v =$("#v") ; //jQuery对象
  var v=$v[0]; //DOM对象
• .get(index);
  jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
  如：var $v=$("#v"); //jQuery对象
  var v=$v.get(0); //DOM对象

DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。

http://www.jquerycn.cn/a_4561

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

• bind(type,[data],fn)
  为每个匹配元素的特定事件绑定事件处理函数。
  type,[data],function(eventObject)String,Object,Function
  type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
  data:作为event.data属性值传递给事件对象的额外数据对象
  fn:绑定到每个匹配元素的事件上面的处理函数
  false: 将第三个参数设置为false会使默认的动作失效。

• live(type, [data], fn)
  jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。 这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
  type:一个或多个事件类型，由空格分隔多个事件。
  fn:要从每个匹配元素的事件中反绑定的事件处理函数
  data:传递给事件处理函数的附加参数
  false:设置为false会使默认的动作失效。
  $('.clickme').live('click', function() {
  alert("Live handler called.");
  });

• delegate(selector,[type],[data],fn)
  指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
  selector:选择器字符串，用于过滤器触发事件的元素。
  type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
  fn:当事件发生时运行的函数
  data:传递到函数的额外数据
  $("div").delegate("button","click",function(){
  $("p").slideToggle();
  });

• on(events,[selector],[data],fn)
  在选择元素上绑定一个或多个事件的事件处理函数。
  events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
  selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
  data:当一个事件被触发时要传递event.data给事件处理函数。
  fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
  $("p").on("click", function(){
  alert( $(this).text() );
  });

• 取消绑定事件：unbind() die() undelegate() off()

• off(events,[selector],[fn])
  off() 方法移除用.on()绑定的事件处理程序。
  如：
  $("p").off() //Remove all event handlers
  $("body").off("click", "p", foo) //Remove just one previously bound handler

由于在新版本中bind/unbind/delegete/undelegete/live/die 都已经弃用，推荐使用on/off

使用on绑定事件使用事件代理

//让.box>ul中的所有li绑定事件
$('.box>ul').on('click','li',function(){
  var $this=$(this);
  var str=$this.text();
  $('.wrap').text(str);
})

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

隐藏元素
$('#btn1').on('click',function(){
      $('.box').hide(1000)  
})
展示元素
$('#btn2').on('click',function(){
  $('.box').show(1000)
})
切换元素的可见状态
$('#btn3').on('click',function(){
  $('.box').toggle(1000);
});

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

简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法
.animate( properties, options )
properties：一个CSS属性和值的对象,动画将根据这组对象移动。
options是一组包含动画选项的值的集合。
常用的选项:

• duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
• easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
• step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
• complete：在动画完成时执行的函数

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('
Animation complete.
');
    }
  });
});

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

//html内容
$('').html() // 获取
$('').html(value) // 设置
//内部文本
$('').text();
$('').text(value);

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

.val() //获取内容
.val(str) //设置内容
.attr(attributeName) //获取元素指定属性的值
.attr(attributeName, value) // 设置指定属性的值

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

代码8

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

代码9

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

代码10

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

代码11