본문 바로가기

제이쿼리6

[JavaScript] 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.m요소의 다음 요소들을 모두 선택 nextUntil() $('div.m').ne.. 2022. 8. 30.

[JavaScript] jQuery(제이쿼리) - 필터 선택자 jQuery 필터 선택자 제이쿼리에서 사용되는 필터 선택자에 대해 살펴봅시다. 선택자에 ' : '가 붙습니다. 필터 선택자 선택자 종류 선택자 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택 :odd $("tr:odd") tr 요소 중 홀수 행만 선택 :first $("tr:first") 첫 번째 td 요소를 선택 :last $(":header") 헤딩(h1~h6) 요소를 선택 :eq() $("li:eq(0)") index가 0인 li 요소를 선택. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택 :lt() $("li:lt(2)") index가 2보다 작은 li 요소들을 선택 :not() $("li:not(.bg.. 2022. 8. 30.

[JavaScript] 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_abc'는 선택되지 않음. 요소[속성*=.. 2022. 8. 30.

[JavaScript] jQuery(제이쿼리) - 기본 선택자 jQuery 기본 선택자 제이쿼리에서 사용되는 기본 선택자에 대해 살펴봅시다. 기본 선택자 $("선택자") $("#gnb") 선택자 종류 선택자 설명 태그 선택자 $("p") p 요소 선택 id 선택자 $("#gnb") #gnb 요소 선택 class 선택자 $(".logo") .logo인 요소 선택 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소(ul)의 자식 요소 li를 선택 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 li 요소를 선택 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer를 선택 종속 선택자 $.. 2022. 8. 30.

[JavaScript] jQuery(제이쿼리) 알아보기 jQuery란? HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 JavaScript 라이브러리로, 존 레식이 2006년 8월 26일, 뉴욕 시 바캠프에서 최초 공개하였습니다. 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단 등을 제공하죠. jQuery를 사용하는 이유는? 01. 어떠한 브라우저에서도 동일하게 작동한다. 02. 직관적이고 편리한 API를 제공한다. 03. CSS 스타일의 selector를 사용할 수 있어 편리하다. 04. 이벤트 처리(ex: Ajax, Animation 등…) 효과를 사용하기 쉽다. 05. 다양한 플러그인이 존재하며 충돌 위험도 적다. jQuery 적용 방법 jQuery(이하 '제이쿼리')를 사용하기 위해서.. 2022. 8. 30.

[Slide Effect] 슬라이드 이펙트 02 - 좌로 움직이기 슬라이드 이펙트 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드와 GSAP, jQuery 코드 세 가지를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? JS 코드 슬라이드 이펙트 02의 JS 소스와 부연 설명(주석 처리됨)이다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySele.. 2022. 8. 29.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바