Dragonball Online Goku Hand
본문 바로가기

jQuery8

스타일 관련 메서드 🧷 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 요소의 css 속성을 변경합니다. }); …… 내용 내용 내용 ➿ css() 메서드 사용 예시 내용1 내용2 내용3 ⭐️ 결과 .. 2022. 9. 4.
속성 관련 메서드 🧷 jQuery : 속성 관련 메서드 ➰ attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://www.icoxpublish.com/").attr("target", "_blank"); $("a").attr({href: "http://www.icoxpublish.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 : 클래스 관련 메서드 ➰ 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 ➿ addClass() 메서드 사용 예시 jQuery html css javascript ⭐️ 결과 ⭐️ See the Pen jq class method by KwonHyehyeon (@kwonhyehyeon) o.. 2022. 9. 4.
jQuery : 탐색 선택자 📎 jQuery : 탐색 선택자 ➰ 기본 탐색 선택자 선택자 종류 설명 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() $("div.m").ne.. 2022. 8. 31.
jQuery : 필터 선택자 📎 jQuery : 필터 선택자란? 선택자에 ':'이 붙은 선택자 ➰ 필터 선택자의 종류 선택자 종류 설명 :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() $("li:lt(2)") index가.. 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.. 2022. 8. 30.
jQuery : 기본 선택자 jQuery 선택자 📎 기본 선택자 선택자 종류 설명 태그 선택자 $("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 요소 중 class가.. 2022. 8. 30.
jQuery jquery에 대해 알아봅시다! 📎제이쿼리(jquery)란? : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크핍트 라이브러리입니다. : 빠르고 기능이 풍부한 자바스크립트입니다. : $() 함수를 통해 생성된 요소를 제이쿼리 객체라고 합니다. ➰특징 📌 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현 가능 📌 Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발 가능 📌 jQuery는 크로스 플랫폼을 지원하기 때문에 어떠한 브라우저에서도 동일하게 동작합니다. 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없습니다. 📌 네이티브 DOM API 보다 직관적이고 편리한 API를 제공합니다. CSS 스타일의 selector를 사용할 수 있으.. 2022. 8. 29.