728x90
has
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function () {
$("li").has("ul").css("background-color", "yellow") //li 중 ul을 갖고 있는 태그
$("li").first().css("color", "red") //li 중 첫 번째
$("li").last().css("color", "green") //li 중 마지막
});
</script>
</head>
<body>
<p>Hello</p>
<ul>
<li>A1</li>
<li>A2</li>
<li>A3
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</li>
<li>A4</li>
</ul>
</body>
</html>
Slice
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function () {
$("li").slice(4).css("color","red") //4부터 빨강
.end()
.slice(0,3).css("font-size", "40px") //0~3의 폰트 크기 40px
});
</script>
</head>
<body>
<p>Hello</p>
<ul>
<li>A1</li>
<li>A2</li>
<li>A3
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</li>
<li>A4</li>
</ul>
</body>
</html>
Content
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function () {
//1차 선택 후, 2차 선택 후 contents() 사용: 선택한 요소의 모든 자식 요소 반환
//--> text를 포함한 자식요소 반환
//contents(): filter 및 finde와 함께 주로 사용
$("li").find("ul").contents().css("color", "red");
});
</script>
</head>
<body>
<ul>
<li>A</li>
<li>A2</li>
<li>A3
<ul>
<li>B</li>
<li>B2</li>
<li>B3</li>
</ul>
</li>
<li>A4</li>
</ul>
</body>
</html>
children
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function () {
//find - 자식과 자손을 모두 찾아줌
$("div").children("span").css("color", "red")
$("div").find("span").css("font-size", "40px")
});
</script>
</head>
<body>
<div>
<span>홍길동</span>
</div>
<div>
유관순
<p>
<span>강감찬</span>
</p>
</div>
</body>
</html>'단순 코드 기록 > jQuery' 카테고리의 다른 글
| jQuery_Closest&Parent&Next/Prev (0) | 2024.02.14 |
|---|---|
| jQuery_리스트 위치&input태그&특정 문자열 찾기&속성 중첩 (0) | 2024.02.14 |
| jQuery_Tag&Label&Href&Constraint (0) | 2024.02.14 |
| jQuery_Arr (0) | 2024.02.14 |
| jQuery_CDN+Arr+List (0) | 2024.02.14 |