재유's

Handlebars 플러그인 https://handlebarsjs.com/ Handlebars(이하 핸들바) 플러그인은 동적 template를 만들때 사용하는 Plugin이다. Ajax데이터를 갖고와 템플릿을 만들어 놓고 몇줄만 추가하면 간단하게 동적으로 태그를 만들어 준다. CDN ( https://cdnjs.com/libraries/handlebars.js )https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.1/handlebars.min.js 현재 유용하게 사용중 ㅎㅎㅎ

프로퍼티 설정 - HTML 태그에서 값을 갖지 않는 속성 : property - 값을 갖는 속성 : attribute 프로퍼티의 적용 여부 조회특정 프로퍼티의 적용여부를 boolean 값으로 조회한다.1var is = $("셀렉터").prop('프로퍼티 이름'); checked, disabled, selected... 12345678// ex) 체크박스의 disabled 속성이 적용되어 지 여부 확인 var ok = $(".foo").prop('disabled'); 프로퍼티의 설정/ 해제prop함수에 두 번째 파라미터로 boolean값을 전달하면 프로퍼티를 강제로 설정하거나 해제할수 있다.1$(".foo").prop('disabled', true[false]) ;

정규 표현식 - 문자열의 형식을 검사하기 위한 정형화된 식. - 모든 프로그래밍 언어에서 공통적으로 사용한다. Javascript에서 정규표현식 사용1234var regex = /정규표현식/;if( !regex.test("검사할문자열")){ //... 정규 표현식에 부합하지 않을 경우의 처리 ...}

입력 요소 제어 $.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()..