제이쿼리

계속 추가 예정!!

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

 

1. 선택한 요소에 지정한 스타일을 적용함

$("CSS 선택자").css("스타일 속성명", "값")

$("CSS 선택자").attr("속성명", "값")

 

직접 선택자

전체 선택자 : $("*") 모든 요소를 선택

아이디 선택자 : $("#아이디명") id 속성에 지정한 값을 가진 요소를 선택

클래스 선택자 : $(".클래스명") class 속성에 지정한 값을 가진 요소를 선택

요소 선택자 : $("요소명") 지정한 요소명과 일치하는 요소들만 선택

그룹 선택자 : $("선택 1, 선택 2, 선택 3, ... 선택 n") 선택 1, 선택 2, 선택3, ... 선택 n에 지정된 요소들을 한번에 선택

종속 선택자 : $("p.txt_1") $("p#txt_1") <p> 요소중 class값이 txt_1인 요소 또는 id 값이 txt_1인 요소를 선택

인접 관계 선택자

부모 요소 선택자 : $("요소 선택").parent() 선택한 요소의 부모 요소를 선택

상위 요소 선택자 : $("요소 선택").parents() 선택한 요소의 상위 요소를 모두 선택

가장 가까운 상위 요소 선택자 : $("요소 선택").closet("div") 선택한 요소의 상위 요소 중 가장 가까운 <div>만 선택

하위 요소 선택자 : $("요소 선택 하위 요소") 선택한 요소에 지정한 하위 요소를 선택

자식 요소 선택자 $("요소 선택>자식 요소") 선택한 요소를 기준으로 자식 관계에 지정한 요소만 선택

자식 요소들 선택자 $("요소 선택").children() 선택한 요소의 모든 자식 요소를 선택

 

이벤트

단독 이벤트 등록 메서드 : 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있음

$("이벤트 대상 선택").이벤트 등록 메서드(function() {
	자바스크립트 코드;
});

 

사용자가 버튼을 클릭하면 환영 메세지를 경고 창에 나타냄

<button class = "btn1">버튼</button>
$(".btn1").click(function() {
	alert("Welcome");
});

그룹 이벤트 등록 메서드 : 대상에 한 가지 동작 이상의 이벤트를 등록할 수 있음. on() 메서드를 사용하여 이벤트 등록!!

// on() 메서드 등록 방식 1
$("이벤트 대상 선택").on("이벤트 종류1 이벤트 종류2 ... 이벤트 종류n",
function() {
	자바스크립트 코드;
});

// on() 메서드 등록 방식 2
$("이벤트 대상 선택").on({
	"이벤트 종류1 이벤트 종류2 ... 이벤트 종류n" : function() {
		자바스크립트 코드;
 	}
});

// on() 메서드 등록 방식 3
$("이벤트 대상 선택").on({
	"이벤트 종류1" : function() {자바스크립트 코드1;},
    "이벤트 종류2" : function() {자바스크립트 코드2;},
    	...
    "이벤트 종류n" : function() {자바스크립트 코드n;}
});

 

 

---

참고 자료

jQuery

「Do it! 자바스크립트 + 제이쿼리 입문 - 정인용」