대부분의 작업은 노드를 찾고 난 후 다음 작업을 진행한다.
- 아이디 이름으로 노드 찾기
- 태그 이름으로 노드 찾기
- 클래스이름으로 노드 찾기
- 속성으로 노드 찾기
//////////////앞으로 등장할 예제는 아래 내용을 공통적으로 사용//////////////
<html>
<head>
<title></title>
<style>
body{
font-size:9pt;
font-family:"굴림";
}
div, p, ul, li{
border:1px #eeeeee solid;
margin:10px;
}
ul {
padding:10px;
}
li.select {
background-color : #ccc;
}
</style>
<script type="text/javascript" src = "../libs/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//코드는 여기에 작성하면 된다.
});
</script>
</head>
<body>
<div id = "samplePage" class="page">
샘플 페이지(div, id=samplePage, class=page)
<div id = "header">
헤더영역(div, id=samplePage, class=page)
</div>
<div id="content" class="sample-content">
노드 찾기(div, id=content, class=sample-content)
<ul class="menu">
일반 노드 찾기(ul, class=menu)
<li>id로 찾기(li)</li>
<li class="select">tag로 찾기(li, class=select)</li>
<li>class로 찾기(li)</li>
<li class="test1">속성으로 찾기(li, class=test1)</li>
</ul>
<div class= " content-data">
자식 노드 찾기(div, class=content-data)
<p class="test1">1. 모든 자식 노드 찾기(p, class=test1)</p>
<p>2. 특정 자식 노드만 찾기(p)</p>
<p class="test2">3. 마지막 자식 노드 찾기(p, class=test2)</p>
</div>
</div>
<div id="footer">
푸터 영역(div,id=footer)
</div>
</div>
</body>
</html>
///////////////////////////////////////////////////////////////////
-아이디 이름으로 노드 찾기
$("#아이디 이름") // #을 넣어줘야 합니다.
//////////////id가 header 을 찾아 설정//////////////////////
$(document).ready(function(){
$("#header").css("border","4px solid #f00");
});
///////////////////////////////////////////////////////////////
-태그 이름으로 노드 찾기
$("태그 이름")
///////////p 태그를 찾아 속성 변경/////////////////////
$(document).ready(function(){
$("p").css("border","4px solid #f00");
});
////////////////////////////////////////////////////////////
-클래스 이름으로 노드 찾기
$(".클래스 이름")
///////////////////////////////////////////////////////////
$(document).ready(function(){
$(".test1").css("border","4px solid #f00");
}
//////////////////////////////////////////////////////
-속성으로 노드 찾기
$("속성 옵션");
속성 옵션
$("E[A]"); //속성 A를 포함한 모든 E 노드 찾기
$("E[A=V]"); //속성 A의 값이 V인 모든 E 노드 찾기
$("E[A^=V]"); //속성 A의 값이 V로 시작하는 모든 E 노드 찾기
$("E[A$=V]"); //속성 A의 값이 V로 끝나는 모든 E 노드 찾기
$("E[A*=V]"); //속성 A의 값이 V를 포함하고 있는 모든 E 노드 찾기
////////////////클래스가 적용된 모든 노드 찾기////////////////////////
$(document).ready(function(){
$("[class]").css("border","4px solid #f00");
});
//////////////////////////////////////////////////////////////////////////
찾은 노드 다루기
- 찾은 노드 개수 구하기
- 찾은 노드 중 n번째 노드 접근하기
- 자바스크립트 DOM 객체 접근하기
- 순차적으로 찾은 노드 접근하기
- 찾은 노드 중에서 특정 노드만 찾기
- 찾은 노드의 자손 노드 중 특정 노드만 찾기
- 인덱스 값 구하기
- 찾은 노드 개수 구하기
$대상.length
////////문서에서 div 태그 노드가 몇개인지 출력////////////
$(document).ready(function(){
alert("length = " + $("div").length);
}
/////////////////////////////////////////////////////////////////
- 찾은 노드 중 n번째 노드 접근하기
$대상.eq(index)
//////////ul.menu의 메뉴 노드 중 두 번째 메뉴 노드 속성 바꾸기////////////
$(document).ready(function(){
var $liList = $("ul.menu li");
var $li_1 = $liList.eq(1);
$li_1.css("boder","4px solid #f00");
});
/////////////////////////////////////////////////////////////////////////////////
-자바스크립트 DOM 객체 접근하기
$대상.get(index)
//////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
var $liList = $("ul.menu li");
var li_1 = $liList.get(1);
li_1.style.border = "4px solid #f00";
}
/////////////////////////////////////////////////////////////////////
- 순차적으로 찾은 노드 접근하기
$대상.each(function(index){
var $target = $(this);
또는
var $target = $대상.eq(index);
})
//////////////////each() 메서드의 index 값 확인하기///////////////////////
$(document).ready(function(){
var $liList = $("ul.menu li");
$liList.each(function(index){
console.log("index = " + index);
})
});
////////////////////////////////////////////////////////////////////////////////
- 찾은 노드 중에서 특정 노드만 찾기
$대상.filiter("선택자")
찾은 노드 중에서 특정 노드만을 걸러내고 싶을 때 사용합니다.
///////////////////liList 중에서 select 클래스만 적용//////////////////////////
$(document).ready(function(){
var $liList = $("ul.menu li");
$liList.filter(".select").css("border","4px solid #f00");
});
//////////////////////////////////////////////////////////////////////////////
-찾은 노드의 자손 노드 중 특정 노드 찾기
$대상.find("선택자")
//////#content 노드의 자손 노드 중 test1 클래스가 적용된 노드 찾기///////
$(document).ready(function(){
var $content = $("#content");
$content.find(".test1").css("border","4px solid #f00");
});
/////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
$("ul.menu li").click(function(){
alert($(this).index());
})
});
////////////////////////////////////////////////////////////////////////////
-인덱스 값 구하기
$대상.index()
$목록.index($대상)
$목록.index(대상DOM)
/////////////////클릭한 노드가 몇번째 노드인지 구하기/////////////
$(document).ready(function(){
$("ul.menu li").click(function(){
alert($(this).index());
})
});
'Coding > JavaScript' 카테고리의 다른 글
| 4.4 노드 생성/ 추가/ 삭제/ 이동 (0) | 2019.07.26 |
|---|---|
| 4.3 노드 찾기(자식 부모 형제) (0) | 2019.07.26 |
| 4.2 JQuery (0) | 2019.07.22 |
| 4.1 자바스크립트 DOM (0) | 2019.07.22 |
| 3.5 Array 클래스 (0) | 2019.07.19 |