본문 바로가기

제이쿼리4

[ JavaScript ] 자바스크립트 기본 문법 | jQuery 객체 | jQuery API | jQuery map 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: jQuery 객체란? Query 함수의 리턴값으로, jQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체입니다. jQuery 함수와 jQuery 객체의 차이는 분명하게 알아둘 필요가 있습니다. jQuery 함수는 $() 를 의미하는 것이고, jQuery 객체는 제이쿼리 함수의 리턴 값이 되는 것입니다. 자바스크립트 기본 문법 :: 암시적 반복 jQuery 객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것입니다. DOM과 다르게 jQuery 객체의 메소드를 실행하면, 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리됩니다. .. 2021. 2. 7.
[ JavaScript ] 제어 대상 찾기 - 제이쿼리(jQuery) 해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다. 자바스크립트 기본 문법 :: 제이쿼리(jQuery) 라이브러리 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 합니다. jQuery jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구 중 하나입니다. jQuery 의 사용 jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 합니다. 직접 다운 받는 방식과, CDN 을 이용하는 방법이 있습니다. 아래의 예제 코드는 CDN 을 이용해 jQuery 를 로드하는 코드입니다. jQuery 를 이용하면 DOM 을 사용하는 것보다 훨씬 효율적으로 필요한 객체를 조회할 수 있습니다. jQue.. 2021. 2. 7.
[ JavaScript ] JavaScript와 JQuery 를 이용한 간단한 타이머 만들기 | 제이쿼리 setTimeout 함수 timer 0.00 다음 html 코드를 실행하면 아래와 같이 출력된다. 이제 자바스크립트와 제이쿼리를 이용해서 timer 아래의 숫자가 증가하게 만들어보자! 사실,,, 코드는 너무 너무 간단하다. 코드부터 보여드리고 설명을 진행하겠다. // 시간을 담을 변수 t var t=0; function timer(){ // 0.01(10ms)초마다 t 값을 0.01 증가시키고 // 증가된 t 값을 timer 클래스 하위 html에 출력 setTimeout(function(){ t+=0.01; $(".timer").html(`${t.toFixed(2)}`); timer(); }, 10) }; timer(); 우선 시간 담을 변수 t 를 하나 선언해주고, setTimeout 이라는 제이쿼리 함수를 이용해 제작했다... 2021. 1. 13.
[ JQuery ] JQuery 란 무엇인가 | JQuery 설치 | JQuery 기본 사용법 안녕하세요. 이번 포스팅은 JQuery 에 대한 포스팅입니다. 재작년에 아주 후루룩 라면 먹듯 JQuery를 배웠었는데, 프로젝트 하면서 한번 더 쓸 일이 있어서 정리하는 느낌으로 다시 포스팅을 하고 있습니다! 이번 포스팅은 JQuery를 기본적으로 알고 계시고, 사용해보신 분들보다 JQuery를 처음 접하시는 분들에게 더욱 도움이 되는 포스팅이 될 것 같습니다. JQuery 란? JQuery 는 자바스크립트를 사용해 HTML 을 조작하는 것을 더욱 편리하게 하기 위해서 만들어진 자바스크립트 라이브러리 입니다. "write less, do more(적게 작성하고, 많은 것을 하자)”라는 문장을 필두로 미국의 개발자 존 레식(John Resig)이 2006년에 발표했어요. 사실 요즘은 제이쿼리를 검색하면 .. 2021. 1. 8.