How To Select All DOM Elements In Jquery

By pushpam abhishek • •

Listen to this article

jquery select all DOM elements

In this topic, we will see how to select all DOM elements in jquery with example.

Select All DOM Elements:-

In some cases, we need to select all DOM elements or other elements. You can select every element on a page by using the * character (wildcard selector). The wildcard is wrapped in quotes between the parentheses directly after the $ sign ($(‘*’)). When you pass wildcard (*) selector to the jquery(‘*’ ) function or the $(‘*’) function, which is the same thing, you select all DOM elements. In general, it’s practical to use the * selector when you want to assign a CSS style or an attribute to every element on a page.

Note:- The wildcard selector always includes the * symbol. Without that symbol, the selector won’t work correctly. The wildcard selector selects all DOM elements.

Select All DOM Elements – Example 1

In the following example, we select all the elements on the page with the wildcard selector and add a CSS border to each element. To add a CSS border, we use the method .css(‘border’,’1px solid #333′);.


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('*').css('border','1px solid #333');
        });
    </script>

</head>
<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</body>
</html>

Output

$(‘*’).css(‘border’,’1px solid #333′); This line tells jquery to select all DOM elements and set the css(‘border’,’1px solid #333′); CSS style.

.css() function can retrieve or add CSS properties to any element.

Select All DOM Elements – Example 2

In the following example, we will see how to check all the Checkboxes using $(‘*’).attr(‘checked’,’checked’);


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('*').attr('checked','checked');
        });
    </script>
</head>
<body>

<input id="check1"  type="checkbox">checkbox1<br>
<input id="check2"  type="checkbox">checkbox2<br>
<input id="check3"  type="checkbox">checkbox3<br>
<input id="check4"  type="checkbox">checkbox4<br>
<input id="check5"  type="checkbox">checkbox5
</body>
</html>

OutPut:-

Share this post

About pushpam abhishek

Pushpam Abhishek is a Software & web developer and designer who specializes in back-end as well as front-end development. If you'd like to connect with him, follow him on Twitter as @pushpambhshk

AdBlock Detected

How To Select All DOM Elements In Jquery

jquery select all DOM elements

Select All DOM Elements:-

Select All DOM Elements – Example 1

Select All DOM Elements – Example 2

Share this post

About pushpam abhishek

Comments

AdBlock Detected

Saved Tutorials

How To Select All DOM Elements In Jquery

jquery select all DOM elements

Select All DOM Elements:-

Select All DOM Elements – Example 1

Select All DOM Elements – Example 2

Share this post

About pushpam abhishek

You Might Also Like

Comments