[jQuery] 이벤트 처리 , 기초 세팅

jQuery는 오픈 소스 자바 라이브러리로, js 작성을 더 간편하게 할 수 있습니다.

 

jQuery를 웹사이트에서 실시간 구동을 해주기 위해서는 head 태그에 소스코드를 입력해줘야합니다

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

핵심은 jQuery 소스코드가 js파일 소스코드보다 더 위에 선언되어야 된다는 것입니다.

---

VScode jQuery 자동완성 extention

https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets 

jq 키워드로 트리거

---

jQuery 문장의 구조

$("선택자").action();

• $("p").show() : 모든 p태그 요소들을 찾아서 화면에 표시
• $("#iden").slideup() : id = "iden" 인 요소를 슬라이드업 방식으로 표시한다
• $(".classy").slideup() : class = "classy" 인 요소를 화면에 감춘다.

---

대표적인 선택자 목록

• $("*") : 모든 요소를 선택한다
• $(this) : 현재 html 요소를 선택한다.
• $("p:first") : 첫번째 p태그를 선택한다
• $("ul li:first) : 첫 ul의 첫 li태그를 선택한다
• $("ul li:first-child) : 모든 ul의 첫 li태그들을 전부 선택한다.
• $("[herf]") : herf속성을 가지고 있는 모든 요소
• $(“h2”).prev() : h2 태그의 이전의 요소
• $(“h2”).next() : h2태그의 이후의 요소
• $(“h2”).parent() : h2 태그의 부모 요소

---

jQuery를 이용한 이벤트 처리

window.onload = function(){
    //로딩 됐을때
};

//jQuery 이용했을때
$(document).ready(function () {

});

위 아래는 똑같은 기능을 합니다.

jQuery의 ready 부분이 이벤트 함수가 들어가는데요

 

대표적인 이벤트 함수는 아래와 같습니다

• 마우스 이벤트
  
  1. click
  2. mouseover / mouseout
  3. mousedown / mouseup
  4. mouseenter / mouseleave : 마우스가 진입한 순간 / 나온 순간
• 키보드 이벤트
  1. keypress
  2. keydown
  3. keyup
• Document , 윈도우 관련 이벤트
  1. ready  : onload와 같습니다. 윈도우 로딩이 완료됐을때
  2. load / unload

---

jQuery 이벤트 관리 함수

• .on(이벤트 , child선택자 , 함수) : 한개 이상의 이벤트 처리 함수를 붙입니다 (child선택자는 없어도 됨)
  • on("mouseover click" ....) : mouseover, click 두 이벤트를 처리
• .on(이벤트 , even.data , 함수이름) : 함수의 인자를 event.data에 저장해 전달합니다
  • function (event) {event.data.속성 ....}
• .off() : 이벤트 처리함수를 삭제합니다.
• .trigger() : 특정요소의 모든 이벤트 처리를 실행시킵니다.

---

on(이벤트 , even.data , 함수이름 예시

$("#b1").on("click",
        {url:"https://www.google.co.kr",
        winattrbutes : "resize=1 , scrollbars =1 , status =1"},
    max_open);
    
//////////////

 function max_open(event){
    var maxwindow = window.open(event.data.url , "" , event.data.winattrbutes);
    maxwindow.moveTo(0,0);
    maxwindow.resizeTo(screen.availWidth , screen.availHeight);
}

---

.off() 예시

$("#bind").click(function(){
    $("#theone").on("click",flash).text("Can Click");
});

$("#unbind").click(function () { 
    $("#theone").off("click",flash).text("Does nothing...");
    //"click",flash 이벤트 제거
});

---

trigger 예시 : 두번째 버튼을 클릭하면 첫번째 버튼이 클릭되는 효과!

// 첫번째 버튼
$( "button:first" ).click(function() {
	update( $( "span:first" ) );
});

//두번째 버튼
$( "button:last" ).click(function() {
	// 첫번째 버튼의 이벤트 실행
	$( "button:first" ).trigger( "click" );
    update( $( "span:last" ) );
});

function update( j ) {
    var n = parseInt( j.text(), 10 );
    j.text( n + 1 );
}