가카리의 공부방

이벤트를 연결시 on 메소드를 쓰는데 만약에 selector 매개변수로 이벤트 범위를 한정 할 수 있습니다. #id명 는 id로 한정하는 selector이고 이러한 selector에 on 메소드를 추가하는 방법으로 이벤트의 연결 범위를 한정할 수 있습니다. DOCTYPE html> *{ margin: 5px; padding: 5px; border: 3px solid black; } $(document).ready(function (){ //이벤트에 연결합니다. //$('h1').click(function(event){ $('#wrap').on('click', 'h1', function(){ var length = $('h1').length; var targetHTML = $(this).html(); $(..

기본 이벤트를 제거하고 이벤트의 전달을 막기 예제입니다. preventDefault메소드로 기본 이벤트를 제거합니다. stopPropagation메소드로 이벤트 전달을 제거합니다. DOCTYPE html> *{ margin: 5px; padding: 5px; border: 3px solid black; } $(document).ready(function (){ //이벤트에 연결합니다. $('a').click(function(event){ $(this).css('background-color', 'blue'); event.stopPropagation(); event.preventDefault(); //아니면 다음과 같이 해도된다. //return false; }); $('h1').click(function..

다음 예제는 context 객체를 활용한 자기 자신의 태그의 내용을 출력하는 예제입니다. 기존의 $(‘h1’).text() 이런식이였다면 이번에는 두 번째 매개변수를 this로 놔서 자기자신의 값을 가져오게 합니다. $(‘h1’, this).text(); DOCTYPE html> *{margin: 0px; padding: 0px} div { margin: 5px; padding: 3px; border: 3px solid black; border-radius: 10px; } $(document).ready(function (){ //이벤트에 연결합니다. $('div').click(function (){ var header = $('h1', this).text(); var paragraph = $('p', ..

on 메소드를 활용한 이벤트 연결 다음예제는 h1을 클릭시 +를 추가해주는 예제입니다. DOCTYPE html> $(document).ready(function (){ //이벤트에 연결합니다. $('h1').on('click', function(){ $(this).html(function(index, html){ return html + '+'; }); }); }); Header-0 Header-1 Header-2 실행화면 on메소드를 이용한 이벤트 추가 두 번째 예제 DOCTYPE html> .reverse { background: black; color: white; } $(document).ready(function (){ //이벤트에 연결합니다. $('h1').on('click', function..

$.extend 메소드는 어떤 객체에 속성을 추가해주는 메소드입니다. 간단하니까 다음의 예제를 보면 이해가 되실 겁니다. DOCTYPE html> Insert title here $(document).ready(function(){ var object = {name: '윤인성'}; //객체에 속성들을 추가하게됨 $.extend(object, { region: '서울특별시 강서구', part: '세컨드 기타' }); var output = ''; //$.each 메소드로 출력해봄 $.each(object, function(key, item){ output += key + ': ' + item + '\n'; }); alert(output); }); 실행화면

이전에 사용한 $.each 메소드를 통해서 배열을 관리했는데요 이번에는 내부 파라미터인 index와 item을 사용하는 방법을 알아봅시다. 아래소스는 h1으로 item-0부터 4까지 있는데 그것을 high-light-0부터 4까지의 css를 적용하는 소스입니다. 이를 위해서 $('h1').each(function(index, item)에서 수행하는데 여기서 h1은 body 내부의 h1을 의미합니다. 그리고 addClass()를 통해서 css클래스를 적용하게됩니다. DOCTYPE html> Insert title here .high-light-0 {background: yellow;} .high-light-1 {background: orange;} .high-light-2 {background: blue;..

자바스크립트에서 배열에 들어 있는 내용을 HTML 페이지에 표시하기 위해서 $,each 메소드를 사용하는 법을 봅시다. 다음과 같이 array를 선언후 for문처럼 사용하는 $.each 메소드를 통해서 모든 name과 link 항목을 innerHTML 시키는 예제입니다. DOCTYPE html> Insert title here $(document).ready(function(){ var array = [ {name: 'hanbit', link: 'http://hanb.co.kr'}, {name: 'daum', link: 'http://daum.net'}, {name: 'naver', link: 'http://naver.com'} ] $.each(array, function(index, item){ var..

Input 태그의 text와 textarea는 기본 HTML 엘리먼트들입니다. JQM에서 모바일에 사용하기 유용하도록 변환해줍니다. Text input은 문자열을 입력받을 경우에 사용하며, input 태그에 type=”text” 속성을 사용하여 생성합니다. 같이 사용하는 label태그의 for 속성의 값과 input태그의 ID 값으로 매칭됩니다. 이 두가지 엘리먼트를 하나의 그룹처럼 하기 위해 div태그로 감싸고 data-role=”fieldcontain” 속성을 추가합니다. Text Input: Password input은 비밀번호를 입력받을 경우에 사용하며, input 태그에 type=”password” 속성을 추가하여 사용합니다..