JQuery8 [제이쿼리] 스타일 관련 메서드 스타일 관련 메서드 메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다. 제이쿼리에 사용되는 메서드에 대해 알아보겠습니다. 1. 클래스 관련 메서드 2. 속성 관련 메서드 3. 스타일 관련 메서드 ■ 메서드의 기본 형식 1. $("선택자").메서드명(); ⇒매개변수가 없는 유형 2. $("선택자").메서드명(값); ⇒매개변수가 한개인 유형 3. $("선택자").메서드명(function(){}); ⇒매개변수가 함수인 유형 4. $("선택자").메서드명(값1,값2,...); ⇒매개변수가 여러개인 유형 5. $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); ⇒매개변수가 객체방식인 유형 한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다. 어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형.. 2022. 9. 3. [제이쿼리] 속성 관련 메서드 속성 관련 메서드 메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다. 제이쿼리에 사용되는 메서드에 대해 알아보겠습니다. 1. 클래스 관련 메서드 2. 속성 관련 메서드 3. 스타일 관련 메서드 ■ 메서드의 기본 형식 1. $("선택자").메서드명(); ⇒매개변수가 없는 유형 2. $("선택자").메서드명(값); ⇒매개변수가 한개인 유형 3. $("선택자").메서드명(function(){}); ⇒매개변수가 함수인 유형 4. $("선택자").메서드명(값1,값2,...); ⇒매개변수가 여러개인 유형 5. $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); ⇒매개변수가 객체방식인 유형 한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다. 어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형을.. 2022. 9. 3. [제이쿼리] 클래스 관련 메서드 클래스 관련 메서드 메서드란 데이터를 참조하고 조작할 수 있는 동작을 의미합니다. 제이쿼리에 사용되는 메서드에 대해 알아보겠습니다. 1. 클래스 관련 메서드 2. 속성 관련 메서드 3. 스타일 관련 메서드 ■ 메서드의 기본 형식 1. $("선택자").메서드명(); ⇒매개변수가 없는 유형 2. $("선택자").메서드명(값); ⇒매개변수가 한개인 유형 3. $("선택자").메서드명(function(){}); ⇒매개변수가 함수인 유형 4. $("선택자").메서드명(값1,값2,...); ⇒매개변수가 여러개인 유형 5. $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); ⇒매개변수가 객체방식인 유형 한개의 메서드가 문법유형을 모두 갖고 있지는 않습니다. 어떤 메서드는 한개유형만, 어떤 메서드는 여러개 유형.. 2022. 9. 3. [제이쿼리] 탐색 선택자에 대해 알아보자 탐색 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 오늘은 세번째 시간입니다.필터 선택자를 알아볼까요. 1. 기본 선택자 보러가기 2. 속성 선택자 보러가기 3. 필터 선택자 보러가기 4. 탐색 선택자 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫번째 div 요소를.. 2022. 8. 30. [제이쿼리] 필터 선택자에 대해 알아보자 필터 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 오늘은 세번째 시간입니다.필터 선택자를 알아볼까요. 1. 기본 선택자 보러가기 2. 속성 선택자 보러가기 3. 필터 선택자 4. 탐색 선택자 보러가기 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 필터 선택자 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("tr:first") 첫 번째 td요소를 선택합니다. :last $("tr:last") 마지막 td요소를 선택합니다. :header $(":header") 해당(h1 ~ h6)요소를.. 2022. 8. 30. [제이쿼리] 속성 선택자에 대해 알아보자 속성 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 오늘은 두번째 시간입니다.속성 선택자를 알아볼까요. 1. 기본 선택자 보러가기 2. 속성 선택자 3. 필터 선택자 보러가기 4. 탐색 선택자 보러가기 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 속성 선택자 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("s.. 2022. 8. 30. [제이쿼리] 기본 선택자에 대해 알아보자 기본 선택자 제이쿼리의 선택자는 CSS의 선택자와 의미가 같은 게 많습니다. 이번 시간부터 선택자에 대해서 낱낱이 파헤쳐보도록 하겠습니다. 오늘은 그 첫번째 시간으로 기본 선택자를 알아볼까요. 1. 기본 선택자 2. 속성 선택자 보러가기 3. 필터 선택자 보러가기 4. 탐색 선택자 보러가기 ■ 선택자의 기본 형식 $("선택자") $("#gnb") ■ 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 .. 2022. 8. 30. [자바스크립트 라이브러리] 제이쿼리를 알아보자 제이쿼리(jQuery) 제이쿼리는 자바스크립트 라이브러리중의 하나입니다. 아마 다들 어디선가 이름을 들어봤을정도로 유명하지 않나 싶은데요. 요새는 잘 쓰이지는 않습니다만, 그래도 유명했던만큼 한번 알아볼까요? ■ 개념 오픈소스기반의 자바스크립트 라이브러리입니다. "write less, do more(적게 작성하고, 많은 것을 합시다)"의 모토로 2006년 미국의 SW 개발자 존레식(John Resig)이 발표하였습니다. ■ 장점 ▶ 애니메이션 효과나 대화형 처리를 간단하게 적용해줍니다. ▶ 동일한 동작을 하는 프로그램을 짧은 코드로 구현시켜줍니다. ▶ 다양한 플러그인이 있습니다. ▶ 오픈 라이선스라서 누구나 자유롭게 사용할 수 있습니다. ▶ 대부분의 브라우저에서 지원합니다. ▶ 웹페이지 상에서 엘리먼트를.. 2022. 8. 29. 이전 1 다음 반응형
