jQuery选择器_DOM操作_样式_事件处理

1. 说说库和框架的区别？

库的英语为 Library ( 简写 Lib )，框架的英语为 Framework。

• 库是将代码集合成的一个产品，供程序员调用。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
• 框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。
  开发者在使用框架的时候，必须使用这个框架的全部代码。

2. jQuery 能做什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

3. jQuery 对象和 DOM 原生对象有什么区别？如何转化？

1.jQuery选择器得到的jQuery对象和标准的 JavaScript中的document.getElementById()取得的DOM对象是两种不同的对象类型，两者不等价；
　2.jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
例如：

$("#id").html();
document.getElementById("id").innerHTML;

意思是指：获取ID为id的元素内的html代码。这两段代码结果相同，但中间的取值过程不同。
　　即：$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

相互转换：

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

• DOM对象转成jQuery对象:
  　　对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
  　　如：var v=document.getElementById("v"); //DOM对象
  　　var $v=$(v); //jQuery对象

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

• bin()为一个元素绑定一个或多个事件。

• unbind()解除该元素绑定的事件。

• delegate()为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；适用于当前或未来的元素（比如由脚本创建的新元素）。

• live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

• on()在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能。

  语法：.on( events [,selector ] [,data ], handler(eventObject) )
  //事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
  $('div').on('click', 'span', function(){
  console.log(this);
  });
  

• off()用来移除on绑定的事件处理函数。
  jQuery中推荐使用on()/off()方法

5. jQuery 如何展示/隐藏元素？

• .hide([duration ] [,easing ] [,complete ])
  用于隐藏元素，没有参数的时候等同于直接设置display属性
  .css('display', 'none')
  duration：动画持续多久
  easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
  complete：在动画完成时执行的函数
• .show( [duration ] [, easing ] [, complete ] )
  用于显示元素，用法和hide类似
• .toggle( [duration ] [, easing ] [, complete ] )
  用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

6. jQuery 动画如何使用？

animate()方法用于创建自定义动画。

• .animate( properties [, duration ] [, easing ] [, complete ] )
  properties是一个CSS属性和值的对象,动画将根据这组对象移动。

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

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

  $('li').animate({ opacity: .5, height: '50%' }, { step: function(now, fx) {
  var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
  $('body').append('
  ' + data + '
  ');
  } });
  

7. 如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

• html([string])
  这是一个读写两用的方法，用于获取/修改元素的内部 HTML 内容。
  当没有传递参数的时候，返回元素的innerHTML。
  当传递了一个string参数的时候，修改元素的innerHTML为参数值。
  看个例子:
  $('div').html()
  $('div').html('123')
• text()
  操作的是DOM的innerText值，可以设置和获取元素内部文本，和html方法类似。

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

• .val([value]) 设置和获取表单内容
  这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

  $('input').val()
  $('input').val('newValue');
  

• .attr()
  .attr(attributeName)
  获取元素特定属性的值

  var title = $( "em" ).attr( "title" );
  .attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, 
  function(index, attr) )
  

为元素属性赋值

  $( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
  $( "#greatphoto" ).attr({
   alt: "Beijing Brush Seller",
   title: "photo by Kelly Clark"
  });
  $( "#greatphoto" ).attr( "title", function( i, val ) {
    return val + " - photo by Kelly Clark";
  });//这里用id选择符举例是不是function永远最多迭代一次？用类选择符是不是更好些？

9. 使用 jQuery实现如下效果

代码预览
加载JQuery库时，注意使用一致的网络协议（http或https），否则浏览器会阻止加载。

10. 使用 jQuery 实现如下效果

代码预览
加载JQuery库时，注意使用一致的网络协议（http或https），否则浏览器会阻止加载。

11. 实现如下效果

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

代码预览
加载JQuery库时，注意使用一致的网络协议（http或https），否则浏览器会阻止加载。