본문 바로가기

jQuery17

AJAX (Asynchronous Javascript And XML) AJAX (Asynchronous Javascript And XML) Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법입니다. 즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것입니다. 비동기 방식의 장점 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 됩니다. 하지만 비동기식 방식을 이용할 경우 필.. 2022. 4. 17.

JQuery 탐색 탐색 체인 컨텍스트를 유지하면서 제어의 대상이 되는 엘리먼트를 변경하는 기법이다. ${'#root}.addclass{'s'}.removeClass{'s'}.add('s').addclass{'s'}.removeClass{'s'}.first{'s'}........ 위의 예시처럼 계속 체인처럼 연결하여 탐색을 계속 코딩할 수 있다. .add(selector) : 엘리먼트를 추가한다 .andSelf() : 현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다 .children([selector]) : 자식 엘리먼트를 선택한다 .closest(selector) : 가장 가까운 selector 조상 엘리먼트를 탐색한다 .each(function(index,Element)) : 현재 엘리먼트 셋에 반복 작업을 실행한다 ... 2020. 12. 30.

JQuery 폼 폼 서버로 데이터를 전송하기 위한 수단 JQuery는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다. JQuery 폼 API 문서 : http://api.jquery.com/category/forms/ Forms | jQuery API Documentation Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “focus” JavaScript event, or tr api.j.. 2020. 12. 29.

JQuery 엘리먼트 제어 엘리먼트 제어 jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다. http://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, to the end of each element in the set of api.jquer.. 2020. 12. 28.

JQuery Event Event 시스템에서 일어나는 사건을 의미한다. javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등) 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. jQuery의 이벤트 크로스브라우징의 문제를 해결해줌 on로 이벤트 핸들러를 설치하고, off로 제거 trigger로 이벤트 핸들러를 강제로 실행 (예제2) click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함 예제 코드 2020. 12. 25.

JQuery Chain Chain jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. chain의 장점 코드가 간결해진다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함. 예시 Jin seok kim 탐색(traversing) chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법 너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있다. 참고 사이트 http://api.jquery.com/category/traversing/ Traversing | jQuery API Documentation Create a new jQuery object with elements added to the set of m.. 2020. 12. 23.

JQuery 선택자 선택자란? jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다. 예제 코드 - id 선택자 : #선택자 - class 선택자 : .선택자 - 엘리먼트 선택자: 엘리먼트 자체 - 다중 선택자 : #선택자, #선택자2 아래 코드에서 JQuery을 이용하여 선택자를 불러오는 것을 확인 할 수 있다. 아래 jQuery 사이트에서 더 다양한 선택자를 찾아볼 수 있다. 활용할 수 있는 이해만 하면 선택자를 다 외우지 못하도 활용할 수 있다. https://api.jquery.com/category/selectors/ Selectors | jQuery API Documentation Select all elements that are i.. 2020. 12. 22.

JQuery Wrapper Wrapper jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자') 맨앞의 jQuery 문자가 레퍼이며, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환시킨다. 레퍼의 안전한 사용 $(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 주의해야 한다. 제어 대상을 지정하는 방법 jQuery( selector, [context] ) jQuery( element ) test2 test 2020. 12. 18.

JQuery 이란 JQuery 엘리먼트를 선택하는 강력한 방법이다. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다. 자바스크립트 라이브러리라고 할 수 있다. 사용방법 http://jquery.org 에서 jquery 소스코드를 다운로드 한다. 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다. Javascript와 JQuery 비교 탭을 클릭했을 때 포커스를 색깔로 표시 변경하는 코드이다. 자바스크립트 본래의 코드보다 제이쿼리가 훨씬 간결해졌다. 2020. 12. 18.

Javascript 네트워크 통신 - JSON JSON SON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. JSON API JSON.parse() : 인자로 전달된 문사열을 자바스크립트의 데이터로 변환한다. JSON.stringify() : 인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다. Ajax와 JSON 우선 아래 코드와 같이 서버 쪽에서는 타임라인의 리스트를 콤마로 구분해서 전달한다. ↓ 결과 Asia/Seoul,America/New_York 클라이언트 측에서는 이 결과를 받아서 처리한다. ↓ 위 코드에서 중요한 것은 아래 코드 부분이다. var _tzs = xhr.resp.. 2020. 11. 27.

Javascript 네트워크 통신 - Ajax 네트워크 통신 자바스크립트를 이용해서 웹브라우저의 통신 기능을 사용하는 방법인 서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 예를 들자면 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있는 Ajax는 웹에플리케이션을 구축하는데 중요하다. Ajax Ajax는 Asynchronous JavaScript and XML의 약자다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML을 사용해서 통신.. 2020. 11. 27.

Javascript 이벤트 타입 - jQuery on API 사용법 jQuery on API 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. 또 순순 자바스크립트와 코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해주기 때문이다. on의 기본적인 문법. .on( events [, selector ] [, data ], handler(eventObject) ) event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함 data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함 handler : 이벤트 핸들러 함수 selector selector 파라미터는 이벤트 대상을 필.. 2020. 11. 26.

Javascript Node 객체 - jQuery 노드 변경 API jQuery 노드 변경 API jQuery를 이용해서 노드를 제어할 수있다. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다. 참고 http://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, .. 2020. 11. 20.

javascript Element 객체 - jQuery 속성 제어 API jQuery 속성 제어 API Element의 API에 해당하는 기능을 jQuery에서는 어떻게 구사 가능하다. 속성제어 jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 'attr'이다. 또한 removeAttribute에 대응되는 메소드로는 'removeAttr'이 있다. 블로그 attribute와 property DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분한다. 속성은 attr, 프로퍼티는 prop 메소드를 사용한다. URL jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다. 이런 것이 라이브러리를 사용하는 의의라고 할 수 있다. ↓ jin seok 2020. 11. 19.

javascript DOM - jQuery jQuery이란? 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 중 하나이다. jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery의 사용 jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. jQuery를 로드하는 방법 의 jQuery 연동 링크는 jQuery 홈페이지에 들어가서 다운 받을 수 있다. 위의 코드의 결과는 Body 태그 아래에 jin seok 코드가 만들어진다. jQuery( document ).ready(function( $ ) 같이 {}로 감싸는 것이 이상적이다. jQuery로 제어 대상을 찾기 jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다.. 2020. 11. 17.

Javascript 모듈(module)에 대하여 모듈이란? 프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들인 모듈(module)을 사용된다. 순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 모듈을 사용하면 좋은 이유 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다. 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다. 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에.. 2020. 11. 6.

HTML CSS (feat. jQuery) 간단한 포트폴리오 웹 사이트 코딩. html Kim, jin seok I'm Web Programer 1. 을 이용하여 reset.css을 지정해주고 따로 style.css 또한 따로 링크화 해주었다. 2. fontello을 사용하기 위해 fontello.css 파일 또한 링크화 해주었다. 바로 body부분에 class로 demo에 나온 각각의 "아이콘 이름"을 지정해주면 바로 아이콘 효과가 적용된다. 3. 을 이용하여 jquery의 정보를 받아오고 bxslider라는 jquery 플로그인 또한 받아왔다. 또 bxslider의 활용을 구체화하기 위해 옵션들을 설정해주었다. bxslider의 옵션들(controls: , pager: , auto:)로 인해 화면상의 배경화면들이 자동으로 슬라이드화 되며 배경화면을 넘기는 컨트롤창 또한 보이지 .. 2020. 10. 27.

이전 1 다음

티스토리툴바