Jquery DOM&事件

库和框架的区别

• 看到的经典回答：
  • 框架帮你挖好坑，你来填！库是给你一把铲子你自己挖！
  • You call library ,Framework calls you.
• 库是一些方法的集合；例如你想修改DOM元素时需要选中、修改、放回去步骤繁琐，这时我们可以自己写个函数来专门实现这种功能，你只需要放参数进来它就返回结果给你，不用重复写；这个函数就是库里面的方法，库里面放了很多方法。
• 框架是设计好的结构，是个可拓展的半成品；例如有一群人都想建房子，那么框架会帮你打好地基、搭好承重梁，等于这个房子的主体搞定了，然后不同人按自己的需要去添砖加瓦去构建自己想要的房子；
• 从本质上来看，库和框架都是为了减少我们的工作量而服务的。库是着眼于小方面帮你做好工具让你不用每次干活都先造工具，但你去干什么活它不管；而框架呢是着眼于大方面，把一些通用的、基础的（比如不管是谁每次建房子前都要先打地基）给打包在一起，要建房就把那一堆放上去，然后在此基础上再自己去做，但你要用对，建房地基包不能拿去做桥梁的！

jquery

• jquery是一个又小又快功能丰富的javascript库，它可以让你对DOM元素的遍历和操作、事件、ajax和动画等变得更简单，不需要像原生js那么繁琐，它帮你封装好了，提供了很多API你只要去调用它就能返回结果给你，而且它的方法还兼容各个版本的浏览器。

jquery 对象和 DOM 原生对象的区别及互相转化

• jauery对象的外层都是一个中括号包裹的，通过使用$( )得到的，类似[<p>我是段落</p>]，只有jauery对象才能使用jquery的方法。因为是类数组对象，所以我们可以加个中括号包裹的数字即可得到原生DOM对象，[<p>我是段落</p>][0]；另外jquery还提供了一个get方法来实现，如[<p>我是段落</p>].get(0)。
• DOM原生对象就是我们通过geElementBy xx得到的节点，例如<p>我是段落</p>；可以使用$( )来包裹DOM原生对象从而得到jquery对象，$(DOM原生对象)。

jquery中事件绑定

• jquery中使用on来绑定事件，对象.on('事件名称'，'处理函数')。

bind、unbind、delegate、live、on、off的作用；

• bind在jquery1.7之前的版本中用于直接给一个元素绑定事件，所以在绑定前元素必须是已存在的。
• unbind可以移除元素上用bind绑定的事件，如果没有参数就移除元素上的所有事件。
• delegate在jquery1.7之前的版本中使用，一般用于给父元素绑定一个或多个事件，只要匹配的子元素发生事件就会触发。
• live在jquery1.7版本被废弃了，给匹配的所有元素绑定一个事件。
• on给匹配的元素绑定事件处理函数，可以有多个事件。
• off移除用on绑定的事件，如果没有参数则移除所有事件。

推荐使用on来绑定事件，因为它更灵活，而且旧版本中其他绑定方法它都能实现达成了统一。

使用on绑定事件使用事件代理的写法

• 使用on绑定事件代理写法如下：为ul绑定事件，当li元素发生事件时，触发处理函数。

  $('ul').on('click', 'li', function(){ });
  

jquery 中如何展示/隐藏元素？

• $().hide()来隐藏元素，可以设置参数来控制执行的时间、方式、回调参数等。
• $().show()来隐藏元素，可以设置参数来控制执行的时间、方式、回调参数等。

jquery 动画的使用

• 使用.animate( )来使用动画，元素.annimate（css属性：值，opts），opt里可以设置较多东西，时间、方式、速度、回调函数等，可以按需要去jquery官网查阅，对于css属性部分要注意必须是值可数字化的css属性，例如宽高可以而背景色就不行。

元素内部 HTML 内容设置和获取、元素内部文本的设置和获取？**

• HTML内容使用jquery的.html( )，括号内不带内容表示获取所选对象的html内容，带内容的话则将用括号内的内容覆盖其内部html内容。原生js中用.innerHTML获取，用赋值来设置内容。
• 文本内容使用jquery的.text( )，括号中不带内容表示获取所选对象的文本内容(注意同样是忽略html标签进行文本拼接)，带内容的话则将用括号内的内容覆盖其内部html内容。原生js中用.innerText获取，用赋值来设置内容。

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

• 和原生JS中input对象.value类似，jquery中可以使用$( ).val( )来获取表单输入的内容。
• 元素属性的获取在原生JS中是使用元素.getAttribute，使用元素.settAttribute来设置；而在jquery中获取和设置两种操作是同一个方法，$( ).attr('属性名')来获取属性值，$( ).attr('属性名'，'值')来对属性值进行设置。