JQuery总结

JQuery概念：是一个兼容多浏览器的Javascript库,在JQuery中将操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能等JavaScript封装起来，使得程序员的开发更加轻松、便捷以及高效。

JQuery优点：

1.      兼容各种浏览器。

2.      是一种轻量级的JS库。

3.      write less,do more(写得更少,做得更多)；

4.      封装了大量常用的dom操作；

5.      强大的插件机制。

6.      文档齐全，易用性高。

JavaScript和JQuery的区别：

       根据JQuery的定义就可以看出JQuery就是一个轻量级的JavaScript库，它是对JavaScript的一个封装。在此，用具体的JavaScript和JQuery方法来做一个比较：

1、加载DOM区别

JavaScript：

window.onload

function first(){

alert('first');

}

function second(){

alert('second');

}

window.onload = first;

window.onload = second;

//只会执行第二个window.onload；不过可以通过以下方法来进行改进：

window.onload = function(){

first();

second();

}

Jquery：

$(document).ready()

$(document).ready(){

function first(){

alert('first');

}

function second(){

alert('second');

}

$(document).ready(function(){

first();

}

$(document).ready(function(){

second();

}

//两条均会执行

}

2、获取ID

JavaScript：

document.getElementById('idName')

JQuery：

$('#idName')

3、获取Class

JavaScript：

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

JQuery：

$('.className')

4、获取TagName

JavaScript：

document.getElementsByTagName('tagName')

JQuery：

$('tagName')

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

JavaScript：

var para = document.createElement('p');

//创建一个p元素

document.body.appendElement(para);

//将p元素追加为body的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法

JQuery：

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

格式：$( html );

eg，html代码：

<p>World!</p>

$('p').append('<b>Hello!</b>');

//输出：<p>World!<b>Hello!</b></p>

$('<b>Hello!</b>').appendTo('p');//输出：同上

$('p').prepend('<b>Hello!</b>');

//输出：<p><b>Hello!</b>World! </p>

$('<b>Hello!</b>').prependTo('p');

//输出：同上

6、插入新元素

JavaScript：

insertBefore() 语法格式：

parentElement.insertBefore(newElement,targetElement)

eg, 将一个img元素插入一个段落之前。

html代码：

<img src="image.jpg"id="imgs" />

<p>这是一段文字</p>

JavaScript代码：

var imgs = document.getElementById('imgs');

var para = document.getElementsByTag('p');

para.parenetNode.insertBefore(imgs,para);

JQuery：

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

格式：$( html );

eg，html代码：

<p>World!</p>

JQuery代码

$('p').after('<b>Hello!</b>');

//输出：<p>World! </p><b>Hello!</b>

$('<b>Hello!</b>'). insertAfter('p');

//输出：同上

$('p').before('<b>Hello!</b>');

//输出：<b>Hello!</b><p>World! </p>

$('<b>Hello!</b>').insertBefore('p');

//输出：同上

最后

以上就是欢呼咖啡为你收集整理的JQuery总结的全部内容，希望文章能够帮你解决JQuery总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。