jQuery：DOM和事件

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

• 库是一个方法的集合，提供了很多封装好的函数，添加库之后可以直接使用这些方法。
• 框架是一个产品，用于解决一类问题，如同他的名字，已经有了一个大体的框架，需要开发者向其中填写内容。

2.jquery 能做什么？

• 更加方便的获取DOM元素：利用$和一些内置函数
• 动态地修改页面样式：利用addClass
• 动态地修改DOM：append等函数
• 响应用户操作：事件监听函数
• 动画效果：animate，show，hide等函数
• 兼容性很好

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

• jQuery的对象是数组对象，是对DOM原生对象的一种包装。
• DOM转化为jQuery需要使用$(对象)
• jQery转化为DOM原生需要$(对象).eq(对应的位置)

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

• 可以使用on、bind、live、delegate等函数来绑定。
  <pre>
  var $('.btn').on('click',fuction(){
  #code....
  })
  </pre>
• bind:bind(type,data,callback)直接绑定在元素上
• live:live(type,data,callback)是bind的升级版本，不仅可以绑定在元素上，还因为自身的“事件委托”的实现方法，对后添加的后代元素同样起作用,比如$('.a').live('click',callback)只要有一个事件click冒泡到document并且还是a元素，就都符合。
• unbind:移除之前的绑定的事件
• delegate：指定的元素（被选元素的子元素）绑定一个或多个事件
  $("#container").delegate("a","click",function(){alert("OK");})就是对里面的a标签绑定事件
• on:on(events,[selector,data,callback])在选择元素上绑定一个或多个事件的事件处理函数（live、bind、delegate在1.7版本之后被其代替）
• off:用于移除on函数的事件绑定

推荐使用on，因为是最新的支持的比较多，而且前几个绑定函数功能比较乱还停用了。
<pre>
$('.target').on('click','selector',function(){
#code.......
})
</pre>

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

<pre>
$('.target').show();
$('.target').hide();
</pre>

6.jquery 动画如何使用？

<pre>
$('.target').animate({left:"200px",top:"100px"},100,function(){
#code
})//第二个时间可以换成fast或者slow
.stop:停在当前位置
.finish:立即执行完列表中的动画
.clearQueue:删除列表中的所有项目
</pre>

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

<pre>
//无参数获取
$(".target").html()
$(".target").text()
//有参数设置
$(".target").html('< p >nihao< p >')//设置内部的html标签
$(".target").text('nihao')//设置文本
</pre>

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

获取表单输入内容：<pre>$("#input").val()</pre>
获取表单选择内容：<pre>$("#input:checked").val()</pre>
获取元素属性：<pre>$('.target').attr()</pre>
设置元素属性：<pre>$('.target').attr('src',$img.attr('data-img'))</pre>