jQuery ?? ??
jQuery ??
??? ??????
jQuery ??? "??"? ???? ?? ???? ??? ???? HTML ??? "??"(?? ??)?? ? ?????. ?? ???? ???? ??? ??? ??? ??? ? ?? ??? ?? ?????.
?? ??? ???? ?????. jQuery ??? ???? ???(??) ???? ???? ????? ?? ??(??), ???(??), ????(??) ??? ? ????. ??? ???? DOM ????? ???.
<div> ??? <ul>? ?? ???? ? ?? ?? ?? ???? ?????.
<ul> ??? <li> ??? ?? ????
??? <li> ??? <span>? ?? ?????. ? ??? ? ?? <li> ??? ?????(??? ?? ??? ??). ???? <li> ??? <ul>? ?? ??? <b>? ?? ???? <div>? ?? ?????. <b> ??? ???? ?? <li>? ?? ???? <ul>? ?? ?????. ??? ??: ??? ???, ????, ?????? ????. ??? ??, ??, ??? ????. ????? ?? ??? ?????. jQuery ?? - ?? ??? ???, ????, ?????? ????. jQuery? ???? DOM ??? ???? ??? ??? ?? ? ????. DOM ?? ?? ?? ? jQuery ???? DOM ??? ???? ? ?????. parent()parents()parentsUntil() jQuery parent() ??? parent() ???? ??? ?? '? ?????. ? ?? ?? ?????. ? ??? DOM ??? ? ?? ??? ?????. jQuery parents() ??? parents() ???? ??? ??? ?? ?? ??? ??? ?? ??(<html>)?? ?????. ?? ???? ?? <span> ??? ?? ?? ??? ?????. jQuery parentUntil() ??? parentsUntil() ???? ??? ? ?? ??? ?? ?? ??? ?????. A ?? ?? ?
?
<!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").parents().css({"color":"yellow","border":"1px solid pink"});
});
</script>
</head>
<body class="ancestors">body (曾曾祖父元素)
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>