jQuery、DOM&事件

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

• 类库是实现各种功能的类的集合，可以帮助编程人员简化工作，提高工作效率。就像一个小的工具箱，里面有锤子、剪刀、扳手等之类的工具。
• 框架是解决方案，集成了最佳实践和可复用的基础结构，是加速和提高系统质量的半成品。

2. jquery 能做什么？

jQuery相较于原生js能用更少的代码，做更多的事情。jQuery可以：

1. 快速获取文档元素。采用$()，如：$('#header')。为了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器。
2. 提供漂亮的页面动态效果。jQuery内置了一系列动画效果，如淡入、淡出、显示、隐藏等，还有自定义动画.animate()。
3. 提供常用函数。如.each( function(index, Element) )遍历一个jQuery对象，为每个匹配元素执行一个函数。
4. 事件处理更好的实现了浏览器兼容。
5. 操作DOM元素，更改网页内容。

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

jQuery对象是一个类数组对象（用[]包裹的），用$()方法得到的都是jQuery对象，jQuery对象可以使用jQuery自带的属性和方法。

2.jpg

如图用 $('#hd')获得的是jQuery对象，在 $('#hd')后面加上 [index]则获得DOM原生对象，
若是 .eq(index)则获取的是jQuery对象。jQuery对象转原生对象还可以用 .get([index])方法获取指定index的DOM 对象。 .get()不写参数就是把所有转化为jQuery对象再返回。
DOM原生对象拥有其特有属性，例如.innerText(),.target等。将DOM原生对象转化为jQuery对象的方法是用$()包裹，如： $('

abc

')。

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

jQuery绑定事件的方法以及对应特点：

• .bind()
  $('a').bind('click', function() { alert("That tickles!") });
  这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素，并把alert函数绑定到每个元素的click事件上。

• .live()
  $('a').live('click', function() { alert("That tickles!") });
  JQuery把alert函数绑定到$(document)元素上，并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个click事件，以及该事件的目标元素与’a’这一CSS选择器是否匹配，如果都是的话，则执行函数。
  live方法还可以被绑定到具体的元素（或“context”）而不是document上，像这样：
  $('a', $('#container')[0]).live(...);

• .delegate()
  $('#container').delegate('a', 'click', function() { alert("That tickles!") });
  JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。
  $('a').live('click', function() { blah() });
  // 或者
  $(document).delegate('a', 'click', function() { blah() });
  以上两个例子可以达到相同的效果，.delegate和.live哪个更好用？答案是.delegate。为什么呢？看似两个的作用差不多，但是使用.live()首先要扫描整个的文档查找所有的$(‘a’)元素，把它们存成jQuery对象。而delegate方法仅需要查找并存储$(document)元素。所以后者速度更快。
  其次，live方法有一个非常大的缺点，那就是它仅能针对直接的CSS选择器做操作，这使得它变得非常的不灵活。

• .on()
  在jQuery 3.0中，.bind()已被标记为弃用。从jQuery 1.7开始，.live() 方法也已废弃，[.on()] 方法是将事件处理程序绑定到文档（document）的首选方法。 旧版本的jQuery中用户，应优先使用[.delegate()]来取代.live()。

  // Bind
  $( "#members li a" ).on( "click", function( e ) {} ); 
  $( "#members li a" ).bind( "click", function( e ) {} );
  // Delegate
  $( "#members" ).on( "click", "li a", function( e ) {} ); 
  //注意子元素参数位置
  $( "#members" ).delegate( "li a", "click", function( e ) {} );
  

on事件绑定把上面三种方法统一了，用起来更方便。
on方法可以在同一个元素上绑定多个事件
$( "#cart" ).on( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "active" );
});
.toggleClass()方法用于为匹配的元素集合中的每个元素上添加或删除一个或多个样式类（class）,取决于这个样式类（class）是否存在或state参数的值。（如果存在（不存在）就删除（添加）一个类。）
.on()绑定事件和事件代理
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
以上代码如果表格tbody中有多个tr，这需要给每个tr都绑定这样的事件处理程序。由于点击每一个tr时事件都会冒泡到它的父元素上，所以采用事件代理可以避免频繁的绑定和解绑事件。代码如下：
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});

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

• .show()用于显示元素
  $('.target').show();
  采用这种方式，元素将立即被显示，没有动画。可以为其添加参数，显示时间或快慢。参考http://www.css88.com/jqapi-1.9/show/
• .hide()用于隐藏元素

6. jquery 动画如何使用？

.animate()为元素添加动画。

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

• .html()用于获取和设置元素内部的HTML内容，在.html()里添加字符串则为该元素设置HTML内容。如：
  

  段落

• .text()用于获取和设置元素文本。

text.jpg

text2.jpg

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

• .val([value])
  这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
  $('input').val()
  $('input').val('newValue');
  
  

  input.jpg

ii.jpg

input2.jpg

• .attr(attributeName)获取元素特定属性的值或者为元素属性赋值。
• .removeAttr()为匹配的元素集合中的每个元素中移除一个属性（attribute）.
• .css()获取或设置元素的css.