Di chuyển trong DOM
Khái niệm về DOM tìm hiểu tại DOM Cơ bản, ở đây xem sự di chuyển trong DOM, đưa ra sự lựa chọn căn cứ theo phần tử đang chọn như phần tử cha, con ...Xem các hàm sau (DOM tree giống cây phả hệ):
- .parent() lấy phần tử cha trực tiếp của phần tử.
- .parents() lấy phần tử các phần tử cha (kể cả không trực tiếp)
- .children() lấy các phần tử con
- .siblings() các phần tử ngang hàng (anh em)
- .next() phần tử ngang hàng tiếp theo
- .nextAll() tất cả các phần tử ngang hàng tiếp theo
- .prev() phần tử ngang hàng trước
- .prevAll() tất cả các phần tử ngang hàng phía trước
- .eq(index) phần tử có thứ tự index trong tập hợp chọn được
- .find() tìm phần tử trong các phần tử con, cháu ...
phần tử p
phần tử div
phần tử p
phần tử p
phần tử p
phần tử chọn
phần tử div
phần tử div
phần tử p phần tử i
phần tử h5 phần tử span
phần tử div
phần tử p
phần tử p
phần tử p
phần tử div
Mã cho ví dụ trên
Tải về tại: vidujquery-Traversal
file CSS: css.css
.boxvd, .boxvd * {
padding: 5px;
margin: 2px;
border: 1px dotted gray;
list-style: none;
font-weight: normal;
color: black;
display: block;
background-color: rgba(128,128,128,0.05);
}
#selectedele {
font-weight: bold;
color: orangered;
border: 1px solid #00CC00;
}
#buttonxt button {
background-color: orangered;
border: none;
margin: 3px 0;
}
.traversal {
animation-name: keyframes1;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes keyframes1 {
0% {
background-color: red;
color: black;
opacity: 0;
}
100% {
color: #e91e63;
border: 1px solid #e91e63;
opacity: 1;
background-color: rgba(128,128,128,0.05);
}
}
file JavaScript: js.js
function reset() {
$(".boxvd *").removeClass("traversal");
}
function parent_ele() {
reset();
$("#selectedele").parent().addClass("traversal");
}
function children_ele() {
reset();
$("#selectedele").children().addClass("traversal");
}
function siblings_ele() {
reset();
$("#selectedele").siblings().addClass("traversal");
}
function next_ele() {
reset();
$("#selectedele").next().addClass("traversal");
}
function nextAll_ele() {
reset();
$("#selectedele").nextAll().addClass("traversal");
}
function prev_ele() {
reset();
$("#selectedele").prev().addClass("traversal");
}
function prevAll_ele() {
reset();
$("#selectedele").prevAll().addClass("traversal");
}
function eq_ele() {
reset();
$("#selectedele").nextAll().eq(1).addClass("traversal");
}
function find_ele() {
reset();
$("#selectedele").find('i,span').addClass("traversal");
}
file HTML: vidu.html
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ jQuery DOM HTML</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script src="js.js"></script>
<link href="css.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<div class="boxvd">
<p>phần tử p</p>
<div>phần tử div
<p>phần tử p</p>
<p>phần tử p</p>
<p>phần tử p</p>
<div id="selectedele">phần tử chọn
<div>phần tử div</div>
<div>phần tử div
<p>phần tử p <i>phần tử i</i></p>
<h5>phần tử h5 <span>phần tử span</span></h5>
</div>
<div>phần tử div</div>
</div>
<p>phần tử p</p>
<p>phần tử p</p>
<p>phần tử p</p>
</div>
<p>phần tử div</p>
</div>
<div id="buttonxt">
<button onclick="reset()">Reset</button>
<button onclick="parent_ele()">parent()</button>
<button onclick="children_ele()">children()</button>
<button onclick="siblings_ele()">siblings()</button>
<button onclick="next_ele()">next()</button>
<button onclick="nextAll_ele()">nextAll()</button>
<button onclick="prev_ele()">prev()</button>
<button onclick="prevAll_ele()">prevAll()</button>
<button onclick="eq_ele()">eq(1)</button>
<button onclick="find_ele()">find('i,span')</button>
</div>
</body>
</html>
