728x90
목차
요소 탐색하는 방법
1. 특정요소 찾는 법, 태그명으로 탐색, 부모노드에서 자식노드를 활용한 방법등 탐색 방법은 다양하다.
가장 첫번쨰, 마지막의 요소 찾기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('p:first').css("color", "#f00"); // 문장 1을 빨간색으로 변경
$('p:last').css("color", "#fcd"); // 문장 3을 베이비핑크로 변경
$('p:fist-child').css("color", "#f00");
$('p:last-child').css("color", "#f00");
$('p:nth-child(1)').css("color", "#f00");
$('p:nth-child(2)').css("color", "#f00"); //특정 노드 찾기
})
</script>
</head>
<body>
<div>
<p> 문장 1 </p>
<p> 문장 2 </p>
<p> 문장 3 </p>
</div>
</body>
</html>
부모노드에서 자식노드를 활용한 방법
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div p').css("color", "#f78"); // 문장1~3 모두색상 변경
$('div > p').css("color", "#f78"); // 문장1~3 모두색상 변경
})
</script>
</head>
<body>
<div>
<p> 문장 1 </p>
<p> 문장 2 </p>
<p> 문장 3 </p>
</div>
</body>
</html>
728x90
특정한 내용이 포함된 요소탐색
<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
//특정한 속성값으로 요소탐색
$('p[state="한국"]').css("color", "#f00"); // 문장2 색상변경
// 특정한 내용으로 요소탐색
$['p:contains("3").css("color", "#f00"); // 문장3 색상변경
})
</script>
</head>
<body>
<div>
<p> 문장 1 </p>
<p state="한국"> 문장 2 </p>
<p state="일본"> 문장 3 </p>
</div>
</body>
</html>728x90
반응형
'개발기록 > 자바스크립트 & jQuery' 카테고리의 다른 글
| Javascript & jQuery 이벤트란, 이벤트 핸들러 알아보기 (0) | 2022.04.20 |
|---|---|
| jQuery 도장깨기, function 종류 (each, css, append, wrap, clone, val) (0) | 2022.04.19 |
| jQuery 도장깨기, 라이브러리 연동, 기본 문법 알아보기 (0) | 2022.04.15 |
| Javascript DOM 기능, DOM 객체종류 알아보기 [자바스크립트 도장깨기] (0) | 2022.04.15 |
| Javascript String() 객체와 String 함수 [자바스크립트 도장깨기] (0) | 2022.04.15 |
댓글