#67 Java Script jQuery 기본적인 API 예제

 2019.08.16

 

 // html 제어 메서드

 

    <script type="text/javascript">
        /*
 
        .append() - 선택된 대상의 자식요소 제일 마지막에 html 삽입 
        .prepend() - 선택된 대상의 자식요소 첫번째에 html 삽입 
        .before() - 선택된 대상의 동일선상의 이전 위치에 html 삽입  
        .after() - 선택된 대상의 동일선상의 다음 위치에 html 삽입 
        .clone() - 선택된 대상을 복제 
        .html() - 선택된 대상의 자식요소에 html을 삽입하거나 html을 가지고 온다 
        .text() - 선택된 대상의 자식요소의 텓스트 값을 가지고 오거나 삽입한다 
        .remove() - 선택된 대상의 제거한다 
        .css() - 선택된 대상의 css style값을 가지고 오거나 삽입한다 
        .val() - 선택된 대상의 값을 가지고 오거나 삽입한다
        .attr() - 선택된 대상의 태그의 속성값을 제어한다
                   매개변수가 1개일 경우 매개변수의 값과 일치하는 속성명의 값을 가지고 오며
                   매개변수가 2개일 경우 1번째 매개변수는 속성명, 2번째 매개변수는 속성값으로 해당 대상의 속성이 삽입된다 
        .removeAttr() - 선택된 대상의 매개변수값과 일치하는 속성을 제거한다
 
        */ 
    </script>

 

 

 // 사용자 제어 이벤트

 

    <script type="text/javascript">
        /*  
    
          // 사용자 제어 이벤트 
         .blur() - 선택된 대상의 포커스가 이동되었을 때 발동 
         .change() - 선택된 대상의 값이 변경되었을 때 발동 
         .click() - 선택된 대상이 클릭되었을 때 발동 
         .focus() - 선택된 대상에 포커스를 줄 때 
         .keydown() - 선택된 대상의 키가 눌렸을 때 발동     
        
        */
    </script>

 // 선택기

 

    <script type="text/javascript">
        /*  
 
         .parent() - 선택된 대상의 부모 선택 
         .parents() - 선택된 대상의 부모 전체 중에서 검색하여 선택 
         .children() - 선택된 대상의 자식요소 선택 
         .find() - 선택된 대상의 자식요소 전체 중 검색하여 선택 
         .each() - 선택된 대상의 존재하는 값만큼 반복 콜백함수 실행
         .index() - 선택된 대상의 인덱스 값을 가지고 온다 
         .eq() - 선택된 대상의 매개변수의 값(index)을 선택한다  
         .first() - 다수의 선택된 대상의 첫번째를 선택한다 
         .last() - 다수의 선택된 대상의 마지막을 선택한다
         .prev() - 선택된 대상의 이전 대상을 선택한다 
         .next() - 선택된 대상의 다음 대상을 선택한다 
         .not() - 다수의 선택된 대상 중 매개변수의 객체만 제외하고 선택한다
         
        */
    </script>

 // 기타

 

    <script type="text/javascript">
        /*  
         
         .on()    //선택된 대상에 이벤트 추가
         .off()    //선택된 대상에 이벤트 제거
        .prop() //선택된 대상의 현재 옵션사항 체크 ('checked','selected','hidden' 등)
                    ex) 매개변수 1개 ('checked') true 혹은 false 반환
                    ex) 매개변수 2개 ('checked', true) 선택된 대상을 checked 상태도 만든다            
        .show()      // 선택된 대상에게 css style의 값 속성 display의 값을 block 처리한다
        .hide()      // 선택된 대상에게 css style의 값 속성 display의 값을 none 처리한다        
        .ready()  // 모든 html node가 로드 되었을 시 실행
        .resize() // 디바이스 크기가 변화하였을 때 실행
        .load()      // 모든 html node가 로드 되었을 시 실행
        
        */
    </script>

 

 

 // 예제 1. 클릭된 대상(article)을 복제하여 대상의 이전에 html 삽입

 

    <script type="text/javascript">
        $('article').click(function(){
            let clone = $(this).clone();
            $(this).before(clone);    
        });
    </script>

 

add() 클릭시 add()가 추가됨

 

 

 // 예제 2. 클릭된 대상(article)의 타이틀을 jQuery으로 바꿔주세요

 

    <script type="text/javascript">
        $('article').click(function(){
            $(this).find('h1 a').remove();
            $(this).find('h1').append('<a href="#">jQuery</a>');
        });
    </script>

 

article 클릭시 title이 변경됨

 

 

 // 예제 3. 클릭된 대상(article)을 복제하여 body의 자식 요소 첫번째에 넣어주고 a 링크의 href 속성을 제거하여 링크가 되지 않도록

 

    <script type="text/javascript">
 
        $('article').click(function(){
            let clone = $(this).clone();
            clone.find('h1 a').removeAttr('href');
            $('body').prepend(clone);
        });
 
    </script>

 

article 클릭시 href가 제거된 article이 body 첫번째 요소로 삽입

 

 

 // 예제 4. 예제 3에서 복제 대상 클릭시 제거되도록 추가 작업 (복제 대상에게 클래스 추가해야함 <- addClass() 활용)

 

    <script type="text/javascript">
 
        $('article').click(function(){
            let clone = $(this).clone();
            clone.find('h1 a').removeAttr('href');
            clone.addClass('cloneClass');
            $('body').prepend(clone);
        });
 
        $(document).on('click','.cloneClass', function(){
            $(this).remove();
        });
 
    </script>

 

article 클릭시 복사 및 삽입

복사 및 삽입 되었던 article 클릭시 제거