The difference between jquery and JS, and the basic syntax of jquery

* When using jquery, add the top of the page

<src= ".. /jquery-1.11.2.min.js "></script>

Look at the difference between JS and jquery:

JS is used in this way:

<Scripttype= "Text/javascript">Takes an element from an ID, takes a specific elementvara=document.getElementById ("P1"); Based on classvara=Document.getelementsbyclassname ("AA"); According to the label name to takevara=document.getElementsByTagName ("Div"); According to the name, takevara=Document.getelementsbyname ("cc");         alert (a); Action element Action content Non-table cell A.innertext= "Hello"; A.innerhtml= "<span style= ' color:red ' >world</span>"; Table cell element A.value= "Hello"; Action Properties A.setattribute ("BS","1"); A.getattribute ("BS"); A.removeattribute ("BS"); Action Style A.style.color=Red; can only get inline properties three div hiddenvara=Document.getelementsbyclassname ("AA");  for(varI=0; I<A.length;i++) {A[i].style.display= "None"; }<Script>

This is how jquery is used ():

<Scripttype= "Text/javascript">find an element based on the ID and fetch the jquery objectvarb= $("#a1"); Based on classvarb= $(". AA"); According to the label name to takevarb= $("Div"); Filter by Attributevarb= $("[NAME=AA]");        Action element Action content Non-TABLE element B.text (); B.html ();
Assignment Value:<div id= "A1" >11</div>
var B = $ ("#a1");
B.text ("AAA")
B.html ("AAA")

Value: var B = $ ("#a1");
Alert (B.text ());
Alert (b.html ());

        Table cell element        b.val ();

Assignment value:

var B = $ ("#a1"); B.val ("AAA")

Value:

var B = $ ("#a1"); B.val ();

Action Properties B.attr ("BS","1");
B.attr ("BS");
B.removeattr ("BS");


Action Style alert (B.CSS ("Color"));
B.css ("font-size","50px"); Can get, set any style


Alert (b[0]); Take the jquery object with EQ () to take the element itself with []


Hide three elements $ (". AA"). CSS ("Display","None");


</Script>

jquery events: Hanging events, removing events

<styletype= "Text/css">#a1{Color:Red}. AA{width:100px;Height:100px;Background-color:#39F}</style>

<DivID= "A1"style= "width:100px; height:200px;">11</Div><Divclass= "AA"BS= "1">Aaaa</Div><Divclass= "AA"BS= "2">bbbbb</Div><Divclass= "AA"BS= "3">Ccccc</Div>

<inputtype= "text"ID= "P1" /><inputtype= "button"ID= "B1"value= "Hang Event" /><inputtype= "button"ID= "B2"value= "Remove Event" />

    The Jquery "Plus" event    page loads the completed    $ (document). Ready (function (e) {                to A1 plus click        $ ("#a1"). Click (function () {                alert ( ' AA ');            })        Add Event        $ (". AA") to all elements of Class AA. Click (function () {                alert (this). attr ("BS"));                $ (". AA"). CSS ("Background-color", "#39F");                $ (this). CSS ("Background-color", "Red");            })                    The second way "hang" the event        $ ("#b1"). Click (function () {                                $ ("#a1"). Bind ("click", Function () {                                        alert ("I Am Hanging event")                        ;})        $ ("#b2"). Click (function () {                            $ ("#a1"). Unbind ("click");})                                ;

The difference between jquery and JS, and the basic syntax of jquery