jQuery

[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)와 자바스크립트(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..