j쿼리 객체함수, 이벤트 처리 함수

j쿼리 == 자바스크립트의 dom 객체를 쉽게 다루기 위한 라이브러리

기본적인 dom 객체 선언 방식

     <!-- html 요소 -->

    <div class="nameclass"></div>

 

    //j쿼리 사용한 자바스크립트 부분

    let domclass = document.querySelector('.nameclass')

    //document element객체

    let domclass2 = $('.nameclass')

    //j쿼리 객체

 

 

 

j쿼리 에서의 이벤트 적용 함수들 j쿼리 객체에서 바로 적용가능

1. click(): 클릭 이벤트를 처리합니다.
2. dblclick(): 더블 클릭 이벤트를 처리합니다.
3. mouseenter(): 마우스가 요소에 진입했을 때 이벤트를 처리합니다.
4. mouseleave(): 마우스가 요소를 떠났을 때 이벤트를 처리합니다.
5. mousedown(): 마우스 버튼이 눌러졌을 때 이벤트를 처리합니다.
6. mouseup(): 마우스 버튼이 떼어졌을 때 이벤트를 처리합니다.
7. mousemove(): 마우스가 움직일 때 이벤트를 처리합니다.
8. keydown(): 키보드의 키가 눌러졌을 때 이벤트를 처리합니다.
9. keyup(): 키보드의 키가 떼어졌을 때 이벤트를 처리합니다.
10. submit(): 폼이 제출되었을 때 이벤트를 처리합니다.
11. change(): 입력 필드의 값이 변경되었을 때 이벤트를 처리합니다.
12. focus(): 요소가 포커스를 받았을 때 이벤트를 처리합니다.
13. blur(): 요소가 포커스를 잃었을 때 이벤트를 처리합니다.
14. load(): 요소나 페이지가 로드되었을 때 이벤트를 처리합니다.
15. resize(): 윈도우나 요소의 크기가 변경되었을 때 이벤트를 처리합니다.

<script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        //$(document) == 문서 전체 의미 .ready() = 문서 시작할때 시작

    $(document).ready(function(){

        // :visible(j쿼리 지원) == div가 visible 상태인 요소들 j쿼리 객체 지정

        // click() 메서드 사용

        $("div:visible").click(function(){

            //this = 이벤트가 발생한 요소 j쿼리 객체 지정

            //css(a, b) = 요소 a속성 b값 추가 css(a) = 요소 a속성값 반환

            $(this).css("background","yellow")

        })

        $('button').click(function(){

            //show()해당 요소가 보여지게 해주는 함수, 인자의 효과 반영

            $('div:hidden').show('fast')

        })

    })

 

1. • addClass(): 선택한 요소에 클래스를 추가합니다.
   • removeClass(): 선택한 요소에서 클래스를 제거합니다.
   • toggleClass(): 선택한 요소에 클래스가 이미 존재하면 제거하고, 존재하지 않으면 추가합니다.
   •  
   • attr(): 선택한 요소의 html속성을 설정하거나, 해당 속성의 값을 반환합니다.
   • css(): 선택한 요소의 CSS 속성을 설정하거나, 해당 속성의 값을 반환합니다.
   • html(): 선택한 요소의 내용을 설정하거나, 해당 내용을 반환합니다.
   • text(): 선택한 요소의 텍스트를 설정하거나, 해당 텍스트를 반환합니다.
   • val(): 선택한 요소의 값을 설정하거나, 해당 값을 반환합니다.
2.  
3. • ready(): HTML 문서의 로딩이 완료되고, DOM 요소들이 준비되었을 때 실행할 함수를 등록합니다.
   • show(): 선택한 요소를 보이게 합니다.
   • hide(): 선택한 요소를 숨깁니다
   • on(): 선택한 요소에 이벤트 핸들러를 등록합니다.
   • off(): 선택한 요소에서 이벤트 핸들러를 제거합니다.

 

$(function(){ // $(document).ready() 와 동일한 역할 문서가 완성되고 실행

    $('.item').on({ // on() 메서드

        'dragstart':function(e){

            //제이쿼리의 이벤트객체에서 dom 이벤트 처리가 필요할때 originalEvent 사용

            e.originalEvent.dataTransfer.setData('text/plain',e.target.id)

            setTimeout(()=>{ //특정 시간 후에 1회 실행 메서드

                $(e.target).hide()

                // e.target.classList.add('hide') //display:none 속성있는 클래스 추가

            },1)//0.0001초

        }

    })

})

 

 

 

• append(): 선택한 요소의 끝 부분에 새로운 내용을 추가합니다.
• prepend(): 선택한 요소의 시작 부분에 새로운 내용을 추가합니다.
• before(): 선택한 요소의 이전 위치에 새로운 내용을 추가합니다.
• after(): 선택한 요소의 다음 위치에 새로운 내용을 추가합니다.

    <div id="BfA" style="border: 1px solid black;">before after 예시</div>

    <p style="background-color: skyblue;">안녕하세요</p>

    <div id="appendText" style="border: 1px solid black;">appendText</div>

    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script>

        $('#BfA').before('<div> before로 생성</div>')

        $('#BfA').after('<div> after로 생성</div>')

        //clone() 뒤 요소 내용 앞 요소에 복사

        //add() 요소 추가 또는 선택자 추가

        let temp=$('p').clone().add('<p>prependTo</p>')

        let temp2 = $('p').clone().add('<p>appendTo</p>')

        //to 유무 차이는 요소들 위치 앞뒤 바뀔뿐

        temp.prependTo($('#appendText'))

        temp2.appendTo($('#appendText'))

    </script>