Dseok의 코딩스터디

📌 .after()란?jQuery.after() 메서드는 선택한 요소의 바로 다음 위치에 새로운 요소를 삽입하는 기능을 합니다. 즉, 기존 요소 뒤에 새로운 요소를 추가할 때 사용됩니다. 요소를 무조건 뒤에 새로 추가한다!!✅ 기본 문법$(selector).after(content);selector : 기준이 되는 요소content : 추가할 요소 (HTML, 텍스트, jQuery 객체 등 가능)📌 .after() 실용 예제 10가지1️⃣ 텍스트 뒤에 요소 추가하기안녕하세요! ✅ 설명: 태그 뒤에 태그를 추가하여 "반갑습니다!"라는 텍스트를 강조합니다. 2️⃣ 버튼 클릭 시 요소 추가추가여기 뒤에 추가됩니다.✅ 설명: 버튼 클릭 시 태그 뒤에 요소가 추가됩니다. 3️⃣ 여러 요소 뒤에 새로운 ..

📌 .find()란?jQuery.find() 메서드는 선택한 요소 내부에서 특정 자식 요소를 찾는 기능을 합니다. 이 메서드는 모든 하위 요소(손자, 증손자 포함) 중에서 특정 요소를 검색할 때 사용됩니다.✅ 기본 문법$(selector).find("child-selector");selector : 검색할 부모 요소child-selector : 찾고 싶은 하위 요소의 선택자반환값 : 해당하는 하위 요소의 jQuery 객체📌 .find() 실용 예제 10가지1️⃣ 특정 부모 요소 내부의 모든 찾기Hello, how are you?Me? I'm good.✅ 설명: 내부의 모든 요소를 찾아 글자색을 빨간색으로 변경합니다. 2️⃣ 리스트 내부의 .active 클래스가 있는 항목 찾기 첫 번째 항목 ..

