jquery Selectors, event

jquery

jquery의 목적은 웹 사이트에서 JavaScript를 훨씬 쉽게 사용하도록 만드는 것이다.

 

$ (this) .hide () - 현재 요소를 숨 깁니다.

$ ( "p"). hide () - 모든 <p> 요소를 숨 깁니다.

$ ( ". test"). hide () - class = "test"인 모든 요소를 ​​숨 깁니다.

$ ( "# test") hide () - id = "test"로 요소를 숨 깁니다.

 

Selectors추가 예제

$("*") - 모든 태그들을 선택한다.

$("p.intro") - class = “intro” 인 p태그 선택

$("p:first") - 첫 번째 p태그

$("ul li:first") - 첫 번째 <ul> 태그의 첫 번째 <li> 태그

$("ul li:first-child") - 모든 <ul>태그의 첫 번째 <li>태그

$("[href]") - href 속성을 가진 모든 요소

$("a[target='_blank']") - 모든 <a>태그의 대상 속성 값이 “_blank” 인 것

$("a[target!='_blank']") - 모든 <a>태그의 대상 속성 값이 “_blank” 이 아닌 것

$(":button") - 모든 <button> 태그들과 <input>태그의 type=“button”인 것들

$("tr:even") - 모든 짝수 <tr>태그

$("tr:odd") - 모든 홀수 <tr>태그

 

이벤트

.load() : 문서가 불려졌을 때

.unload() : 문서가 닫혔을 때

.ready() : DOM이 모두 준비 되었을 때 함수 실행

.click() : 마우스 클릭시

.dblclick() : 마우스 더블 클릭시

.mousedown() : 마우스 버튼을 누른 순간

.mouseup() : 마우스 버튼을 놓는 순간

.mouseover() : 대상에 마우스 커서가 위치했을 때

.mouseseenter() : 대상에 마우스가 위치했을 때

.mousemove() : 대상에서 마우스 커서가 움직였을 때

.mouseout() : 대상에서 마우스가 벗어 났을때

.mouseleave() : 대상에서 마우스가 벗어났을 때

.select() : 선택한 개체를 선택 했을 때

.submit() : submit이 일어날 때

등등

 

사용 예제

$(document).ready(function(){

$("p").click(function(){

    $(this).hide();

});

});

doccument가 로드가 완료되고 p태그를 클릭을 했을 경우

해당 p태그는 숨겨진다.

 

 

 

$(document).ready(function(){

$("#p1").mousedown(function(){

    alert("Mouse down over p1!");

});

});

id 값이 p1인 모든 태그에 한해 마우스를 클릭을 하면 alert 으로 알림창이 뜬다.