H O M E

JQuery를 이용해서 Ajax를 사용하면 크로스브라우징 문제를 자동으로 처리해주고, 편리한 기능을 제공한다. JQuery의 Ajax API는 이쪽으로 -->> http://api.jquery.com/category/ajax/ $.ajax 기본 문법 JQuey.ajax ( [ setting ] );setting : Ajax를 위한 옵션을 담고있는 객체* data : 데이터를 서버로 전송할 때 사용하는 옵션 * dataType : 서버특에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 지정하지 않는다면 JQuery가 알아서 판단한다. * success : 성공했을 때 호출할 콜백을 지정한다. Fucntion ( P..

레퍼 (Wrapper )* JQuery( 엘리먼트 오브젝트 | 'CSS 스타일 선택자' )* 붉게 표시된 부분이 레퍼이다. 인자로 전달된 엘리먼트에 JQuery의 기능성을 부과해서 반환한다. 1. 안전한 사용* $(엘리먼트)와 JQuery(엘리먼트) 는 같은 의미지만 다른 라이브러리와의 충돌때문에 다음과 같은 방법을 사용한다. - 첫번째 방법 - 두번째 방법 2. 제어 대상을 지정하는 방법* JQuery ( selector , [context]* JQuery ( Element )

JQuery는 크로스 브라우징을 자동으로 처리해주고 , 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. - 예제 > 실행 화면 링크 실행 화면 링크

추가추가와 관련된 주요 메소드는 4가지 이다.before append > after - 예제 (문서의 구조 변경) >실행 화면 링크실행 화면 링크실행 화면 링크실행 화면 링크실행 화면 링크

selector context* 조회 할 때 조회 범위를 제한한다.$( "선택자 1", "선택자 2").함수명( 실행 구문 ); .find()* Jquery 객체 내에서 엘리먼트를 조회하는 기능을 제공한다.$("선택자 1").find("선택자 2".함수명(실행구문); * 체인을 끊지 않고 작업 대상을 변경하고 싶을 때 사용한다.$("선택자 1").함수명(실행구문1).find("선택자 2").함수명(실행구문2);=> 선택자 1.item-선택자 2의 모든 엘리먼트를 대상으로 실행구문1을 한 뒤 선택자 2에 대해서만 실행구문 2를 동작한다.

속성제어* Element 객체의 setAttribute, getAttribute에 대응되는 메소드 attr* removeAttribute에 대응되는 메소드 removeAttr 내 블로그 속성과 프로퍼티* JQuery에서 속성은 attr (Attribute 방식) 프로퍼티는 prop (Property 방식) 메소드를 사용한다. JQuery Test * JQuery를 사용하면 property이름으로 어떤 것을 사용하던 올바른 것으로 교정해준다. opentutorials opentutorials

JQuery 객체* JQuery 함수의 리턴 값으로 JQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작어을 프로퍼티로 가지고 있는 객체이다.* 조회된 엘리먼트가 담겨있다. JQuery 객체는 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열처럼 사용해서 엘리먼트를 가져올 수 있다. - 암시적 반복* DOM과는 다르게 JQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다. 암시적 반복은 값을 설정할 때만 동작한다. 값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환한다. - 체이닝*선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법이다. - 조회된 결과 열람1. 엘리먼트 조회 2. JQuery를 이용해 DOM 객체 제어..

JQuery 기본 문법* $ 는 JQuery의 문법을 사용자는 정의 표현을 뜻한다.* #은 ID값을 가진 HTML 요소를 선택하라는 의미가 되고 . 은 Class값을 선택하라는 뜻이다. JQuery 코드 생산성 - Befor 1 : DOM 사용 시document.getElementById('id'); - After 1 : JQuery 사용 시$('#id'); - Befor 2 : DOM 사용 시 var lis = document.getElementByTagName('li'); for( var i = 0 ; i < lis.length ; i++ ){ lis[i].style.color = 'red'; } - After 2 : JQuery 사용 시 $('li').css('color', 'red') HTML 엘..

JQuery* DOM을 내부로 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 JavaScript 라이브러리이다.* 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 - JQuery의 로드 방법 1. 라이브러리 파일을 다운 받아 직접 연결2. 원하는 라이브러리 버전 직접 연결 3. CND를 이용하는 방법 ( 보안 문제 가능성 있음. ) - 사용 예제 * Body 태그 아래에 Hello World 코드가 만들어진다.* jQuery(document).ready(function($){ }); 로 코드를 감싸는 것이 이상적이다.