JQuery Selectors

JQuery is awesome, effective, powerful, rocking… I don’t have more word to say about JQuery.

In past I have posted some JQuery magic scripts, here I want to share some basic knowledge of JQuery selectors which will helps to target html tags.

jQuery offers a great engine for selecting html tags(elements) in the document which almost gives every filter option (tag name, attribute name, classes , properties etc.) for effective selection.

Here effective selection means, selection will not fail at any condition. Example: New html tags get added or in .Net server side controls id get change on each page load.

/* ########## Select HTML Tags ###########*/

// Get all tags by CSS class name
$(".ms-vb-user").css("display", "none");

// Get all div tags by CSS class name
$("div.ms-vb-user").css("display", "none");

// Get tag by id
var SelectedVal = $('#TDRightArea').text();

// Loop through all matching tags
$('a[href*=/_layouts/userdisp.aspx?ID=]').each(function () {
        var SelectedVal  = $(this).text();  
    });

//Get Parent Tag 
$('#TDRightArea').parent().html();

/* ########## Select and find in HTML Tags ###########*/

$('#TDRightArea').find('div.rightsubarea').each(function () { 
   $(this).css("color", "blue");
});

/* ########## Select .Net Controls ###########*/

// Get Radio Button List selected option
var SelectedVal = $('input[type=radio][id*=RBLLocation]:checked').val();

// Get TextBox entered text
var SelectedVal = $('input[type=text][id*=TxtLocation]').val();

// Get ListBox selected option
var SelectedVal = $("[id*='LBLocation'] option:selected").text();

// Get DropDown List selected option
var SelectedVal = $("[id*='DDLLocation'] option:selected").text();

// Get CheckBox List selected option
var SelectedVal = $('input[type=checkbox][id*=CBLLocation]:checked').next().text();

// Check CheckBox List option is checked, return true or false
var isChecked = $('input[type=checkbox][id*=CBLocation]').is(':checked');

/* ########## Select SharePoint Controls ###########*/

//Get PeopleEditor control value (SharePoint)
var SelectedVal = $("textarea[id*='PeopleEditorManager']").val();

More reference blogs:

http://api.jquery.com/category/selectors/
http://codylindley.com/jqueryselectors/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/jquery_selectors.asp


ENJOY !!!