jQuery

엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 _생활코딩

• Fixes “broken” DOM API
• Brevity and Clarity
• Ease of use
• Corss-Browser Support
• AJAX
• Lot’s of people use jQuery!

문법

// selecting
$(“selectorGoesHere”)
ex) $(“.sale”), $(“#bonus”), $(“li a”)

// Manipulating Style
$(selector)
.css(property, value)

Objectives

• .val()
• .text()
• .attributes()
• .html()
• .add()
• .remove()
• .toggle()

.text()
only gives you a text of html except tags.
JS 의 textContent 와 같은 역할

.html()
JS의 innerHtml과 같은 역할

.attr()
element를 바꾸거나 추가할 수 있다.

.val()
값을 확인하거나
값을 바꿀 수 있다. (input, dropdown menu 등)

Manipulating Classes

.addClass()
.removeClass()
.toggleClass()

Event

예시

.click(function(){
})

.keypress(function(){
})

.keydown = 누를 때
.keyup = 뗄 때
.keypress = down과 up의 사이
(Ctrl+V 와 같은 상황)

keycode는 정해져 있다
ex) enter = 13

• jQuery에서는 this 를 $(this)로 표기한다

.on()
click, keypress, dbclick, mouseenter(hover over), …

.click()
only adds listeners for existing elements

.on(“click”)
will add listeners for all potential future elements

.fadeOut(1000) = 1s
duration, complete, call back …
display = none이 되는 것. 존재는 함.

.fadeIn()
.fadeToggle()
.remove() : html에서 사라진다.

.slideUp()
.slideDown()
.slideToggle()