Part 4: JQuery Iteration
1 ):
How to determine whether an object exists? The JQuery selector returns an array of objects, calling text (), html (), and click () in this case, each method is called iteratively for each element in the array. Therefore, even if the element selected by id does not exist, no error is returned. If the specified id exists, you should write:
<Script type = "text/javascript">
$ (Function (){
Var result = $ ("# btn12 ");
If (result. length <= 0)
{Alert ("the specified button is not found ");}
Else {
Result. mouseover (function () {alert ("moved up. ");});
}
});
</Script>
Write this in the body:
<Body>
<Input type = "button" id = "btn1" class = "waring" value = "OK"/>
<Input type = "button" id = "btn2" class = "waring" value = "cancel"/>
</Body>
2) node traversal:
[1]. The next () method is used to obtain the first peer element after a node. The example is as follows:
Write several divs in the body.
<Body>
<Div> aaa </div>
<Div> bbb </div>
<Div> ccc </div>
<Div> ddd </div>
</Body>
<Script type = "text/javascript">
$ (Function () {$ ("div"). click (function () {alert ($ (this). next (). text ());})});
</Script>
In this way, the Text content of the next div is displayed when you click each div.
[2] and the. nextAll () method is to display all the content after it and include the elements in it ()
You can also add a filter to it in. nextAll ("div"), that is, only the content in the div element is displayed.
So what is the purpose of traversing this node?
The following code is helpful: You can change the background of all the divs behind a div to red when you click a div:
$ (Function () {$ ("div "). click (function () {$. each ($ (this ). nextAll ("div"), function () {detail (thisground .css ("background", "red ");});})});
Note that $. each () is not used in the preceding section. Because JQuery automatically iterates, it can be written as follows:
$ (Function () {$ ("div "). click (function () {$ (this ). nextAll ("div" ).css ("background", "red ");});});
[3] siblings (); used to obtain the elements of all peers: whether it is the back or the front side, pay attention to the above. nextAll (). next () refers to the element after this element.
$ (Function () {$ ("div" ).click(function(){((this).css ("background", "red"); $ (this ). siblings ("div" ).css ("backgroud", "yellow ");})});
[The code above shows JQuery's chained programming can also be written as follows: $ (function () {$ ("div" ).click(function(){$(this).css ("background", "red "). siblings ("div" ).css ("backgroud", "yellow") ;}}); that is, it is no problem to concatenate events of an object and keep them together. However, it is safer to write data one by one to reduce errors.
]
Part 5 filter Selector
A small part:
1): first selects the first element. For example, $ ("# div: first") selects the first <div>.
2): last selects the last element. $ ("# Div: last") Select the last <div>.
3): not (selector) selects elements that do not meet the selector condition.
$ ("Input: not (. myClass)") means to select <input> which is not myClass.
4): even,: odd. Select an odd index and an even number of elements: $ ("input: even") <input>
5): eq (index serial number), gt (), lt () Select an element whose index is equal to, greater than, less than the index serial number, for example, $ ("input: lt (5) ") Select <input>
For example, the table is subject to the following code:
<Script type = "text/javascript">
$ (Function (){
$ ("# Test tr: first" ).css ("fontSize", "36"); $ ("# test tr: last" ).css ("color", "red "); $ ("# test tr: gt (0): lt (3)" Development .css ("fontSize", "20 ");
$ ("# Test tr: gt (0): even" ).css ("background", "red ");
$ ("# Test tr: gt (0): odd" ).css ("background", "yellow ");
});
</Script>
6): You can not only use the selector for absolute positioning, but also perform relative positioning, as long as you specify the second parameter in $ (), the second parameter is the relative element. $ ("Ul", expires (this)).css ("background", "red ");
In this example, modify the background color of all the tdr rows. The Code is as follows:
<Script type = "text/javascript">
$ (Function () {$ ("# t1 tr "). click (function () {$ ("td", role (this)).css ("background", "red ");});});
</Script>
It's okay to write in the body like this.
<Table id = "t1">
<Tr> <td> sdfsd </td> <td> sdfsdfsdf </td> <td> sdfsdfsdfsd </td> </tr>
<Tr> <td> replacement and replacement </td> <td> sdfsdfsd </td> </tr>
</Table>
Two small parts:
1) attribute filter selector:
$ ("Div [id]"); select <div> -- $ ("div [div1]") with the id attribute.
$ ("Div [title = test]") Select the div whose title attribute is "test"
$ ("Input [name = abc]") or $ ("input [name! = Test] ")
2) form object selector (filter)
$ ("# Form1: enable") select all enabled elements in the form with id form1.
$ ("# Form1: disabled") select all the disabled elements in the form with id form1.
$ ("Input checked") select all selected elements (Radio. CheckBox)
$ ("Select: selected") select all selected option elements (drop-down list );
Example: when some checkboxes are selected and a button is clicked, the text is displayed:
Write in bodyk as follows:
<Body>
<Input type = "checkbox" value = "Beijing"/> Beijing <br/>
<Input type = "checkbox" value = "Nanjing"/> Nanjing <br/>
<Input type = "checkbox" value = "Tokyo"/> Tokyo <br/>
<Input type = "checkbox" value = "Xi'an"/> Xi'an <br/>
<Input type = "button" value = "show selected text"/>
</Body>
The JQuery script is written as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("Input [value = show selected text]"). click (function (){
Alert ($ ("input: checked"). val ());
});
});
</Script>
Note that at $ ("input: checked"), there must be no spaces on both sides. In this case, only the first selected item is displayed. each (). iteration.
Write in the body as follows:
<Body>
<Input type = "checkbox" name = "names" value = "Sun yebao"/> sun yebao <br/>
<Input type = "checkbox" name = "names" value = "Wang Dan"/> Wang Dan <br/>
<Input type = "checkbox" name = "names" value = "zhangchao"/> zhangchao <br/>
<Input type = "checkbox" name = "names" value = "Chen Haibo"/> Chen Haibo <br/>
<P id = "showname"> </p>
</Body>
The script is written as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("Input [name = names]"). click (function (){
Var arr = new Array ();
$ ("Input [name = names]: checked"). each (function (key, value ){
Arr [key] = $ (value). val ();
});
$ ("# Showname"). text ("You selected" + arr. length + "item" + arr. join (","));
});
});
</Script>
3)
$ (": Input") select all <input>, <textarea>, <select>, <button> elements. And
$ ("Input") is different. The former Selects all the controls whose original values are input, while the latter selects only
$ (": Text") is equivalent to $ ("input [type = text]"), but simply Selects all single-line text boxes.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
