. 을 이용하여 연속적으로 연결 가능한 것을 'chain'이라고 합니다. chain이 얼마나 효율적인지, context를 어떻게 유지하고 전환하는지에 대해서 알아보겠습니다. Chain이란? jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있습니다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있습니다. 예제1. jQuery를 이용해서 코딩하는 경우 wrapper을 더이상 선언하지 않아도 됨 jQuery //라이브러리 로드 예제2. javascript의 DOM을 이용해서 코딩하는 경우 jQuery tutorial.setAttribute('href', 'http://jquery.org');을 콘솔로 찍어보면 Undefined라고 나옵니다. 리턴하는 값이 없다..
저번 시간에 wrapper에 대해서 했는데 보통 wrapper에서 css스타일 선택자를 쓰는 일이 많습니다. 왜냐하면 추가적으로 엘리먼트를 선택할 수 있기 때문입니다. 이번 시간에는 선택자에 대해서 알아보겠습니다. 선택자란? jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있습니다. 선택자 탐색기 jQuery('#jquery, #MYSQL').addClass('selected'); : 클래스명을 골라서 selected를 실행(selected:스타일시트에 정의) #list li:eq(2) → id: list element:li eq(2): 인덱스가 2인 값. 위에서부터 차례대로 0,1,2,... gt(1): greater tha..
레퍼(wrapper)란? : 시작점과 같음 jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자') 붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환 Element Object는 다음과 같이 있습니다. # ← id 셀렉터 . ← 클래스 셀렉터 엘리먼트 셀렉터 레퍼의 안전한 사용 $(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다. //권장되는 방법 제어 대상을 지정하는 방법 jQuery( selector, [context] ) [context] : 옵션임 jQuery( element ) 예제 1. jQuery( selector, [context] ) test2 test 예제 2..
Javascript와 jQuery 비교 예제. 탭을 클릭했을 때 포커스를 변경하는 예제 JavaScript HTML CSS javascript jQuery PHP mysql jQuery HTML CSS javascript jQuery PHP mysql
라이브러리(library)란? 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들 추상화시켜서 다른 사람이 사용할 수 있도록 만든 것 jQuery 란? 엘리먼트 틀을 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 //html,js 등.. 자바스크립트 라이브러리 Hello world - 첫번째 jQuery 사용방법 직접 서비스 하는 경우 http://jquery.org 에서 jquery 소스코드를 다운로드 한다. https://code.jquery.com/jquery-3.4.1.min.js 다운로드 후 src=""속성값으로 전달 2. 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다. 2. 구글의 ..
React : 페이스북 닷컴 UI를 더 잘 만들기 위해서 페이스북에서 만든 자바스크립트 UI 리엑트가 가지고 있는 기술 중 하나로 사용자 정의 태그를 만들어 사용할 수 있다. => 컴포넌트 1. 가독성을 높임. 2. 재사용성 3. 유지보수가 편리해진다 [ 리엑트 시뮬레이션 사이트 ] codesandbox.io/s/new?file=/src/App.js React - CodeSandbox React example starter project codesandbox.io codepen.io/pen?&editors=0010 Create a New Pen ... codepen.io stackblitz.com/edit/react-rpzzlq react-rpzzlq - StackBlitz Starter project ..