jquery:odd selector 적용에 대한 자세한 설명
- 黄舟원래의
- 2017-06-23 09:44:171736검색
jQuery의 :odd 선택자는 index 값이 홀수인 모든 요소를 일치시키고 이를 jQuery 객체로 캡슐화하여 반환하는 데 사용됩니다.
이 선택자의 반대는 :even 선택자인데, 이는 모든 요소를 짝수 인덱스 값과 일치시키는 데 사용됩니다.
참고: 인덱스 값은 0부터 계산되기 시작하므로 홀수 인덱스에 있는 요소는 실제로는 자연 순서로 짝수 요소입니다.
이 선택기는 0부터 계산하여 홀수 인덱스 값을 가진 요소와 일치합니다.
문법 구조:
$(":odd")이 선택기는 일반적으로 클래스 선택기, 요소 선택기 등과 같은 다른 선택기와 함께 사용됩니다. 예:
$("li:odd)").css("color","green")위 코드는 li 요소 컬렉션에서 홀수 인덱스가 있는 li의 글꼴 색상을 녹색으로 설정합니다.
다른 선택기와 함께 사용하지 않을 경우 기본적으로 * 선택기와 함께 사용됩니다. $(": 홀수")는 $("*: 홀수")
예제 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("li:odd").css("color","blue");
});
});
</script>
</head>
<body>
<ul>
<li>html专区</li>
<li>div+css专区</li>
<li>jQuery专区</li>
<li>Javascript专区</li>
</ul>
<button id="btn">点击查看效果</button>
</body>
</html>반환 값
선택기와 일치하는 DOM 요소의 홀수 인덱스 값으로 DOM 요소를 캡슐화하는 jQuery 객체를 반환합니다. 선택자.
선택기와 일치하는 요소가 2개 미만인 경우 빈 jQuery 개체가 반환됩니다.
예제 및 설명
다음 HTML 코드를 예로 들어보세요.
<div id="n1">
<div id="n2">
<ul id="n3">
<li id="n4">item1</li>
<li id="n5">item2</li>
<li id="n6">item3</li>
</ul>
</div>
<div id="n7">
<ul id="n8">
<li id="n9">item1</li>
<li id="n10">item2</li>
</ul>
</div>
</div>이제 자연 순서가 짝수(인덱스 값이 홀수)인 div 태그를 찾으려면 다음 jQuery 코드를 작성할 수 있습니다.
// 选择了id为n2的一个元素
$("div:odd"); 다음으로, 모든 ul 태그 중에서 자연 순서가 짝수(인덱스 값이 홀수)인 li 태그를 찾으려면 다음 jQuery 코드를 작성할 수 있습니다.
// 选择了id分别为n5、n9的两个元素
$("ul li:odd");
위 내용은 jquery:odd selector 적용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!