TechnoTips : JQuery Selectors

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>

Part 4 - Element selectors in JQuery?

What are 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']")

ID and Class selectors
In this tutorial only Element selectors are explained. Element selectors are used to select element by element name. For example: div, p, span, h1, h2 etc.

# Example

Replace your html code with below code and try to show alert on button click in Jquery

<!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" });

           
        })
              


    </script>

</head>
<body>

    <div class="div1" style="margin-bottom:50px;padding:10px">
        <button>click</button>
        <span>child1  </span>
    </div>

    <div class="div2" style="margin-bottom: 50px;padding:10px">
        <button>click</button>
        <span>child2  </span>
    </div>


    <div>
        <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>
    
    <h1>header1</h1>
    <h2>header2</h2>
    <h3>header3</h3>

    <p>paragraph 1</p>
    <p>paragraph 2</p>
    <p>paragraph 3</p>

</body>
</html>

Part 3 - What are jQuery Selectors? | ID and class selectors

What are 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']")

ID and Class selectors
In this tutorial only ID and class selectors are explained. If we select element by its id the we need to use $('#element_id') and if we access element by class name then we need to use $('.ClassName')

# Example

Replace your html code with below code and try to show alert on button click in Jquery

<!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 () {

           //Class selector example
            $(".div1,.div2").css({ "border": "2px solid red", "padding": "10px" });

            //Id selector example
            // $("#myDiv").css({ "border": "2px solid blue", "padding": "10px" });

        })

    </script>

</head>
<body>

    <div id="myDiv" class="div1" style="margin-bottom:50px;padding:10px">
        <button>click</button>
        <span>child1  </span>
    </div>

    <div class="div2" style="padding:10px">
        <button>click</button>
        <span>child2  </span>
    </div>

</body>
</html>

TechnoTips

Labels

Sunday, November 26, 2017

Part 5 - Attribute Selectors in JQuery?

Part 4 - Element selectors in JQuery?

Part 3 - What are jQuery Selectors? | ID and class selectors