5. jQuery 기초 - 셀렉터 (5)
페이지 정보
작성자 관리자 댓글 4건 조회 3,065회 작성일 22-01-09 13:09본문
5. jQuery 기초 - 셀렉터 (5)
next(), nextAll(), prev()
실습 : jquery07.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>
<div name="div3">div3</div>
<div name="div4">div4</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>
next() 같은 래벨의 다음 요소를 검색한다.
div1을 검색하고, 그다음 같은 래밸의 요소를 검색한다.
$('[name="div1"]').next()
div1요소 다음의 모든 요소를 찾는다.
$('[name="div1"]').nextAll()
div1요소 다음의 모든 p태그를 찾는다.
$('[name="div1"]').nextAll('p')
prev()함수는 이전 요소를 검색한다.
$('[name="div2"]').prev()
$('[name="div3"]').prevAll()
지금까지 배운 jquery 셀렉터를 예제를 통해 실습하겠습니다.
웹문서는 기본적으로 데스크탑에 맞춰져있다. 모바일 화면에 맞추기 위해 디바이스 가로 사이즈에 맞추어 자동으로 맞추기 위해 아래 코드를 헤더에 추가한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
user-scalable=no // 사용자가 확대/축소를 할 수 없게된다.
실습 : jquery08.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.cat{
width:300px;
}
.cat1{
cursor:pointer; margin-top:10px;
}
.sub{
display:none; margin-top:10dpx; background:#ecc;
padding:5px;
width:250px;
}
</style>
</head>
<body>
<div class="cat">
<div class="cat1" >A 코스 세부사항</div>
<div class="sub">
<ul>
<li>문법</li>
<li>독해</li>
</ul>
</div>
<div class="cat1" >B 코스 세부사항</div>
<div class="sub">
<ul>
<li>초급</li>
<li>중급</li>
</ul>
</div>
<div class="cat1" >C 코스 세부사항</div>
<div class="sub">
<ul>
<li>스피킹</li>
<li>리스닝</li>
</ul>
</div>
</div>
</body>
</html>
코스를 선택하면 아래 세부내용이 보이도록 기능을 추가해보도록 하겠습니다.
onclick="$(this).next().show()"
실습 : jquery08.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.cat{
width:300px;
}
.cat1{
cursor:pointer; margin-top:10px;
}
.sub{
display:none; margin-top:10dpx; background:#ecc;
padding:5px;
width:250px;
}
</style>
</head>
<body>
<div class="cat">
<div class="cat1" onclick="$(this).next().show()">A 코스 세부사항</div>
<div class="sub">
<ul>
<li>문법</li>
<li>독해</li>
</ul>
</div>
<div class="cat1" onclick="$(this).next().show()">B 코스 세부사항</div>
<div class="sub">
<ul>
<li>초급</li>
<li>중급</li>
</ul>
</div>
<div class="cat1" onclick="$(this).next().show()">C 코스 세부사항</div>
<div class="sub">
<ul>
<li>스피킹</li>
<li>리스닝</li>
</ul>
</div>
</div>
</body>
</html>
코스를 선택하면 아래의 세부사항이 보이게 된다.
실습 : jquery08.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>제이쿼리 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.cat{
width:300px;
}
.cat1{
cursor:pointer; margin-top:10px;
}
.sub{
display:none; margin-top:10dpx; background:#ecc;
padding:5px;
width:250px;
}
</style>
</head>
<body>
<div class="cat">
<div class="cat1" onclick="$(this).next().show()">댓글쓰기</div>
<div class="sub">
<form>
<label>이름 : <input type="text" name="name"></label><br/>
<label>비번 : <input type="text" name="pw"></label><br/>
<textarea rows="5" cols ="30" placeholder="댓글 내용 ^^"></textarea><br/>
<input type="submit" value="댓글등록">
</form>
</div>
</div>
</body>
</html>
댓글목록
Ervin Decoteau님의 댓글
Ervin Decoteau 작성일Key Stuck In Ignition Repair Tools To Ease Your Daily Lifethe One Key Stuck In Ignition Repair Trick That Should Be Used By Everyone Learn Key Stuck In Ignition Repair https://md.kif.rocks/Um24kwjdR1aHsZk57QwXYA/
Christopher Darrow님의 댓글
Christopher Dar… 작성일What's The Job Market For Mobile Car Key Repair Professionals? mobile car key Repair https://telegra.ph/10-Pinterest-Accounts-To-Follow-Car-Key-Ignition-Switch-Repair-08-30
Eldon Bloom님의 댓글
Eldon Bloom 작성일The 9 Things Your Parents Teach You About Best Robot Hoover best Robot hoover https://md.farafin.de/nt4wve_yQMyS69Ap5DRBsw/
Bridgett님의 댓글
Bridgett 작성일Three Greatest Moments In Automatic Vacuum History Automatic Vacuum Cleaner https://dokuwiki.stream/wiki/10_Places_Where_You_Can_Find_Best_Robot_Vacuum_And_Mop