Introduction
JQuery-Selectors:
A jQuery selector is a function which makes use of expression to find out matching elements from a DOM based on the given criteria.
How to use Selectors?
Jquery selectors are very useful and are required at every step while using jQuery. They get the exact element of HTML document that you use. Following table is lists down few basic selectors and explains them with examples.
| Selector | Description |
|---|---|
| Name | Selects all elements which match with the given element name. |
| #ID | Selects a single element which matches with the given ID. |
| Class | Selects all elements which matches with the given class. |
| Universal(*) | Selects all elements available in a DOM. |
| Multiple Elements E,F,G | Selects the combined results of all the specified selectors E, F, or G |
jQuery-CSS Element Selector:
Description: The element selector selects all the elements that have a tag name of T. 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
$(‘tagname’)
//Any standard HTML tag name like div, p, em, img, li etc.
Example:
- $(‘p’) selects all elements with a tag name of p in the document.
- $(‘div’) selects all elements with a tag name of div in the document.
<html>
<head>
<title>Title Selecter Example</title>
<script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”>
</script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function(){
/*This would select all the divisions*/
var divs=$(“div”);
for(i=0; i<divs.length;i++){
alert(“Found Division: ”+ divs[i].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 a para inside third division</p>
</div>
</body>
</html>
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment