본문 바로가기
반응형

jQuery8

jQuery 스타일 관련 메서드 jQuery 스타일 관련 메서드 css() 메서드. 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({"background-color: "red", padding: "10px"}); 콜백 함수 $("div").attr("width", function(index, w) { // index는 각 div 요소의 index 0, 1, 2 // w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 생성 및 변경합니다. }); .... 내용 내용 내용 예제 상세한 코드는 아래 코드펜을 확인해주세요. See .. 2022. 9. 4.
jQuery 속성 관련 메서드 jQuery 속성 관련 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({href: "http://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 클래스 관련 메서드 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 예제 상세한 코드는 아래 코드펜을 확인해주세요. See the Pen ex4-17 by sukjun2 (@sukjun2) on CodePen. removeClass() 메서드 요소에 class 속성을 제거합니다. 실행 분류 .. 2022. 9. 4.
jQuery 탐색 선택자 jQuery 탐색 선택자 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closet() $("p").closet("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").nextUntil("p".. 2022. 8. 30.
jQuery 필터 선택자 jQuery 필터 선택자 jQuery 선택자에 ':' 이 붙은 선택자를 필터 선택자라고 합니다. 필터 선택자 선택자 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택한다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택한다. :first $("td:first") 첫 번째 td 요소를 선택한다. :last $("td:last") 마지막 td 요소를 선택한다. :header $("tr:header") h1 ~ h6 요소를 선택한다. :eq $("li:eq(0)") index가 0인 li 요소를 선택한다. :gt $("li:gt(0)") index가 0보다 큰 li 요소를 선택한다. :lt $("li:lt(2)") index가 2보다 작은 li 요소들을 선택한다. :not $(.. 2022. 8. 30.
jQuery 속성 선택자 jQuery 선택자2 jQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 속성 선택자 선택자 종류 설명 요소[속성] $("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.. 2022. 8. 30.
jQuery 기본 선택자 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의 형제 요.. 2022. 8. 30.
jQuery jQuery jQuery 연결 방법 jQuery를 사용하기 위해서는 jQuery 라이브러리를 웹페이지에 연결해서 사용해야 합니다. jQuery 라이브러리를 연결하는 방식에는 파일을 직접 다운로드받아 연결하는 방식과 CDN(Content Delivery Network) 방식이 있습니다. 현재 1.x, 2.x, 3.x 버전을 지원해 주고 있으며 각 버전별로 브라우저 지원이나 기존 메서드들의 지원 여부 등의 차이가 있습니다. Download 방식 jQuery 라이브러리 다운로드 http://jquery.com/download에 접속하여 다운로드 합니다. ctrl + s 로 파일로 저장한 후 파일의 경로를 script:src로 지정하여 사용할 수 있습니다. HTML 문서에서 jQuery 라이브러리 연결하기 ht.. 2022. 8. 29.
반응형

광고 준비중입니다.