목차
first() 예제 - 선택요소의 첫번째 요소 반환
first() 정의
first() 구문
first() 예제 - (p span) 구조의 가장 첫번째 요소만 선택
first() 예제 - 선택요소의 첫번째 요소 반환
<style>
div {
border:1px solid black;
margin-bottom:20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div p").first ().css({"background-color": "blue","color":"white"});
$("div p").last().css({"background-color": "red", "color":"white"});
});
</script>
<h1>홈짱닷컴에 오신 걸 환경합니다.</h1>
<div>
<p>홈짱닷컴</p>
<p>Homzzang.com</p>
</div>
<div>
<p>홈페이지 무료 제작</p>
<p>그누보드 웹언어 등</p>
</div>
<p>초보 입문자 대환영</p>
결과보기
first() 정의
선택요소의 첫번째요소 반환.
1. cf.
last() 메서드 - 선택요소의 마지막요소 반환.
2.
모든 브라우저 지원.
3. 공식 매뉴얼
https://api.jquery.com/first/
first() 구문
$(selector ).first()
first() 예제 - (p span) 구조의 가장 첫번째 요소만 선택
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p span").first().css("background-color", "yellow");
});
</script>
<h1>홈짱닷컴 Homzzang.com</h1>
<p>가<span>나</span> 다</p>
<p>라<span>마</span>바</p>
<p>사<span>아</span>자</p>
결과보기
PS. 제거하려면, $("p span").first().remove();
주소 복사
랜덤 이동