jQuery

설정 방법

<script src="https://code.jquery.com/jquery-2.2.1.js"></script>

<script>

jQuery(document).ready(function($){ 

 

});

</script>

 

사용 방법

* jQuery 이벤트 등록 방법 

on : 내부 적으로 브라우저에 형태에 따라 적당한 코드로 변환

$('#jquery').on('click', function(event){

     alert('jQeuryTest');

});

 

* onAPI 사용법 

$('#jQuery').on(event, [selector], [data], function({

    1. event : 이벤트 동작을 의미함 ex) click, doubleclick ... 

    2. selector : 필터링의 기능을 담당 ex) on('click','a, li', function) a 태크 혹은 li태그에 클릭이벤트 부여 이떄 this인 

                    경우 해당 태그를 가져옴 또한 late binding 기능 을 가지고 있음 

                    late binding이란 존재하는 상위 태그를 통해 이벤트를 등록하고 존재하지 않은 태그에 대해 이벤트를 부

                    여할 수있다.

}));

 

* 다중 이벤트 처리

1. event 부분에 여러개의 같은 이벤트를 적용 

    .on('focus blur', function(e){ })

2-1 event 부분에 여러개의 다른 이벤트를 적용 (객체를 이용한방법) 

    var hanlder = function(e){

         $('#status').html(e.type);

    }

      var hanlder2 = function(e){

         $('#status').html(e.id);

    }

    .on( 

           { 'focus' : handler, 'blur' : hanler2 }

         )

2-2  event 부분에 여러개의 다른 이벤트를 적용 (체이닝 이용한방법)     

  .on('focus', hanlder).on('blur', hander2);

 

* 이벤트 제거

$('#target').off('이벤트 동작') : 해당 객체의 이벤트 동작을 제거함

 

* jQuery를 이용해 객체를 가져오게 되면 해당 객체에 jQeury로 사용할 수있다. 

ex ) var target = $('li')

      target.css('color','red');  =>모든 li 태그에 적용됨

 

ex2) for(var i=0; i<target.length; i++){

          $('target[0]').('color','blue');  => target 안에 있는 객체를 jQuery로 사용하기 위해서는 다시 감싸야함

      });

 

* jQuery 선택자 API

$('.marked', '#active') 일 경우 인자값 두개의 교집합에해당하는 부분이 선택됨

$('#active .marked') 일 경우 active의 하위 태그중에 클래스명이 marked인 부분만 선택됨

$('#active').find('.marked') 일 경우 active안에서 find해 클래스명이 marked가 선택됨 즉 하위 태그를 찾는거

- 두개에 동시에 선택자에 다른 컬러를 줄 경우 find를 사용함 

ex) $('#active').css('color', 'red').find('.marked').css('color','blue'); 요런 식으로

 

 

* jQuery 사용시 파라미터값을 두개 쓰면 set 한개 만 쓰면 get 

ex) var color = target.css('color');

 

* 변수값에 담겨져 있는경우 $(변수명).css('color','red') 와 같이 사용한다. ( ' 제외)

 

* jQuery Node 변경 API

1. 위치 지정

$('.target').before('<div>before</div>');
$('.target').after('<div>after</div>');
$('.target').prepend('<div>prepend</div>');
$('.target').append('<div>append</div>');

 

2. 제거 (remove / empty) 

jQeuryElement.remove() : 해당 객체 완전 삭제 

jQeuryElement.empty() : 해당 객체 내용만 삭제 

 

3. 업데이트 (replaceAll / replaceWith)

replaceAll : 바꾸고자하는 걸 앞에다가 적고 뒤에는 해당 객체의 위치 

ex) $('<div>replaceAll</div>').replaceAll('#target1');

replaceWith : 제어 대상을 먼저 지정하는것 

ex) $('#target1').replaceWith('<div>replaceWith</div>');

 

4. 노드복사 (clone)

$('#jQuery').clone() : 해당 객체가 복사됨

$('#jQuery').clone().replaceAll('#target1'); 이런 식으로 응용 가능1

$('#target2').replaceWith($('#jQuery').clone()); 이런 식으로 응용 가능2

 

5. 이동 

$('#target1').append($('#jQuery')): 위치 지정함수를 통해서 아이디가 jQuery인 객체를 target객체안으로 이동할수있음 

 

* 속성 제어 API (attr/prop)

var target = $('#target');

target.attr('id');  :  target의 id 값을 가져옴

target.attr('id','targetUpdate')  :  target의 id를 다시 설정해줌

<input checked="checked"> 일떄 

attr의 경우 'checked'  결과값을 나타내지만 prop의 경우 true의 결과를 나타냄

prop의 경우 의역한다고 생각하면 될듯 

 

* 해당 객체가 jQuery 객체인지 확인하는 방법 

ex) element.constructor  => HTMLElement || jQuery

 

* jQeury.map 사용법 근데 for loop를 제일 많이씀

var target = $('li');

target.map(function(index,elem){
    console.log(index,elem);
    if(index == 0){
        $(elem).css('color','red');
    }else if (index == 1){
        $(elem).css('color','blue');
    }else $(elem).css('color','green');
})