클래스 설정 HTML 요소의 class 속성은 여러 개의 class 값을 가짐 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 가능 클래스 설정관련 메서드 설명 .addClass() : 선택한 요소에 인수로 전달받은 클래스를 추가함. .removeClass() : 선택한 요소에서 인수로 전달받은 클래스를 제거함. .toggleClass() : 선택한 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 추가되어 있으면 제거함. .hasClass() : 인수로 전달받은 값이 선택한 요소의 클래스 이름과 일치하는지를 확인함. $(function() { $("#addBtn").on("click", function() { // id가 "first"와 "third"인 요소에 "..

CSS 스타일 설정.css()선택한 요소의 CSS 스타일을 간단하게 설정선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정$(function() { $("button").on("click", function() { $("p").css("fontSize", "25px"); // 모든 요소의 글씨 크기를 25px로 설정함. $("#text").html($("p").css("fontSize")); // 첫 번째 요소의 글씨 크기를 반환함. });});위의 예제에서 사용된 첫 번째 .css() 메서드는 선택한 요소의 글씨 크기를 25px로 설정하지만 두 번째..

요소의 크기 제이쿼리는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메서드를 제공 inner와 outer 접두사로 inner가 붙은 메서드는 선택한 요소의 크기에 패딩(padding) 영역이 포함된 크기 정보를 반환 접두사로 outer가 붙은 메서드는 패딩 영역뿐만 아니라 테두리(border) 영역까지 포함된 크기 정보를 반환 또한, 접두사로 outer가 붙은 메서드에 인수로 true 값을 전달하면, 패딩과 테두리 영역뿐만 아니라 마진(margin) 영역까지 포함된 크기 정보를 반환 메서드 반환값 .width(), .height() 요소의 크기 .innerWidth(), .innerHeight() 요소의 크기 + 패딩(padding)의 크기 .outerWidth(), .o..

기타 탐색 메서드 DOM 트리에서 요소의 탐색을 위해 사용되는 메서드 .add() : 선택한 요소의 집합에 전달받은 요소를 추가 $(function() { $("button").on("click", function() { $("li").add("p") // 선택한 요소의 집합에 요소를 추가함. .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경 }); }); $(function() { $("button").on("click", function() { $("#list").append("새로 추가된 아이템이에요!"); }); }); 위의 예제에서 알 수 있듯이 .add() 메서드는 선택한 '요소의 집합'에 인수로 전달받은 요소를 추가하는 메서드 하지만 ...

조상 요소의 탐색 트리 탐색(tree traversing) : 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정 조상(ancestor) 요소의 탐색 DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메서드 .parent() : 선택한 요소의 부모(parent) 요소를 선택 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택 가능 .css() : 선택한 요소에 인수로 전달받은 스타일을 설정 $(function() { $("button").on("click", function() { $("p").parent() // 요소의 부모 요소를 선택함. .css({"border": "2px solid..

요소의 복사 선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성 가능 . clone() : 선택한 요소를 복사하여 새로운 요소를 생성 $(function() { $("button").on("click", function() { // id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함. $("#firstItem").clone().appendTo("#list"); }); }); $(function() { $("#firstBtn").on("click", function() { // id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소 추가 $("#firstItem").appendTo("#list"); }); }); 위의 예제에서 볼 수 있듯이. c..

CSS 선택자 요소의 선택 제이쿼리를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정 할 수 있음. 제이쿼리에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공 CSS 선택자를 이용한 선택 제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택 가능 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택 가능 자바스크립트의 getElementsByTagName() 메서드와 같은 동작 $(function() { $("p").on("click", function() { // 요소를 모두 선택함. $("span").css("fontSize", "28px"); // 요소를 모두 선택함. }); }); $() 함수에 전달되는 ..

제이쿼리(jQuery) 문법 제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정 할 수 있다. $(선택자).동작함수(); 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정 $() 함수 : 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할 $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택 가능 이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object) 제이쿼리는 이렇게 생성된 제이쿼리 객체의 메서드를 사용하여 ..