본문 바로가기

Webstoryboy

Category

Explanation

JQUERY

[jQuery] 필터링

필터링

선택된 집합에서 다시 조건에 맞는 집합을 선택합니다.


필터링(Filtering)

메서드 설명
.eq() 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
.filter() 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
.first() 선택된 요소에서 첫 번째 자식 요소를 찾습니다.
.has() 선택한 요소에서 주어진 선택자가 있으면 선택한 요소를 선택합니다.
.is() 선택된 요소 객체의 특징을 판별합니다.
.last() 선택된 요소에서 마지막번째 자식 요소를 찾습니다.
.map() 선택된 요소의 배열 집합을 새롭게 변경합니다.
.not() 선택된 요소에서 조건에 맞지 않는 것을 선택합니다.
.slice() 선택된 요소에서 조건의 범위로 재선택합니다.
Sample : 필터링
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>제이쿼리(jQuery)</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script type="text/javascript">
				$(document).ready(function(){
				//$(".list li").eq(2).css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li:eq(2)").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").filter(".one5").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").first().css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").last().css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").has("ul").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").not(".one5").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				//$(".list li").slice(1,5).css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
				$(".list li").is(".one5").css({ backgroundColor:"#9ab92e", border:"1px dashed #01584d" });
			});
        </script>
    </head>
    <body>
		<h3>기본 태그를 선택하는 방법</h3>
		<div class="list">
			<ul>
				<li class="one1">one1</li>
				<li class="one2">one2</li>
				<li class="one3">one3</li>
				<li class="one4">one4</li>
				<li class="one5">one5</li>
				<li class="one6">one6</li>				
				<li class="one7">one7</li>
				<li class="one8">one8</li>
				<li class="one9">one9</li>
				<li id="one10">one10
					<ul>
						<li>one10-1<img src="../css.png" alt="이미지"></li>
						<li>one10-2<img src="../html5.png"></li>
						<li>one10-1</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html> 

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기