First, get the parent element
1. Parent ([expr]):
Gets all the parent elements of the specified element
Copy Code code as follows:
<div id= "Par_div" ><a id= "Href_fir" href= "#" >href_fir</a>
<a id= "Href_sec" href= "#" >href_sec</a>
<a id= "Href_thr" href= "#" >href_thr</a></div>
<span id= "Par_span" >
<a id= "Href_fiv" href= "#" >href_fiv</a>
</span>
$ (document). Ready (function () {
$ ("a"). Parent (). addclass (' A_par ');
});
Firebug View jquery Parent Effect
Second, get the sibling elements:
1. Next ([expr]):
Gets the next sibling element of the specified element (note that the next sibling element OH)
Copy Code code as follows:
<! DOCTYPE html>
<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>
<body>
<ul>
<li>list Item 1</li>
<li>list Item 2</li>
<li class= "Third-item" >list item 3</li>
<li>list Item 4</li>
<li>list Item 5</li>
</ul>
<script>
$ (' Li.third-item '). Next (). CSS (' background-color ', ' red ');
</script>
</body>
The result of this example is that only the list item 4 background color turns red
2, Nextall ([expr]):
Gets all sibling elements behind the specified element
Copy Code code as follows:
<div><span>and again</span></div>
var P_nex = $ ("P"). Nextall ();
P_nex.addclass (' P_next_all ');
Pay attention to the last "<p>" label Oh, also was added the ' P_next_all ' this class name Oh ~ ~
3, Andself ():
Gets all sibling elements behind the specified element, followed by the specified element
I feel like this function is the most interesting one function, what does it mean? The literal translation is "also Me", "also has oneself", yes, and own.
Copy Code code as follows:
<p>hello</p><p>hello Again</p><div><span>and Again</span></div>
var P_nex = $ ("P"). Nextall (). Andself ();
P_nex.addclass (' P_next_all ');
Pay attention to the first "<p>" tag, which means to select all the sibling tags that follow the p tag, as well as yourself ...
The following two do not give a specific example, is actually next () and Nextall () the contrary
4, prev (): Gets the previous sibling element of the specified element (is the last OH).
5, Prevall (): Gets all the sibling elements at the front of the specified element.
Third, get child elements
1, find the child element way 1:>
For example: var anods = $ ("ul > a"); Look for all a tags under UL
2, find the child element way 2:children ()
3, find the child element way 3:find ()
Here is a brief introduction to the similarities and differences of the following children () and find ():
1> children and Find methods are used to obtain the element's elements, neither of which returns text node, as most jquery methods do.
The 2> children method obtains only the element one subordinate child element, namely: immediate children.
The 3> Find method obtains all the subordinate elements, namely: descendants of these elements in the DOM tree
The parameter selector of the 4> children method is optional (optionally), which is used to filter the child elements,
However, the parameter selector method of the Find method is required.
The 5> Find method can actually be implemented by using JQuery (selector, context). That is $ (' li.item-ii '). Find (' Li ') equals $ (' li ', ' Li.item-ii ').
Cases:
Copy Code code as follows:
<ul class= "Level-1" >
<li class= "Item-i" >I</li>
<li class= "Item-ii" >ii
<ul class= "Level-2" >
<li class= "Item-a" >A</li>
<li class= "Item-b" >b
<ul class= "Level-3" >
<li class= "Item-1" >1</li>
<li class= "Item-2" >2</li>
<li class= "Item-3" >3</li>
</ul>
</li>
<li class= "Item-c" >C</li>
</ul>
</li>
<li class= "ITEM-III" >III</li>
</ul>
Use: $ (' Ul.level-2 '). Children (). CSS (' border ', ' 1px solid green '); The effect is:
Use $ (' Ul.level-2 '). Find (' Li '). CSS (' border ', ' 1px solid green '); The effect is:
