has and is method in jQuery

 <!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/has_and_is_Method.css">
    <title>has and is Method</title>
</head>

<body>
    <h1>jQuery has() & is() Method</h1>

    <div id="first">
        <p>Lorem, ipsum dolor sit amet <b>consectetur adipisicing elit.</b> Dicta praesentium voluptas porro
            dignissimos, enim
            et ad unde consequatur delectus magni facere autem qui laborum! Illo voluptates sint beatae animi vel.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ipsa totam impedit nesciunt adipisci
            quidem distinctio praesentium quaerat libero aperiam sed culpa, consequuntur quas officiis facilis debitis
            enim accusantium ut.</p>
    </div>
    <ul>
        <li>Orange</li>
        <li><span>Apple</span></li>
        <li>Banana</li>
        <li>Grapes</li>
    </ul>
    <p class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas iste iure id alias, dolores veritatis
        facere provident officiis? Reprehenderit incidunt totam at ratione commodi itaque impedit dolorem dolorum
        perferendis tempore.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing <span class="test">elit. Mollitia quod</span> sequi aut odit,
        illo modi voluptatem
        obcaecati delectus rem error accusamus vitae atque alias dignissimos, adipisci inventore, culpa quas facere?</p>
    <script src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            // $("p").has("span").css("background","#ff0000");
            // $("p").has("b").css("background","#ff0000");
            // $("p").has("b,span").css("background","#ff0000");
            // $("li").has("b,span").css("background","#ff0000");
            // $("p").has(".test").css("background","#ff0000");    //has() method checks for his children

            //is() method gives result true OR false
            // if($("p").parent().is("div"))
            // {
            //     console.log($("p").parent().is("div"));
            // }

            $("p").click(function () {
                if ($(this).parent().is("div")) {
                    $(this).css("background", "#ff0000");
                }
            });
        });
    </script>
</body>

</html>





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








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