This article describes how to bind an input file to jquery by using several small examples. Here we will introduce almost all event binding methods in jquery. You can refer to this article.
The simplest way
| The Code is as follows: |
Copy code |
<Html>
<Table class = "ed">
<Tr>
<Td> <input type = "text"> </input> </td>
<Td> <input type = "text"> </input> </td>
<Td> <input type = "button"> </input> </td>
<Td> <input type = "text"> </input> </td>
</Tr>
</Table>
</Html> Example
$ (". Ed input: text)"). eq (3)
$ (". Ed input: text: eq (3 )")
$ (". Ed input [type =" text "]"). eq (3)
$ (". Ed input [type =" text "]: eq (3 )")
|
In. ed, ed is class = "ed ".
In addition to using the class name to bind, we can also use the. bind event to bind
// Main. bind () Event code example:
// Input tag [tag name = 'specified name']. Bind function ("Event", custom function () {operation code ...});
// $ ("Input [name = 'Radio _ tj ']"). bind ("click", function () {alert ($ (this ). val ());});
Example
| The Code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JQuery binding event. bind () binding radio value </title>
<Script src = "../js/jquery. min. js" type = "text/javascript"> </script>
</Head> <Body>
<Form action = "#" method = "post">
<Label for = "tj1">
<Input type = "radio" name = "radio_tj" id = "tj1" value = "1">
Asset </label>
<Label for = "tj2">
<Input type = "radio" name = "radio_tj" id = "tj2" value = "2">
Manage </label>
<Label for = "tj3">
<Input type = "radio" name = "radio_tj" id = "tj3" value = "3">
Schedule </label>
<Label for = "tj4">
<Input type = "radio" name = "radio_tj" id = "tj4" value = "4">
Grid </label>
<Label for = "tj5">
<Input type = "radio" name = "radio_tj" id = "tj5" value = "5" checked>
Geography </label>
<! -- Jquery binds events to trigger behavior when the radio value changes -->
<Script type = "text/javascript">
$ (Document). ready (function (){
// Main. bind () Event code example:
// Input tag [tag name = 'specified name']. Bind function ("Event", custom function () {operation code ...});
// $ ("Input [name = 'Radio _ tj ']"). bind ("click", function () {alert ($ (this ). val ());});
$ ("Input [name = 'Radio _ tj ']"). bind ("click", function (){
// Test the operation code
Alert ($ (this). val ());
Var $ selectedvalue = $ (this). val ();
If ($ selectedvalue = 1 ){
Alert ("you have selected to back up data in the asset range ");
}
Else if ($ selectedvalue = 2 ){
Alert ("select backup management scope data now ");
}
Else if ($ selectedvalue = 3 ){
Alert ("data in the backup scheduling range selected ");
}
Else if ($ selectedvalue = 4 ){
Alert ("you have selected to back up data within the grid range ");
}
Else {
Alert ("you have selected to back up the geographical data ");
}
});
});
</Script>
</Form>
</Body>
</Html> |
If you use version 1.7 or later, refer
The new version adds APIs for. on () and. off () events,
The following is the call format of the two newly added methods:
| The Code is as follows: |
Copy code |
$ (Elements). on (events [, selector] [, data], handler );
$ (Elements). off ([events] [, selector] [, handler]); |
When the selector parameter is provided, the. on () and. delegate () methods are similar,
Filter page elements by selector to enable event delegation.
When selector is omitted or left empty, the. on () and. bind () methods are similar.
When using the. on () method, note that if the data parameter is of the string type,
The selector parameter must not be omitted; otherwise, the data will be mistaken for the selector.
You never need to worry about this special situation when the object provides parameters for data.
All existing event binding methods (and their corresponding unbinding methods ),
It will be retained in version 1.7, but we recommend that you use new APIs.
The following are examples of binding APIs to new events:
| The Code is as follows: |
Copy code |
$ ('A'). bind ('click', myHandler );
$ ('A'). on ('click', myHandler );
$ ('Form'). bind ('submit ', {val: 42}, fn );
$ ('Form'). on ('submit ', {val: 42}, fn );
$ (Window). unbind ('scroll. myplugin ');
$ (Window). off ('scroll. myplugin ');
$ ('. Comment'). delegate ('A. add', 'click', addNew );
$ ('. Comment'). on ('click', 'a. add', addNew );
$ ('. Dialog'). undelegate ('A', 'click. mydlg ');
$ ('. Dialog'). off ('click. mydlg', 'A ');
$ ('A'). live ('click', fn );
$ (Document). on ('click', 'A', fn );
$ ('A'). die ('click ');
$ (Document). off ('click', 'A '); |