📌 .ready()란?jQuery.ready() 메서드는 DOM(Document Object Model)이 로드된 후 실행되는 이벤트 핸들러입니다.즉, 웹 페이지의 HTML 요소들이 준비된 후 JavaScript 코드를 실행할 수 있도록 도와줍니다.💡 왜 중요할까?HTML 요소가 아직 생성되지 않은 상태에서 JavaScript를 실행하면 오류가 발생할 수 있음.ready()를 사용하면 HTML 요소가 모두 로드된 후 실행되므로 안정적인 코드 실행 가능✅ 기본 문법$(document).ready(function() { // 실행할 코드});또는 단축 문법$(function() { // 실행할 코드}); 📌 .ready() vs $(window).load() 차이점메서드실행 시점실행 대상.r..

📌 .hasClass()란?jQuery.hasClass() 메서드는 선택한 요소에 특정 클래스가 있는지 확인하는 기능을 합니다.주로 CSS 스타일 적용 여부를 체크하거나, 특정 동작을 조건부로 실행할 때 활용됩니다.✅ 기본 문법$(selector).hasClass("클래스명");selector : 클래스 여부를 확인할 요소클래스명 : 확인할 클래스 이름반환값 : true(클래스가 있음), false(클래스가 없음) 📌 .hasClass() 실용 예제 10가지1️⃣ 특정 요소가 클래스 포함 여부 확인if($("#box").hasClass("active")) { console.log("#box에 active 클래스가 있습니다.");} else { console.log("#box에 active ..

📌 .filter()란?jQuery.filter() 메서드는 선택한 요소 중 특정 조건을 만족하는 요소만 남기고 필터링할 때 사용됩니다. 주로 특정 클래스가 있는 요소만 선택, 특정 조건을 충족하는 리스트 항목 필터링 등에 활용됩니다.✅ 기본 문법$(selector).filter(criteria);criteria: 필터링할 기준 (CSS 선택자(".selecter"), 함수(funClick()), jQuery 객체("#selecter") 등 가능)반환값: 조건을 만족하는 요소만 포함된 jQuery 객체📌 .filter() 활용 예제 7가지1️⃣ 특정 클래스가 있는 요소만 선택$("div").filter(".active").css("background", "yellow");✅ 설명:  요소 중 .act..

📌 .eq()란?jQuery.eq() 메서드는 선택한 요소 중 특정 인덱스에 있는 요소를 선택할 때 사용됩니다.0부터 시작하는 인덱스 값을 전달하여 원하는 요소를 쉽게 찾을 수 있습니다.✅ 기본 문법$(selector).eq(index);index: 선택한 요소 중 가져오고 싶은 요소의 0부터 시작하는 인덱스 번호반환값: 선택한 요소의 특정 인덱스에 해당하는 jQuery 객체📌 .eq() 활용 예제 7가지1️⃣ 특정 리스트 항목 선택하기$("li").eq(2).css("color", "red");✅ 설명:  요소 중 세 번째 요소(0부터 시작, index=2) 의 글자색을 빨간색으로 변경합니다. 2️⃣ 버튼 클릭 시 특정 div 스타일 변경$("#changeStyle").on("click", func..

📌 .offset()이란?jQuery.offset() 메서드는 HTML 요소의 문서(document) 기준 위치를 가져오거나 설정하는 기능을 합니다. 주로 스크롤 애니메이션, 고정 위치 UI, 드래그 앤 드롭 기능 등 다양한 곳에서 활용됩니다.✅ 기본 문법$(selector).offset(); // 요소의 위치를 가져오기$(selector).offset({ top: value, left: value }); // 요소의 위치 설정$(selector).offset() : 선택한 요소의 top(Y 좌표)과 left(X 좌표) 값을 반환합니다.$(selector).offset({ top: value, left: value }) : 요소를 원하는 위치로 이동시킵니다. 📌 .offset() 활용 예제 7가지..

📌 .append()란?jQuery.append() 메서드는 선택한 요소의 마지막 자식 요소로 새로운 요소를 추가할 때 사용됩니다. 주로 동적 컨텐츠 추가, 리스트 업데이트, 실시간 채팅 메시지 삽입 등에 활용됩니다.✅ 기본 문법$(selector).append(content);$(selector) : 요소를 선택합니다..append(content) : 선택한 요소의 마지막에 content를 추가합니다.📌 .append() 활용 예제 7가지 1️⃣ 새로운 요소 추가하기$("#list").append("새로운 아이템");✅ 설명: 요소의 마지막에 새로운 요소를 추가합니다. 2️⃣ 여러 개의 요소 동시 추가$("#box").append("첫 번째 문장두 번째 문장");✅ 설명: 한 번의 .append..

📌 .scrollTop()이란?jQuery.scrollTop() 메서드는 웹 페이지에서 스크롤 위치를 가져오거나 설정할 때 사용하는 메서드입니다. 페이지의 특정 위치로 이동하거나 현재 스크롤 위치를 확인하는 데 유용합니다.✅ 기본 문법$(selector).scrollTop(); // 현재 스크롤 위치 가져오기$(selector).scrollTop(value); // 스크롤 위치 설정$(selector).scrollTop();: 현재 요소의 스크롤 위치를 가져옵니다.$(selector).scrollTop(value);: 지정한 위치로 스크롤을 이동합니다.📌 .scrollTop() 활용 예제 7가지1️⃣ 현재 스크롤 위치 확인하기$(window).on("scroll", function() { con..

add()메소드는 선택한 요소와 같이 행동을 해야할 요소를 선택하게 해주는 메소드이다.말이 어렵다.쉽게 설명하자면1번이랑 2번이랑 같은 행동을 하게 해줘.이정도로 설명 할 수 있을 것 같다. 문법은 이러하다..add(selector)조금 더 쉽게 예시를 들어 문법을 적어보자면$('ul').add('div')위와 같은 코드가 될 것 같다. 이걸로 뭘 해야할지 생각이 안 떠올라서 그냥 animate()를 써서 장난을 쳐봤다.  jQuery add() 연습01 jQuery add() 연습02 jQuery add() 연습03 클릭! @charset "UTF-8";.wrap{width: 1010px; margin: 50px auto 0;..