<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>p tag</p>
<p id="test">p tag id test</p>
<p class="cls">p tag class cls</p>
<ul id="list">
<li>Coffee
<ul>
<li>Black</li>
<li>Milk</li>
</ul>
</li>
<li>Tea</li>
<li>Soda</li>
</ul>
<button>Button</button>
<script type="text/javascript">
$(function () { //이런 형태로 많이 사용
/* $("p").click(function () {
console.log( $(this).text() );
}); */
});
$(document).ready(function () {
$("button").click(function () { //버튼을 눌렀을 때
// alert("click");
// $("p").hide(); -> p태그를 숨긴다
// $("*").hide(); -> 모든 태그를 숨긴다
// $("p#test").hide(); // p태그의 id 가 test 인 태그를 숨긴다
// $("p.cls").hide(); // p 태그의 class 이름이 cls 인 태그를 숨긴다
// $("#list").hide(); // id 가 list 인 태그를 숨긴다.
// $("ul li:first").hide(); // ul 안에 li 태그의 첫 번째 인자값을 숨긴다
// $("ul li:first-child").hide(); //ul 태그 안에 li 태그의 첫번째 자식 태그를 숨긴다.
$("ul ul li:nth-child(1)").hide(); //ul 태그 안에 ul 태그의 li 태그의 첫번째 요소를 숨긴다
});
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| Jquery(6) 2차원배열, td:eq(index) ,for문 (0) | 2018.08.08 |
|---|---|
| Jquery(5) fade(In,Out,Toggle,to) (0) | 2018.08.08 |
| Jquery(4) 기본 focus,blur,show,toggle,dbclick,hover,mousedown, mouseup (0) | 2018.08.06 |
| Jquery(2) 기본 click,mouseover,mouserout (0) | 2018.08.06 |
| Jquery(1) $ , val , text , 기본정리 (0) | 2018.08.06 |