jQuery Contains, Has, Hidden, Visible, Child Selector Example

This example will show you how to use :contains and :has jQuery pseudo-class selector to get web elements by web element content. And how to use :hidden and :visible selector to get web elements that are hidden or visible. It also tells you how to use child selector ( for example :first-child, :last-child, etc) to get child web elements.

1. jQuery :contains() Selector Example.

  1. :contains() selector return web elements which element text contains specified string.
  2. contains-text-selector.html
    jquery-contains-selector-example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Contains Text Selector</title>
        <script src="../../lib/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
                // Get all li that content contains 'Java'.
                $("li:contains('Java')").css({background:"blue", color:"red"});
            });
    
        </script>
    </head>
    <body>
    
    <ul>
        <li>Java</li>
    
        <li>C++</li>
    
        <li>Java Script</li>
    
    </ul>
    
    
    </body>
    </html>

2. jQuery :has() Selector Example.

  1. :has() selector return web elements which has specified child web element.
  2. has-web-element-selector.html
    jquery-has-selector-example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Has Web Element Selector</title>
        <script src="../../lib/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
    
                // Set image web element border style which contained by html a tag.
                $("a:has('img') > img").css({border:"solid 2px red"});
    
            });
    
        </script>
    </head>
    <body>
    
    <a href="#">Image One<br/><img src="../../images/ic_launcher.png"/></a>
    <img src="../../images/ic_launcher_round.png" />
    
    </body>
    </html>

3. jQuery :hidden, :visible Selector Example.

  1. :hidden selector return web elements that have hidden property enabled.
  2. :visible selector return web elements that are visible.
  3. hidden-visible-selector.html
    jquery-hidden-visible-selector-example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hidden Visible Selector</title>
        <script src="../../lib/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
                // Hide odd number p.
                $("p:odd").hide();
    
                // Set odd number p ( hidden p ) text color to red.
                $("p:odd").css({color:'red'});
    
                // Set visible p ( even number p ) text color to blue.
                $("p:visible").css({color:'blue'});
    
                // Show hidden odd p which text color is red again.
                $("p:hidden").show();
            });
    
        </script>
    </head>
    <body>
    
    <p>Java Script</p>
    
    <p>Node JS</p>
    
    <p>Html</p>
    
    <p>Java</p>
    
    <p>Python</p>
    
    <p>C++</p>
    
    </body>
    </html>

4. jQuery :first-child, :last-child and :nth-child(step+start_idx) Selector Example.

  1. :first-child return the first child web element of parent selector while :last-child returns the last child element.
  2. :nth-child(step+start_idx) return child web elements start from start_idx with step intervals.
  3. child-web-element-selector.html
    jquery-first-child-last-child-nth-child-selector-example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Child Web Element Selector</title>
        <script src="../../lib/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
    
            $(function () {
                // Set first li style.
                $("li:first-child").css({background:"blue", color:"yellow"});
    
                // Set last li style.
                $("li:last-child").css({background:"yellow", color:"blue"});
    
                // Set css style for every 3 li begin from second li.
                $("li:nth-child(3n+2)").css({background:"green", color:"red"});
            });
    
        </script>
    </head>
    <body>
    
    <ul>
        <li>Java</li>
    
        <li>C++</li>
    
        <li>Java Script</li>
    
        <li>Node JS</li>
    
        <li>C++</li>
    
        <li>Dot Net</li>
    
        <li>Python</li>
    
        <li>jQuery</li>
    
        <li>Angular JS</li>
    
        <li>Java EE</li>
    
    </ul>
    
    
    </body>
    </html>

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.