Notice
Recent Posts
Recent Comments
Link
관리 메뉴

web sprit

[jQuery] is() 메서드(Method) 사용하기 본문

스크립트/J-Query

[jQuery] is() 메서드(Method) 사용하기

커드만 2016. 12. 28. 17:35

is() 메서드는 선택한 요소 중 하나가 is( 선택한 Element )와 일치하는지 확인합니다.

결과값은 참(true)/거짓(false)을 나타냅니다.

말보다 예시를 보면 더 빠른 이해가 되겠죠? 아래에 예를 들겠습니다.


html

1
2
3
4
5
6
7
8
<div class="is_test_box">
    <ul class="list">
        <li>item01</li>
        <li>item02</li>
        <li>item03</li>
    </ul>
    <button type="button">확인</button>
</div>
cs


javascript (tag 확인)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
    var $testBox = $(".is_test_box");
    var $list = $(".is_test_box .list");
    var $Btn = $(".is_test_box button");
 
    $Btn.on("click"function(){
        var $liBool = $list.children().is("li");
 
        alert($liBool);
 
        if($liBool){
            alert("li 태그가 있습니다.");
        }else{
            alert("li 태그가 없습니다.");
        }
    });
});
cs


간단하게 해석 하자면

버튼을 누르면 ul 태그 안에 li 태그가 있는지에 대한 참/거짓을 alert를 띄우고

li 태그가 있으면 "li 태그가 있습니다."

li 태그가 없으면 "li 태그가 없습니다."

라는 경고메시지가 뜹니다.


is() 메서드는 태그의 존재 유무를 확인하는것 뿐만 아니라 

특정 id 또는 class의 존재 유무도 확인할 수 있습니다.

간단한 예를 들어보겠습니다.


javascript (class 확인)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
    var $testBox = $(".is_test_box");
    var $list = $(".is_test_box .list");
    var $Btn = $(".is_test_box button");
 
    $Btn.on("click"function(){
        var $ulBool = $testBox.children().is(".list");
 
        alert($ulBool);
 
        if($ulBool){
            alert("list 클래스가 있습니다.");
        }else{
            alert("list 클래스가 없습니다.");
        }
    });
});
cs


위도 마찮가지로 li 태그에 list 클래스의 존재 여부를 파악하여 true/false 를 반환 합니다.

더 자세한 내용은 아래의 주소를 참고하시면 되겠습니다.^^ 감사합니다.


참조 : 

w3schools - http://www.w3schools.com/jquery/traversing_is.asp

jQuery - http://api.jquery.com/is/#is-function

Comments