site to encode xml, html code

http://centricle.com/tools/html-entities/

JQuery Notes 12Jan12

------------------
Point 1
------------------
<script>
//hide all divs on the page
jQuery('div').hide();
//update the text contained inside of all divs
jQuery('div').text('new content added here');
//add css stylesheet to all div tags
jQuery('div').addClass("updatedContent");
//show all divs on the page
jQuery('div').show();
//add css stylesheet to all input tags
jQuery('input').addClass("updatedContent");
//hide all input tags on the page
jQuery('input').hide();

// all inputs with css1 stylesheets
jQuery('input.css1').hide();

</script>

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

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

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

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

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

<form>
<div>murali</div>
</form>

<form>
<div>murali 100</div>
</form>

<div>murali 200</div>

<script>
jQuery('div').text('new content added here - with out form tag');
jQuery('div',$('form')).text('new content added here - with form tag');
</script>


------------------
Point 5
------------------
<style type="text/css">
.external
{
}
</style>

<div class='external'>1000</div>
<div class='external'>1001</div>
<div>1002</div>
<div>1003</div>
<div class='external'>1004</div>

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
------------------
<ul>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">Gmail</a></li>
<li><a href="#">Telugu People</a></li>
<li><a href="#">Andhra Vilas</a></li>
<li><a href="#">Great Andhra</a></li>
</ul>


$('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
------------------
<div id="first">This is the first statement.</div>
<div id="second">This is the second statement.</div>
<div id="third">This is the third statement.</div>

<ul id="empno">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

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

$('#first').replaceWith('<p><b>Murali</b></p>');

$('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('<strong>Hello World</strong>');

------------------
Point 9
------------------
<a href="/category">Category</a>
<ul id="nav">
<li><a href="#anchor1">Anchor 1</a></li>
<li><a href="#anchor2">Anchor 2</a></li>
<li><span><a href="#anchor3">Anchor 3</a></span></li>
</ul>

$('#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
------------------

<table id="tblEmpDetails">
<thead><td>Emp Number</td><td>Name</td></thead>
<tr><td>Employee Number : 0</td><td>even - Murali Krishna V</td></tr>
<tr><td>Employee Number : 1</td><td>odd - Dasari Subrahmanyam</td></tr>
<tr><td>Employee Number : 2</td><td>even - Rakesh Mupparam</td></tr>
<tr><td>Employee Number : 3</td><td>odd - Suresh M</td></tr>
<tr><td>Employee Number : 4</td><td>even - Lakshman A</td></tr>
</table>


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

<table id="Table1">
<thead><td>Emp Number</td><td>Name</td></thead>
<tr><td>Employee Number : 0</td><td>even - Murali Krishna V</td></tr>
</table>


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

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

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

------------------
Point 13
------------------
<div id="Menu">
<a href="#">Destinations</a><br />
<a href="#">Risk Assessments</a><br />
<a href="#">About Us</a><br />
<a href="#">Contact Us</a><br />
</div>

<script type="text/javascript">
$(function ()
{
$("div#Menu a").mouseover(function () { $(this).addClass("highlightRow"); })
.mouseout(function () { $(this).removeClass("highlightRow"); }
);
})

$("div#Menu a").click(function ()
{
alert( $(this).text() );
});

</script>

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


<div id="Menu">
<a href="www.google.co.in">Destinations</a><br />
<a href="www.google.com">Risk Assessments</a><br />
<a href="www.yahoomail.com">About Us</a><br />
<a href="www.facebook.com">Contact Us</a><br />
</div>


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
------------------
<ul id="names">
<li>Ralph</li>
<li>Hope</li>
<li>Brandon</li>
<li>Jordan</li>
<li>Ralphie</li>
</ul>

$("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
------------------
<h2>Value Labs - Employees</h2>
<div>
<ul id="names">
<li>Murali</li>
<li>Krishna</li>
<li>Rakesh</li>
<li>Subbu</li>
<li>Lakshman</li>
<li>Vara</li>
<li>Shiva</li>
<li>Suresh</li>
<li>Mitesh</li>
<li>Vishnu</li>
</ul>
</div>


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

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

$("ul").append("<li>+++++++++++++++++++++++++</li>");

$.each(lis, function(i)
{
$("ul").append("<li class='reverseCss'>" + lis[i].innerHTML + "</li>");
});

$("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
------------------
<div>
<br />
<p>Murali Krishna - p element</p> <br />
<p>Murali - p element</p> <br />
<p>Krishna - p element</p> <br />
<input type="text" id="txt1" /> <br />
<a href="#">Google 1</a><br />
<a href="#">Google 2</a><br />
<a href="#">Google 3</a><br />
<b>India</b><br />
<strong>India</strong><br />
<br />
</div>

<div>
<p>Raju</p>
</div>

<div>
<p>Rakesh + Raju</p>
</div>


$("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
------------------
<h1>jQuery Cookbook Authors</h1>
<ol>
<li>John Resig</li>
<li>Cody Lindley</li>
<li>James Padolsey</li>
<li>Ralph Whitbeck</li>
</ol>

(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("<span>The first three authors are: " + arr.join(", ") + "</span>");
});
})(jQuery);


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

<ul>
<li>fskdjf</li>
<li>fskdjf</li>
<li>fskdjf</li>
<li>fskdjf</li>
<li>fskdjf</li>
<li>fskdjf</li>
</ul>

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

------------------
Point 23 - Chapter 4
------------------
<a href="#">Broken Links</a><br />
<a href="http://www.google.co.in">www.google.co.in</a><br />
<a href="http://abc.com">abc</a><br />
<a href="#">Broken Links</a><br />
<a href="http://xyz.com">xyz</a><br />
<a href="#">Broken Links</a><br />


(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
------------------
<a href="#">Broken Links</a><br />
<a href="h:/www.google.co.in">www.google.co.in</a><br />
<a href="http://abc.com">abc</a><br />
<a href="#">Broken Links</a><br />
<a href="hp://xyz.com">xyz</a><br />
<a href="#">Broken Links</a><br />


(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
------------------
<h1>Months</h1>
<ol id="months"></ol>

<br />

<h1>Weekdays</h1>
<ol id="weekday"></ol>


(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('<li>' + value + '</li>');
});

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

$.each(days, function(key, value)
{
$('#weekday').append("<li>" + key + ' (' + value + ')</li>');
});
});
})(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( '<li>' + months.join('</li><li>') + '</li>' );
});
})(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( '<li>' + monthsNew.join('</li><li>') + '</li>' );
------------------
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( '<li>' + months.join('</li><li>') + '</li>' );
});
})(jQuery);

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

$('#months').html( '<li>' + $.merge(months,monthsNew).join('</li><li>') + '</li>' );


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



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


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



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

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