jQuery : How to select all elements of the page?

To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. jQuery provides many selectors out of the box.


To select all elements of the page, we can use all selectors, for that we need to use * (asterisk symbol).

<script language="javascript" type="text/javascript">
$("*").css("border", "5px dashed green");
</script> 

Above code will select all elements of the web page and apply border width as 5 pixel, style as dashed and color as green.

Example

<h3>All Selectors</h3>
 
    <div>
        <p id="p1">
            jQuery selector is used to select a particular type of element or element of a particular
            Id, or class used</p>
        <p class="class1">
            Class - jQuery selector is used to select a particular type of element or element
            of a particular Id, or class used</p>
    </div>
    <div id="div2">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
    </div>
    <input id="txtName" type="text" />
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("*").css("border", "5px dashed red");
        });
    </script>
<!-- START - Navigations Links -->
<hr />
<p><a href="Default.aspx" title="Back to Selectors">Back to Selectors</a> | <a href="../" title="Back to jQuery Demo Home">Back to jQuery Demo Home</a> </p>
<!-- END - Navigations Links -->