Jquery 선택기 사용 예 요약: first-child 및 :last-child
- 黄舟원래의
- 2017-06-23 14:47:022730검색
:first-child 선택기는 상위 태그의 첫 번째 하위 태그를 선택하는 데 사용됩니다. 이는 :nth-child(1)의 약식입니다.
예:
$('li:first-child') - 모든 li 상위 태그 중 첫 번째 li 하위 태그를 선택하는 데 사용됩니다.
$('tr:first-child')—비슷합니다.
:last-child 선택기는 상위 태그와 마지막으로 일치하는 하위 항목을 선택하는 데 사용됩니다.
예:
$('li:last-child') - 모든 li 상위 태그 중에서 마지막 li 하위 태그를 선택합니다.
$('tr:last-child')—비슷합니다.
<html>
<head>
<title>jquery first child and last child example</title>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
</head>
<body>
<h1> jquery first child and last child example</h1>
<ul>
<li>li #1</li>
<li>li #2</li>
<li>li #3</li>
<li>li #4</li>
<li>li #5</li>
</ul>
<button>li:first-child</button>
<button>li:last-child</button>
<script type="text/javascript">
$("button").click(function(){
var str=$(this).text();
$("li").css("background","white");
$(str).css("background","coral");
});
</script>
</body>
</html>
효과:
버튼을 클릭하세요. 1:
버튼을 클릭하세요. 2:
위 내용은 Jquery 선택기 사용 예 요약: first-child 및 :last-child의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.