Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 프로그래밍
- 뇌출혈
- jQuery
- 자바스크립트
- 수수료
- 중도인출
- 가입
- javascript
- 추가납입
- PythonProgramming
- 납입
- 급성심근경색증
- 프론트엔드
- Vue.js
- 교보생명
- 문자열
- 보험
- 보험료
- 심장질환
- 변환
- 코딩
- 교보
- Java
- 인출수수료
- python
- 파이썬
- 리스트
- 웹개발
- 사망
- 특약
Archives
- Today
- Total
SeouliteLab
jQuery의 :last 선택자 활용하기 본문
jQuery의 :last 선택자는 문서 내에서 마지막 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하여 웹 페이지에서 마지막 요소를 선택하고 스타일을 변경하거나 이벤트를 추가할 수 있습니다.
예제 1: 마지막 div 요소에 스타일 적용하기
<!DOCTYPE html>
<html>
<head>
<title>마지막 div 요소에 스타일 적용하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("div:last").css("font-weight", "bold");
});
</script>
</head>
<body>
<div>첫 번째 div 요소</div>
<div>두 번째 div 요소</div>
<div>마지막 div 요소</div>
</body>
</html>
설명: 위 예제는 문서 내의 마지막 div 요소에 글꼴을 굵게 만듭니다.
예제 2: 마지막 p 요소에 배경색 변경하기
<!DOCTYPE html>
<html>
<head>
<title>마지막 p 요소에 배경색 변경하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("p:last").css("background-color", "lightblue");
});
</script>
</head>
<body>
<p>첫 번째 p 요소</p>
<p>두 번째 p 요소</p>
<p>마지막 p 요소</p>
</body>
</html>
설명: 이 예제는 문서 내의 마지막 p 요소의 배경색을 연보라색으로 변경합니다.
예제 3: 특정 클래스를 가진 요소의 마지막 요소 선택하기
<!DOCTYPE html>
<html>
<head>
<title>특정 클래스를 가진 요소의 마지막 요소 선택하기</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".box:last").css("border", "2px solid red");
});
</script>
<style>
.box {
width: 100px;
height: 100px;
margin-bottom: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">박스 1</div>
<div class="box">박스 2</div>
<div class="box">마지막 박스</div>
</body>
</html>
설명: 이 예제는 box 클래스를 가진 요소 중 마지막 요소를 선택하여 테두리를 빨간색으로 만듭니다.
'프로그래밍' 카테고리의 다른 글
jQuery의 다중 속성 선택자 활용하기 (0) | 2024.04.12 |
---|---|
jQuery의 :lt() 선택자 활용하기 (0) | 2024.04.12 |
jQuery의 :last-of-type 선택자 활용하기 (0) | 2024.04.12 |
jQuery의 :last-child 선택자 활용하기 (0) | 2024.04.12 |
jQuery의 :lang() 선택자 활용하기 (0) | 2024.04.12 |