5. jQuery 기초 - 셀렉터 (5)
페이지 정보
작성자 관리자 댓글 0건 조회 558회 작성일 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>
댓글목록
등록된 댓글이 없습니다.