The difference between jquery and JavaScript (reproduced from the script house)

jquery is an extension of JavaScript, encapsulation, is to make JavaScript better use, more simple, in order to illustrate the difference, below to share with you the next JavaScript and jquery common methods comparison

jquery is an extension of JavaScript, encapsulation, is to make JavaScript better use, more simple. What people say, jquery is to use less code, beautiful to complete more features. Comparison of common methods of Javascript and jquery

1. Loading DOM Differences

Javascript:
Window.onload

function First () {
Alert (' first ');
}
function second () {
Alert (' second ');
}
Window.onload = First;
Window.onload = second;
Only the second window.onload is executed, but improvements can be made in the following ways:
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 ();
}
Two will be executed.
}

2. Get ID

Javascript:
document.getElementById (' Idname ')

Jquery:
$ (' #idName ')

3. Get class

Javascript:
JavaScript does not have the default method of acquiring class

Jquery:
$ ('. ClassName ')

4. Get tagname

Javascript:
document.getElementsByTagName (' TagName ')

Jquery:
$ (' tagName ')

5. Create objects and add them to the document

Javascript:
var para = document.createelement (' P ');
Create a P element
Document.body.appendElement (para);
Append the P element to the LastChild child node of the body, and you can use the InsertBefore () method if you want to insert the newly created P element into an existing element

Jquery:
jquery provides 4 ways to insert new elements before or after they are inserted into an existing element (internal): Append (), AppendTo (), prepend (), Prependto ().
Format: $ (HTML);
Eg,html Code:
<p>World!</p>
$ (' P '). Append (' <b>Hello!</b> ');
Output:<p>world!<b>hello!</b></p>
$ (' <b>Hello!</b> '). AppendTo (' P '); Output: Ibid.
$ (' P '). prepend (' <b>Hello!</b> ');
Output: <p><b>hello!</b>world! </p>
$ (' <b>Hello!</b> '). Prependto (' P ');
Output: Ibid.

6. Inserting new elements

Javascript:
InsertBefore () syntax format:
Parentelement.insertbefore (newelement,targetelement)
eg, insert an IMG element before a paragraph.

HTML code:

<p> This is a paragraph of text </p>

JavaScript code:
var IMGs = document.getElementById (' IMGs ');
var para = document.getelementsbytag (' P ');
Para.parenetNode.insertBefore (Imgs,para);

Jquery:
jquery provides 4 ways to insert new elements before or after they are inserted into an existing element (external): After (), InsertAfter (), before (), InsertBefore ().
Format: $ (HTML);
Eg,html Code:
<p>World!</p>

jquery Code
$ (' P '). After (' <b>Hello!</b> ');
Output: <p>world! </p><b>Hello!</b>
$ (' <b>Hello!</b> '). InsertAfter (' P ');
Output: Ibid.
$ (' P '). Before (' <b>Hello!</b> ');
Output: <b>hello!</b><p>world! </p>
$ (' <b>Hello!</b> '). InsertBefore (' P ');
Output: Ibid.

7. Replication Nodes

Javascript:
Reference = Node.clonenode (deep)
This method has only one Boolean parameter, and its desirable value can only be true or false. This parameter determines whether the child nodes of the copied node are also copied to the new node.

Jquery:
Clone ()//Copy node, the new element being copied does not have any behavior
Clone (TRUE)//Copy the node content and its bound events
Note: This method is usually used in conjunction with Appendto (), Prependto (), and so on.

8. Deleting nodes

Javascript:
Reference = Element.removechild (node)
The RemoveChild () method removes a child node from a given element

Jquery:
Remove ();
The Remove () method acts to remove all matching elements from the DOM, and the Remove () method can also be used in conjunction with other filter selectors for ease of use.
eg, remove Li under the title of UL Li that is not "Hello":
$ (' ul Li '). Remove (li[title!= ' Hello ']);
Empty ();
The empty () method acts to empty the node.

9. Parcel Node

Javascript:
JavaScript is not currently

Jquery:
Wrap ()//wrap the matching element in a separate package with a structured tag of other elements
Wrapall ()//wrap all matching elements together with one element
Wrapinner ()//wrap the child content of the matching element with other structured tags

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

