카테고리 없음
콘텐츠 탐색 선택자(contain,contents,has,not,end)
Remi
2021. 7. 25. 16:40
728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="JS/jquery.js"></script>
<script>
$(function(){
$("#inner_1 p:contains(내용1)")
.css({
"background-color":"#ff0"
});
$("#inner_1 p:has(strong)")
.css({
"background-color":"#0ff"
});
$("#outer_wrap").contents()
.css({
"border":"1px dashed #00f"
});
$("#inner_2 p").not(":first")
.css({
"background-color":"#0f0"
});
$("#inner_2 p").eq(2).end()
.css({
"color" :"#f00"
});
});
</script>
</head>
<body>
<div id ="outer_wrap">
<h1>콘텐츠 탐색 선택자</h1>
<section id ="inner_1">
<h1>contains(),contents(),has()</h1>
<p>
<span>내용1</span>
</p>
<p>
<strong>내용2</strong>
</p>
<p>
<span>내용3</span>
</p>
</section>
<section id="inner_2">
<h1>not(),end()</h1>
<p>내용4</p>
<p>내용5</p>
<p>내용6</p>
</section>
</div>
</body>
</html>
728x90
반응형