재유's

입력 요소 제어 $.each() 함수 - 배열을 탐색하는 jQuery 기능1234567var data = ['hello', 'world']; // 배열을 탐색하면서 원소의 수 만큼 콜백함수가호출된다.$.each(data, function(index, item){ // index는 순차적으로 0, 1 // item은 순차적으로 'hello', 'world'}); - 배열의 원소가 HTML객체인 경우 jQuery 객체로 변환하여 사용해야 한다.1234567// ex) 체크 var data = ['', '']; // 배열을 탐색하면서 원소의 수 만큼 콜백함수가호출된다.$.each(data, function(index, item){ // $(item) 형태로 객체를 생성하여 처리 가능}); - 원래 목적은 객체..

입력 요소 값 가져오기 값 설정하기1$("셀렉터").val("내용"); 값 읽어 오기text, select(드롭다운)1var input = $("셀렉터").val(); 드롭다운요소의 경우 사용하지 않은 태그라 하더라도 value 속성값을 부여해야한다. 1234 --- 선택하세요 --- item 1 라디오 버튼의 경우 - 셀렉터가 여러개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다. - 라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다.1var input = $("셀렉터:checked").val(); 체크박스의 경우 - .checked 가상클래스를 통해 가져온 대상이 배열상태가 되므로 이를 반복문으로 처리해야 한다. - 배열의 요소는 선택된 체크 박스들에 대..

요소의 동적 생성 태그 안에 명시된 태그 요소를 객체화 하는 경우 태그 이름을 $() 함수에 전달한다.1var obj = $("div"); 태그 안에 명시되지 않은 태그 요소를 객체화 하는 경우태그 이름을 로 감싸서 $()함수에 전달한다.1var obj = $(""); 이렇게 생성된 요소들은 jQuery의 기능들을 적용할 수 있다.12var obj = $("div");obj.attr('id', 'hello').css(...).addClass('item');c 기존에 존재하는 요소를 복사하는 경우12var obj = $("#foo").clone();obj.arrr('id', 'helloworld'); - 모든 속성을 동일하게 복사하므로 id속성값 같은 경우(중복되어서는 안되므로)는 다른 값으로 변경해 주어..

요소의 탐색 메서드 체인 - 하나의 jQuery요소에 대하여 메서들 연속적으로 호출하는 기법 - 특별한 경우가 아닌이상 jQuery()의 함수들은 객체 자신을 리턴한다.1234ja$("#foo").attr(key, value) .css(key, value) .addClass(cls) .click(function() {})); 주변 요소 탐색하기함수 설명 prev() 이전 요소를 리턴한다. next() 다음 요소를 리턴한다. parent() 상위 요소를 리턴한다. children() 하위 요소(들)을 리턴한다. eq(n) n번째 요소를 리턴한다. 부모 요소 얻기주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.1$("#foo").parents("셀렉터"); 자식 요소 얻기주어진 셀렉터를 갖는 가장 인..

HTML 요소의 CSS 속성 제어 특정 요소에 적용되어 있는 속성값 조회하기1var foo = $("#bar").css('속성이름'); 특정 요소의 적용하기개별적용1$("#bar").css('속성이름', '값'); 일괄 적용(json 형태 사용)123456$("#bar").css({ 속성이름: '값', 속성이름: '값', 속성이름: '값', ... }); HTML 요소의 CSS 클래스 제어 CSS 클래스 적용여부 검사1var foo = $("#bar").hasClass('클래스 이름'); // true, false 리턴 CSS 클래스 적용1$("#bar").addClass('클래스 이름 클래스 이름 ...'); - 두 개 이상의 클래스를 적용하고자 하는 경우 공백으로 구분 CSS 클래스 삭제1$("#ba..

요소의 판별 index() 함수- 특정 요소가 부모 태그 안에서 갖는 인덱스번호를 리턴하는 함수 (0부터 시작함)12345678910 ... // 부모 를 기준으로 2번째 요소이므로 인덱스 1이 리턴된다. var idx = $("#hello").index(); $(this)- 복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체1234567891011button1button1button1 // 'btn' 이라는 클래스를 갖는 모든 요소에 대해서 일괄적으로 적용되는 이벤트 $('.btn').click(function(){ // 버튼은 한번에 하나씩만 누를 수 있다. // 이 안에서 $(this)는 클릭된 주체를 의미한다. }); 특정 요소의 적용하기 개별적용1$("#bar..

요소의 크기 조회 width(), height() 함수의 사용 특정 요소의 크기12var w = $("#foo").width();var h = $("#foo").height(); 웹 페이지 전체의 크기12var w = $(document).width();var h = $(document).height(); 브라우저의 크기12var w = $(window).width();var h = $(window).height(); 스크롤바의 위치1var top = $(window).scrollTop(); 반응형 기능- 브라우저 크기에 반응하여 동작하는 함수를 정의하고 브라우저가 열린 직후와 창 크기가 변경될 때 동작하도록 호출한다.123456789101112131415161718function responsive()..

jQuery 이벤트 처리 jQuery 이벤트 처리 - 웹 브라우저가 HTML 요소를 인식한 후에 처리되어야 하므로 jQuery의 load처리 안에서 정의 한다.- 이벤트는 함수 형태로 정의되어 있고, 해당 이벤트가 발생한 경우 호출될 함수를 콜백 파라미터로 전달한다.- 콜백함수에는 이벤트의 정보를 갖는 e객체가 전달된다.- 필요한 경우 이 객체를 선언하고 활용할 수 있다.- e.preventDefault()는 링크의 href 속성이나 폼의 submit 등에 대해서 HTML요소가 수행해야 하는 기본 동작을 차단하는 역할을 한다. 123456// jQuery의 load처리 안에서 정의$(function () { $("foo").이벤트이름(function ([e]) { [e.preventDefault();] ..

JSON 표기법 Javascript와 JQuery에서 JSON 표기법은 같다!Javascript(jQuery)에서 사용되는 자료의 나열 방법으로 이름(key)와 값(value)의 쌍으로 구성된다. 이름(key)에는 따옴표 사용이 자유롭다.단, 이름에 "-"가 있는 경우 따옴표 필수!ex) background-color (x), "background-color" (o) 기본 정의 방법1234567891011var my_height = 175.6;var json = { name: 'JS학생', // 문자열은 따옴표 사용 age : 20, // 숫자형이나 boolean은 따옴표 x height: my_height // 다른 변수를 값으로 사용도 가능함}; // 값에 접근하기.console.log(json.na..

HTML 요소 접근HTML 요소를 jQuery객체로 생성 var obj = $("css셀렉터"); 대상 요소를 지정할 수 있는 css셀렉터를 사용한다.jQuery에서는 가급적 id속성만으로 대상을 지정한다. - css : Tag나 ID속성을 사용한 셀렉터 지양 자손, 자식 셀렉터의 구성도 가급적 class속성만으로 구성. - jQuery : 대부분의 경우 ID속성을 사용하지만 동시에 여러개의 객체를 제어해야 할 경우 class속성도 사용. HTML 요소 내의 내용 제어html() 함수는 파라미터가 있을 경우 설정(setter), 파라미터가 없을 경우 리턴(getter)의 기능을 한다. 요소 안에 내용을 설정하기 (setter)jQuery1$("#foo").html(설정할 내용); javascript1do..