JQuery Basic Usage

1) After the page load is complete, run the do stuff when DOM was ready statement!

1 $ (document). Ready (function() {2        // - stuff when DOM is ready
    3        });

2) Selector

$ ("a") is a jquery selector (selector)
$ ("") where the field is the tag of the element. For example $ ("div") is <div></div>
Click is a method of a function object. Method for mouse click event!

1 $ (document). Ready (function() {2      $ ("a"). Click (function() {  3         alert ("Hello world!" ); 4          }); 5        });

$ ("div"). Click $ ("div") is all the div tags on the page this is a click event that is bound to all the elements of the tag as Div, when all the div is the mouse single

Execute alert ("Hello world!") when clicked.

3) Selector (selector) and event (events)

Select DOM Element
Select an element with ID orderedlist, which is equivalent to document.getElementById ("Orderedlist") in JavaScript, and only $ ("#id") in jquery, where ID is the ID of the element, element is any element!

AddClass to change the CSS class of this element to red

1 $ (document). Ready (function() {2 $ ("#orderedlist"). AddClass ("Red"); 3 });

$ ("#id > XX") this represents the ID of the element under which all elements marked as XX are set to the class of CSS, the ID of the element ID xx is the element of the tag example <div><li><a> and so on!

1    $ (document). Ready (function() {2          $ ("#orderedlist > Li"). addclass ("Blue") ; 3         });

4) Loop each

1 $ (document). Ready (Thefunction() {2     // Use this to reset a single Form3     $ ("#reset"). Click (function() {4            $ ("#form") [0]. Reset (); 5     }); 6     

This code simply executes the reset () method with the form ID. But what if you have a lot of forms that need to be executed? So you can write this:

 1  $ (document). Ready (function  Span style= "color: #000000;" > () { 2  //  Use the to reset several forms at once  3  $ ("#reset"). Click (function   { 4  $ ("form"). each ( function   () { 5  this  .reset ();  6  });  7  });  8 }); 

Select all selected elements of class "CheckBox2" with multiple <input type= "checkbox" name= "checkbox" value= "<c:out value=" ${quote[0]} "/>" class= "CheckBox2"/> Composition:

1            var str= ""2             $ (". checkbox2:checked"). each (function3                 str+=$ (this). Val () + ","4             });

5) attribute Operation attr () method

To change the width property of an image:

1            $ ("button"). Click (function() {2                $ ("img"). attr ("width", "n"); 3              });

Change the selection of sub-checkboxes by selecting the checkbox in full:

1            if ($ ("#checkbox1"). attr ("checked") = =true) {2                  $ (". CheckBox2"). attr ("Checked", ' true ' ); // Select All 3                 } Else {4                  $ (". CheckBox2"). Removeattr ("checked");    5             }

6) Ajax

1 $.ajax ({2Type: "POST",3URL: "Xxxaction.do?method=xxmethod",4Data: "Pkid=" +Pkid,5Successfunction(jsondata) {6                  if(jsondata.msg== "Success"){7$ ("#status" +pkid). Val (jsondata.status);8$ ("#totime" +pkid). Val (jsondata.sendtime);9$ ("#fromtime" +pkid). Val (jsondata.receivetime);Ten$ ("#send" +pkid). attr ("Disabled", "disabled"); One}Else if(jsondata.msg== "Failed") A                 { -$ ("#status" +pkid). Val (jsondata.status); -$ ("#totime" +pkid). Val (jsondata.sendtime); the$ ("#send" +pkid). Removeattr ("Disabled"); -                 } -             }, -Errorfunction(XMLHttpRequest, Textstatus, Errorthrown) { + alert (xmlhttprequest.status); - alert (xmlhttprequest.readystate); + alert (textstatus); A             } at})

Sends an AJAX request in which the action responds like this:

1Jsonobject Jo =NewJsonobject ();2Jo.put ("MSG", "Success");3Jo.put ("status", "Send Complete");4 Responsejson (response, Jo);5     protected voidResponsejson (httpservletresponse response, Jsonobject Jo)6             throwsIOException {7Response.setcontenttype ("Application/json; Charset=utf-8 ");8 response.getwriter (). Print (jo.tostring ());9 Response.getwriter (). Flush ();TenResponse.getwriter (). Close ();

You can also write this:

1 functionAjaxaccount (ratetype,deptid) {2$.post ("Mainaction.do?method=accountlist", {3 Ratetype:ratetype,4 Deptid:deptid5},function(Data[accountlist method return value]) {6                varaccountlist=data.accountlist;7                varoppaccountlist=data.oppaccountlist;8                varYuee=Data.yuee;9                if(ratetype== ' 1 ' | | ratetype== ' 2 '){TenToacccountval ("Account", accountlist); OneToacccountval ("Oppaccount", oppaccountlist); A                     -}Else{ -Toacccountval ("Account2", accountlist); theToacccountval ("Oppaccount2", oppaccountlist); -$ ("#huoqiyuee2"). HTML (yuee); -                } -}, ' JSON '); +}

But the final implementation is still $.ajax:

1Postfunction(URL, data, callback, type) {2     if(jquery.isfunction (data)) {3callback =data;4data = {};5     }6  7     returnJquery.ajax ({8Type: "POST",9 Url:url,Ten Data:data, One Success:callback, A Datatype:type -     }); -},

JQuery Basic Usage