슬기로운 개발자 생활

jQuery는 요소나 콘텐츠를 손쉽게 복사할 수 있는 메소드를 제공한다.요소의 복사다음 메소드를 사용하면 선택한 요소나 콘텐츠를 복사하여 새로운 HTML 요소나 콘텐츠를 생성할 수 있다.메소드설명.clone()선택한 요소를 복사하여 새로운 요소를 생성한다..clone() 메소드.clone() 메소드는 선택한 요소를 복사하여 새로운 HTML 요소를 생성한다.아래와 같은 요소가 있을 때,안녕하세요. dekuma입니다. 아래와 같이 hello 요소를 복사해서, .appendTo() 메소드를 사용하여 붙여넣기 한다.$("#hello").clone().appendTo("#devkuma"); 코드 실행위의 예제를 실행해 보면 알 수 있듯이 .clone() 메소드는 기존의 HTML 요소를 복사하여 새로운 HTML 요..

기존 요소의 내부 변경다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 반환하거나 설정할 수 있다.메소드설명.html()해당 요소의 HTML 콘텐츠를 반환하거나 설정한다..text()해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다..html() 메소드.html() 메소드는 선택한 요소의 내용을 새로운 HTML 요소로 변경한다.아래와 같이 HTML 요소가 있을 때,안녕하세요. .html() 메소드를 이용하면, 요소의 내용을 새로운 HTML 요소로 변경할 수 있다.$("p").html("devkuma입니다."); 코드 실행.text() 메소드.text() 메소드는 선택한 요소의 내용을 새로운 단순 text로 변경한다.아래와 같이 HTML 요소가 있을 때,안녕하세요. .text() 메소드를 이..

기존 요소의 내부에 추가다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.메소드설명.append()선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다..prepend()선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다..appendTo()선택된 요소를 해당 요소의 마지막에 추가한다..prependTo()선택된 요소를 해당 요소의 첫번째에 추가한다..append() 메소드.append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.$(target).append(source) source 객체를 target 객체의 마지막에 추가한다.아래와 같이 HTML 요소가 있을 때 첫 번째 아이템 두 번째 아이템 .append() 메소드를 이용하면,..

getter 메소드와 setter 메소드선택자에 의해 선택된 요소의 값을 읽거나 설정하기 위해서는 jQuery 메소드를 통해 해당 요소에 접근할 수 있다.getter 메소드는 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드이다. getter 메소드는 아무런 인수를 전달하지 않고 호출한다.setter 메소드는 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드이다. setter 메소드는 대입하고자 하는 값을 인수로 전달하여 호출한다.다음 예제는 요소에 접근하여 그 값을 읽어들인 후, 아이디가 "text"인 요소의 값을 해당 값으로 설정하는 예제이다.var newText = $("#hello").html(); $("#newText").html(newText); 코드 실행위 예제의 첫번째 라인의 .ht..

jQuery 선택자jQuery에서는 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있다. 이러한 비표준 선택자를 사용하면 선택한 요소를 저장하거나, 그 결과에 대해 필터링까지 할 수 있다.선택한 요소를 변수에 저장jQuery에서는 선택한 요소들을 변수에 저장하여 사용할 수 있다.아래와 같이 요소가 있을 때, 에스프레소 아메리카노 카페라떼 아래 예제는 문서 내의 모든 요소를 선택하여 변수에 저장하고, 그 해당 변수를 사용하여 요소의 갯수를 구하고 있다.var coffees = $("li"); $("#length").text("커피의 종류는 총 " + coffees.length + "가지 입니다."); 코드 실행이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장된다. 그러기에 요소가 저..

jQuery를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정할 수 있다. jQuery에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공하고 있다. CSS 선택자를 이용한 선택jQuery에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다.태그 이름로 선택요소(element)의 태그 이름으로 HTML 요소를 모두 선택할 수 있다. 이는 자바스크립트의 getElementsByTagName() 메소드와 동일한 동작을 한다.아래 예제에서 을 클릭하면, 의 태그의 글씨가 사이즈 30px로 설정된다.$("button").on("click", function() { $("span").css("fontSize", "30px"); }); 코드..

jQuery 기초jQuery를 배우기 위한 사전지식jQuery는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요하다. 또한, HTML 요소을 선택하고, CSS 스타일을 변경하는 등 HTML과 CSS와도 많은 연관이 있다.따라서 jQuery를 배우기 전에 다음과 같은 기초 지식이 필요하다.HTMLCSSJavascriptjQuery(제이쿼리)란?jQuery(제이쿼리)는 오픈 소스 기반의 자바스크립트 라이브러리이다.jQuery는 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해준다. 또한, jQuery를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있다. 그래서 jQuery는 많은 인기 있는 자바스크립트 라이브러리 중 하나이다.jQuery의 역사..