공부 기록일지📚

🌞jQuery 란? HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 것이다. (JS 라이브러리) 즉, 미리 작성된 JS코드이다. 다른 사람이 짜둔 코드를 가져와서 사용하는 것이기 때문에 쓰기 전에 import 를 해야 합니다. jQuery를 쓰면 javascript보다 더 직관적이고 간편하게 쓸 수 있다. ▶JS와 jQuery 코드 비교 //JS 코드 document.getElementById('element').style.display = 'none'; //jQuery ver 좀 더 직관적인 코드 $('#element').hide(); 🌞jQuery 사용방법 직접 파일을 가져와서 쓰는 방법도 있지만 google CDN을 통해서 코드 임포트 후 사용한다. //google CDN 🌞..

jQuery를 이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중 하나가 크로스브라우징 이슈를 jQuery가알아서 해결해주는 것이다. jQuery를 이용해서 Ajax 통신을 하는 법을 알아보자. jQuery는 Ajax와 관련해서 많은 API를 제공한다. http://api.jquery.com/category/ajax/ Ajax | jQuery API Documentation Register a handler to be called when Ajax requests complete. This is an AjaxEvent. Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. A..

jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 이벤트 프로그래밍: jQuery와 none jQuery의 비교 -> jQuery는 크로스 브라우징을 알아서 처리해주고 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. jQuery : on API 사용해보기 ▶기본 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자. .on( events [, selector ] [, data ], handler(eventObject) ) *jQuery 문법에서 []대괄호의 경우는 생략이 가능한 인자 뜻이다. event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의..

jQuery 노드 변경 API jQuery 를 이용해서 노드를 제어하는 방법을 알아봅시다. -> 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해있다. https://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, t..

jQuery : 속성제어 API Element의 API에 해당하는 기능(큰 범주로는 DOM의 기능)을 jQuery에서는 어떻게 구사하는가를 알아보자. JQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한, removeAttribute에 대응되는 메소드로는 remove Attr이 있다. opentutorials ->주석 처리해놓은 부분은 DOM객체의 메소드 를 적어놓은 것이며 아래의 코드는 같은 기능을 하는 jQuery객체의 메소드를 적용한 것이다. 속성제어 API에서도 DOM(Element객체의 속성API)처럼 attribute방식과 property 방식으로 기술하는 차이가 있다. DOM과 마찬가지로 jQuery도 속성(attribute)과..

jQuery 객체란? jQuery 함수의 리턴값으로 jQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체입니다. 제이쿼리 함수와 제이쿼리 객체를 잘 구분해야 합니다. 암시적 반복: jQuery 객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것. DOM과 다르게 jQuery 객체의 메소드를 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리됩니다. 암시적 반복은 값을 설정할 때만 작동합니다. 여기서 값을 설정할 때란 메소드의 인자로 2개를 사용할 때를 말합니다. e.g.) li.css("text-decoration", "underine"); -> 이렇게 하면 li태그 하나만 적용하는 것이 아니라 모든 li태그를 내부적으로 전부 적용시켜줍니다. 반면에, 값을..

제어 대상을 찾기(feat. DOM) 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일입니다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. *TIP - Elements 와 Element 를 잘 구분해서 봐야합니다. 복수단위(모든 요소), 단일단위(한가지만) 라고 생각하면 편합니다. document.getElementsByTagName : 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 엘리먼트를 조회할 수 있다. document.getElementsByClassName : class 속성의 값을 기준으로 객체를 조..

라이브러리 vs 프레임워크 공통점: 다른 사람의 도움을 받아서 소프트웨어를 만드는 것 , 다른 사람과 협력하는 모델 차이점 라이브러리 - 잘 정리해놓은, 재사용하기 쉽도록 되어 있는 소프트웨어/ 내가 만드는 소프트웨어의 부품을 가져오는 느낌 e.g.) jQuery ( JS 라이브러리 중 가장 유명) 프레임워크 - 반제품 소프트웨어를 사용하는 느낌, 내가 프레임워크에 들어가서 작업하는 식( 큰 틀이 있으면 메인부분은 건들이지 않고 기획 의도(웹, 게임 등등)에 따라 수정하여 사용/ 만들고자 하는 것을 처음부터 끝까지 만들지 않도록 해주는 것) jQuery 라이브러리 기본적으로 jQuery는 $로 시작합니다. 그리고 $() 이런 형태가 되죠 '달러'라는 이름의 함수입니다. e.g.) $('a') // 이 웹..