JQuery Chapter 3 JQueryでのDOMオブジェクトに対する操作

JQuery Chapter3 JQuery DOM     
<!--
Goal:     JQuery   HTML  DOM(Document Object Model)  ,
	 DOM          ,          !
-->
<--     
	<div id="main_div">
		<ul>
			<li>I'm the first</li>
			<li>I'm the second</li>
			<li>I'm the third</li>
			-------------------------
			<li>I'm the fourth</li>
			-------------------------
		</ul>
	</div>
-->
 ,  DOM  
	        ,         ,    JQuery           !

A)         :	
	1-1)  .append("  ");
		                   ,     html  !
	eg:
		$("#main_div>ul").append("<li>I'm the fifth</li>");
		
	1-2)("  ").appendTo(  );
		                    !
	eg:
		var jqObj=$("<li>I'm the fifth</li>");
		jqObj.appendTo("#main_div>ul");
		       jqObj   main_div  ul !
		
	2-1)  .perpend("  ");
		   1-1  append         ,                    !
	eg:
		$("#main_div>ul").prepend("I'm the real first!");
		
	2-2)("  ").prependTo(  );
		   1-2    ,             !
	eg:
		var jqObj=$("<li>I'm the fifth</li>");
		jqObj.prependTo($("#main_div>ul"));
		
	3-1)  .after("  ");
		              ,   append      !
	eg:
		$("#main_div>ul>li:last").after("<li>Where am I?</li>");
		         :
		-------------------------- 
		I'm the fourth
		How is it?
		-------------------------- 
	 :$("#main_div>ul>li:last").append("<li>Where am I?</li>");
		          :
		-------------------------- 
		I'm the fourth
		-------------------------- 
		How is it?
		               !
		
	3-2)("  ").insertAfter(  );
		          ,           
		
	4-1)  .before("  ")
		 3-1,             !
		
	4-2)("  ").insertBefore(  );
		 3-2,         

B)         :
	1)remove(  );
		  remove                 ,  :         !
	eg:
		$("#main_div>ul>li:odd").remove();
		      second   fourth !
		
	2)empty(  )
		            ,       ,              !
	eg:
		$("#main_div>ul>li:even").empty();
		     first third    (        ,          ),          li  !
		
C)  
	          
	   .clone();
	             ,       !
	eg:
		$("#main_div>ul").clone().append("#main_div>ul>li:last");
		       ul          li   ,li      ul
		
D)  
	1)   .replaceWith("  ")
		                   ,  :             !
	eg:
		$("#main_div>ul>li:first").replaceWith("<b>First</b>");
		        li        First,  li    b
		
	2)("  ").replaceAll(  );
		   1     ,         !
	eg:
		("<b>First</b>").replaceAll("#main_div>ul>li:last");
		
E)  
	1)  .wrap(     ),    .wrapAll(     );
		                      ,        ,      !
	eg:
		$("#main_div li").wrap("<a href='#'></a>");
		      :
		<DIV id=main_div>
		<UL><A href="#">
		<LI>I'm the first</LI></A><A href="#">
		<LI>I'm the second</LI></A><A href="#">
		<LI>I'm the third</LI></A>-------------------------- <A href="#">
		<LI>I'm the fourth</LI></A>-------------------------- </UL></DIV>
		
		$("#main_div li").wrapAll("<a href='#'></a>");
		       :
		<DIV id=main_div>
		<UL><A href="#">
		<LI>I'm the first</LI>
		<LI>I'm the second</LI>
		<LI>I'm the third</LI>
		<LI>I'm the fourth</LI></A>-------------------------- -------------------------- </UL></DIV>
		
		              !
		
	2)  .warpInner(     );
		                
	eg:$("#main_div li").wrapInner("<a href='#'></a>");
		     :
		<DIV id=main_div>
		<UL>
		<LI><A href="#">I'm the first</A></LI>
		<LI><A href="#">I'm the second</A></LI>
		<LI><A href="#">I'm the third</A></LI>-------------------------- 
		<LI><A href="#">I'm the fourth</A></LI>-------------------------- </UL></DIV>
		      ~

F)      :
	1)       
		   .css("     ");
	eg:
		$("#main_div>ul")
		.css("border")--  ul     
		.css("height")--    
		.......
	
	2-1)    1
		  
		.attr("class","    ")--  class  
		.attr("id","    ")--  id  (        )
		.....
		  :          ,             !
		
	2-2)    2
		  
		.addClass("    ");
		        ,         !
		
	3)    
		  
		.removeClass("   ")---      
		.removeClass()----      
		
	4)    ( X)
		   
		.toggleClass("    ")
		  ,      "#" "."
	
	5)        
		  .hasClass("    ")
		 :       "#" "."
		   :
		   .is(".   ")	
		 :   "."

G)  HTML,text,value  
	     base ~         
	   
	.html()--  html  
	.html("  ")--  html  
	.text()--    
	.text("  ")--  text  
	.val()--           
	.val("  ")--        
	
H)     
	  
	.children()--       <!--               O(∩_∩)O~-->
	.next()       (        "+")
	.nextAll()        (   "~")
	.prev()         
	.prevAll()        
	.parent()           
	.parents()        
	.find("  ")       ,          
	.siblings()          
	.closest()      
	.filter()  

I)CSS DOM  
	     ,          
	   
	.css("    ")--     ,       ,        
		eg:.css("backgroundColor")--      
	.css("  "," ")--        
		eg:.css("border","solid 1px lightBlue")--    
	 1:Json  :
	.css({"width":"100px","border":"solid 1px red","....."});]
	
	 2:opacity      (   :0~1)
		XXX.css("opacity","0.5")       0.5	
	
	.height()----      
	.width()----      
	.offset()----            
		eg: $("#main_div").offset().letf.top;
	.position()----       
		eg: $("#main_div").position().left.top;
	.scrollTop()--               
	.scrollTop(    )--               
	.scorllLeft()--               
	.scrollLeft(    )--               

J)                 :
	            ID "moveObj"
	eg:
//------------------Codes Start-------------------------
	$(function(){
			//           
			var allowMove=false;
			var posX;
			var posY;
			$("#moveObj").mousedown(function(e){
				//        
				allowMove=true;
				//             
				posX=e.pageX-parseInt($(this).css("left"));
				posY=e.pageY-parseInt($(this).css("top"));
			}).mouseup(function(){
				//         
				allowMove=false;
			});
			
			//      
			$(document).mousemove(function(e){
				if(allowMove){
					$("#moveObj")
					.css("left",e.pageX-posX)
					.css("top",e.pageY-posY);
					;
				}
			});
	});
//------------------Codes Finish-------------------------

<!--
Author:Lovingshu's Forever
Date:2011-10-12 22:19
remark:Wow~It is amazing~How wonderful it is!
-->