라몽(●'◡'●)디자이너

코딩/웹디자인에 대한 정보를 다룹니다.

코딩스터디/jQuery

새로운 HTML컨텐츠 추가하기 - 새로운 컨텐츠를 추가할때 사용되는 4개의 제이쿼리 메서드 append() - 선택된 요소의 끝부분에 컨텐츠를 삽입 prepend() - 선택된 요소의 시작부분에 컨텐츠를 삽입 after() - 선택된 요소의 다음에 컨텐츠를 삽입 before() - 선택된 요소의 이전에 컨텐츠를 삽입 jQuery append() 메서드 - 제이쿼리의 append() 메서드는 선택된 HTML요소의 끝부분에 컨텐츠를 삽입 $("p").append("Some appended text."); jQuery prepend() 메서드 - 제이쿼리의 prepend() 메서드는 선택된 HTML요소의 시작부분에 컨텐츠를 삽입 $("p").prepend("Some prepended text."); ※appe..

2021. 6. 24.

코딩스터디/jQuery

1) .scrollTop() 화면상에서 내가 스크롤한 만큼의 거리를 알아내기 -- 선택한 요소의 스크롤바 수직 위치를 반환 -- 동적인 값 (스크롤이 움직여서 동적인 값이라는 것) [구문정리] - 기본적으로 스크롤하는 대상은 브라우저 즉, 윈도우 화면이므로 선택자는 $(window) 입니다. - .scrollTop()은 브라우저 오른쪽에 스크롤바가 움직인 만큼의 거리값을 계산해줍니다. 2) .offset().top 화면상에서 특정 요소의 y축 위치 알아내기 -- 선택한 요소의 위치를 가져오거나 특정 위치를 이동할 때 -- 문서 끝부터 선택한 요소까지의 거리 -- 정적인 값 $("선택자").offset().top;

2021. 6. 2.

코딩스터디/jQuery

.slideUp(speed) : hide()와 같이 숨김 처리 .slideDown(speed) : show()와 같이 보이게 처리 ※ gnb에 메뉴하위메뉴같은곳에 잘 쓰임 예제)

2021. 6. 1.

코딩스터디/jQuery

문자열 메서드 - 문자열의 모든 내장함수는 보통 불변성을 유지 - 문자열의 내장함수를 이용해서 특정 문자를 잘라낼 때 반환되는 값은 기존 문자열을 변경하는게 아닌 새로운 문자열이 복사가 되서 반환 (원본의 데이터가 절대 훼손되지 않음) 문자열 길이 문자열.length - length속성은 문자열의 길이(갯수)를 반환 문자열에서 문자열 찾기 문자열.indexOf(text); - indexOf() 메서드는 first문자열에서 지정된 텍스트의 발생 인덱스(위치)를 반환 ※ 자바스크립트는 0부터 위치를 계산합니다. 0은 문자열의 첫 번째 위치, 1은 두번째, 2는 세 번째 ... 검색의 시작 위치로 두 번째 매개 변수를 허용(처음위치부터, 두번째 wo 까지 위치값?) - 특정 문자에서 시작하는 부분의 특정 문자..

2021. 5. 27.

코딩스터디/jQuery

jQuery 효율적 작성 - 제이쿼리를 사용함에 있어 성능 최적화(performance)에 간단히 알아봅시다. DOM을 캐싱(Caching)하라. - 한번 탐색한 DOM을 다시 탐색하는 것은 비효율적이다. --> DOM Caching : 별도의 변수에 자주 사용하는 값을 저장하는 것 --> DOM요소를 캐싱하면 코드의 실행 속도가 크게 향상 --> $(".content .close")보다는 $content.find(".close")가 더 심플하고 성능상 좋음 Bad Code Good Code 명시적인 '$' 를 식별자를 사용하자. - jQuery 객체를 참조한 변수 이름 앞에 $를 붙여 jQuery를 사용 가능한 객체임을 식별하도록 혼란을 감소시키자. Bad Code var first = $('.firs..

2021. 5. 25.

코딩스터디/jQuery

.animate : 선택한 요소에 다양한 동작(Motion) 효과를 적용한다. -기본형 /* 문법 */ $(선택자).animate({ 바꿀속성 }, 지속시간, 가속도효과, 콜백함수); ※ animate() 메서드로 애니메이션 효과를 적용할 수 없는 CSS 속성이 존재한다. transform, gradient, box-shadow ※ .animate() 메서드는 마지막 인수에 함수(콜백함수)를 넣으면 해당 함수는 강제로 동기화를 해줌 용어설명 더보기 자바스크립트 동기 - hoisting의 된 이후부터 우리가 작성한 코드의 순서에 맞춰서 동기적으로 실행된다는 뜻 - hoisting : var, 함수 등 자동적으로 제일 위에 올라가는 것 비동기적 - 언제 코드가 실행될지 모르는 것 콜백함수(callback) ..

2021. 5. 25.

코딩스터디/jQuery

이벤트가 발생한 요소 추적하기 1. 이벤트가 발생한 요소를 선택해 오는 선택자$(this) 2. 이벤트가 발생한 요소의 인덱스값을 반환하는 index() 인덱스 반환 메서드 1. $(this) 선택자 - 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있습니다. 2. index() 인덱스 반환 메서드 - 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스값을 반환 /* index() 인덱스 반환 기본형 */ $("인덱스 대상선택자").on("이벤트종류",function(){ $("이벤트 대상 선택").index(this); }); 예제 : 이벤트 핸들러에 이벤트가 발생한 요소를 추적하여 배경색을 바꾸는 예제 1. html구조 2. 제이쿼리 구조

2021. 5. 22.

코딩스터디/jQuery

웹 개발 시 CSS스타일을 추가하거나 제거하고 변경하기 위해서는 클래스(Class)속성을 선택자로 사용하게 됩니다. 1. removeClass() 함수 - 제이쿼리의 .removeCalss()함수는 css클래스를 삭제하는 함수 - 선택된 요소에 하나 혹은 여러개의 클래스를 제거합니다. /* 함수 사용법 */ $("요소선택").removeClass("class값") 2. addClass() 함수 - 선택된 요소에 하나 혹은 여러개의 클래스 추가합니다. - 하지만 이미 클래스가 추가되어 있는 경우에는 새로운 Class를 중복되어 추가하지 않습니다. 3. toggleClass() 함수 - 선택된 요소에 지정한 클래스가 없으면 생성하고, 있으면 삭제 /* 함수 사용법 */ $("요소선택").toggleClass..

2021. 5. 22.