JQuery Notes 10Jan2012

------------------
Point 1
------------------


------------------
Point 2
------------------

jQuery methods - hide(), text(), addClass(), show()

------------------
Point 3
------------------

alert('Page contains ' + jQuery('a').length + ' elements!');
jQuery('a').attr("href", "http://www.google.co.in");
$('a').attr("href", "http://www.google.com");

------------------
Point 4
------------------

murali

murali 100

murali 200

------------------
Point 5
------------------

1000

1001

1002

1003

1004

jQuery('div').filter(".external").text("Hello Maccha");

------------------
Point 6
------------------
$('div').css('font-size','24px');
$('div').css('color','Black');
$('div').css('font-family','Roman');

------------------
Point 7
------------------

• Google


• Yahoo


• Gmail


• Telugu People


• Andhra Vilas


• Great Andhra

$('li:eq(0)').find('a').attr("href", "http://www.google.co.in");
$('li:eq(0)').next().find('a').attr("href", "http://www.yahoomail.com");
$('li:eq(1)').next().text("sajfklasdj fklsjd fklsjd fklsdj jkl");

$('li:eq(2)').nextAll().find('a').attr("href", "http://www.telugu.greatandhra.com");
$('li:eq(2)').nextAll().find('a').text("Great Andhra");



------------------
Point 8
------------------

This is the first statement.

This is the second statement.

This is the third statement.

• 1


• 2


• 3

$('a').filter('.css').remove();
$('a').remove('.css100');

