본문 바로가기

jQuery8

jQuery 스타일 메서드 jQuery 스타일 관련 메서드 jQuery 스타일 관련 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 속성 관련 메서드에는 css() , width()height() 관련, 위치 관련 메서드가 있습니다. 01. 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 요소의 wid.. 2022. 9. 3.
jQuery 속성 메서드 jQuery 속성 관련 메서드 jQuery 속성 관련 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 속성 관련 메서드에는 attr(), prop()가 있습니다. 01. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("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.. 2022. 9. 3.
jQuery 클래스 메서드 jQuery 클래스 관련 메서드 jQuery 클래스 관련 메서드에 대해 알아보는 시간을 가지도록 하겠습니다. 클래스 관련 메서드에는 addClass(), removeClass(), toggleClass(), hasClass()가 있습니다. 01. 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 01-1. .. 2022. 9. 3.
탐색 선택자 jQuery 탐색 선택자 jQuery 탐색 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 탐색 선택자 종류 선택자 종류 설명 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.m 요소의 다음 요소들을.. 2022. 8. 30.
필터 선택자 jQuery 필터 선택자 jQuery 필터 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. 필터 선택자에는 자식 필터 선택자, 콘텐츠 필터 선택자, 폼 필터 선택자, 가시성 필터 선택자가 있습니다. 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 01. 기본 필터 선택자 선택자 종류 설명 :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.. 2022. 8. 30.
속성 선택자 jQuery 속성 선택자 jQuery 속성 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. 01. 속성 선택자 종류 선택자 종류 설명 요소[속성] $("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'는 선택되.. 2022. 8. 30.
기본 선택자 jQuery 선택자 jQuery 선택자에 대해 알아보는 시간을 가지도록 하겠습니다. jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 선택자의 형식은 다음과 같습니다. $("선택자") $("#gnb") 01. 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + cont.. 2022. 8. 30.
jQuery 기본 개념 JQuery JQuery에 대해 알아보는 시간을 가지도록 하겠습니다. JQuery를 이용해서 애니메이션 효과를 줘보도록 하겠습니다. 01. JQuery란? 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. 직접 코드를 변경하고, 그 결과를 확인할 수 있는 온라인 에디터입니다. 02. 사용법 JQuery를 사용하기 위해서는 JQuery 라이브러리를 웹페이지에 연결해서 사용해야 합니다. 현재 1.1.x,2.x,3.x 버전을 지원해주고 있으며 각 버전별로 브.. 2022. 8. 29.

HTML
CSS

JAVASCRIPT

자세히 보기