Javascript:
document.getElementsByTagName (' TagName ')

Jquery:
The set and find attribute nodes in jquery are: attr ().
$ (' P '). attr (' title '); Gets the title property of the P element;
$ (' P '). attr (' title ', ' My title '); Set the Title property of the P element
$ (' P '). attr (' title ': ' My title ', ' class ': ' MyClass '); When you need to add more than one property, you can use the "name: Value" Pair in the middle, separated by commas.

11. Replace node

Javascript:
Reference = Element.replacechild (Newchild,oldchild)
This method replaces one child node in a given parent element with another node.

Jquery:
ReplaceWith (), ReplaceAll ()
eg
<p>hello</p>
To be replaced by:

jquery Code:
$ (' P '). ReplaceWith (' Or it can be written as:
$ ('
12. Css-dom Operation

Javascript:
Format: Element.style.property
Css-dom is able to read and set the properties of a Style object, which is insufficient to extract style information from external CSS settings, and jquery's. css () method is possible.
Note: In CSS, such as "Font-size" with "-", to use the first letter lowercase camel, such as FontSize.

Jquery:
Format: $ (selector). CSS ()
CSS () method gets the style properties of an element
In addition, jquery provides height () and width () to get the heights and widths of the elements (both without units), while the CSS (height), CSS (width) returns high-width, and with units.

The following for everyone to supplement the other users of the supplement

jquery can greatly simplify the writing of JavaScript programs, I recently took the time to understand the jquery, I started the process of notes and share with you, I hope to be helpful to everyone.

To use jquery, first add a reference to the jquery library in front of the HTML code, such as:

<script language= "javascript" src= "/js/jquery.min.js" ></script>

Library files can be placed on-premises, or directly use the CDN of a well-known company, the advantage is that these large companies are more popular CDN, users visit your site before it is likely to visit other sites have been cached in the browser, so it can speed up the opening of the site. Another benefit is obvious, saving the traffic bandwidth of the website.

Provided by Google

Http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

The official jquery

Http://code.jquery.com/jquery-1.6.min.js

I've got my own subdomain, and I'm actually jumping to Google's Cdn.

Http://cdn.akcms.com/js/jquery.js

The specific wording of the jquery code and the native JavaScript notation differ from the following when performing common operations:

1 positioning elements
Js
document.getElementById ("abc")

Jquery
$ ("#abc") Location by ID
$ (". ABC") through class positioning
$ ("div") positioned by tag

It is important to note that the result of JS return is this element, jquery returns the result is a JS object. The following example assumes that element ABC has been positioned.

2 Changing the contents of an element
Js
abc.innerhtml = "Test";
Jquery
abc.html ("test");

3 Show hidden elements
Js
Abc.style.display = "None";
Abc.style.display = "block";

Jquery
Abc.hide ();
Abc.show ();

Abc.toggle ();
Toggle between show and hide (2012.4.21 update)

4 Getting focus

JS and jquery are the same, both Abc.focus ();

5 Assigning a value to a form
Js
Abc.value = "Test";
Jquery
Abc.val ("test");

6 getting the value of a form
Js
alert (Abc.value);
Jquery
Alert (Abc.val ());

7 Setup Element not available
Js
Abc.disabled = true;
Jquery
Abc.attr ("Disabled", true);

8 Modifying element styles
Js
Abc.style.fontsize=size;
Jquery
Abc.css (' font-size ', 20);

Js
Abc.classname= "Test";
Jquery
Abc.removeclass ();
Abc.addclass ("test");

9 Ajax
Js
Create objects themselves, handle browser compatibility and other messy problems, omit the table
Jquery
$.get ("abc.php?a=1&b=2", recall);
Postvalue = "a=b&c=d&abc=123";
$.post ("abc.php", Postvalue, Recall);

function recall (Result) {
alert (result);
If the JSON is returned, the following processing
result = eval (' (' + result + ') ');
alert (result);
}

10 Determine if check box is selected
Jquery
if (abc.attr ("checked") = = "Checked")
Note: Online said. attr ("checked") = = true is not actually used, the above test can be used

The difference between jquery and JavaScript (reproduced from the script house)