class selector in jQuery with example




1. class selector returns all the element with the specified class.
2. We can specify more that two classes as well. To select element with more than two classes, you need to specify classes separated by space.



Example 1 :




    <html>
    <head>
    <title>Class Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".myButton").click(function () {
                $(".myDiv").css({ 'font-size': '20px', 'background-color': 'Orange' });
            });
        });
    </script>
    </head>
    <body>
    <div class="myDiv">This is div.</div>
    <button class="myButton">Click Me</button>
    <button onclick="location.reload();">Reset</button>
    </body>
    </html>
    

Demo :





 In the above example, we have used class selector. Class selector select the elements with the specified class. In above example, it selects the elements with specified class and applies CSS to it.


0 comments:

Post a Comment