TechnoTips : Part 5 - Attribute Selectors in JQuery?

Sunday, November 26, 2017

Part 5 - Attribute Selectors in JQuery?

Selectors in JQuery?

A jQuery selectors selects or finds a DOM element in an HTML document. It is used to select HTML elements based on id, name, types, attributes, class etc.

popular selectors

Id selectors
Class selectors
Element selectors
Attribute selectors

For selecting input elements like Select, TextArea, Button, Image, Radio etc. we can use $(“:input”) selector. It will return a collection of input elements.
Example: $(":input[type='button']") , $(":input[type='radio']")

Attribute Selectors in JQuery:
In this tutorial only Attribute selectors are explained. Attribute selectors are used to select element by attribute names. For example href, title, style, etc.

# Example

Replace your html code with below code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>

    <script>

        $(document).ready(function () {

           // $("span ").css({ "border": "2px solid red", "padding": "10px" });

           // $("table th").css({ "background-color": "red", "color": "white" });

           // $("table tr:even").css({ "background-color": "blue", "color": "white" });

           //$("table tr:odd").css({ "background-color": "yellow", "color": "black" });

           // $("p:first").css({ "border": "2px solid blue", "padding": "10px" });
           // $("p:last").css({ "border": "2px solid blue", "padding": "10px" });

            $("div[title]").css({ "border": "2px solid blue", "padding": "10px" });

            $("a[href='google.com']").css({ "border": "2px solid red", "padding": "10px" });

        })
              


    </script>

</head>
<body>

    <div title="div1" style="margin-bottom:50px;padding:10px">
        <a href="google.com">click</a>
        <span>child1  </span>
    </div>

    <div title="div2" style="margin-bottom: 50px;padding:10px">
        <a title="mylink" href="technotipstutorial.blogspot.com">click</a>
        <span>child2  </span>
    </div>


    <div title="div3" style="margin-bottom: 50px;padding:10px">
        <table border="1" style="width:30%">
            <tr>
                <th>
                    Name
                </th>
                <th>Department</th>
            </tr>
            <tbody>
                <tr><td>Ashish</td><td>Development</td></tr>
                <tr><td>John</td><td>QA</td></tr>
                <tr><td>Sara</td><td>Development</td></tr>
                <tr><td>Lara</td><td>Implementation</td></tr>
                <tr><td>Methew</td><td>Development</td></tr>
                <tr><td>Ashish</td><td>Development</td></tr>

            </tbody>

        </table>
    </div>
    <span title="span1" style="margin-bottom: 50px;padding:10px">
       span1
    </span>

    <span title="span2" style="margin-bottom: 50px;padding:10px">
        span2
    </span>


   

</body>
</html>

TechnoTips

Labels

Sunday, November 26, 2017

Part 5 - Attribute Selectors in JQuery?

No comments: