Benney Blog

// jQuery의 기본 CSS Selector
$(document).ready(function(){
    console.log($("div img"));   // div tag 이하에 존재하는 img tag를 찾아낸다.
    console.log($("div p")); // div이하 p tag
    console.log($("div p img)); 
    console.log($("div .style_class"));   // div 이하에 ".style_class"라는 이름의 클래스를 찾아낸다.
    console.log($("div[cust-pro]")); // 
 사용자정의 속성 찾기
    console.log($("div[cust-pro^='test']"); // 
 test로 시작하는 모든 것. testXXX
    console.log($("div[cust-pro*='1']")); // cust-pro중 1이 포함된 모든것

< SCRIPT>
// dom이용
window.onload=function(){
    var var_id = document.getElementById("var_id");
    console.log(var_id);
}

// jQuery 이용
$(document).ready(function(){
    var $div = $("#var_id");  // id명 앞에 #이 붙는것을 명심
    console.log($div);  // jQuery select에서 제공하는 모든 것을 보여준다.
    console.log($div[0]);  // 이경우 실제 div의 내용이 보여진다.
});
< /SCRIPT>



  내용이 보여지는지 확인해보자

// getElementsByClassName메소드는 css class이름으로 Dom객체를 수집할 수 있다.
var divs = document.getElementsByClassName("style_class"); // NodeList return
console.log("노드 길이 :"+ divs.length);
for(var i=0; i < divs.length; i++){
    var single = divs[i]; // 또는 divs.item(i);
    console.log(i, single);
}

// jQuery로 바꿔보자.
$(document).ready(function(){
    var $divs =$(".style_class");  // class일 경우 ".클래스명" 
    console.log($divs);
    for(var i=0;i<$divs.length;i++){
        var $div = $divs.eq(i);
        console.log("i ", i,$div[0]);			
    }
});	
// 이하 body 

Test class div


Test class div 22

	

// dom 사용
window.onload=function()
	{
	var divs =window.document.getElementsByTagName("div");
		console.log(divs);
		for(var i=0;i < divs.length;i++)
		{
			var div  		= divs.item(i);
			console.log("i ", i, div);
		}	}
// jQuery 사용
$(document).ready(function()
	{
	
		var $divs =$("div");
		console.log($divs);
		
		//for(var i=0;i<$divs.length;i++)
		//{
		//	var $div  		= $divs.eq(i);
		//	
		//
		//	console.log("1 ", i,$div);	
		//	console.log("2", $div[0]);
		//	console.log("3", $divs.get(i));	
		//	console.log("4", $div.get(0));			
		//}
		
		$divs.each(function(index, target){
			console.log("this =  ", this);
			console.log("$(this) = ",$(this));
			console.log("target = ",target);
			console.log($divs[index]);
		});
	});		

// 1. 기본 사용
jQuery(document).ready(function()){
    jQuery("body").text("ready ?");
}
// 2. 1번의 줄임사용
jQuery(function()){
   jQuery("body").text("ready ?");
}
// 3. 2번의 좀더 간소화
$(document).ready(function(){
   jQuery("body").text("ready ?");
});
// 4. 3번을 더 줄여서.
$(function(){
   jQuery("body").text("ready ?");
});


// 이하 body

yum remove java