<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- JQuery -> Ajax (Json) -> Server(Java) (list, hashmap) -->
<ul id="list">
<li>Coffee
<ol type="1">
<li>black</li>
<li>milk</li>
</ol>
</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button type="button" id="btn">선택 or 감추기</button>
<button type="button" id="btn1">보이기</button>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//$("#list").hide();
//$("ul li:first").hide(); //첫번째 li만 사라진다.
//$("#list li:first").hide(); //첫번째 li만 사라진다
//$("ul ol li:first").hide();
//$("ul ol li:first-child").hide();
$("ul ol li:nth-child(2)").hide(); //자식테그 1번부터~ 지정할 수 있음.
});
$("#btn1").click(function(){
$("ul ol li:nth-child(2)").show();
});
});
</script>
</body>
</html>'DEV > jQuery' 카테고리의 다른 글
| 클릭했을 때 색 채움, 마우스 커서(focus,blur) (0) | 2020.01.13 |
|---|---|
| db 데이터를 받아와 테이블에 데이터 입력_외부 css 사용 (0) | 2020.01.10 |
| hide함수 활용_this (0) | 2020.01.10 |
| mouseover, mouseout (0) | 2020.01.10 |
| 태그 마우스 클릭 시 반응_this, click (0) | 2020.01.10 |
