Saturday, April 20, 2013

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 !!!

3 comments:

  1. As reported by Stanford Medical, It's in fact the SINGLE reason women in this country get to live 10 years more and weigh on average 42 pounds lighter than we do.

    (By the way, it really has NOTHING to do with genetics or some secret-exercise and really, EVERYTHING related to "HOW" they eat.)

    BTW, What I said is "HOW", not "WHAT"...

    Click this link to uncover if this brief test can help you unlock your real weight loss possibility

    ReplyDelete
  2. Strange "water hack" burns 2 lbs in your sleep

    At least 160,000 women and men are utilizing a simple and secret "water hack" to burn 2lbs each and every night while they sleep.

    It's easy and works every time.

    Here's how you can do it yourself:

    1) Go grab a drinking glass and fill it up with water half the way

    2) Then learn this awesome hack

    you'll be 2lbs skinnier in the morning!

    ReplyDelete
  3. Strange "water hack" burns 2lbs overnight

    More than 160,000 women and men are utilizing a simple and secret "liquids hack" to lose 1-2lbs each night in their sleep.

    It's proven and it works with anybody.

    Just follow these easy step:

    1) Take a glass and fill it up with water half full

    2) Now use this awesome HACK

    and you'll become 1-2lbs skinnier the very next day!

    ReplyDelete