Selectors in jQuery

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Selectors</title>
    <style>
        body {
            font-family: arial
        }

        #box {
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <!-- Targeting DOM Element with ID, Class & Tag
        Select by Id : $("#idName")
        Select by Class Name : $(".className")
        Select by Tag Name : $("tagName"), For Example: $("p") -->

    <h1>jQuery Selectors</h1>
    <div id="box" class="test">
        <h2>Test Box 2</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere vero nulla ut quod autem id molestias,
            mollitia deserunt in sint. Fugit unde culpa repellat a facere exercitationem dicta quas velit.</p>
    </div>

    <ul id="list">
        <li>Orange</li>
        <li class="test">Banana</li>
        <li>Grapes</li>
        <li class="test">Apple</li>
        <li>Guava</li>
        <li class="test">Pineapple</li>
        <li>OrangeTwo</li>
        <li class="test">Strawberry</li>
        <li>GrapesTwo</li>
        <li class="test">coconut</li>
        <li>GuavaTwo</li>
    </ul>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#list").css("color", "red");
            $("#list").css("border", "5px solid blue");
            $("#list li").css("border", "2px solid brown");
            $(".test").css("border", "5px solid orange");
            $("li:first").css("border", "5px solid black");
            $("li:last").css("border", "5px solid grey");
            $("ul li:eq(2)").css("border", "5px solid yellow");
            $("ul li:eq(3)").css("border", "5px solid purple");
            $("ul li:gt(3)").css("border", "5px solid teal");
            // $("ul li:lt(3)").css("border", "5px solid black");
        });
    </script>
</body>

</html>



Comments

Post a Comment

Popular posts from this blog

Basic Syntax in jQuery

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < link rel = "stylesheet" href = "css/style.css" > </ head > < body >     < h1 > jQuery Syntax </ h1 >     < div id = "test1" >         < h2 > Test Box 1 </ h2 >         < p > Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel aliquid molestias cum maiores perferendis             accusantium odit tempora doloribus aperiam, deserunt aliquam, magnam porro nihil quas qui dolorum placeat,             delectus aspernatur. </ p >     </ div >     < div id = "test2" >         < h2 > Test Box 2 </ h2 >  ...
Read more

Event "Target" Property in jQuery

Image
  <! 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/Event_Target_Property.css" >     < title > Event Target Property </ title > </ head > < body >     < h1 > jQuery Event.target Property </ h1 >     < div id = "box" >         < h2 > Test Box </ h2 >         < p > Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab, expedita rem maiores doloribus veritatis,             magnam, vitae placeat officiis laboriosam itaque velit autem! Impedit eos, adipisci numquam corrupti hic             r...
Read more