jQueryトラバーサル
トラバーサルとは何ですか?
jQuery トラバーサルは「移動」を意味し、他の要素との関係に基づいて HTML 要素を「検索」(または選択) するために使用されます。選択範囲から開始し、目的の要素に到達するまでこの選択範囲に沿って移動します。
下の写真は家系図を示しています。 jQuery トラバーサルを使用すると、選択した (現在の) 要素から開始して、家系図内で上 (祖先)、下 (子孫)、および水平 (兄弟) に簡単に移動できます。この移動は DOM のトラバースと呼ばれます。
イラスト分析:
<div> 要素は <ul> 内のすべてのコンテンツの祖先です。
<ul>要素は<li>の子要素です
左側の<li>要素は<span>の子要素です
- 要素の子孫であり、
- の子であり、
- と
- の子であり、
- と
の両方の子孫です。DOM の走査
jQuery には、DOM を走査するためのさまざまなメソッドが用意されています。
トラバーサル手法の最も大きな種類はツリートラバーサル (ツリートラバーサル) です。
の子孫です。学び続ける2 つの <li> 要素は兄弟です (同じ親要素を持っています)。
右側の <li> 要素は <b> の親要素、<ul> の子要素、<div> の子孫です。
要素は、右側の
- の子であり、
の子孫です。
要素は、
||
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
