jQuery

attr()관련 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. jQuery class형식은 다음과 같습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성1 return attribute(속성) // 각 a 요소의 속성을 생성 및..

class관련 메서드 요소에 class 속성을 추가합니다. jQuery class형식은 다음과 같습니다. 실행 분류 형식 추가 $("div").addClass(클래스명); 콜백 함수 $("div").addClass(function)index, className){ //index는 각 div 요소의 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. )} ..... 내용1 내용2 내용3 JQuery를 사용한 예제 입니다. $(document).ready(function () { $("#m1 > div").addClass("box"); $("#m2 > div").addClass(function(index){ retur..

스타일 관련 메서드 CSS() 메서드 CSS 관련 요소를 컨트롤 할 수 있는 메서드입니다. 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px") $("div").css({background-color: "red", padding: "10px"}) 콜백 함수 $("div").css("width", function(index, .w) { //indexs는 각 div 요소의 index0,1,2 //w는 각 div 요소의 width 값 return css 속성// 각 div 요소의 css 속성을 변경합니다. }); .... 내용 내용 내용 css()를 사용한 예제 입니다. $(d..

jQuery 필터 선택자 jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 선택자 형식은 다음과 같습니다. $("선택자") $("#gnb") 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀 수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td요소를 선택합니다. :header $(":header") 헤딩 (h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번쨰 요소 입니다. :gt() $("..

jQuery속성 선택자 속성을 선택하는 선택자를 알아보도록 하겠습니다. jQuery 속성 선택자 형식은 다음과 같습니다. 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span=[class='abc']") span 요소중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']) span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소~='값' $("span[class~='abc']") span요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나 'bg..

jQuery 기본 탐색 선택자 jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 탐색 선택자는 다음과 같습니다. 선택자 종류 설명 children() $("div").children() div 요소의 자식요소를 선택합니다. parent() $("p").parent() p요소의 부모 요소를 선택합니다. parents $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p요소의 부모가 되는 첫 번째 div요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").ne..

jQuery 선택자 jQuery는 html요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 선택자 형식은 다음과 같습니다. $("선택자") $("#gnb") 선택자 종류 설명 태그선택자 $("p") p 요소를 선택합니다 id선택 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb>ul>li") #gnb 하위에 있는 모든 li요소를 선택합니다. 하위 선택자 $("#gnb ul") #gnb 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다. 종속 선택자 $("div.uti..

제이쿼리를 배우기 위한 사전지식 제이쿼리는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요합니다. 또한, HTML 요소을 선택하고, CSS 스타일을 변경하는 등 HTML과 CSS와도 많은 연관이 있습니다. 따라서 제이쿼리르 배우기 전에 HTML과 CSS의 사전 지식이 필요합니다. 제이쿼리(jQuery)란? 제이쿼리(Jquery)는 오픈소스의 자바스크립트 라이브러리 입니다. 자바스크립트를 웹사이트에서 더욱 쉽게 사용할 수 있도록 도와줍니다. 제이쿼리의 장점 1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원됩니다. 2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있습니다. 3. 애니메이션 효과나 대화형 처리를 간단하게 ..