jQuery를 통해 HTML 요소를 선택하고 작업 (actions) 을 수행할 수 있습니다.
jQuery 구문
jQuery 구문은 특정 작업을 수행할 수 있는 HTML 요소 선택으로 작성됩니다.
기본 문법은 $(selector) 입니다.action()

달러 기호 정의 jQuery

선택자(selector) 조회 및 찾기 HTML 요소

jQuery의 action()에서 요소에 대한 조작

예제
$(this).hide() - 현재 요소 숨기기
$("p").hide() - 모든 단락을 숨깁니다.
$(".test").hide() - 모든 class="test"의 모든 요소를 숨깁니다.
$("#test").hide() - 모든 id= "test"요소 숨기기
팁: jQuery에서 사용하는 구문은 XPath와 CSS 선택기 구문의 조합입니다.이 강좌의 다음 장에서 선택기와 관련된 문법을 더 많이 배울 것입니다.
문서 준비 함수
예를 들어 모든 jQuery 함수가 document ready 함수에 있음을 알 수 있습니다.

$(document).ready(function(){

--- jQuery functions go here ----

});

이것은 문서가 완전히 불러오기 전에 jQuery 코드를 실행하는 것을 방지하기 위해서입니다.
문서가 완전히 불러오기 전에 함수를 실행하면 작업이 실패할 수 있습니다.다음은 두 가지 구체적인 예이다.

존재하지 않는 요소를 숨기려고 시도

완전히 로드되지 않은 이미지의 크기

jQuery 선택기
선택기를 사용하여 HTML 요소 그룹 또는 개별 요소를 조작할 수 있습니다.
jQuery 요소 선택기
jQuery는 CSS 선택기를 사용하여 HTML 요소를 선택합니다.
$("p")

요소를 선택합니다.
$("p.intro") 모든class="intro"의

요소를 선택합니다.
$("p#demo") 모든 id="demo"의

요소를 선택합니다.
jQuery 속성 선택기
jQuery는 XPath 표현식을 사용하여 지정된 속성이 있는 요소를 선택합니다.
$([href])href 속성이 있는 모든 요소를 선택합니다.
$("[href='#']") href 값이 "#"과 같은 모든 요소를 선택합니다.
$("[href!='#']") href 값이 "#"과 같지 않은 모든 요소를 선택합니다.
$("[href$='.jpg']") 모든 href 값이 ".jpg"로 끝나는 요소를 선택합니다.
jQuery CSS 선택기
jQuery CSS 선택기를 사용하여 HTML 요소의 CSS 속성을 변경할 수 있습니다.
다음 예제에서는 모든 p 요소의 배경색을 빨간색으로 변경합니다.
인스턴스

$("p").css("background-color","red");

jQuery 선택기
선택기
인스턴스
선택
*
$("*")
모든 요소
#id
$("#lastname")
id= "lastname"요소
.class
$(".intro")
모든class="intro"요소
element
$("p")
모든

요소
.class.class
$(".intro.demo")
모든class="intro"및class="demo"요소
 
 
 
:first
$("p:first")
첫 번째

원소
:last
$("p:last")
마지막

요소
:even
$("tr:even")
모든 짝수 요소
:odd
$("tr:odd")
모든 홀수 요소
 
 
 
:eq(index)
$("ul li:eq(3)")
목록의 네 번째 요소 (index 0부터)
:gt(no)
$("ul li:gt(3)")
index가 3보다 큰 요소 나열
:lt(no)
$("ul li:lt(3)")
index가 3보다 작은 요소 나열
:not(selector)
$("input:not(:empty)")
비어 있지 않은 모든 input 요소
 
 
 
:header
$(":header")
모든 제목 요소

-

:animated
 
모든 애니메이션 요소
 
 
 
:contains(text)
$(":contains('W3School')")
지정된 문자열을 포함하는 모든 요소
:empty
$(":empty")
하위 노드가 없는 모든 요소
:hidden
$("p:hidden")
모든 숨겨진

요소
:visible
$("table:visible")
모든 보이는 테이블
 
 
 
s1,s2,s3
$("th,td,.intro")
일치하는 선택이 있는 모든 요소
 
 
 
[attribute]
$("[href]")
href 속성을 가진 모든 요소
[attribute=value]
$("[href='#']")
모든 href 속성의 값이 "#"과 같은 요소
[attribute!=value]
$("[href!='#']")
모든 href 속성의 값이 "#"의 요소와 같지 않습니다.
[attribute$=value]
$("[href$='.jpg']")
모든 href 속성의 값은 ".jpg"로 끝나는 요소를 포함합니다
 
 
 
:input
$(":input")
모든 요소
:text
$(":text")
모든 type="text"의 요소
:password
$(":password")
모든 type="password"의 요소
:radio
$(":radio")
모든 type="radio"의 요소
:checkbox
$(":checkbox")
모든 type="checkbox"의 요소
:submit
$(":submit")
모든 type="submit"의 요소
:reset
$(":reset")
모든 type="reset"의 요소
:button
$(":button")
모든 type="button"의 요소
:image
$(":image")
모든 type="이미지"의 요소
:file
$(":file")
모든 type="file"의 요소
 
 
 
:enabled
$(":enabled")
활성화된 모든 input 요소
:disabled
$(":disabled")
모든 비활성화된 input 요소
:selected
$(":selected")
선택한 모든 input 요소
:checked
$(":checked")
선택한 모든 input 요소
jQuery 이벤트
jQuery 이름 충돌
jQuery는 $기호를 jQuery의 소개 방식으로 사용합니다.
다른 JavaScript 라이브러리의 일부 함수(예: Prototype)도 $기호를 사용합니다.
jQuery는 noConflict()라는 방법을 사용하여 이 문제를 해결합니다.
var jq=jQuery.noConflict (), $기호 대신 자신의 이름 (예: jq) 을 사용할 수 있도록 도와 줍니다.
버튼의 클릭 이벤트가 트리거되면 함수가 호출됩니다.

$("button").click(function() {..some code... } )

jQuery 이벤트 메서드
이벤트 방법은 일치하는 요소의 이벤트를 터치하거나 함수를 일치하는 요소의 모든 이벤트에 연결합니다.
인스턴스를 트리거하려면 다음과 같이 하십시오.

$("button#demo").click()

id="demo" button click 。

：

$("button#demo").click(function(){$("img").hide()})

id="demo" 。

bind()
blur()	、 blur
change()	、 change
click()	、 click
dblclick()	、 double click
delegate()
die()	live() 。
error()	、 error
event.isDefaultPrevented()	event event.preventDefault()。
event.pageX	。
event.pageY	。
event.preventDefault()	。
event.result	。
event.target	DOM 。
event.timeStamp	1970 1 1 。
event.type	。
event.which	。
focus()	、 focus
keydown()	、 key down
keypress()	、 key press
keyup()	、 key up
live()
load()	、 load
mousedown()	、 mouse down
mouseenter()	、 mouse enter
mouseleave()	、 mouse leave
mousemove()	、 mouse move
mouseout()	、 mouse out
mouseover()	、 mouse over
mouseup()	、 mouse up
one()	。 。
ready()	（ HTML ）
resize()	、 resize
scroll()	、 scroll
select()	、 select
submit()	、 submit
toggle()	， click 。
trigger()
triggerHandler()
unbind()
undelegate()	，
unload()	、 unload