jquery DOM&事件

说说库和框架的区别？

库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式形成的也叫函数库。再函数库中可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
框架则是为解决一个（一类）问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。也就是说框架是库的升级版。开发者使用框架的时候，必须使用这个框架的全部代码。

jquery 能做什么？

jquery是个轻量级的“写的少，做的多”的js库。
jQuery的功能：

• HTML元素选取
• HTML元素操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX

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

• jQeury对象是通过jQuery的API构造的jQuery对象（类数组），拥有自己的属性和方法。
• DOM原生对象是通过DOM的API构造的DOM对象（DOM节点），也拥有自己的属性和方法。

var $jquery=$('#jquery');
var dom=document.getElementById('dom');
//dom对象转化为jquery对像
var $dom=$(dom);
//jquery对象转化为dom对象
var jquery=$jquery[0];
//对于一个特定的结果集，获取指定index的jQuery对象
$jquery.eq(0);

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

可以像原生dom一样绑定事件$(selector).click()
jQuery也可以使用bind()/delegate()/live()/on绑定事件，unbind()和off()为对应bind()和on()解绑事件

• bind()
  为一个元素绑定一个事件处理程序，再jQuery1.7以前使用。对于早期版本，.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象当前选中的元素、所以在绑定的时候这些元素必须已经存在。
  基本用法：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

• .delegate()
  为所有匹配选择器的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。从1.7版本开始已被取代。
  使用方法：

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

• .live()
  附加一个事件处理程序到匹配目前选择器的所有元素，现在和未来
  从jQuery1.7开始， .live()方法已经过时了。
  基本用法：

$("a").live("click", function() { return false; })

• .on( events [,selector ] [,data ], handler(eventObject) )推荐
  在选定的元素上绑定一个或多个事件处理函数
  从1.7版本之后，.on()方法提供了绑定事件的所有功能。

各个参数的意义：

1. events：一个或多个空格分割的事件类型和可选择的命名空间，或仅仅是命名空间。
2. selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。若果选择器是null或忽略了该选择器，那么被选中的元素总是能触发事件。
3. data：当一个事件被触发时，要传递给事件处理函数event.data
4. handler(eventObject)：事件被触发时，执行的函数。

//普通绑定事件
$('div').on('click',function(e){
  console.log(this);
  console.log(e);
})
//事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});
// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

jquery 如何展示/隐藏元素？

• 隐藏元素：.hide([duration][,easing][,complete])

用于隐藏元素，没有参数的时候等同于直接设置display属性。
.css('display','none')

1. duration：动画持续多久
2. easing：表示过渡时使用那种缓冲函数，jquery自身提供linear和swing
3. complete：动画完成时执行的函数

参考

• 显示元素：.show( [duration ] [, easing ] [, complete ] )
  用法类似于hide。

参考
Jsbin

jquery 动画如何使用？

jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
参数：

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

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

• text()：设置或返回所选元素的文本内容
• html()：设置或返回所选元素的内容(包括HTML标记)

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

• val() ：设置或返回表单字段的值
• attr()：设置或返回元素的属性

代码

使用 jquery实现如下效果

Paste_Image.png

在线预览

使用 jquery 实现如下效果

Paste_Image.png

问题： 点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决
原因是在 href属性中使用了 #做页面跳转，可以使用 javascript:void(0)
在线预览

实现如下效果

Paste_Image.png

提示
1.使用代理
2.当点击按钮时使用如下数据

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

在线预览