TechnoTips : Part 4 - Element selectors in JQuery?

Sunday, November 26, 2017

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>

TechnoTips

Labels

Sunday, November 26, 2017

Part 4 - Element selectors in JQuery?

No comments: