<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>오늘의 쇼핑 리스트</p>
<ol>
<li>운동화</li>
<li>레깅스</li>
<li>양말</li>
<li>져지</li>
<li>안심스테이크</li> <!-- 중복 넣어보기 -->
</ol>
<p>오늘의 메뉴 선택</p>
<ol>
<li>초밥</li>
<li>스테이크</li>
<li>떡볶이</li>
<li>김치찌개</li>
</ol>
<script type="text/javascript">
//ol 아래에 있는 모든 li 중 첫번째 li
//$("ol li:first").css("background-color", "yellow");
//각 ol의 첫번째 li만 선택..child
$("ol li:first-child").css("background-color", "yellow");
//전체항목에서 '스테이크'를 찾아서 글자크기 1.5배..contains
$("li:contains(스테이크)").css("font-size", "1.5em");
//li의 홀수의 css변경..odd홀수, even짝수
$("li:odd").css("border", "2px solid magenta");
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| 211001_div,check,radio (0) | 2021.10.01 |
|---|---|
| 211001_clone,append (0) | 2021.10.01 |
| 211001_div,mouseover,mouseout,empty,hover (0) | 2021.10.01 |
| 211001_table,button,click,score (0) | 2021.10.01 |
| 211001_span,rgbColor,random,click (0) | 2021.10.01 |