Main Page
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><Scriptsrc= "Jquery-1.11.2.min.js"></Script><styletype= "Text/css">#aa{width:100px;Height:100px;}</style></Head><Body><DivID= "AA"style= "Color:red"><span>Aaaaaa</span></Div><Divclass= "A1">Div1</Div><Divclass= "A1">Div2</Div><spanclass= "A1"BS= "1">Span1</span><inputtype= "text"name= "UID"ID= "BD"value= "AA" /><inputtype= "checkbox"ID= "CK" />Select All<BR/><BR/><inputtype= "checkbox"class= "CK" /><inputtype= "checkbox"class= "CK" /><inputtype= "checkbox"class= "CK" /><inputtype= "checkbox"class= "CK" /><inputtype= "checkbox"class= "CK" /></Body><Scripttype= "Text/javascript">This content is written separately//below</Script></HTML>
Here are some simple comparisons.
Js:
// Find Elements var a = document.getElementById ("AA"); alert (a); var a = Document.getelementsbyclassname ("a1"); alert (a[2]); document.getElementsByTagName ("div"); var a = Document.getelementsbyname ("UID"); alert (a[0]);
Jquery:
// Find Elements var a = $ ("#aa"); alert (a); var a = $ (". A1"); alert (A.eq (2)); var a = $ ("div"); var a = $ ("[Bs=1]"); alert (a);
Js:
// Action Content // non-standard cell element // text // HTML code // table cell element alert (a.value); A.value= "Hello";
Jquery:
// Action Content // Non-table cell element alert (A.text ()); alert (a.html ()); // table cell element a.val ("Hello");
Js:
// Operation Properties a.setattribute ("Test", "Test"), A.removeattribute ("test"); alert (A.getattribute (" Value ")); // operation style a.style.fontsize = "30px"; alert (a.style.color);
Jquery:
- For HTML elements that have intrinsic properties, use the Prop method when processing.
- For HTML elements our own custom DOM properties, when processing, use the Attr method.
// Operation Properties a.attr ("Test", "Test"), A.removeattr ("test"), alert (a.attr ("value")), A.prop ( "Test", "Test"),A.removeprop ("test"),alert (A.prop ("test")), A.prop ("checked", true ) alert (A.prop ("checked")); // operation Style a.css ("Background-color", "green"), alert (A.css ("width"));
Js:
// Unified Operation Elements var d = Document.getelementsbyclassname ("a1"); for (var i=0;i<d.length;i++) { = "30px";}
Jquery:
// Unified operation Element $ (". A1"). css ("Font-size", "30px"); $ (". ck"). Prop ("Checked",true);
// Event $ ("#ck"). Click (function() { //alert ($ (this)); // $ (this) to select its own element $ (". ck"). Prop ("Checked", $ (this). Prop ("checked")); // Anonymous Functions
Some comparisons between JS and jquery