Animated Rainbow Nyan Cat
본문 바로가기

jQuery8

스타일 관련 메서드 스타일 관련 메서드 css() 메서드 실행 분류 형식 취득 &("div").attr("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 속성을 변경합니다. }); ... &ltdiv>내용&lt/div> &ltdiv>내용&lt/div> &ltdiv>내용&lt/div>.. 2022. 9. 3.
속성 관련 메서드 속성 관련 메서드 attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 &("a").attr("href"); 생성, 변경 &("a").attr("href", "http://icoxpublih.com").attr("target", "_blank"); &("a").attr({href: "http://icoxpublih.com", target: "_blank"}); 콜백 함수 &("a").attr("href", function(index, h) { // index는 각 a 요소의 index 0, 1, 2 // h는 각a요소의 href 속성 return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다. }); ... &lta.. 2022. 9. 3.
클래스 관련 메서드 addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className){ // index는 각 div 요소의 index 0, 1, 2 // className 은 각 div에 class속성 return class 속성 // 각 div에 class속성을 추가합니다. }); .... &ltdiv>내용1&lt/div> &ltdiv>내용2&lt/div> &ltdiv>내용3&lt/div> See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. removeClass() 메서드 요소에 class 속성을 제거합니다. 실행 분류.. 2022. 9. 3.
탐색 선택자 jQuery 탐색 선택자 탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 좀 더 정확하게 선택할 수 있습니다. 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents() p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest(div) p 요소의 부모가 되는 첫 번째 div 요소를 next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택.. 2022. 8. 30.
필터 선택자 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가 .. 2022. 8. 30.
속성 선택자 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는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 선택자 종류 설명 태그 선택자 $("p") p요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를 선택합니다. 형제 선택자 $("#visual ~ #footer") #visual의 형제요소 #foo.. 2022. 8. 30.
jQuery jQuery jQuery란? 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. Download 방식 01. JQuery 를 사용하려면 인터넷 익스플로러에서 https://jquery.com/download 에 접속하여 다운받으시기 바랍니다. &ltscript type="#" src="https://code.jquery.com/jquery-3.2.0.min.js" >&lt/script> CDN 방식 02. JQuery 를 사용하려면 경로를 head 태그 내에 명시해주어야 합니다. &ltscript type="#" src="ht.. 2022. 8. 29.
/

JA
/

HTML
/

CSS
광고준비중입니다.

티스토리툴바