4. jQuery CheatSheet

📊

Tag Name

설명

구분

대표 속성

$("*")

모든 요소 선택

셀렉터

$("p.demo")

intro 클래스를 가진 요소 선택

셀렉터

$("p:first")

첫 번째 요소 선택

셀렉터

$("p span")

p의 하위 태그 span 선택

셀렉터

$("p > span")

p의 바로 한 단계 아래의 하위 태그 span 선택

셀렉터

$("p + span")

p 바로 뒤에 있는 span 선택

셀렉터

$("p ~ span")

p 뒤에 있는 모든 span 선택

셀렉터

$("ul li:first")

첫번째 ul의 첫번째 li 선택

셀렉터

$("ul li:first-child")

모든 ul의 첫번째 li 선택

셀렉터

$("ul li:nth-child(3)")

세번째 li 선택

셀렉터

$("[href]")

href 속성을 가진 모든 요소 선택

셀렉터

$("a[target='_blank']")

target = _blank 속성을 가진 모든 a 속성을

셀렉터

$(":input") ( $(":checkbox") )

해당 폼을 선택 (모든 폼 사용 가능)

셀렉터

$(":button")

버튼 태그와 <input type='button'> 인 경우 선택

셀렉터

$("tr:even")

짝수 번째의 tr만 선택

셀렉터

$("tr:odd")

홀수 번쨰의 tr만 선택

셀렉터

$("span:parent")

span을 자식으로 가지는 요소 선택

셀렉터

$("span:contains('demo')")

특정 텍스트를 포함하는 span 선택

셀렉터

$(".demo").click(function(){ $(this).hide(200); });

이벤트는 이와 같은 형태로 사용

이벤트

Mouse 이벤트 종류

scroll, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, load, resize, scroll, unload, error

이벤트

Keyboard 이벤트 종류

keydown, keypress, keyup

이벤트

Form 이벤트 종류

submit, change, focus, blur

이벤트

DOM Element 이벤트 종류

blur, focus, focusin, focusout, change, select, submit

이벤트

Browser 이벤트 종류

load, resize, scroll, unload, error

이벤트

$("#demo").hide();

display : none 으로 설정

이펙트

$("#demo").show(200);

애니메이션과 함께 숨겨진 요소를 보여줍니다.

이펙트

$("#demo").toggle();

.hide() 메소드와 .show()메소드를 번갈아가며 적용합니다.

이펙트

$("#demo").fadeIn();

요소를 천천히 사라지게 합니다.

이펙트

$("#demo").fadeOut(300);

요소를 천천히 나타나게 합니다.

이펙트

$("#demo").fadeToggle("slow");

.fadeIn() 메소드와 .faedOut() 메소드를 번갈아가며 적용합니다.

이펙트

$("#demo").fadeTo("slow", 0.25);

최종 opacity 속성값을 직접 설정하여 페이드 효과를 줍니다.

이펙트

$("#demo").slideDown();

서서히 내려가면서 나타나게 합니다

이펙트

$("#demo").slideUp("slow");

서서히 올라가며 나타나게 합니다.

이펙트

$("#demo").slideToggle();

.slideUp() 메소드와 .slideDown() 메소드를 번갈아가며 적용합니다.

이펙트

$("a#mylink").trigger("click");

해당 이벤트와 연결된 핸들러들 실행

일반

$(".demo").each(function() { document.write($(this).text() + "\n"); });

각각의 요소들에게 콜백 함수 실행

일반

$("#demo").text();

텍스트 콘텐츠를 반환

DOM구조 변경

$("#demo").html();

html을 포함한 콘텐츠를 반환

DOM구조 변경

$("#demo").val();

필드 값를 반환

DOM구조 변경

$("#demo").html('Hey yo');

html 콘텐츠를 설정

DOM구조 변경

$("#link").attr("href");

속성 값을 획득

DOM구조 변경

$("#link").attr("href",'https://htmlg.com');

속성 값을 설정

DOM구조 변경

$("#link").attr({ "href" : "https://htmlg.com", // setting multiple attributes "title" : "HTML Editor" });

여러 속성값들을 설정

DOM구조 변경

$(".demo").prepend("Yo!");

선택된 요소의 자식요소 앞에 값을 더함

DOM구조 변경

$(".demo").append("Hey!");

선택된 요소의 자식요소 뒤에 값을 더함

DOM구조 변경

$(".demo").before("Cheers");

선택된 요소의 이전 부분에 값을 더함

DOM구조 변경

$(".demo").after("Peace");

선택된 요소의 아후 부분에 값을 더함

DOM구조 변경

$("#demo").remove();

선택된 요소를 제거합니다.

DOM구조 변경

$("#demo").empty();

자식들을 제거합니다.

DOM구조 변경

$("div").remove(".cl1, .cl2");

나열된클래스가 있는 div를 제거합니다.

DOM구조 변경

$("#demo").addClass("big red");

클래스를 추가합니다.

DOM구조 변경

$("h1, p").removeClass("red");

클래스를 제거합니다.

DOM구조 변경

$("#demo").toggleClass("big");

.addClass()메소드와 .removeClass()메소드를 번갈아가면서 실행합니다.

DOM구조 변경

$("#demo").css("background-color");

css 값을 반환합니다

DOM구조 변경

$("#demo").css("color", "blue");

css 값을 설정합니다.

DOM구조 변경

$("#demo").css({"color": "blue", "font-size": "20px"});

여러 css 값을 설정합니다.

DOM구조 변경

$("#demo").parent();

바로 상위의 부모 요소 선택

트래버싱

$("span").parent().hide();

부모 색상 변경

트래버싱

$("#demo").parents();

모든 상위 요소 선택

트래버싱

$("#demo").parentsUntil("#demo2");

demo2 까지의 상위 요소 선택

트래버싱

$("#demo").children();

바로 아래의 자식 요소 선택

트래버싱

$("#demo").children(".first");

해당 클래스를 가진 자식 요소 선택

트래버싱

$("#demo").find("span");

모든 자식 span 요소 선택

트래버싱

$("#demo").find("*");

모든 자손 요소 선택

트래버싱

$("#demo").siblings("span");

형재 자매인 span 요소 선택

트래버싱

$("#demo").next();

바로 다음에 위치한 형제 요소 선택

트래버싱

$("p").nextAll();

선택한 요소 다음에 위치한 형제 요소를 모두 선택

트래버싱

$("#demo").nextUntil("#demo2");

선택한 요소 다음에서부터 demo2까지의 요소를 모두 선택

트래버싱

$("#demo").prev();

앞의 형제 요소를 선택합니다.

트래버싱

$("p").prevAll();

앞에 있는 모든 요소를 선택합니다.

트래버싱

$("#demo").prevUntil("#demo2");

앞에서부터 demo2까지의 모든 요소를 선택한다.

트래버싱

$("span strong").first();

첫번째 span에 있는 첫번째 strong 요소 선택

트래버싱

$("span strong").last();

마지막 span에 있는 마지막 strong 요소 선택

트래버싱

$("div").eq(9);

n번째 div 요소 선택

트래버싱

$("div").filter(".big");

big 클래스를 가진 모든 div 요소 선택

트래버싱

$("div").not(".big");

big 클래스를 가지지 않은 모든 div 요소 선택

트래버싱