------------------
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
------------------
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment