Introduction
jQuery-CSS Element ID Selector
Description:
The element ID selector selects a single element with the given ID attribute. Here is the description of all the parameters used by this selector.
Syntax: Here is the simple syntax to use this selector:
$(‘#elementid’)
Elementid: This would be an element ID. If the id contains any special characters like periods or colons you have to escape those characters with backslashes. Like any other jQuery selector, this selector also returns an array filled with the found element.
Example:- $(‘#myid’) selects a single element with the given id myid.
- $(‘div#yourid’) selects a single division with the given id yourid.
<html> <head> <title>The selector Example</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”> </script> <script type=”text/javascript” language=”javascript”> $(document).ready(function(){ var divs=$(“#divid2”); alert(“Found Division:”+divs[0].innerHTML); }); </script> </head> <body> <div class=”div1” id=”divid1”> <p class=”para1” id=”pid1”>This is first paragraph</p> <p class=”para2” id=”pid2”>This is second paragraph</p> <p class=”para3” id=”pid3”>This is third paragraph</p> </div> <br /> <div class=”div2” id=”divid2”> <p>This is second division of the DOM.</p> </div> <br/> <div class=”div3” id=”divid3”> <p>This is para inside third division</p> </div> </body> </html>
jQuery-CSS Element Class Selector
Description: The element class selector selects all the elements which match with the given class of the elements. Here is the description of all the parameters used by this selector. Like any other jQuery selector, this selector also returns an array filled with the found elements.
Syntax: Here is the simple syntax to use this selector:
$(‘.classid’)
Example:
- $(‘.big’) selects all the elements with the given class ID big.
- $(‘p.small’) selects all the paragraphs with the given class ID small.
- $(‘.big.small’) selects all the elements with a class of big and small.
<html> <head> <title>The Selector Example</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”> </script> <script type=”text/javascript” language=”javascript”> $(document).ready(function(){ var divs=$(“.big”); for(i=0; i<divs.length; i++){ alert(“Found Division:”+divs[0].innerHTML); } }); </script> </head> <body> <div class=”big” id=”divid1”> <p class=”para1” id=”pid1”>This is first paragraph</p> <p class=”para2” id=”pid2”>This is second paragraph</p> <p class=”para3” id=”pid3”>This is third paragraph</p> </div> <br /> <div class=”big” id=”divid2”> <p>This is second division of the DOM.</p> <p>This is the second para inside the second division.</p> </div> <br/> <div class=”medium” id=”divid3”> <p>This is para inside third division</p> </div> </body> </html>
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment