jquery DOM&事件

一、问答题

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

• 库：类似于工具集，把特定的函数都封装好 我们只需要在特定的地方调用即可。
• 框架：类似房子的框架结构，已经实现了基本的功能，我们只需要往里面填充自己的业务逻辑即可。

2. jquery 能做什么？

• 跨浏览器
• DOM操作
• AJAX
• 事件处理
• 动画

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

• 区别:
  Dom元素只能使用dom元素的属性和方法。
  jquery元素只能使用jquery的属性和方法。
• JQ=>DOM原生
  jquery元素是以类数组形式展现，选取数组的第几项就能转换为dom元素。

var $p1 = $('.p1'); 
var p1 = $p1[0];```
- DOM原生=>JQ

加$(dom)

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

$(selector).click(function(){})
$(selector).on("click",function(){})//更加规范

bind：是直接绑定在元素上，如果有元素是后面添加进来的不会绑定

bind(type,[data],fn)

unbind：是 bind对应的取消绑定
live：是通过冒泡方式给选中的元素绑定一个事件处理函数，支持动态数据 后面添加进来的元素也可以绑定到

live(type,[data],fn)

delegate：给指定的元素添加一个或多个事件处理函数，多用于事件代理，性能优于.live()

delegate(selector,[type],[data],fn)

on:是jq1.7之后 整合了上面三种方式的方法

on(events,[selector],[data],fn)

off:是on对应的取消绑定事件
推荐使用on
给ul绑定click事件 当触发的元素为li时触发

$('ul').on('click','li',function(e){
console.log(1)
})

####5. jquery 如何展示/隐藏元素？
- 展示

$(selector).show(speed,callback)

- 隐藏

$(selector).hide(speed,callback)

####6. jquery 动画如何使用？

$(selector).animate({params},speed,callback)

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

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

获取HTML内容
$(selector).html()

获取文本内容
$(selectoe).text()

设置HTML内容
$(selector).html(content)

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

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

获取表单内容
$(selector).val()
设置表单内容
$(selector).val(content)

获取元素属性
$(selector).attr()
设置元素属性
$(selector).attr(content)

##二、代码题
1. [预览](http://wayneluo.bceapp.com/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E4%BA%94/task25-1.html#)
 [代码](https://github.com/jirengu-inc/jrg-renwu7/blob/master/members/%E7%BD%97%E4%BC%9F%E6%81%A9/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E4%BA%94/task25-1.html)

2. [预览](http://wayneluo.bceapp.com/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E4%BA%94/task25-2.html#)
[代码](https://github.com/jirengu-inc/jrg-renwu7/blob/master/members/%E7%BD%97%E4%BC%9F%E6%81%A9/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E4%BA%94/task25-2.html)

3. [预览](http://wayneluo.bceapp.com/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E4%BA%94/task25-3.html#)
[代码](https://github.com/jirengu-inc/jrg-renwu7/blob/master/members/%E7%BD%97%E4%BC%9F%E6%81%A9/%E4%BB%BB%E5%8A%A1%E4%BA%8C%E5%8D%81%E4%BA%94/task25-3.html)