본문 바로가기

JQUERY8

[JQUERY] 스타일 메서드 Jquery : 스타일 관련 메서드 이번 시간에는 css 속성을 추가할 수 있는 jquery 스타일 관련 메서드에 대해 알아보겠습니다.🧐 #1. 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 요소의 c.. 2022. 9. 5.

[JQUERY] 속성 메서드 Jquery : 속성 관련 메서드 이번 시간에는 자바스크립트의 jquery 속성 관련 메서드에 대해 알아보겠습니다.😆 #1. jquery : attr() 메서드 attr()메서드는 선택한 요소의 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는 각 div 요소의 index 0,1,.. 2022. 9. 5.

[JQUERY] 클래스 메서드 Jquery : 클래스 관련 메서드 이번 시간에는 자바스크립트의 jquery 클래스 관련 메서드에 대해 알아보겠습니다.😆 #1. 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() 메서드 예제 See the Pen Unti.. 2022. 9. 5.

[JQUERY] 탐색 선택자 Jquery : 탐색 선택자 이번 시간에는 자바스크립트의 jquery 탐색 선택자에 대해 알아보겠습니다.😆 #1. jquery 탐색 선택자 다음은 제이쿼리의 탐색 선택자를 정리해놓은 것입니다! 함께 탐색 선택자 종류를 알아볼까요?! 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parent("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 .. 2022. 8. 31.

[JQUERY] 필터 선택자 Jquery : 필터 선택자 이번 시간에는 자바스크립트의 jquery 필터 선택자에 대해 알아보겠습니다.😆 #1. 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 요소를 선택합니다. **in.. 2022. 8. 31.

[JQUERY] jQuery 속성 선택자 Jquery : 속성 선택자 이번 시간에는 자바스크립트의 jquery 속성 선택자에 대해 알아보겠습니다.😆 #1. jquery 속성 선택자 다음은 속성 선택자의 종류 입니다. 표와 예제를 보고 이해해봅시다! 선택자 종류 설명 요소[속성] $("p[class]") p 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("p[class='abc']") p 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("p[class!='abc']") p 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성='값'] $("p[class~='abc']") p 요소 중 class가 'abc'인 요소를 선택합니다. 그러나 'abc' 앞 뒤로 연결된 문자.. 2022. 8. 30.

[JQUERY] jQuery 기본 선택자 jQuery : 기본 선택자 이번 시간에는 자바스크립트의 jQuery 기본 선택자에 대해 알아보겠습니다.😆 #1. jQuery 기본 선택자 jquery에서는 html요소와 관련된 기능 구현이 많기 떄문에 CSS와 밀접한 관계가 있습니다. 다음의 표와 함께 기본 선택자의 종류를 알아봅시다! 😇 선택자 종류 설명 태그 선택자 $("p") p 태그를 선택합니다. id 선택자 $("#section") id가 section인 요소를 선택합니다. class 선택자 $(".section") class가 section인 요소를 선택합니다. 자식 선택자 $("#section > ul > li") #section의 자식 요소 중 li를 선택합니다. 인접 선택자 $("#section + #content") #section의.. 2022. 8. 30.

[JAVASCRIPT] JQUERY 라이브러리란? 자바스크립트 : Jquery 라이브러리 이번 시간에는 자바스크립트의 라이브러리인 jquery에 대해 알아보겠습니다.😆 #1. Jquery란? JQuery로 HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 Javascript를 미리 작성해둔 것입니다. Javascript로 길고 복잡하게 써야 하는 것을 JQuery로 보다 짧고 직관적으로 쓸 수 있습니다. $ 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자입니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. ✏️ jquery 활용 예시 💡 $(선택자).동작함수(); )//Javascript document.querySelector(".sl.. 2022. 8. 30.

이전 1 다음

728x90

Lucky Charms Rainbow

JAVASCRIPT

html

HTML

css

CSS

티스토리툴바