[jQuery]노드 다루기

노드 다루기

변수명에 $붙이는 이유: jQuery를 이용한다고 표시하기 위해서

var $myF = $(".myFavourite");
$myF.css("color", "red");
//두번째 노드의 border css 지정
$myF.eq(2).css("border", "1px solid gray");
$myF.click(f2);
function f2(){
	console.log($myF.length);
	$(this).html("클릭");
}

객체 접근

//get 메소드

var $list = $("ul li");
var list_1 = $list.get(1);
list_1.style.border = "1px solid green";

순차적으로 접근하기

//each 메소드

$list.each(function(){
console.log($(this).text());
});
$list.each(function(index){
console.log(index);
});
$list.each(function(index, element) {
document.write(element.innerText);
document.write(element.textContent);
document.write($(element).text());
});

자손 노드 중 특정 노드 찾기

//find 메소드

$("#backEnd").find(".java").eq(0).css("background", "yellow");

모든 자식 노드 찾기

//children 메소드

$("#test").children().css("border", "3px solid #0f0");

//특정 자식 노드 찾기

$("#frontEnd").find("ul").children(".myFavourite").css("font-weight","bold");

부모 노드 찾기

//parent 메소드

$('#DOM').parent().parent().css("border","2px solid blue");

조상노드

$("#DOM").parents().css("border","3px dotted black");

이전형제 노드 찾기

//prev 메소드

$("#DOM").prev().css("border", "2px solid #f00");

모든 이전 형제 노드

$("#BOM").prevAll().css("background-color", "beige");