๐น jQuery - selectors
๐ ๋ฌธ์๊ฐ์ฒด ์ ํํ๊ธฐ
<!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>day63-2_selector.html</title>
<link rel="stylesheet" href="css/basicStyle.css">
<!-- ์์ : ์ ์ด์ฟผ๋ฆฌ ์ฝ์ด -> ํ๋ฌ๊ทธ์ธ -> ์คํฌ๋ฆฝํธ -->
<!-- jQuery Core -->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- ํ๋ฌ๊ทธ์ธ -->
<!-- script -->
<script src="js/day63-2_script.js"></script>
</head>
<body>
<div id="wrapper">
<div class="header">
<h3>ํค๋์ ๋ชฉ</h3>
<p>๋ฌธ์ฅ1</p>
</div>
<div class="section">
<h3 class="part">์น์
์ ๋ชฉ</h3>
<p class="part">๋ฌธ์ฅ2</p>
<p class="part">๋ฌธ์ฅ3</p>
<ol class="part">
<li>ํญ๋ชฉ1</li>
<li>ํญ๋ชฉ2</li>
<li>ํญ๋ชฉ3</li>
<li>ํญ๋ชฉ4</li>
</ol>
<ul class="part">
<li>ํญ๋ชฉ1</li>
<li>ํญ๋ชฉ2</li>
<li>ํญ๋ชฉ3</li>
<li>ํญ๋ชฉ4</li>
</ul>
</div>
</div>
</body>
</html><script>
$(function(){
//๋ฌธ์๊ฐ์ฒด๋ฅผ ์ ํํจ
$('*').css({'boder-color':'#ccc'});
$('*').css({borderColor:'#fcc'});
$('h3').css({backgroundColor:'#ccc'});
$('#wrapper').css({borderColor:'red'});
$('.header p').css({border: 'dotted'});
$('ol,ul').css({border: 'dashed'});
// ๋์ ๋ฐ๋ผ ์ ์ฒด์ํ์์ *ํ๊ธฐ๋ ์๋ต๋ ์๋ ์์
$('ol>:nth-of-type(2)').css({backgroundColor:'#fee'});
$('ul>:nth-of-type(2)').css({backgroundColor:'#ccf'});
});
</script>
์ด์ ์ด์ ์ด์ ๐ฅ