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

题目1： jQuery 能做什么？

封装部分JavaScript代码，API友好。

• 方便快捷获取DOM元素
• 动态修改页面样式
• 动态改变DOM内容
• 事件处理
• 动画
• ajax
• jsonp

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

DOM原生对象：w3c标准用于操作文档的API.
jQuery对象：包装DOM对象产生的对象。
区别：DOM原生对象使用DOM原生对象的方法，jQuery对象使用jQuery对象的方法。
转化：
相互转换：

• jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)
• 1、jQuery对象是一个数据对象，通过[index]的方法
  　　如：var $v = $("#v") ; //jQuery对象
  　　var v = $v[0]; //DOM对象
  　　alert(v.checked) //检测这个checkbox是否被选中
• 2、jQuery本身提供，通过.get(index)方法
  　　如：var $v = $("#v"); //jQuery对象
  　　var v = $v.get(0); //DOM对象
  　　alert(v.checked) //检测这个checkbox是否被选中

• DOM对象转成jQuery对象:

• 对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
  　　如：var v=document.getElementById("v"); //DOM对象
  　　var $v=$(v); //jQuery对象
  注：jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱用会影响代码执行。

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

• 绑定事件:jQuery封装了很好的API，可以方便的进行事件处理
  在1.7之前的版本中jQuery处理事件有多个方法，作用各不相同，后来统一的使用on/off方法.

• bind:.$(selector).bind(event,data,function)是最直接的绑定方法 ，会绑定事件类型和处理函数到DOM element上, 这个方法是存在最久的，而且也很好的解决了浏览器在事件处理中的兼容问题。
  优点：
  • 这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案
    非常方便简单的绑定事件到元素上
  • .click(), .hover()...这些非常方便的事件绑定，都是bind的一种简化处理方式
  • 对于利用ID选出来的元素是非常好的，不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式
    缺点：
  • 它会绑定事件到所有的选出来的元素上
• 它不会绑定到在它执行完后动态添加的那些元素上
• 当元素很多时，会出现效率问题
• 当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题

• unbind:解绑事件方法 ，和bind()事件绑定对应
• delegate:$(selector).delegate(childSelector,event,data,function)方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数, 由于事件会冒泡，它用来处理指定的子元素上的事件。
  使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
  它的使用方式比bind稍显复杂，但它的功能非常强大：

• 自动绑定动态添加的元素。因为事件处理函数绑定在#root上，新加的子元素事件也会冒泡到#root。
• 性能好于.bind()。只绑定一个事件处理函数，绑定速度相当快。
• live:$(selector).live(event,data,function)方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
  通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。该方法已经在Jquery 1.7不推荐使用
• on:.on( events [, selector ] [, data ], handler )方法将事件处理程序附加到jQuery对象中当前选定的元素集。 从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的所有功能.
• off:.off( events [, selector ] [, handler ] )方法删除.on（）附加的事件处理程序。
• 由于在新版本中bind/unbind/delegete/undelegete/live/die 都已经弃用，推荐使用**on/off **

** 使用on绑定事件,使用事件代理的写法**

$(selector ).on( events [, selector ] [, data ], handler )

events
一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null
或者忽略了该选择器，那么被选中的元素总是能触发事件。

data
当一个事件被触发时，要传递给事件处理函数的event.data
。

handler(eventObject)
类型: Function()
事件被触发时，执行的函数。若该函数只是要执行return false
的话，那么该参数位置可以直接简写成 false。

//使用on绑定事件
<div></div>
eg:$("div").on("click",{name:"andy"},function(e){
  console.log(e.data.name)
})
//使用事件代理
eg:
//为父元素div下的每个a绑定点击事件，即使这个a是新生元素。
<div><a class="name">123</a></div>
$("div").on("click",".name",function(){
  console.log($(this).text())
})

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

1.展示：$(selector).show() ;
2.隐藏：$(selector).show() ;
3.展示/隐藏切换：$(selector).toggle();

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

$(selector).animate(styles,speed,easing,callback)
styles
必需。规定产生动画效果的 CSS 样式和值。
speed
可选。规定动画的速度。默认是 "normal"。
easing
可选。规定在不同的动画点中设置动画速度的 easing 函数。
callback
可选。animate 函数执行完之后，要执行的函数

//eg:
$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

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

• 设置和获取元素内部 HTML 内容:
  $(selector).html() //.html():括号内没有内容为获取，有内容为赋值

• 设置和获取元素内部文本：
  $(selector).text() //.text():括号内没有内容为获取，有内容为赋值

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

• 设置和获取表单用户输入或者选择的内容
  $(selector).val() //.html():括号内没有内容为获取，有内容为赋值

• 如何设置和获取元素属性：
  $(selector).attr(attributeName) //获取元素属性；
$(selector).attr({attributeName:属性赋值}) //设置元素属性；

题目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代码实现