JQUERY - SELECTORSThe jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM). A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. The $() Factory Function All type of selectors available in jQuery, always start with the dollar sign and parentheses:$(). The factory function $() makes use of the following three building blocks while selecting elements in a given document:
NOTE: The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $(). Example Following is a simple example which makes use of Tag Selector. This would select all the elements with a tag name p.
<html>
<head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { var pars = $("p"); for( i=0; i<pars.length; i++ ){ alert("Found paragraph: " + pars[i].innerHTML); } }); </script> </head> <body> <div> <p class="myclass">This is a paragraph.</p> <p id="myid">This is second paragraph.</p> <p>This is third paragraph.</p> </div> </body> </html> This will produce the the following result: This is a paragraph. This is second paragraph. This is third paragraph. How to Use Selectors? The selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document. Following table lists down few basic selectors and explains them with examples.
Description The element selector selects all the elements that have a tag name of T. Syntax Here is the simple syntax to use this selector −
$('tagname')
Parameters 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. Example
<html>
<head> <title>The Selecter Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { /* This would select all the divisions */ $("div").css("background-color", "yellow"); }); </script> </head> <body> <div class="big" id="div1"> <p>This is first division of the DOM.</p> </div> <div class="medium" id="div2"> <p>This is second division of the DOM.</p> </div> <div class="small" id="div3"> <p>This is third division of the DOM</p> </div> </body> </html> This will produce the following result: This is first division of the DOM. This is second division of the DOM. This is third division of the DOM jQuery - Element ID Selector Description The element ID selector selects a single element with the given id attribute. Syntax Here is the simple syntax to use this selector −
$('#elementid')
Parameters 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 element. Example
<html>
<head> <title>The Selecter Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { /* This would select second division only*/ $("#div2").css("background-color", "yellow"); }); </script> </head> <body> <div class="big" id="div1"> <p>This is first division of the DOM.</p> </div> <div class="medium" id="div2"> <p>This is second division of the DOM.</p> </div> <div class="small" id="div3"> <p>This is third division of the DOM</p> </div> </body> </html> This will produce the following result: This is first division of the DOM. This is second division of the DOM. This is third division of the DOM jQuery - Element Class Selector Description The element class selector selects all the elements which match with the given class of the elements. Syntax Here is the simple syntax to use this selector:
$('.classid')
Parameters 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. Example
<html>
<head> <title>The Selecter Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { /* This would select second division only*/ $(".big").css("background-color", "yellow"); }); </script> </head> <body> <div class="big" id="div1"> <p>This is first division of the DOM.</p> </div> <div class="medium" id="div2"> <p>This is second division of the DOM.</p> </div> <div class="small" id="div3"> <p>This is third division of the DOM</p> </div> </body> </html> This will produce the following result: This is first division of the DOM. This is second division of the DOM. This is third division of the DOM jQuery - Universal Selector Description The universal selector selects all the elements available in the document. Syntax Here is the simple syntax to use this selector −
$('*')
Parameters Here is the description of all the parameters used by this selector −
* − A symbolic star.
Returns Like any other jQuery selector, this selector also returns an array filled with the found elements. Example
<html>
<head> <title>The Selecter Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { /* This would select all the elements */ $("*").css("background-color", "yellow"); }); </script> </head> <body> <div class="big" id="div1"> <p>This is first division of the DOM.</p> </div> <div class="medium" id="div2"> <p>This is second division of the DOM.</p> </div> <div class="small" id="div3"> <p>This is third division of the DOM</p> </div> </body> </html> This will produce the following result: This is first division of the DOM. This is second division of the DOM. This is third division of the DOM jQuery - Multiple Elements Selector Description This Multiple Elements selector selects the combined results of all the specified selectors E, F or G. You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical. Syntax Here is the simple syntax to use this selector −
$('E, F, G,....')
Parameters 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. Example
<html>
<head> <title>The Selecter Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $(".big, #div3").css("background-color", "yellow"); }); </script> </head> <body> <div class="big" id="div1"> <p>This is first division of the DOM.</p> </div> <div class="medium" id="div2"> <p>This is second division of the DOM.</p> </div> <div class="small" id="div3"> <p>This is third division of the DOM</p> </div> </body> </html> This will produce the following result: This is first division of the DOM. This is second division of the DOM. This is third division of the DOM Selectors Examples Similar to above syntax and examples, the following examples would give you understanding on using different type of other useful selectors:
|
copyright © 2014 - all rights riserved by javatechnologycenter.com