最近开始学习jQuery,由于我之前对jQuery了解的不多，所以也只能是从最基础的开始学起。现在我将最近学习的内容简单总结如下：

jQuery简介

　　jQuery是继prototype之后又一个优秀的Javascript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员。
　　jQuery凭借简洁的语法和跨平台的兼容性，极大的简化了javaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其核心理念是write less,do more(写得更少,做得更多)。

JavaScript 与JQuery 常用方法比较

1、加载DOM区别

JavaScript：

1. window.onload

1. function first(){
2. alert('first');
3. }
4. function second(){
5. alert('second');
6. }
7. window.onload = first;
8. window.onload = second;
9. //只会执行第二个window.onload；不过可以通过以下方法来进行改进：
10. window.onload = function(){
11. first();
12. second();
13. }

JQuery：

1. $(document).ready()

1. $(document).ready(){
2. function first(){
3. alert('first');
4. }
5. function second(){
6. alert('second');
7. }
8. $(document).ready(function(){
9. first();
10. }
11. $(document).ready(function(){
12. second();
13. }
14. //两条均会执行
15. }

2、获取ID

JavaScript：

1. document.getElementById('idName')

JQuery：

1. $('#idName')

3、获取Class

JavaScript：

JavaScript没有默认的获取class的方法

JQuery：

1. $('.className')

4、获取TagName

JavaScript：

1. document.getElementsByTagName('tagName')

JQuery：

1. $('tagName')

5、创建对象并加入文档中

JavaScript：

1. var para = document.createElement('p');
2. //创建一个p元素
3. document.body.appendElement(para);
4. //将p元素追加为body的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法

JQuery：

JQuery提供了4种将新元素插入到已有元素（内部）之前或者之后的方法：append()、appendTo()、prepend()、prependTo()。

1.  
2. $('p').append('Hello!');
3. //输出：

   World!Hello!

4.   
5. $('Hello!').appendTo('p'); //输出：同上
6.   
7. $('p').prepend('Hello!');
8. //输出：

   Hello!World!

9.   
10. $('Hello!').prependTo('p');
11. //输出：同上

6、插入新元素

JavaScript：

insertBefore() 语法格式：parentElement.insertBefore(newElement,targetElement)

eg, 将一个img元素插入一个段落之前。html代码：

1. 

2. 这是一段文字

JavaScript代码：

1. var imgs = document.getElementById('imgs');
2. var para = document.getElementsByTag('p');
3. para.parenetNode.insertBefore(imgs,para);

JQuery：

JQuery提供了4种将新元素插入到已有元素（外部）之前或者之后的方法：after()、insertAfter()、before()、insertBefore()。格式：$( html );

1. $('p').after('

   World!

   ');
2. //输出：

   World!

   Hello!
3. $('Hello!'). insertAfter ('p');
4. //输出：同上
5. $('p').before('Hello!');
6. //输出：Hello!

   World!

7. $('Hello!').insertBefore('p');
8. //输出：同上

7、复制节点

JavaScript代码：

1. reference = node.cloneNode(deep)
2. 这个方法只有一个布尔型的参数，它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。

 

JQuery：代码：

1. .clone() //复制节点后，被复制的新元素并不具有任何行为
2. .clone(true) //复制节点内容及其绑定的事件

8、删除节点

JavaScript：

1. reference = element.removeChild(node)
2. removeChild()方法将一个给定元素里删除一个子节点

JQuery： remove(); remove()方法作用就是从DOM中删除所有匹配的元素，remove()方法还可以与其他的过滤选择器结合使用，非常方便。 eg，将ul li下的title不是"Hello"的li移除： $('ul li').remove(li[title!='Hello']); empty(); empty()方法作用是清空节点。