first, last, eq, not, slice Methods in jQuery Filtering Traversing Methods

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Filtering_Traversing_Methods.css">
    <title>Filtering Traversing Methods</title>
</head>

<body>
    <h1>jQuery Filtering Methods</h1>

    <div id="first">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel harum earum dolor, quis quidem ab possimus
            aliquam atque quod impedit ducimus provident rem facilis placeat corrupti omnis reiciendis blanditiis?
            Repudiandae?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, repudiandae id illum autem nesciunt, tempore
            minima ducimus sequi, excepturi provident corporis. Deleniti nostrum ab nihil a. Praesentium earum inventore
            voluptas.</p>
    </div>
    <ul>
        <li>Orange</li>
        <li>Apple</li>
        <li>Banana</li>
        <li>Grapes</li>
    </ul>
    <div id="second">
        <p class="test">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam impedit quia obcaecati
            maxime et eius libero eum molestiae non eligendi, in illum soluta numquam! Sint temporibus earum inventore
            amet in.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta quas molestiae ad? Nostrum est nemo tempore
            pariatur dignissimos, mollitia illum eaque facere aspernatur repudiandae consequuntur quisquam autem ut
            eveniet tenetur.</p>
    </div>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // $("p").first().css("background","#ff0000");
            // $("#second p").first().css("background","#ff0000");
            // $("p").last().css("background","#ff0000");
            // $("ul li").last().css("background","#ff0000");
            // $("ul li").first().css("background","#ff0000");
            // $("ul li").eq("2").css("background","#ff0000");
            // $("p").eq("2").css("background","#ff0000");
            // $("p").eq("0").css("background","#ff0000");
            // $("p").eq("-1").css("background","#ff0000");
            // $("p").filter(".test").css("background","#ff0000");
            // $("p.test").css("background","#ff0000");
            // $("p").not(".test").css("background","#ff0000");
            // $("#second p").not(".test").css("background","#ff0000");
            // $("ul li").slice(2).css("background","#ff0000");
            // $("ul li").slice(1).css("background","#ff0000");
            // $("ul li").slice(1,3).css("background","#ff0000");
            // $("ul li").slice(0,3).css("background","#ff0000");
            $("p").slice(1, 3).css("background", "#ff0000");
        });
    </script>
</body>

</html>




Below File is css/Filtering_Traversing_Methods.css File.
#first {
    background: #ffe3af;
    border: 1px solid #f8a304;
    padding: 10px;
}

#second {
    background: #e5e5fc;
    border: 1px solid #0000ff;
    padding: 10px;
}


















Comments

Popular posts from this blog

Basic Syntax in jQuery

Event "Target" Property in jQuery