jQuery Method

속성관련메소드

​

.attr(속성명) : Getter

​

.attr(속성명, 속성값) : Setter

​

$("img").attr({src:"a.png",width:200,height:200});

: 다중 속성 설정 메소드 Setter

​

.removeAttr(속성명) : 속성명과 일치하는 속성을 제거

​

.val()

: <input>, <select>, <textarea>등과 같은 <form>관련 태그에서 값을 가져올 때 사용함

​

.text()

: xml, html문서 안의 text값을 가져옴, html속성을 적용X

text값이 "<b>홍</b>길동" 이면 그대로 출력 "<b>홍</b>길동"

​

.html()

: html문서 안의 text값을 가져옴, HTML속성을 적용O

text값이 "<b>홍</b>길동" 이면 "홍길동", '홍'은 진하게.

JAVASCRIPT의 innerHTML도 HTML속성을 적용O

​

.addClass(className)

: class속성을 추가, 덮어쓰기 아님

​

.removeClass(className)

: class속성을 제거

​

.toggleClass(className)

: add & remove

​

조작관련메소드

​

$("선택").append("내용");

: 선택의 text값에 내용을 뒤에 추가, HTML속성을 적용O

(=) $("내용").appendTo("선택");

​

$("선택").append($("선택2"));

: 선택의 text값에 선택2의 태그 및 내용을 뒤에 추가, 기존의 선택2가 삭제됨

​

$("선택").prepend("내용");

: append와 동일, 다른 점은 앞에 추가

​

$("선택").after("내용");

: 선택의 다음 형제로 추가, 내용 대신 선택자도 사용 가능

선택자일 경우 기존 위치의 선택자가 삭제됨

​

$("선택").before("내용")

: after와 동일, 다른 점은 앞에 추가

​

$(".inner").wrap("<div class='new'></div>");

: inner클래스인 태그를 div태그로 감싼다.

​

$("div.second").replaceWith("<h2>강감찬 장군</h2>");

: div태그의 second 클래스를 h2태그에 내용은 강감찬 장군 으로 바꾼다

​

$(".third").replaceWith($(".first"));

: .third태그(요소)를 .first태그(요소)로 바꾼다. 기존 .first요소는 삭제된다.

​

.replaceAll()

: .replaceWith의 수동태

​

.empty()

: 선택된 태그(요소)의 text내용 삭제, 태그만 남는다.

​

.remove()

: 선택된 태그(요소)를 삭제

​

$(".hello").clone().appendTo(".goodbye");

:hello클래스를 복제하여 goodbye클래스 하위에 추가한다.

​

유틸리티관련메소드

​

.each(function(index,element){

});

: 선택된 태그(요소)들을 반복적으로 순회 호출

: index는 위치값, element는 해당하는 요소를 반환

​

jQuery.each(배열명,function(index,object){

});

: 배열에 값들을 반복적으로 순회 호출, 위치값과 해당 값을 반환

​

// key:value인 map형식의 JSON객체를 생성

var m = {one:1,two:2,three:3,four:4,five:5};

​

// Map형식이면 key와 object를 호출할 수 있음

jQuery.each(m,function(key,obj){

});

​

//배열에 축약되지 않은 '월'이름을 1월부터 12월까지 영문으로 저장한다.

var months = ['January','February','March','April','May',

'June','July','August','September','October','November','December'];

​

//map()메소드를 사용하여 배열에 저장된 값을 3글자만 부분 문자열로 반환함

// months2배열은 ['Jan','Feb', ...]; 로 저장됨

var months2 =jQuery.map(months,function(value,index){

return value.substring(0,3);

});

​

이벤트 설정 및 해제관련메소드

​

//id가 create인 button태그를 클릭했을때..

$("#create").on("click",function(){

});

​

//body태그 내에 id가 newButton인 태그를 찾아서 click 이벤트 설정

$(body).on("click","#newButton",function(){

});

​

// onload2만 출력됨

window.onload= function(){

console.log("onload1");

}

window.onload=function(){

console.log("onload2");

}

​

// ready1과 ready2 둘 다 출력됨

$(document).ready(function(){

console.log("ready1");

});

$(document).ready(function(){

console.log("ready2");

});

​

$("#foo").trigger("click");

: id가 foo인 버튼에 등록된 click 이벤트 핸들러를 강제로 실행시킴

​

$("[name=message]").on("myCustom",function(){

$(this).val("메세지를 입력하세요");

});

: name속성이 message인 태그를 가져와서, myCustom으로 이벤트 등록

​

$("[name=message]").trigger("myCustom");

: myCustom으로 등록한 이벤트를 호출

​

form태그 관련 메소드들

.focus(function(){});

: 선택된 요소가 초점을 얻었을 때 function을 실행

​

.blur(function(){});

: 선택된 요소가 초점을 잃었을 때 function을 실행

​

.submit(function(event){});

: submit이벤트가 발생하면 이벤트 핸들러가 실행됨

(=).on("submit",function(event){});

event.preventDefault();

이벤트 핸들러 안에 event객체를 사용하여 전송을 차단하는 메소드

​

.keydown(function(event){});

: 초점을 가지고 있고 key를 눌렀을 때, 이벤트 핸들러가 실행됨

event.keyCode

이벤트 핸들러 안에 event객체를 사용하여 키마다 고유한 값을 가져옴

keyup메소드도 있음, 형식은 동일