Home > Developer > JavaScript
JQuery Method for searching sub-elements, jquery Method for searching Elements
This example describes how to search for child elements in jQuery. Share it with you for your reference. The specific analysis is as follows:
1. children () method
Obtains the element set of all child elements of each element in a matched element set. The syntax format is as follows:
Copy codeThe Code is as follows: children ([selector])
$ ("# Menu_ul" ).children().css ("color", "blue ");
2. find () method
Used to find the child element that matches the specified selector expression from each matching element. The format is as follows:
Copy codeThe Code is as follows: find ([selector])
$ ("Ul"). find ("span" ).css ("color", "blue"); // set the text element of the span element under ul to blue
The sample code is as follows:
Copy codeThe Code is as follows: <! 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> Search for child elements of a specified Element </title>
<Script src = "jquery-1.4.2.js" type = "text/javascript"> </script>
<Script language = "javascript" type = "text/javascript">
$ (Document). ready (function (){
$ ("# Login"). children ("input" background .css ("background", "# FCF"); // set the background color for the direct child element of the div Element
$ ("# Login" ).contents().css ("color", "red"); // you can specify the text color of the element's byte points.
$ ("# Tab "). find ("td" ).css ("border", "1px solid blue" ).css ("color", "Green "); // set the border and font color of the td element under the specified div Element
})
</Script>
</Head>
<Body>
<H3> Search for child elements of a specified Element <Div>
<Div id = "login">
Username: <input type = "text" value = "username"/>
Password: <input type = "password" value = "password"/>
<Div> <input type = "submit" value = "Logon"/> <input type = "reset" value = "reset"/> </div>
</Div>
<Div id = "tab">
<Table width = "452" height = "176" border = "1">
<Tr>
<Td> cell </td>
<Td> cell </td>
</Tr>
<Tr>
<Td> cell </td>
<Td> cell </td>
</Tr>
<Tr>
<Td> cell </td>
<Td> cell </td>
</Tr>
<Tr>
<Td> cell </td>
<Td> cell </td>
</Tr>
<Tr>
<Td> cell </td>
<Td> cell </td>
</Tr>
</Table>
</Div>
</Div>
</Body>
</Html>
As follows:
I hope this article will help you with jQuery programming.
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
