<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>p tag</p>
<div>
<p>div in p tag1</p>
<p class="cls">div in p tag2</p>
</div>
<script>
/*
*/
/*
$('div p').click(function() {
alert('div p tag click');
})
*/
/*
$('div .cls').click(function() {
alert('div p tag click');
})
*/
$('p').on("click", function() {
//전부 가린다
//$('p').hide();
//클릭한것만 가린다
//$(this).hide();
//$(this).css(프로퍼티명, 프로퍼티 값) //setter
$(this).css("background", "#ff0000"); //setter
var color = $(this).css("background"); //getter
alert(color);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- mouseover, mouseout -->
<!-- <h3 class="cls" onmouseover="mouseOver()" onmouseout="mouseOut()">h3 tag</h3> -->
<!-- javascript > jquery 우선순위가 javascript가 더 높다 -->
<h3 class="cls" style="background-color: green;">h3 tag</h3>
<script>
function mouseOver() {
console.log("범위에 들어왔습니다");
}
function mouseOut() {
console.log("범위에 나갔습니다");
}
$(document).ready(function() {
$(".cls").mouseover(function() {
//console.log("범위에 들어왔습니다.")
//$(".cls").css("background", "#ffff00");
//여러개가 있을땐 this
$(this).css("background", "#0000ff");
});
$(".cls").mouseout(function() {
//console.log("범위에 들어왔습니다.")
//$(".cls").css("background", "#0000ff");
//여러개가 있을땐 this
$(this).css("background", "#ffff00");
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<p>p tag</p>
<p id="pid">p tag id pid</p>
<p class="cls">p tag class cls</p>
<p name="_name">p tag name _name</p>
<button>click</button>
<script>
$(document).ready(function() {
$("p").click(function() {
console.log($(this).text());
});
$("button").click(function() {
//$('p').hide();
//$("*").hide();
//$('p#pid').hide();
//$('p.cls').hide();
$('p[name=_name]').hide();
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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, hashamp) -->
<ul id="list">
<li>Coffee
<ol type="1">
<li>black</li>
<li>milk</li>
</ol>
</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<button id="btn">선택 or 감추기</button>
<button id="btn1">보이기</button>
<script>
$(function() {
$("#btn").click(function() {
//$("#list").hide();
//$("ul li:first").hide();
//$("#list li:first").hide();
//$("ul ol li:first").hide();
//$("ul ol li:first-child").hide();
$("ul ol li:nth-child(2)").hide();
});
$("#btn1").click(function() {
$("ul ol li:nth-child(2)").show();
})
});
</script>
</body>
</html>
