jQuery ??
??? ??????
jQuery ??? "??"? ???? ?? ???? ??? ???? HTML ??? "??"(?? ??)?? ? ?????. ?? ???? ???? ??? ??? ??? ??? ? ?? ??? ?? ?????.
?? ??? ???? ?????. jQuery ??? ???? ???(??) ???? ???? ????? ?? ??(??), ???(??), ????(??) ??? ? ????. ??? ???? DOM ????? ???.
?? ??:
<div> ??? <ul>? ?? ?????.
<ul> ??? <li> ??? ?? ????
??? <li> ??? < ;span>,
? ?? ?????.???? ?????
- ? ?? ????
- ?
? ?? <li> ??? ?????(??? ?? ??? ??).
???? <li> ??? <ul>? ?? ??? <b>? ?? ???? <div>? ?? ?????.
<b> ??? ???? ?? <li>? ?? ???? <ul>? ?? ?????.
? ?? ?????.????? ???, ????, ??? ?? ????. ??? ??, ??, ??? ????. ????? ?? ??? ?????. ?
jQuery? DOM? ???? ?? ??? ??? ?????.
?? ??? ?? ? ??? ?? ??(tree-traversal)???.
?? ???? DOM ???? ?, ??, ??? ??? ???? ??? ?????.
||
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:300px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="width:300px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
