Sử dụng các hàm trong jQuery để lựa chọn phần tử trong DOM

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
Sử dụng các hàm trong jQuery để lựa chọn phần tử trong DOM

Ở đây chúng ta sẽ 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 ...
screenshot_1590975440.png

Các bạn sử dụng các đoạn code sau đây để xem sự thay đổi của nó nhé.

file CSS: css.css
Mã:
.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
Mã:
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
Mã:
<!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>

Chúc các bạn thành công.


Nguồn: Internet​
 

Top Bottom