star selector in jQuery with example

Home » JQuery » jQuery Selectors » star selector in jQuery with example

star selector in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Selectors

* selector selects all the elements in the page.

Example :

    <html>
    <head>
    <title>star 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 () {
                $("*").css({ 'font-family': 'comic sans ms', 'background-color': 'Yellow' });
            });
        });
    </script>
    </head>
    <body>
    <div>This is div.</div>
    <p>This is paragraph.</p>
    <span>This is span.</span><br/>
    <button id="myButton" >Click ME</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :

In the above example, we have used star selector. Star selector selects all the elements on the page. In above example, it selects all the elements and applies CSS to all of them.
Star selector can be used where we want to apply CSS or other text changes to all the elements on the page.

Example 2 :

    <html>
    <head>
    <title>star 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 () {
                $("*").css("font-family", "comic sans ms").wrap("<h2>");
            });
        });
    </script>
    </head>
    <body>
    <p>This is example for star selector.</p>
    <p>It is also known as Universal Selector.</p>
    <p>Star Selector selects all the elements on the document.</p>
    <input type="button" id="myButton" value="Click" /> 
    <input type="button" value="Reset" onclick="location.reload()" />
    </body>
    </html>

Demo :

In the above example, we have created 3 paragraph element. On button click, we are selecting all the elements on the page including buttons in a jQuery object.
Star selector selects all the elements on the document. Then using css() method CSS for all the elements is changed and all the elements were rendered using h2 element using wrap() method.