Jquery Development Summary 1

1 Value

<Input type = "text" name = "name" id = "name" value = "test">

VaR value = $ ("# name"). Val (); // Value

$ ("# Name"). Val ("test"); // set the value

2 Operation content

1) <span id = "test"> <font color = "red"> test </font> </span>

VaR rs = $ ("# test"). Test (); // obtain the content

$ ("# Test"). Test ("test"); // set content

VaR rs = $ ("# test" pai.html (); // retrieves HTML content

$ ("# Test" ).html ("<font color =" red "> test </Fong>"); // set HTML content

2) <select name = "test" id = "test" style = "width: 180px">

<Option value = ""> all </option>

<Option value = "test1"> Test 1 </option>

<Option value = "Test2"> Test 2 </option>

VaR rs = $ ("# test"). Find ("option: Selected"). Text (); // obtain the selected content

3) set the drop-down box to select by default based on the conditions (use select in 2)

VaR length = $ ("# test option"). length;

For (VAR I = 0; I <length; I ++ ){

If ($ ("# test"). Get (0). Options [I]. value = "Test 2 "){

$ ("# Test"). Get (0). Options [I]. Selected = true; // select the drop-down box with the option "Test 2"
Break;

}

}

3 disable the enable text box

<Input type = "text" name = "name" id = "name" value = "test">

$ ("# Name"). ATTR ({'Disabled ': 'Disabled'}); // disable

$ ("# Name"). removeattr ("disabled"); // enable

4.1 check box operations

<Input type = "checkbox" name = "test" value = "test1">

<Input type = "checkbox" name = "test" value = "Test2">

<Input type = "checkbox" name = "test" value = "test3">

VaR num = 0; // count the number of selected items

VaR IDs = NULL; // counts the selected values.

$ ("Input [name = 'test']: checkbox"). Each (function (){
If ($ (this). ATTR ("checked ")){
Num + = 1;
IDS = IDs + $ (this). Val () + ",";
}
});

Alert (Num );

Alert (IDS );

4.2 single-choice button Value Method

<Input type = "radio" name = "test" value = "test1"/>

<Input type = "radio" name = "test" value = "Test2"/>

<Input type = "radio" name = "test" value = "test3"/>

$ ("Input [type = radio]"). BIND ("click", function (){
VaR value = $ ("input [name = 'test'] [type = 'Radio '] [checked]"). Val ();
Alert (value );
});

4.3 selected by default

<Input type = "radio" name = "test" value = "test1"/>

<Input type = "radio" name = "test" value = "Test2"/>

<Input type = "radio" name = "test" value = "test3"/>

$ ("Input [name = 'test']: Radio"). Each (function (){
If ($ (this). ATTR ("value") = "Test2 "){
$ (This). ATTR ('checked', 'checked ');
}
});

5 event binding

<Input type = "button" value = "test" id = "test"/>

$ ("# Test"). BIND ("click", function (){

Alert ("what I want to do ");

});

// The events have different events for different elements, including blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup,

Mousemove, Mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

6 Ajax

VaR Param = "name = zhangshan, age = 30" L

$. Ajax ({
URL: '$ {CTX}/scoremngaction. do? Method = relscore ',
Type: 'post ',
Datatype: 'html ',
Timeout: 2000000, // timeout value
Data: Param, // parameter settings
Error: function () {alert ('error: cannot connect to remote Server') ;}, // handle the error and hide the progress bar
Success: function (data ){
Alert (data );
}
});

Background Value

String name = request. getparameter ("name ");

String age = request. getparameter ("Age ");

Background Return Value

Printwriter out = response. getwriter ();

Out. Print ("operation successful! ");

7. Operation element attributes

<Input type = "text" name = "test1" id = "test" value = "test"/>

$ ("# Test"). ATTR ("name", "Test2"); // set the content in the name attribute of the element and change test1 to Test2.

Alert ($ ("# test"). ATTR ("name"); // get the content in the element name attribute

8. Form submission

<Form ID = "form1">

<Input type = "button" id = 'submit 'value = "Submit"/>

</Form>

$ ("# Submit"). BIND ("click", function (){
$ ("# Form1"). ATTR ("action", "XX. Action ");
$ ("# Form1"). ATTR ("method", "Post ");
$ ("# Form1"). Submit ();
});

9 fill in and remove styles

<Style type = "text/CSS">

. Focus {
Border: 1px solid # f00;
Background: # FCC;
}

</Style>

<Input id = "username" type = "text"/>

<Input id = "pass" type = "password"/>

<Textarea id = "MSG" rows = "2" Cols = "20"> </textarea>

<SCRIPT type = "text/JavaScript">
$ (Function (){
$ (": Input"). Focus (function () {// Add a style when the text box gets the focus
$ (This). addclass ("Focus ");
}). Blur (function () {// remove the style when the text box loses focus
$ (This). removeclass ("Focus ");
});
})
</SCRIPT>

10. traverse the specified element.

<Input type = "text" name = "test1" id = "test1"/>

<Input type = "text" name = "Test2" id = "Test2"/>

<Input type = "text" name = "test3" id = "test3"/>

Function disabletext (){
$ ("Input [type = 'text']"). Each (function () {// traverse all text elements
$ (This). ATTR ({'Disabled ': 'Disabled'}); // adds the disable attribute.

// $ (This) is the element object Currently traversed
});
}

// $ (": Input"). ATTR ({'Disabled ': 'Disabled'}); this method can disable all input elements by default.

11 hide specified elements

<Span id = "test" style = "display: none"> test </span>

$ ("# Test"). Show (); // display

$ ("# Test"). Hide (); // hide

12 text box to get focus

<Input type = "text" id = "test1" value = ""/>

$ ("# Test1") [0]. Focus ();

13. Retrieve element values from table

Take the first TD value under tr

$ (This). Children (). eq (0). Text ()

$ ("# Tid [ID = trid] TD: eq (0)") Table ID is tid, TR is the first column TD in trid, and EQ is the index value of TD in parentheses, starting from 0