코드랩 레퍼런스
.is() 본문
.is() 메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환합니다.
Definition
- .is() 메서드는 선택한 요소의 상태가 지정한 속성과 일치하면 true를 반환합니다.
Syntax
$(selector).is(selector);
$(selector).is(function);
$(selector).is(selection);
$(selector).is(elements);
$(selector).is(function);
$(selector).is(selection);
$(selector).is(elements);
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .is() |
Sample 글을 클릭하면 클래스를 추가하는 예제입니다.
필터링(Filtering) : 해당 글을 클릭하면 선택됩니다.
- .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
- .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
- .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
- .has() : 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
- .is() : 문서 객체의 특징을 판별합니다.
- .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
- .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
- .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
- .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<script type="text/javascript">
$(document).ready(function(){
$( ".list li a" ).click(function(){ //li의 a 태그를 클릭했을 때 이벤트를 설정
var target = $(this); //해당 a태그를 클릭했을 때 각각의 클릭 타겟을 변수에 저장
if (target.is("a")){ //만약에 클릭했을 때 a 태그가 존재하면 타겟에 클래스 on을 추가합니다.
target.addClass("on");
}
});
}); ;
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<style>
#ex {padding: 20px; padding-top:0;}
a {text-decoration: none;}
.list li a.on {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d; display:inline-block}
</style>
</head>
<body>
<h3>필터링(Filtering)</h3>
<div class="list">
<ul>
<li><a href="#">.eq() : 인덱스 번호에 해당하는 요소를 찾습니다.</a></li>
<li><a href="#">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</a></li>
<li><a href="#">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</a></li>
<li><a href="#">.has() : 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</a></li>
<li><a href="#">.is() : 문서 객체의 특징을 판별합니다.</a></li>
<li><a href="#">.last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.</a></li>
<li><a href="#">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</a></li>
<li><a href="#">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</a></li>
<li><a href="#">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</a></li>
</ul>
</div>
<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 a" ).click(function(){
var target = $(this);
if (target.is("a")){
target.addClass("on");
}
});
});
</script>
</body>
</html>
Sample2 선택을 선택적으로 할 수 있는 예제입니다.
필터링(Filtering) : strong 태그가 포함되면 빨간색 없으면 파란색
- .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
- .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
- .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
- .has() : 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
- .is() : 문서 객체의 특징을 판별합니다.
- .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
- .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
- .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
- .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<script type="text/javascript">
$(document).ready(function(){
$( ".list2 li a" ).click(function() {
var target = $(this); //li a 태그를 선택한 타겟을 변수에 저장합니다.
var two = target.is(function() { //target에 strong 태그가 한개일 때 변수 two에 저장합니다.
return $( "strong", this ).length === 1;
});
if (two) { //two라는 변수에 strong 태그가 있으면
target.addClass("on"); //클래스 on를 추가합니다.
} else { //two라는 변수에 strong 태그가 없으면
target.addClass("off"); //클래스 off를 추가합니다.
}
});
}); ;
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<style>
#ex {padding: 20px; padding-top:0;}
a {text-decoration: none;}
.list2 li a.on {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d; display:inline-block}
.list2 li a.off {padding: 4px 4px 2px 10px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px; border:1px dashed #3d90b7; display:inline-block}
</style>
</head>
<body>
<h3>필터링(Filtering)</h3>
<div class="list2">
<ul>
<li><a href="#">.eq() : 인덱스 번호에 해당하는 <strong>요소</strong>를 찾습니다.</a></li>
<li><a href="#">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</a></li>
<li><a href="#">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</a></li>
<li><a href="#">.has() : 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</a></li>
<li><a href="#">.is() : 문서 객체의 특징을 판별합니다.</a></li>
<li><a href="#">.last() : 선택된 <strong>노드</strong> 집합에서 마지막 자식 요소를 찾습니다.</a></li>
<li><a href="#">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</a></li>
<li><a href="#">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</a></li>
<li><a href="#">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".list2 li a" ).click(function() {
var target = $(this);
var two = target.is(function() {
return $( "strong", this ).length === 1;
});
if (two) {
target.addClass("on");
} else {
target.addClass("off");
}
});
});
</script>
</body>
</html>
Sample3 select를 이용한 선택방법입니다.
필터링(Filtering) : select를 이용한 선택방법입니다.
- .eq() : 인덱스 번호에 해당하는 요소를 찾습니다.
- .filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.
- .first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.
- .has() : 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
- .is() : 문서 객체의 특징을 판별합니다.
- .last() : 선택된 노드 집합에서 마지막 자식 요소를 찾습니다.
- .map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.
- .not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.
- .slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.
<script type="text/javascript">
$(document).ready(function(){
$( ".list3 li" ).click(function() { //li를 클릭했을 때 이벤트 함수를 설정합니다.
var target = $(this); //각각의 li를 클릭했을 때 타겟을 변수에 저장합니다.
if ( target.is( ":first-child" )) { //is(select)가 해당이 되면 실행됩니다.
target.find("a").text( "이것은 is(':first-child') 셀렉트를 이용하였습니다." ).addClass("on"); //a 태그를 찾은 후 글씨를 변경하고 클래스 on을 추가합니다.
} else if ( target.is( ".is" )) {
target.find("a").text( "이것은 is('.is') 셀렉트를 이용하였습니다." ).addClass("on");
} else if ( target.is( ":contains('배열')" )) {
target.find("a").text( "이것은 is(':contains('배열')' 셀렉트를 이용하였습니다.").addClass("on");
} else if ( target.is( ":nth-child(2)" )) {
target.find("a").text( "이것은 is(':nth-child(2)' 셀렉트를 이용하였습니다.").addClass("on");
} else if ( target.is( ":last-child" )) {
target.find("a").text( "이것은 is(':last-child' 셀렉트를 이용하였습니다.").addClass("on");
} else { //is(select)가 해당이 되지 않으면 실행됩니다.
target.find("a").text( "이것은 is('select') 셀렉트를 이용하지 않았습니다.").addClass("off");
}
});
}); ;
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<style>
#ex {padding: 20px; padding-top:0;}
a {text-decoration: none;}
.list3 li a {color: #666;}
.list3 li a:hover {text-decoration:none;}
.list3 li a.on {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border:1px dashed #a51a3d; display:inline-block}
.list3 li a.off {padding: 4px 4px 2px 10px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px; border:1px dashed #3d90b7; display:inline-block}
</style>
</head>
<body>
<h3>필터링(Filtering) : select를 이용한 선택방법입니다.</h3>
<div class="list3">
<ul>
<li><a href="#">.eq() : 인덱스 번호에 해당하는 <strong>요소</strong>를 찾습니다.</a><em class="txt"></em></li>
<li><a href="#">.filter() : 선택된 요소 집합에서 선택자를 추가하거나 함수를 사용해서 원하는 결과를 추출해냅니다.</a><em class="txt"></em></li>
<li><a href="#">.first() : 선택된 요소 집합에서 첫번째 자식 요소를 찾습니다.</a></li>
<li><a href="#">.has() : 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</a></li>
<li class="is"><a href="#">.is() : 문서 객체의 특징을 판별합니다.</a></li>
<li><a href="#">.last() : 선택된 <strong>노드</strong> 집합에서 마지막 자식 요소를 찾습니다.</a></li>
<li><a href="#">.map() : 대상이 되는 요소 집합의 배열을 새롭게 변경합니다.</a></li>
<li><a href="#">.not() : 조건에 맞지 않은 것들만 찾아서 선택합니다.</a></li>
<li><a href="#">.slice() : 선택된 집합을 조건의 범위로 재선택해줍니다.</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".list3 li" ).click(function() {
var target = $(this);
if ( target.is( ":first-child" )) {
target.find("a").text( "이것은 is(':first-child') 셀렉트를 이용하였습니다." ).addClass("on");
} else if ( target.is( ".is" )) {
target.find("a").text( "이것은 is('.is') 셀렉트를 이용하였습니다." ).addClass("on");
} else if ( target.is( ":contains('배열')" )) {
target.find("a").text( "이것은 is(':contains('배열')' 셀렉트를 이용하였습니다.").addClass("on");
} else if ( target.is( ":nth-child(2)" )) {
target.find("a").text( "이것은 is(':nth-child(2)' 셀렉트를 이용하였습니다.").addClass("on");
} else if ( target.is( ":last-child" )) {
target.find("a").text( "이것은 is(':last-child' 셀렉트를 이용하였습니다.").addClass("on");
} else {
target.find("a").text( "이것은 is('select') 셀렉트를 이용하지 않았습니다.").addClass("off");
}
});
});
</script>
</body>
</html>
Share
Ad
Comments