jQuery의 first() 선택기 기본 소개 및 예제 데모
- 巴扎黑원래의
- 2017-06-22 15:23:311340검색
정의 및 사용법
first() 일치하는 요소 집합을 집합의 첫 번째 요소로 줄입니다.
Syntax
.first()
Details
DOM 요소 모음을 나타내는 jQuery 객체가 제공되면 .first() 메서드는 첫 번째로 일치하는 요소를 사용하여 새 jQuery 객체를 생성합니다.
간단한 목록이 포함된 다음 페이지를 고려하세요.
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
이 방법을 목록 항목 컬렉션에 적용할 수 있습니다.
$('li').first().css('background-color', 'red');
예:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>:first选择器</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<style type="text/css">
body{
width:7%;
height:100%;
font-size:24px;
font-weight:bold;
background-color:#CCCCFF;
text-align:center;
}
</style>
<script type="text/javascript">
$(function(){
//设置ul中的第一个li的背景色，运用到:first选择器
$("li:first").css("background-color","#00DDDD");
//设置ol中的第一个li的背景色，运用到:first选择器
$(".two li:first").css("background-color","#0000CC");
//设置ol中的第一个li的字体颜色，运用到:first选择器
$(".two li:first").css("color","#FFFFFF");
});
</script>
</head>
<body>
<div>
<ul class="one">
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
<li>西瓜</li>
<li>荔枝</li>
<li>葡萄</li>
<li>香蕉</li>
<li>香瓜</li>
</ul>
<ol class="two">
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
<li>西瓜</li>
<li>荔枝</li>
<li>葡萄</li>
<li>香蕉</li>
<li>香瓜</li>
</ol>
</div>
</body>
</html>위 내용은 jQuery의 first() 선택기 기본 소개 및 예제 데모의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery의 first() 메소드 사용 예다음 기사：jQuery의 first() 메소드 사용 예