FrontEnd/jQuery

[jQuery] 제이쿼리 요소 숨기기, 보여주기

hide hide 함수를 쓰면 선택된 요소에 display:none; 이 설정되어 요소가 숨겨진다 $('#item').hide(); show show 함수를 쓰면 hide 함수로 숨겨진 요소가 다시 보이게 된다 $('#item').show(); fadeOut fadeOut() 함수는 요소를 천천히 사라지게 하며 파라미터로 1000을 넘겨주면 1초동안 요소가 천천히 사라진다 $('#item').fadeOut(1000); fadeIn fadeIn() 함수는 숨겨진 상태의 요소를 천천히 나타나게 해주며, 아래 #item 요소는 1초동안 천천히 나타난다 $('#item').fadeIn(1000);

[jQuery] 제이쿼리 '선택' 메서드

jQuery에는 '선택'과 '동작'이 있고, '선택'을 위한 방법으로 CSS 선택자를 알아보았었다 ▶CSS 선택자(Selector), 요소 선택하기 [글 바로가기] 하지만 이 외에도 jQuery에서 제공하는 '선택' 방법이 있다 filter $('button').filter('.color-3').text('SELECTED!'); filter()는 ( ) 안의 조건으로 선택된 요소를 한번 더 걸러준다 위 코드의 경우, 모든 button 태그들 중에 color-3 클래스를 가지고 있는 요소만 추려내서 text를 바꿔주라는 의미이다 아래 script 코드의 결과를 살펴보면 box-1에서는 filter없이 모든 요소에 text가 적용되었고 box-2에서는 filter를 한 번 거친 후 text가 적용되었다 Se..

[jQuery] 자바스크립트, 제이쿼리만으로 HTML 요소 추가하기

자바스크립트만 써서 HTML을 직접 건드리지 않고도 요소를 추가할 수 있다 요소를 추가할 위치에 따라 함수를 다르게 사용한다 Before (형제 관계) 선택자 요소 바로 앞에 형제 관계의 새로운 요소가 추가된다 See the Pen before by HyerinKim (@blogerin) on CodePen. After (형제 관계) 선택자 요소 바로 뒤에 형제 관계의 새로운 요소가 추가된다 See the Pen Untitled by HyerinKim (@blogerin) on CodePen. Prepend & Append (부모 자식 관계) prepend 함수는 새로운 요소를 선택자 요소의 첫 번째 자식으로 추가한다 append 함수는 새로운 요소를 선택자 요소의 마지막 자식으로 추가한다 See the..

[jQuery] 제이쿼리 '동작' 메서드

제이쿼리는 '선택' + '동작' 으로 이루어져 있다 이 '동작' 부분에는 다양한 메서드가 있는데, 이를 활용하여 원하는 요소에 클래스를 추가/제거 하거나, 속성을 읽고 쓰거나, 스타일을 입히는 것 등이 가능하다 클래스 관련 // item에 header 클래스 추가 $('#item').addClass('header'); // item에 header 클래스 제거 $('#item').removeClass('header'); // item에 header 클래스가 없으면 추가, 있으면 제거 $('#item').toggleClass('header'); // item에 header 클래스가 있으면 true, 없으면 false 리턴 $('#item').hasClass('header'); 속성 관련 // img 태그의 ..

[jQuery] 제이쿼리 Audio 다루기

오디오 재생하고 정지하기 소리의 상태는 크게 '생성', '재생', '정지' 총 3가지 단계로 나눌 수 있다 let audioFile = new Audio("file location or URL"); // 생성 audioFile.play(); // 재생 audioFile.pause(); // 정지 정지 이후 재생 위치 설정하기 위 코드에서 여러 번 '재생'과 '정지'를 눌러보면, 멈춘 시점 다음부터 이어서 재생된다. 처음 또는 특정 시점부터 재생하고 싶을 경우 currentTime 속성을 활용해 재생 할 위치를 설정할 수 있다. audioFile.currentTime = 0; // 오디오 파일 재생 위치 설정 HTML 삽입 미리보기할 수 없는 소스 Music Start PAUSE STOP

제이쿼리(jQuery)와 자바스크립트(Vanilla JS) 이벤트 핸들링 차이

HTML 태그에 이벤트를 직접 명시해두지 않고 깔끔하게 함수로 분리하기 위해 같은 코드를 제이쿼리(jQuery)와 바닐라 자바스크립트(Vanilla JavaScript)로 작성해 보았다 아래 두 코드의 의미는 동일하다 제이쿼리 (jQuery) 코드 $('#home').on('click', clickHome); $('#seoul').on('click', clickSeoul); $('#tokyo').on('click', clickTokyo); $('#paris').on('click', clickParis); $('#photo').on('mouseenter', mouseEnterPhoto); $('#photo').attr('src', 'images/home.png'); $('#home').css('font-w..

제이쿼리(jQuery) 설치 및 사용법

"write less, do more." 적게 작성하고, 많은 것을 하자 제이쿼리(jQuery)란? 제이쿼리(jQuery)는 웹 사이트에 자바스크립트를 쉽게 활용할 수 있도록 만들어주는 오픈소스 기반의 자바스크립트 라이브러리이다. 2006년 미국의 존 레식(John Resig)에 의해 뉴욕 시 바캠프에서 공식적으로 소개되었다. 작지만 풍부한 기능을 강점으로 여러 자바스크립트 라이브러리 중 높은 점유율을 보였으며 전 세계 개발자 설문 조사 StackOverflow Developers Survey 2020에 따르면 jQuery는 개발자 사이에서 가장 많이 사용되는 웹 프레임워크로 1위를 차지했다. 그러나 현재는 웹브라우저 환경의 변화(Google Chrome), 가상 DOM을 사용하는 리액트(React.js..