Posted by: phillipnb | December 1, 2012

Frequently used JQuery Usages – Part 1


1).If we want to know whether an element by name ‘paid_by’ is present, we can do the following:

if ($('[name="paid_by"]').length)
 {
 alert('Element with name paid_by is present.');
 }

2).To access an element using the name property, do the following

if ($('[name="paid_by"]') == '')
 {
 alert('Paid By field is required.');
 }

3).To access an element using th id property

if ($('#paid_by) != '')
 {
alert('Paid By field is not empty.');
 }

4).If we have a button with id as ‘cancel’ then we can hide that button using:

$('#cancel').hide();

5).To show the same button, we can use:

$('#cancel').show();

As far as performance is concerned native getElementById is faster but jQuery is handy with its library and associated methods.
To improve performance as well as be able to use JQuery, do something like this:

$( document.getElementById("paid_by") ).hide();

For a list of complete jquery selectors, please visit here

6).To select the child img tag of the div clicked in the example below:

</pre>
<div id="section1"><img src="images/park.jpg"></div>
<pre>

We can use $(“img”, this); OR $(this).find(“img”);

7).To set the dropdown to the required value:

 <select id="color" name="colortype">
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 </select>

$(‘#color’).val(); This will get the selected option value.

$(‘#color’).val(’2′); This will show the dropdown with option two as selected, this will set the option value.

$(‘#color’).find(‘option’).eq(1).attr(‘text’,’new text’); This will change the text of the option selected.

$(‘#color>option:selected’).text(); This will get the text of the selected option.

8).Checkbox – If we have a check box like this:

<input type="checkbox" name="<span class=" />sampleCheckbox" /> 

and if we want to check and uncheck this checkbox, we can do something like this:

$('.sampleCheckbox').attr('checked','checked');

$('.sampleCheckbox').removeAttr('checked');

9).Radio button – If we have radio buttons like this:

<input type="radio" name="payment" value="Cash">Cash</input>
<input type="radio" name="payment" value="Check">Check/Cheque</input>

To check the radio button for Cash, we can use this:

$('input:radio[name=payment]:nth(0)').attr('checked',true);

to get the checked radio button value:

$('input:radio[name=payment]:checked').val();

10).Suppose we have an array in PHP. We want this to be accessed by our javascript/jquery function. Here is how we do that?

Let php_month be the array.

<script language="javascript" type="text/javascript">
 <?php
 $php_month_array = array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','sep','Oct','Nov','Dec');
 $js_array = json_encode($php_month_array);
 echo "var js_month_array = ".$js_array.";\n";
 ?>
 </script>

To want to create the above month array into a drop down:

var js_month_select_str = '<select id="month_id">';
$.each(js_month_array, function(mindex, mvalue) {
js_month_select_str = js_month_select_str+'mindex+'">'+mvalue+'';
});
js_month_select_str = js_month_select_str+'</select>';
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: