기타 메소드 - each(), is(), $extend, $noConflict

each() method

: 객체나 배열을 관리하는 for in 문과 비슷한 메소드로 객체나 배열의 요소를 검사한다.

 

1. $.each(object, function(index, item){})의 형식으로 사용한다.

- index : 배열의 인덱스 또는 객체의 키를 의미

- item : 해당 인덱스나 키가 가진 값을 의미

2. $('선택자').each(function(index, item){})

 

ex(1).

div 박스 안에 a태그를 반복적으로 만들고 웹사이트 링크를 넣어보기

<div id="area1"></div>
 
<script>
        $(document).ready(function(){
            // 객체 배열 선언
            var arr = [{name : "네이버", link : "http://www.naver.com"},
                        {name : "구글", link : "http://www.google.com"},
                        {name : "w3c", link : "http://www.w3c.com"},
                        {name : "s3schools", link : "http://www.w3schools.com"}];

            // a링크 쌓을 빈 문자 변수 선언
            var output = "";
            // item.keyname 객체의 키값에 접근
            $.each(arr, function(index, item){
                output += "<h2><a href='" + item.link + "'>" + item.name + "</a></h2>";
            });

            $("#area1").html(output);
        });
    </script>

 

 

결과

h2 안의 a태그에 각 링크가 연결되었음

 

 

ex(2).

div박스 안에 있는 다 같은 h1태그에 스타일 적용시키기

<div id="wrap">
        <h1>item-0</h1>
        <h1>item-1</h1>
        <h1>item-2</h1>
        <h1>item-3</h1>
        <h1>item-4</h1>
</div>

div 안에 자식으로 모두 같은 타입인 h1 태그가 여러개 있으므로

children() 선택자로 선택하여 each()메소드로 반복해 적용해볼 수 있다

---

 

is() method

: 매개변수로 선택자를 입력하고, 선택한 객체가 선택자와 일치하는지 판단하여

boolean 값 리턴

 

ex.

test라는 클래스가 있는 h3태그와 없는 h3태그 생성하여 클래스 유무 여부에 따라 스타일 적용해보기

<h3 class="test">test1</h3>
<h3 >test2</h3>
<h3 class="test">test3</h3>
<h3 class="test">test4</h3>
<h3 >test5</h3>
<h3 class="test">test6</h3>

<script>
       $(function(){
            // h3 태그에 다음과 같은 함수 반복
            $("h3").each(function(){
                // this(h3)가 test라는 클래스인가요? true라면 색상 변경
                if($(this).is(".test"))
                    $(this).css({"background":"orangered","color":"white"});
            });
        });
</script>

 

 

결과

test 클래스가 명시되지 않은 test2,5는 스타일적용 되지 않음

 

---

 

$.extend method

: 여러개의 객체를 하나로 합칠 때 사용

 

ex.

객체 생성 후 키를 추가하고 $.extend 후 콘솔창으로 객체 값을 확인해보기

 

<script>
        $(document).ready(function(){
            var obj1 = {name : "ttoah", age : 2};
            console.log(obj1);
        });
</script>

1) obj1 객체에 name과 age만 입력 후 콘솔창 확인

obj1 객체 값 출력됨

 

<script>
$.extend(obj1, {job : "코딱지공주"});
            console.log(obj1);
</script>

2) job이라는 키 값을 추가하면서 $.extend 후 콘솔창 확인

$extend하니 기존 obj1객체에 job 키가 추가됨

 

<script>
var obj2 = {name : "또아", hobby : ["코골기", "간식먹기"]};

            $.extend(obj1, obj2);
            console.log(obj1);
</script>

새로운 obj2 객체 생성 후 name 과 hobby 입력 후 obj1에 $extend하기

콘솔창 확인

obj1에 obj2가 합쳐짐 

하지만 name키는 중복이기에 ttoah에서 또아 로 덮어쓰여짐

-> 중복된 객체의 속성은 나중의 것으로 덮어쓴다.

 

---

 

$.noConflict method

: 많은 자바스크립트 라이브러리가 '$' 기호를 함수, 변수로 사용하고 있기 때문에,

jQuery 라이브러리와 충돌하는 경우가 생길 수 있음.

이를 방지하기 위해 noConflict 메소드를 통해 '$' 대신 새로운 alias(별칭)을 부여함

또, 다른 버전의 jQuery와 '$'의 충돌 방지를 위해 사용함

 

ex.

먼저 jQuery문으로 태그에 스타일 적용

<h1 id="ncTest">noConflict</h1>
    <script>
        $(document).ready(function(){
            $("#ncTest").css("color","red");
        });
    </script>

요로코롬

 

다음 $.noConflict로 jQuery에서 사용하던 $기호 무력화

<script>
	var jq = $.noConflict();
        // 이제 현재 페이지에서 제이쿼리를 나타내던 '$'는 사용할 수 없고
        // '$' 대신 jp를 사용해야함 
        // 그전에 '$'를 사용해서 스타일 적용한것들이 다 무효화 되었음

        jq(function(){
             jq("#ncTest").css("color","red");
        });
        // 즉 '$' 를 jq 가 대체한다
</script>

jq라는 별칭 부여 후 noConflict() 했더니 무력화됨

jQuery에서 사용한 $대신 부여한 별칭 jq로 대체하고 스타일 적용 후

다시 스타일 적용 됐음ㅎㅎ