웹 공부일지

jQuery 스타일 관련 메서드 스타일을 제어할 수 있는 메서드들을 소개해드리겠습니다. 우리가 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) { // index는 각 div 요소의 index 0,1,2 // w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 변경합니다..

jQuery 속성 관련 메서드 jQuery의 속성 관련 메서드를 소개해드릴게요. a 태그의 대표적인 속성으로는 href 속성이 있죠? 그런 속성들을 제어하는 메서드들 입니다. jQuery 속성 관련 메서드 실행 분류 형식 취득 $('a').attr("href"); 생성, 변경 $('a').attr("href", "http://naver.com").attr("target", "_blank"); $('a').attr({"href" : "http://naver.com", "target" : "_blank"}); 출력 함수 $("a").attr("href", function(index, h){ // index는 각 a 요소의 index 0,1,2 // h는 각 a 요소 href 속성 return attribut..

jQuery 클래스 관련 메서드 클래스를 제어할 수 있는 메서드들을 소개해드리겠습니다. addClass() 메서드 요소에서 class 속성을 추가합니다. 실행분류 형식 추가 $('div').addClass("클래스명"); 콜백 함수 $('div').addClass(function(index, className) { // index는 각 div 요소의 index 0,1,2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 결과 See the Pen jQueryClass by kim-0617 (@kim-0617) on CodePen. removeClass() 메서드 요소에서 class 속성을..

jQuery 속성 선택자 jQuery의 속성 선택자를 소개해드릴게요. 속성 선택자는 css의 속성 선택자와 흡사합니다. jQuery 속성 선택자 선택자 종류 설명 요소 [속성] $('span[class]') span 요소중 클래스 속성이 있는 요소 선택. 요소 [속성 = "값"] $('span[class = "abc"]') span 요소중 클래스 속성이 abc인 요소 선택. 요소 [속성 != "값"] $('span[class != "abc"]') span 요소중 클래스 속성이 abc가 아닌 요소 선택. 요소 [속성 ~= "값"] $('span[class ~= "abc"]') span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg ab..

jQuery 기본 선택자 jQuery의 기본 선택자를 소개해드릴게요. 기본 선택자는 css의 기본 선택자와 흡사합니다. jQuery 기본 선택자 선택자 종류 설명 태그 선택자 $('p') p 요소를 선택합니다. id 선택자 $('#gnb') #gnb 요소를 선택합니다. class 선택자 $('.logo') .logo인 요소를 선택합니다. 자식 선택자 $('#gnb > ul > li') #gnb의 자식 ul 의 자식 li 요소를 선택합니다. 하위 선택자 $('#gnb ul') #gnb 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $('#visual + #content') #visual 다음에 오는 #content 요소를 선택합니다. 형제 선택자 $('#visual ~ #footer') #visu..

jQuery 필터 선택자 jQuery의 탐색 선택자를 소개해드릴게요. 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. jQuery 기본 필터 선택자 선택자 종류 설명 :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 요소를 선택합니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. .lt() $("li..

jQuery 탐색 선택자 jQuery의 탐색 선택자를 소개해드릴게요. 탐색선택자는 원하는 요소를 탐색하는 선택자 입니다. 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').nextAll() div...

jQuery 소개 - write less, do more 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. css변경, 애니메이션 처리, 이벤트 핸들링을 슬로건과 마찬가지로 기존의 자바스크립트 코드로 작성하는 것보다 훨씬 적은 코드로 크로스 브라우징 이슈까지 해결해주니 얼마나 편리합니까? 근데 요즘에는 잘 안쓰이는 추세이죠. 3점대 버전 까지 나온것같은데 그 이후로 안나오는 것 같죠? 홈페이지도 계속 그대로인 것 같아요. 사용준비 사용법에는 대표적으로 ..