하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

4. jQuery 기초 - 셀렉터 (4)

페이지 정보

작성자 관리자 댓글 0건 조회 503회 작성일 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>



1.PNG


첫번째 또는 마지막 요소 찾는 방법


$('[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)')


2.PNG



실습 : 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') 


3.PNG



실습 : 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') 


4.PNG


name이 language인 요소의 바로 아래 계층 li 수를 구한다.


$('[name="language"] > li').size() 


name이 language인 요소의 모든 li 수를 구한다.


$('[name="language"]  li').size() 


5.PNG


실습 : 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] 


6.PNG



실습 : 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을 잦지 않는다.


7.PNG


div1에 인접한 모든 div를 찾는다. 자식을 찾지는 않는다.


$('[name="div1"]~div') 


8.PNG


div1에 인접한 모든 span을 찾는다.


$('[name="div1"]~span') 


9.PNG


10.PNG



실습 : 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 > +') 


11.PNG


div1을 찾고 인접한 div를 찾는다. +와 next()는 같은 결과를 보여준다.


$('[name="div1"] + div') 


$('[name="div1"]').next() 


12.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.