$('#first').replaceWith('

Murali

');

$('ul#empno li').text('Employee Number : 1');

// adding multiple attributes
$('#company').attr({'class':'murali','title':'company information'}).text('Value Labs, Hyderabad');

// adding html text
$('#comp').html('Hello World');

------------------
Point 9
------------------
Category

• Anchor 1


• Anchor 2


• Anchor 3

$('#nav li').find('a').attr("href","http://www.google.com"); all a
$('#nav li a').attr("href","http://www.google.com"); all a
$('#nav li > a').attr("href","http://www.google.com"); only immediate a

------------------
Point 10
------------------
//$('h1 + h2').text('Murali'); // h2 follows h1. h2 is updated
//$('h2 + h1').text('Murali'); // h1 follows h2. h1 is updated
//$('h1').siblings('h2,h3,p').text('Murali');

$('li.selected').nextAll('li').css('background-color','red');
$('li.selected').prevAll('li').css('background-color','green');
$('li.selected').next('li').css('background-color','red');
$('li.selected').next().css('background-color','red');

------------------
Point 11
------------------

Emp Number	Name
Employee Number : 0	even - Murali Krishna V
Employee Number : 1	odd - Dasari Subrahmanyam
Employee Number : 2	even - Rakesh Mupparam
Employee Number : 3	odd - Suresh M
Employee Number : 4	even - Lakshman A

$('#tblEmpDetails tr:even').css('background-color','red');
$('#tblEmpDetails tr:odd').css('background-color','green');

Emp Number	Name
Employee Number : 0	even - Murali Krishna V

$('tr:even').css('background-color','yellow');
$('tr:odd').css('background-color','cyan');

------------------
Point 12
------------------
Hello Bob!
// Select all SPANs with 'Bob' in:
jQuery('span:contains("Bob")');

jQuery('div:has(p a)');

------------------
Point 13
------------------

Destinations

Risk Assessments

About Us

Contact Us

------------------
Point 14 - Chapter 3
------------------
Looping Concepts

Destinations

Risk Assessments

About Us

Contact Us

var urls = [];
$("div#Menu a[href]").each(function(i) {
urls[i] = $(this).attr('href');
$(this).attr("href","http://www.murali.com").text("www.murali.com");
});

alert( urls.join(","));

WRONG CODE
--------------
$("div#Menu a[href]")(function()
{
$(this).attr("href","http://www.murali.com").text("www.murali.com");
});


------------------
Point 15
------------------

• Ralph


• Hope


• Brandon


• Jordan


• Ralphie

$("ul > li").eq(7).css("border-bottom", "1px solid #000000");
$("ul > li").css("border-bottom", "1px solid red").eq(7).css("border-bottom", "1px solid #000000");
$("ul > li:first").css("border-top", "5px solid green");
$("ul > li:last").css("border-top", "5px solid green");
$("ul > li:eq(5)").css("border-top", "5px solid green");

(function($){
$(document).ready(function() {
$("ul > li").each(function(i) {
if (i % 2 == 1)
{
$(this).css("border", "2px solid red")
}
else
{
$(this).css("border", "3px solid green")
}
});
});
})(jQuery);


------------------
Point 16
------------------

Value Labs - Employees

• Murali


• Krishna


• Rakesh


• Subbu


• Lakshman


• Vara


• Shiva


• Suresh


• Mitesh


• Vishnu

(function($)
{
$(document).ready(function()
{
var lis = $("ul li").get().reverse();
//$("ul").empty();

$.each(lis, function(i)
{
$(this).css("color", "white");
});

$("ul").append("

+++++++++++++++++++++++++

");

$.each(lis, function(i)
{
$("ul").append("

" + lis[i].innerHTML + "

");
});

$("li").filter(".reverseCss").css("color", "gold");
});
})(jQuery);

$("h2").addClass("Emp");
$("div").addClass("divEmp");

------------------
Point 17
------------------
(function($)
{
$(document).ready(function()
{
$("div").click(function()
{
alert("You clicked on div with an index of " + $("div").index(this) );
alert("You clicked on div with an index of " + $(this).text() );
});
});
})(jQuery);

------------------
Point 18
------------------

Murali Krishna - p element

Murali - p element

Krishna - p element

Google 1

Google 2

Google 3

India

India

Raju

Rakesh + Raju

$("div").each(function(i)
{
if ($('div').index(this) % 2 == 0)
{
$(this).text('I am ' + $(this).text() );
}
else
{
$(this).text('You Are : ' + $(this).text() );
}
});

------------------
Point 19
------------------

jQuery Cookbook Authors

1. John Resig


2. Cody Lindley


3. James Padolsey


4. Ralph Whitbeck

(function($)
{
$(document).ready(function()
{
$.each( $("li") , function(i)
{
alert( $(this).text() );
});
});
})(jQuery);


------------------
Point 20
------------------
Note:- jQuery utility method $.map(), which will transform an existing array into another array of items.

(function($)
{
$(document).ready(function()
{
var arr = $.map([100,200,300], function(item, index)
{
alert( item + 1 );
});
});
})(jQuery);

------------------
Point 21
------------------

(function($)
{
$(document).ready(function()
{
var arr = $.map($("li"), function(item, index)
{
while (index < 3)
{
return $(item).html();
}
return null;
});

$(document.body).append("The first three authors are: " + arr.join(", ") + "");
});
})(jQuery);


------------------
Point 22
------------------

• fskdjf


• fskdjf


• fskdjf


• fskdjf


• fskdjf


• fskdjf

$("li").slice(1,2).wrap("").css('color','red').css('background-color','gold').css('width','200px');

------------------
Point 23 - Chapter 4
------------------
Broken Links

www.google.co.in

abc

Broken Links

xyz

Broken Links



(function($)
{
$(document).ready(function()
{
$('a').filter(function()
{
if ( $(this).attr('href') == "#" )
{
$(this).attr('href',"http://telugu.greatandhra.com");
$(this).text('Great Andhra');
}
}).click(function() {
});
});
})(jQuery);


------------------
Point 24
------------------
Broken Links

www.google.co.in

abc

Broken Links

xyz

Broken Links



(function($)
{
$(document).ready(function()
{
$('a').filter(function()
{
if ( $(this).attr('href') == "#" )
{
$(this).attr('href',"http://telugu.greatandhra.com");
$(this).text('Great Andhra');
}
else
{
var myVariable = $(this).attr('href');
if(myVariable == 'http://abc.com')
{

}
else
{
$(this).attr('href',"http://andhravilas.com");
$(this).text('Andhra Vilas');
}
}
}).click(function() {
});
});
})(jQuery);

------------------
Point 25
------------------

Months

Weekdays

(function($)
{
$(document).ready(function()
{
var months = [ 'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'October',
'November', 'December'];

$.each(months, function(index, value)
{
$('#months').append('

' + value + '

');
});

var days = { Sunday: 0, Monday: 1, Tuesday: 2, Wednesday: 3,
Thursday: 4, Friday: 5, Saturday: 6 };

$.each(days, function(key, value)
{
$('#weekday').append("

" + key + ' (' + value + ')

');
});
});
})(jQuery);
------------------
Point 26
------------------
(function($)
{
$(document).ready(function()
{
var months = [ 'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'October',
'November', 'December'];

var months = $.grep(months, function(value, i)
{
return ( value.indexOf('A') == 0 );
});
$('#months').html( '

' + months.join('

') + '

' );
});
})(jQuery);

it can be written as below as well using map utility

var monthsNew = $.map(months, function(value, i)
{
return ( value.indexOf('J') == 0 ? value : null );
});
$('#months').html( '

' + monthsNew.join('

') + '

' );
------------------
Point 27
------------------
(function($)
{
$(document).ready(function()
{
var months = [ 'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'October',
'November', 'December'];

months = $.map(months, function(value, i)
{
var monthname = value.substr(0,3);
switch(monthname)
{
case "Jan" :
case "Mar" :
case "May" :
case "Jul" :
case "Aug" :
case "Oct" :
case "Dec" :
return value + " - 31";
break;
case "Feb" :
return value + " - 28";
break;
case "Apr" :
case "Jun" :
case "Sep" :
case "Nov" :
return value + " - 30";
break;
default: return "";
}

});
$('#months').html( '

' + months.join('

') + '

' );
});
})(jQuery);

------------------
Point 28
------------------
Merging two arrays sets

$('#months').html( '

' + $.merge(months,monthsNew).join('

') + '

' );


------------------
Point 29
------------------



------------------
Point 30
------------------


------------------
Point 31
------------------



------------------
Point 32
------------------