bmakarand2009 · September 16, 2012 03:56
diff --git a/javascript-dom-manipulation2 b/javascript-dom-manipulation2
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <!-- http://jsfiddle.net/mbhatamb/P4kTB/ -->
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>JQuery Dom Maniupulation with list</title>
 </head>
 <body>
    <h1>Example of tabs() API inconsistency when adding a tab.</h1>
    <ul class="myclass">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <ol>
            <li> ordered Item1 </li>
            <li> ordered Item2 </li>
            <li> ordered Item3 </li>
        </ol>
   </ul>
 </body>

 //CSS <style>
 h1{color:blue; font-size:20px; }

 .myclass{font-zie:16px;color:red}

 //Javascript
 //take a look at JQuery Selectors - http://api.jquery.com/category/traversing/
 //select only the direct children of myclass and change the color
 $('ul.myclass').children('li').css('color','blue');
 //this will find all the li children,and nested children and work on them
 //$('ul.myclass').find('li').css('color','blue');
diff --git a/jquery-dom-manipulation b/jquery-dom-manipulation
 /* 
 JQuery = $ are same , $ is the shortcut
 JQuery allows an easy way of dom manipulation
 $('myelem') for get hold of elements and classes
 $('#myId') - for getting hold of elements with specific ID

 $(document).ready() -- gets invoked after the entire DOM has been loaded, way JQuery checks is by polling every 8-9 seconds
 to see its loaded or not. so if you dont invoke jquery inside ready, you will not see changes on elements that appear after jquery 
 script.
 <!-- HTML Document  http://jsfiddle.net/mbhatamb/y7jPB/ -->

 */

 $(document).ready(function() {
    console.log("hello world");
    $('ul li').addClass('myclass');
    $('div').append(' This is the appended text');
    $('#mypara').append('Adding some more lines to this para');
 });





 <!-- HTML Document  http://jsfiddle.net/mbhatamb/y7jPB/ -->
 <html>
    <body>
        <ul>
            <li> hello1 </li>
            <li> hello2 </li>
        </ul>
        <div>
            This is a sample Text
        </div>
        <p id="mypara"> This is a smaple para with ID </p>
        <p id="mypara"> This is a Another para which is not listneing to event </p>
    </body>
 </html>

 //CSS Document
 .myclass { color : green }
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html lang="en">
	<!-- http://jsfiddle.net/mbhatamb/P4kTB/ -->
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>JQuery Dom Maniupulation with list</title>
	</head>
	<body>
	<h1>Example of tabs() API inconsistency when adding a tab.</h1>
	<ul class="myclass">
	<li>item1</li>
	<li>item2</li>
	<li>item3</li>
	<ol>
	<li> ordered Item1 </li>
	<li> ordered Item2 </li>
	<li> ordered Item3 </li>
	</ol>
	</ul>
	</body>

	//CSS <style>
	h1{color:blue; font-size:20px; }

	.myclass{font-zie:16px;color:red}

	//Javascript
	//take a look at JQuery Selectors - http://api.jquery.com/category/traversing/
	//select only the direct children of myclass and change the color
	$('ul.myclass').children('li').css('color','blue');
	//this will find all the li children,and nested children and work on them
	//$('ul.myclass').find('li').css('color','blue');
	/*
	JQuery = $ are same , $ is the shortcut
	JQuery allows an easy way of dom manipulation
	$('myelem') for get hold of elements and classes
	$('#myId') - for getting hold of elements with specific ID

	$(document).ready() -- gets invoked after the entire DOM has been loaded, way JQuery checks is by polling every 8-9 seconds
	to see its loaded or not. so if you dont invoke jquery inside ready, you will not see changes on elements that appear after jquery
	script.
	<!-- HTML Document http://jsfiddle.net/mbhatamb/y7jPB/ -->

	*/

	$(document).ready(function() {
	console.log("hello world");
	$('ul li').addClass('myclass');
	$('div').append(' This is the appended text');
	$('#mypara').append('Adding some more lines to this para');
	});





	<!-- HTML Document http://jsfiddle.net/mbhatamb/y7jPB/ -->
	<html>
	<body>
	<ul>
	<li> hello1 </li>
	<li> hello2 </li>
	</ul>
	<div>
	This is a sample Text
	</div>
	<p id="mypara"> This is a smaple para with ID </p>
	<p id="mypara"> This is a Another para which is not listneing to event </p>
	</body>
	</html>

	//CSS Document
	.myclass { color : green }