Shulou(Shulou.com)06/01 Report--

小编给大家分享一下jquery和javascript的区别有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧!

jquery 就对 javascript 的一个扩展，封装，就是让 javascript 更好用，更简单。人家怎么说的来着，jquery 就是要用更少的代码，漂亮的完成更多的功能。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代码：

World!

$('p').append('Hello!');

//输出：

World!Hello!

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

$('p').prepend('Hello!');

//输出：

Hello!World!

$('Hello!').prependTo('p');

//输出：同上

6、插入新元素

JavaScript：

insertBefore() 语法格式：

parentElement.insertBefore(newElement,targetElement)

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

html代码：

This is a text.

JavaScript code:

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

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

para.parenetNode.insertBefore(imgs,para);

JQuery：

JQuery provides four ways to insert new elements before or after existing elements: after(), insertAfter(), before(), insertBefore().

Format: $( html );

eg, html code:

World!

jQuery code

$('p').after('Hello! ');

//Output:

World!

Hello!

$('Hello! '). insertAfter ('p');

//Output: Same as above

$('p').before('Hello! ');

//Output: Hello!

World!

$('Hello! ').insertBefore('p');

//Output: Same as above

7. Copy nodes

JavaScript：

reference = node.cloneNode(deep)

This method has only one Boolean parameter, and its values can only be true or false. This parameter determines whether to copy the child nodes of the copied node to the new node.

JQuery：

clone() //After copying a node, the copied new element has no behavior

clone(true) //Copy node contents and events bound to them

Note: This method is usually used in conjunction with appendTo(), prependTo(), etc.

8. Delete nodes

JavaScript：

reference = element.removeChild(node)

removeChild() removes a child node from a given element

JQuery：

remove();

The remove() method removes all matching elements from the DOM, and it can also be used conveniently with other filter selectors.

eg, remove li whose title is not "Hello" under ul li:

$('ul li').remove(li[title!= 'Hello']);

empty();

The empty() method empties nodes.

9. Package node

JavaScript：

JavaScript is unavailable

JQuery：

wrap() //Wrap matching elements individually with structured tags of other elements

wrapAll() //Wrap all matching elements in one element

wrapInner() //Wrap the child content of the matching element in other structured tags

10. Attribute operation: Set attribute node, find attribute node

JavaScript：

document.getElementsByTagName('tagName')

JQuery：

JQuery sets and finds attribute nodes are: attr().

$('p ').attr ('title'); //Gets the title attribute of the p element;

$('p ').attr ('title','My title'); //Set title attribute of p element

$('p ').attr ('title':'My title',' class':'myClass'); //When multiple attributes need to be added, they can be in the form of "name: value" pairs separated by commas.

11. Replace nodes

JavaScript：

reference = element.replaceChild(newChild,oldChild)

This method replaces a child node of a given parent element with another node.

JQuery：

replaceWith()、replaceAll()

eg:

hello

To be replaced by:

Hi

JQuery code:

$('p') .replaceWith('Hi');

Or it could be written:

$('Hi').replaceAll('p');

12. CSS-DOM operation

JavaScript：

Format: element.style.property

CSS-DOM can read and set the properties of style objects, but its disadvantage is that it cannot extract style information from external CSS settings, while JQuery's.css() method can.

Note: CSS such as "font-size" such as "-", to use the first letter lowercase hump expression, such as fontSize.

JQuery：

Format: $(selector).css()

The css() method gets the style properties of an element

JQuery also provides height() and width() to get the height and width of an element (both without units), while css(height) and css(width) return height and width with units.

The above is "what is the difference between jquery and javascript" all the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.