jQuery selector example

Selector is most important part of jQuery. Here is some example how you can use jQuery to select an element from your html document. Suppose you have text box with id "user". Then the code to equivalent to document.getElementById("user").value is $("#user").val().

Look, here the slash (#) symbol denotes the id. if you use this slash symbol that means you are accessing the element by its id.

var userName = $("#user").val();

The above line get the value of user text field. Now to set a value to user text box you have to write the following code:-

$("#user").val("John");

Now, how to get an element by its name. jQuery give an easy command to do this.
var stRoll = $("input[name=roll]"). If you have a radio group,textbox group, checkbox group with same name then the above code can be use to get value of all elements in the group.

var values = new Array();
student = $("input[name=departments]");

Below is some other examples of jQuery selectors:-
$('div.panel') - All divs with class="panel"
$('p#intro') - The paragraph with id="intro"
$('div#content a:visible') - All visible links inside the div with id="content"
$('input[@name=email]') - All input fields with name="email"

Below is some use of the above selectors:-
$('div#primary').width(300) - Set the width of div id=“primary” to 300 px.
$'p').css('line-height', '1.8em') - Apply a line-height of 1.8em to all paragraphs.
$('li:odd').css({color: 'white', backgroundColor: 'black'}) - Apply two CSS rules to every other list item; note that the css() function can take an object instead of two strings.


Here are some examples of methods that read values from the first matched element:

var width = $('#content').width() - How wide is the element with id content on the page
var src = $('img').attr('src') - What’s the src attribute of the first image on the page
var color = $('h1').css('color') - What colour is the first h1

Interesting matter is that jquery methods used to set attribute is just a little modification of above codes. Just setting one or two arguments or setting one arguments representing multiple values can set attribute.

Here are examples:-
var width = $('#content').width("100px") - setting width to element with id content
var src = $('img').attr('src','c://image.jpg') -setting source to first image in page
var color = $('h1').css('color','red') - setting color to first h1 in page

---

To be continue