attribute selector in jQuery with example

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

attribute selector in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Selectors

Attribute selector returns all the elements from the group of elements matching specified attribute.
Attribute selector can be helpful where one wants to select element on page on basis of attributes.

Example :

 <html>
    <head>
    <title>attribute 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 () {
                $("[href]").css({ 'font-family': 'comic sans ms', 'font-size': '28px' });
            });
        });
    </script>
    </head>
    <body>
    <div>This is div.</div>
    <p>This is paragraph.</p>
    <a href="http://20fingers2brains.blogspot.in/">20fingers2brains</a>
    <button id="myButton" >Click ME</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>

Demo :

In the above example, we have rendered a div, paragraph and an anchor element. We have set href attribute of anchor tag. On click on Click Me button we are selecting all the elements having href attribute and changing its CSS. In above example, anchor tag is only element with href attribute. So the anchor tag is selected and CSS is applied to it.