进阶14

题目1： 说说库和框架的区别？

• 库是一个数据仓库，里面放了各种可以利用的API，由于库的内部已经做了各种底层的封装和各种兼容实现，因此可以调用提供的API接口来实现我们需要的功能，而不需要复杂的代码和加工，因此使代码得到优化，效率提高。
• 框架相当于一个模板，用来搭建一个项目的最基层的部分，框架内部可以根据不同项目的需要填入不同的内容。常见的框架有vuejs等。

题目2： jquery 能做什么？

jquery是一个丰富的js库，内部对js的很多复杂的方法进行了封装和加工，比如js很多方法名很冗长，jquery封装后方法就变得简便了，也考虑到了跨浏览器兼容问题，这样我们用js时需要考虑的很多问题它都帮我们解决了，这样我们使用时就比js代码要方便，高效的多。

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

jquery对象通常用jquery的方法$(’’)来得到，可以使用jquery提供的方法来操作html的数据，DOM原生对象只能用js提供的方法，如getElementById，getElementByTagName,有的获取的是一个元素，有的获取的是一个数组。

var btn = document.querySelector('#btn');   //这里的 btn 是一个DOM对象
var $btn = $(btn);                          //这样DOM对象就转化为jQuery对象了
var btn = $btn.get(0);
var btn = $btn[0];                          //这两种方法都可以使jQuery对象转化为DOM对象

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

bind为一个元素绑定一个事件处理程序 ，适用于早期jQuery版本（1.7以前）
unbind从元素上删除一个以前附加事件处理程序。
delegate为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。
live附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
on在选定的元素上绑定一个或多个事件处理函数。
off移除一个事件处理函数

现在推荐使用on(),off()来绑定/解除事件。

on绑定事件代理的写法：

$('ul').on('click', 'li', function() {
    console.log($(this).text());
});

题目5：jquery 如何展示/隐藏元素？

• 展示：
  $(selector).show(speed,callback);
  可选的参数speed：规定元素从隐藏到完全可见的速度，默认为0。
  可选的参数callback：show函数执行完之后，要执行的函数。
  本质上show方法是修改元素的display为block。
• 隐藏：
  $(selector).hide(speed,callback);
  参数同上（这里的speed表示从显示到隐藏的速度），本质上hide方法是修改元素的display为none。

题目6： jquery 动画如何使用？

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

.animate({params}, speed, callback);

params 定义形成动画的 CSS 属性(动画结束后的CSS)必选
speed 规定效果的时长.值:slow,fast或毫秒,可选
callback 动画完成后所执行的函数,可选
.delay()设置一个定时器，以延迟 执行队列中后续的项目。
.clearQueue()从队列中删除所有还没有运行过的项目。
.stop()在匹配的元素上停止当前正在运行的动画。
.finish()针对匹配的元素 停止当前 正在运行的动画，删除所有 队列中的动画，并结束所有 动画

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

$(selector).html()设置html内容
$(selector).text()设置文本内容

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

选择input元素后，调用.val()即可获取输入的内容；在.val()中传递参数即可设置input的内容。

$(selector).val()

选择元素后，调用attr(attribute,value)即可获取元素置顶属性的值，attribute参数为必填，代表了想要定位的属性，而value参数选填，未填为查找，填写后代表修改为 将属性值改为value

$(selector).attr(attribute,value)

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

img

代码

题目10：. 使用 jquery 实现如下效果

img

代码

题目11：实现如下效果

img

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

代码

著作权归本人与饥人谷所有。如需转载请说明。