본문 바로가기

JAVASCRIPT/jQuery8

jQuery | 스타일 메서드 📁 jQuery 스타일 메서드에 대해 알아봅시다 ! 📂 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 요소의 속성을 변경 }); ... 내용 내용 내용 📢 직접 적용하면서 이해하자 ! 내용1 내용2 내용3 See th.. 2022. 9. 4.
jQuery | 속성 메서드 📁 jQuery 속성 메서드에 대해 알아봅시다 ! 📂 attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://www.google.com/").attr("target", "_blank"); $("a").attr({href: "http://www.google.com/", target: "_blank"}); 콜백 함수 $("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0,1,2 // h는 각 a 요소 href 속성 return attribute (속성) // 각 a 요소의 속성을 생성.. 2022. 9. 4.
jQuery | 클래스 메서드 📁 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 📢 직접 적용하면서 이해하자 ! 2022. 9. 4.
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").nextUntil.. 2022. 8. 31.
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 요소 선택 (index는 0번이 첫 번째 요소) :gt( ) $("li:gt(0)") index가 0보다 큰 li 요소들 선택 :lt( ) $("li:lt(2)") index가 2보다 작은 li 요소들 .. 2022. 8. 31.
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'는 선택되지 않음 요소[속성*='값'] $("span[class*='abc']").. 2022. 8. 30.
jQuery | 기본 선택자 jQuery 기본 선택자에 대해 알아봅시다 ! 기본 형식 : $("선택자") == $("#gnb") 선택자 종류 설명 태그 선택자 $("p") p 요소 선택 id 선택자 $("#gnb") #gnb 요소 선택 class 선택자 $(".logo") .logo인 요소 선택 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li 선택 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소 선택 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소 선택 형제 선택자 $("#visual ~ #footer") #visual의 형제 요소 #footer 선택 종속 선택자 $("div.util") div 요소 중 clas.. 2022. 8. 30.
JAVASCRIPT | jQuery 🤔 jQuery, 그게 뭔데? 제이쿼리는 자바스크립트 언어를 더 간편하게 사용할 수 있도록 단순화 시킨 자바스크립트 라이브러리입니다. 뛰어난 호환성 유지관리가 용이한 코드 작성 다양한 기능 제공(네트워크, 애니메이션 등) 플러그인 직접 구현, 확장 가능 🤓 jQuery, 사용해볼까? jQuery를 사용하기 위해서는 jQuert 라이브러리를 웹페이지에 연결해서 사용해야 합니다. 각 버전별 브라우저 호환 여부가 다르기 때문에 확인하시고 연결하시면 됩니다 '3' 📌 직접 다운로드 방식 1) jQuery 라이브러리 다운로드 공식 홈페이지 내 Download jQuery v3.6.1 을 다운로드 받아 사용합니다. 2) HTML 문서에서 jQuery 라이브러리 연결 html 문서를 jQuery 라이브러리와 같은 경.. 2022. 8. 29.

It's cording time

코딩 여기서 정리하고 배워보자구 :9

자바스크립트

JAVASCRIPT

자세히 보기
html

HTML

자세히 보기
css

CSS

자세히 보기
광고 준비중입니다.

티스토리툴바