4. jQuery 기초 - 셀렉터 (4)
페이지 정보
작성자 관리자 댓글 0건 조회 1,149회 작성일 22-01-09 10:26본문
4. jQuery 기초 - 셀렉터 (4)
:first-child, :last-child, :nth-child, only-child
+, ~, >
실습 : jquery05.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div name="book">
<p>제이쿼리</p>
<p>HTML5</p>
<p>CSS3</p>
<p>하이브리드앱</p>
</div>
</body>
</html>
첫번째 또는 마지막 요소 찾는 방법
$('[name="book"] p:first')
$('[name="book"] p:first-child')
$('[name="book"] p:last')
$('[name="book"] p:last-child')
n번째 요소를 찾는 방법
$('[name="book"] p:nth-child(1)')
실습 : jquery05.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div name="book">
<p>제이쿼리</p>
<p>HTML5</p>
<p>CSS3</p>
<p>하이브리드앱</p>
</div>
<div name="book1">
<p>제이쿼리1</p>
</div>
</body>
</html>
자식 요소가 하나만 있는 div를 찾는 방법
$('div p:only-child')
실습 : jquery05.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div name="book">
<p>제이쿼리</p>
<p>HTML5</p>
<p>CSS3</p>
<p>하이브리드앱</p>
</div>
<div name="book1">
<p>제이쿼리1</p>
</div>
<ul name="language">
<li>영어
<ul>
<li>초급</li>
<li>중급</li>
<li>고급</li>
</ul>
</li>
<li>독일어
<ul>
<li>문법</li>
<li>회화</li>
<li>독해</li>
</ul>
</li>
<li>프랑스어</li>
<li>중국어</li>
</ul>
</body>
</html>
name 속성이 language인 요소의 하위 계층 li를 찾는다.
$('[name="language"] > li')
name이 language인 요소의 바로 아래 계층 li 수를 구한다.
$('[name="language"] > li').size()
name이 language인 요소의 모든 li 수를 구한다.
$('[name="language"] li').size()
실습 : jquery05.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div name="book">
<p>제이쿼리</p>
<p>HTML5</p>
<p>CSS3</p>
<p>하이브리드앱</p>
</div>
<div name="book1">
<p>제이쿼리1</p>
</div>
<ul name="language">
<li>영어
<ul>
<li>초급</li>
<li>중급</li>
<li>고급</li>
</ul>
</li>
<li>독일어
<ul>
<li>문법</li>
<li>회화</li>
<li>독해</li>
</ul>
</li>
<li>프랑스어</li>
<li>중국어</li>
</ul>
<div name="div1">div1</div>
<div name="div2">div2
<div name="div2-1">div2-1</div>
</div>
<span name="span1">spn1</span>
<div name="div3">div3
<div name="div3-1">div3-1</div>
<div name="div3-2">div3-2</div>
<div name="div3-3">div3-3</div>
</div>
<span name="span2">spn2</span>
<div name="div4">div4</div>
</body>
</html>
div1과 인접한 span태그를 찾는 방법
$('[name="div1"]+span')[0]
실습 : jquery05.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div name="div1">div1</div>
<div name="div2">div2
<div name="div2-1">div2-1</div>
</div>
<span name="span1">spn1</span>
<div name="div3">div3
<div name="div3-1">div3-1</div>
<div name="div3-2">div3-2</div>
<div name="div3-3">div3-3</div>
</div>
<span name="span2">spn2</span>
<div name="div4">div4</div>
<span name="span3">스팬3<span>스팬3-1</span></span>
<span>스팬4</span>
</body>
</html>
span3과 인접한 span을 찾는다. 자식 span을 잦지 않는다.
div1에 인접한 모든 div를 찾는다. 자식을 찾지는 않는다.
$('[name="div1"]~div')
div1에 인접한 모든 span을 찾는다.
$('[name="div1"]~span')
실습 : jquery06.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div name="div1">div1</div>
<div name="div2">div2
<div name="div2-1">div2-1</div>
<span>span1</span>
</div>
<div name="div3">div3
<div name="div3-1">div3-1</div>
<div name="div3-2">div3-2</div>
<div name="div3-3">div3-3</div>
</div>
<div name="div4">div4</div>
</body>
</html>
자식노드를 찾고 자식노드의 인접한 다음 노드를 찾는다.
$('div > ')
$('div > +')
div1을 찾고 인접한 div를 찾는다. +와 next()는 같은 결과를 보여준다.
$('[name="div1"] + div')
$('[name="div1"]').next()
댓글목록
등록된 댓글이 없습니다.