The difference between jquery and JavaScript (Common method comparison) _ Basics

jquery is an extension of JavaScript, encapsulation, is to make JavaScript better use, simpler. What others say, jquery is to use less code, beautiful to complete more functions. Comparison between JavaScript and jquery common methods

1. Load DOM Difference

Javascript:
Window.onload

function A () {
Alert (' a ');
}
function second () {
Alert (' second ');
}
Window.onload = A;
Window.onload = second;
Only the second window.onload is executed, but it can be improved by the following methods:
Window.onload = function () {
A ();
Second ();
}

Jquery:
$ (document). Ready ()

$ (document). Ready () {
function A () {
Alert (' a ');
}
function second () {
Alert (' second ');
}
$ (document). Ready (function () {
A ();
}
$ (document). Ready (function () {
Second ();
}
Article two will be implemented
}

2. Get ID

Javascript:
document.getElementById (' Idname ')

Jquery:
$ (' #idName ')

3. Get class

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

Jquery:
$ ('. ClassName ')

4. Get tagname

Javascript:
document.getElementsByTagName (' TagName ')

Jquery:
$ (' tagName ')

5, create the object and join 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, 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 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: Ditto
$ (' P '). prepend (' <b>Hello!</b> ');
Output: <p><b>hello!</b>world! </p>
$ (' <b>Hello!</b> '). Prependto (' P ');
Output: Ditto

6. Insert new Element

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

HTML code:

<p> This is a piece 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 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: Ditto
$ (' P '). Before (' <b>Hello!</b> ');
Output: <b>hello!</b><p>world! </p>
$ (' <b>Hello!</b> '). InsertBefore (' P ');
Output: Ditto

7, replication node

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 replicated node are also copied to the new node.

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

8, delete the node

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

Jquery:
Remove ();
The Remove () method removes all matching elements from the DOM, and the Remove () method can also be used in conjunction with other filter selectors, which is very convenient.
Eg, remove Li from the title not "Hello" under the UL Li:
$ (' ul Li '). Remove (li[title!= ' Hello '));
Empty ();
The empty () method is to empty the node.

9. Parcel Node

Javascript:
JavaScript is temporarily free

Jquery:
Wrap ()///The matching elements are wrapped separately with the structured markup of the other elements
Wrapall ()///wrap all matching elements in one element
Wrapinner ()///wrap child contents of matching elements with other structured tags

10, property operation: Set the property node, find the attribute node

Javascript:
document.getElementsByTagName (' TagName ')

Jquery:
The set and lookup attribute nodes in jquery are: attr ().
$ (' P '). attr (' title '); Gets the title attribute 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 multiple properties, you can use the form "name: value" pairs, separated by commas in the middle.

11, replace the node

Javascript:
Reference = Element.replacechild (Newchild,oldchild)
The method is to replace a 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 you could write:
$ ('
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 the jquery. CSS () method is possible.
Note: In CSS such as "font-size" such as "-", you want to use the first letter lowercase camel-style representation, such as fontsize.

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

The following for you to add other users of the supplementary

jquery is a great way to simplify the programming of JavaScript programs, and I've taken the time to learn about jquery and share my notes with you in the hope of helping.

To use jquery, first precede the HTML code with a reference to the jquery library, such as:

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

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

Provided by Google

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

The jquery official

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

I got my own subdomain, and I actually jumped to Google's Cdn.

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

The difference between the specifics of the jquery code and the native JavaScript notation is the following when performing common operations:

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

Jquery
$ ("#abc") Positioning by ID
$ (". ABC") Positioning by class
$ ("div") positioning by label

Note that JS returns the result is this element, jquery returned the result is a JS object. The following example assumes that element ABC has been positioned.

2 Change the content of elements
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 display and hide (2012.4.21 update)

4 Gain focus

JS and jquery are the same, are all abc.focus ();

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

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

7 Set 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 your own objects, dealing with browser compatibility, such as a mess of 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 JSON is returned, the following is handled
result = eval (' (' + result + ') ');
alert (result);
}

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