jquery中DOM節點操做（六）

時間 2019-11-11

標籤 jquery dom 節點欄目 JQuery 简体版

原文原文鏈接

3. 遍歷後代javascript

children()：用於取得匹配元素的子元素集合，該方法只沿着 DOM 樹向下遍歷單一層級css

find()：返回被選元素的後代元素，一路向下直到最後一個後代html

<!DOCTYPE html>java

<html lang="en">jquery

<head>spa

<meta charset="UTF-8">code

<style type="text/css">htm

.ancestors *{blog

padding: 5px;索引

margin: 15px;

display: block;

border: 2px solid lightgrey;

color: lightgrey;

}

</style>

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

// 遍歷後代

// $("ul").children().css("color","red");

// $("ul").children(".li3").css("color","green");

// $("ul").find("*").css("color","blue");

// $("ul").find(".li3").css("font-size","30px");

});

</script>

</head>

<body class="ancestors">body（曾曾祖父元素）

<div style="width: 500px;">div(曾祖父元素)

<ul>ul(祖父元素)

<li>li1(父元素)<span>span</span></li>

<li>li2</li>

<li class="li3">li3</li>

<li>li4</li>

<li>li5</li>

</ul>

</div>

</body>

</html>

4. 遍歷過濾

first()：返回被選元素的首個元素

last()：返回被選元素的最後一個元素

eq() ：返回被選元素中帶有指定索引號的元素

filter() ：返回匹配的元素

not() ：返回不匹配標準的全部元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style type="text/css">

.ancestors *{

padding: 5px;

margin: 15px;

display: block;

border: 2px solid lightgrey;

color: lightgrey;

}

</style>

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

// 遍歷過濾

$("li").first().css("color","red");

$("li").last().css("color","green");

$("li").eq(2).css("color","blue");

$("li").filter(".li3").css("font-size","30px");

$("li").not(".li3").css("font-size","10px");

});

</script>

</head>

<body class="ancestors">body（曾曾祖父元素）

<div style="width: 500px;">div(曾祖父元素)

<ul>ul(祖父元素)

<li>li1(父元素)<span>span</span></li>

<li>li2</li>

<li class="li3">li3</li>

<li>li4</li>

<li>li5</li>

</ul>

</div>

</body>

</html>

相關文章

相關標籤/搜索

Update誤操做

jQuery Mobile 教程

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<