How to use selectors in JQuery


In this article I have explained about how to use JQuery Selectors with Example Each steps I have clearly explained in this article. Learn how to use selectors in JQuery?

Find here how to use selectors in JQuery?



The Jquery selectors are one of the main feature in the jQuery library. The selectors allow paging Elements to be selected. $ symbol used to it. $ can also called as Jquery selector. Selectors are the heart of Jquery. Selectors can return a sequence of DOM Elements and we can use methods on every matched element. You can select single or multiple elements using class or element selectors. Selectors can find the elements by ID, element name, Class and hierarchical positioning.


Types of selectors



1) ID Selectors
2) Class Selectors
3) Element selector




To select all elements you can use $ ("*"). To select all

elements you can use $ ("p") . To select all

elements with class="csstest"$ ("p. csstest") . To select even elements you can use $ (": even"). To select selects odd elements you can use $ (": odd").




The General syntax of selectors as follows




jQuery(selector expression)


Or

$(Selector Expression)



Example of Query Selectors





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
//To get Text box value
var txt1= $('#Text1').val();
alert('Textbox 1 value: '+txt1);
var txt2= $('#Text2').val();
alert('Textbox 2 value:: '+txt2);

//To set Text box value
$('#Text1').val('Text box 1 value changed');
$('#Text2').val('Text box 2 value changed');

});
</script>
</head>
<body >
<form id="form1" runat="server">
<input id="Text1" value="Text box 1 value" type="text" />
<input id="Text2" value="Text box 2 value" type="text" />


</form>
</body>
</html>


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: