A day with .Net

My day to day experince in .net

Jquery Reference Part1

Posted by vivekcek on December 25, 2012

1. How to start with jquery?

Download the latest jquery file and save it in folder. Refer this file by

<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>

Now add a script tag with document.ready() function.

<script type="text/javascript">
        $(document).ready(function () {
            //code here
        });
    </script>

document.ready() function executed when the DOM is ready. Fire before the images are loaded

2. Select all div using jquery.

var divs = $('div');//by tag name
alert(divs.length);

3. Iterate through all div

 $('div').each(function () {
                alert($(this).html());
            });

4. Get all div and span elements

 var divspans = $('div,span');
 alert(divspans.length);

5.Get Div by id

alert($('#TestDiv').html());

6. Get div by css class

var divclss = $('.BlueDiv');
var divclss = $('div.BlueDiv'); //fast

7. Change css

$('.BlueDiv').css('border', '2px solid red');

8. Get all div with a title attribute

var divTtile = $('div[title]');
alert(divTtile.length());

9. Get all dive with title attribute value ‘test’

var divWithTitle = $('div[title="test"'); //case sensitive
alert(divWithTitle.length);

10. Get all input tag

var inputs = $(':input');
alert($(inputs[2]).val());


11. Table row coloring with jquery

 $('tr:odd').css('background-color', 'Green');
 $('tr:even').css('background-color', 'Red');
 //speacial effect to first child
 $('tr:first-child').css('background-color', 'Navy');
 //table id given
 $('#mytable tr:odd').css('background-color', 'Yellow');

12. Start with, end with, contains

alert($('div[title$="india"').html()); //ends with
alert($('div[title^="india"').html()); //start with
alert($('div[title*="india"').html()); //some where contains with
Advertisements

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