본문 바로가기

728x90

Javascript/jQuery8

jQuery 스타일 관련 메서드 ⭐️ jQuery 메서드 ⭐️ 01. jQuery 스타일 관련 메서드 [1] css( ) 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 취득 $("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 요소의 속성을 변경 }); .... 2022. 9. 5.

jQuery 속성 관련 메서드 ⭐️ jQuery 메서드 ⭐️ 01. jQuery 속성 관련 메서드 [1] attr( ) 메서드 선택한 요소의 attribute(속성)을 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "https://oranssy.tistory.com/").attr("target", "_blank"); $("a").attr( { href: "https://oranssy.tistory.com/", target: "_blank" } ); 콜백 함수 $("a").attr("href", function(index, h) { // index 는 각 a 요소의 index 0, 1, 2 // h 는 각 a 요소의 href 속성 retur.. 2022. 9. 5.

jQuery 클래스 관련 메서드 ⭐️ jQuery 메서드 ⭐️ 01. jQuery 클래스 관련 메서드 [1] 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 # 예제 1) See the Pen jQuery(addClass) by oranssy (@oranssy) on CodePen. [2] removeClass( ) 메서드.. 2022. 9. 5.

jQuery 탐색 선택자 ⭐️ jQuery 선택자 ⭐️ 04. jQuery 탐색 선택자 [1] 기본 탐색 선택자 선택자 종류 표현 방법 설명 children( ) $("div").childern( ) 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( ) .. 2022. 9. 1.

jQuery 필터 선택자 ⭐️ jQuery 선택자 ⭐️ 03. jQuery 필터 선택자 선택자에 ' : ' 가 붙은 선택자를 필터 선택자라고 합니다. [1] 기본 필터 선택자 선택자 종류 표현 방법 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택 :odd $("tr:odd") tr 요소 중 홀수 행만 선택 :first $("tr:first") 첫 번째 td 요소를 선택 :last $("tr:last") 마지막 td 요소를 선택 :header $(":header") 헤딩(h1~h6) 요소를 선택 :eq( ) $("li:eq(0)") index 가 0 인 li 요소를 선택 index 는 0 번이 첫 번째 요소 :gt( ) $("li:gt(0)") index 가 0 보다 큰 li 요소들을 선택 :lt( ) $(".. 2022. 9. 1.

jQuery 속성 선택자 ⭐️ jQuery 속성 선택자 ⭐️ 02. 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[c.. 2022. 9. 1.

jQuery 기본 선택자 ⭐️ jQuery 기본 선택자 ⭐️ 01. 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를 선택 종속 선택자 $("div.u.. 2022. 9. 1.

jQuery 기본 사용 설명 ⭐️ jQuery ⭐️ 01. jQuery란? 제이쿼리(jQuery)는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는, 오픈소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 마이크로소프트의 ASP.NET 프레임워크, 워드프레스 등 다양한 라이브러리와 프레임워크에 포함되면서 웹 프론트엔드 분야에서 점유율이 지속적으로 상승했었으나, 현재 높은 기능성을 갖춘 웹 표준 API가 늘어나면서 제이쿼리의 인기는 낮아지고 있습니다. 02. jQuery 사용 방법 jQuery 라이브러라 파일 형식에는 설명에 대한 주석 차이에 따라 압축 파일과 비압축 파일 형식이 있습니다. 일반적으로 설명이 크게 필요치 않으므로, 압축 파일을 사용합니다. [1] Download 방식 파일을 직접 다운받아 연결하는 방식 입니.. 2022. 8. 29.

이전 1 다음

728x90

티스토리툴바