본문 바로가기

거침없이 배우는 자바스크립트17

jQuery) 폼에 포커스 주기, 필드사용/사용안함 사용자의 편의를 위해 폼에 포커스를 줄때 필드가 username이라는 아이디를 가졌다면 아래와같이 써서 이 필드에 focus를 줄 수 있다. $(document).ready(function(){ $('#username').focus(); }); 이렇게 해도 가능하지만 좀 더 여러군데에서 쓰려면 $(document).ready(function(){ $('#signup :text')[0].focus(); }); signup이라는 아이디를 가진 폼의 첫 번째 텍스트 필드에 커서가 위치하기를 원한다면 이렇게 할 수 있다. 선택자 $('#signup :text')는 signup 폼의 텍스트 필드만 선택한다. 이건 나중에 결제가 필요한 홈페이지를 만들경우 제일 유용할 것 같다. 요즘 인터넷들이 빨라서 이런경우가 드.. 2012. 1. 30.
jQuery) Blur, Click, Change $('#quantity').blur(function(){ } ; 이건 탭키를 눌러 필드의 바깥으로 옮기거나 포커스된 필드의 바깥을 클릭할 때 브라우저는 blur 이벤트를 발생시킨다. 텍스트 필드나 textarea에서 방문객이 클릭이나 탭으로 필드를 빠져나갈 때 값을 검증하기 위해 사용한다. 이걸 잘 사용하면 필드 바깥으로 나가려고 할 때마다 체크해서 하나씩 알려줄 수 있다. $(':radio').click(function(){ //라디오 버튼을 클릭할 때마다 함수가 적용된다. } ; click 이벤트는 폼 HTML 요소를 클릭했을 때 발생한다. $('#country').change(function(){ } ; 메뉴( 태그)에서 옵션을 선택할 때마다, change 이벤트가 발생하는데 이 이벤트를 유효성 검.. 2012. 1. 30.
jQuery) 폼 Focus 포커스는 방문객의 커서가 특정 필드 위나 안에 머물 때 발생하는 이벤트다. 이 필드에 이미 입력된 값을 제거하기 위해 사용하기도 한다. 이렇게 하면 "이름을 입력해주세요" 라는 값을 가진 텍스트 필드를 만들 수 있다. 이 기술을 사용하면 방문객이 필드에 입력해야 할 값에 대해 안내할 수 있다. 하지만 방문객이 이 폼에 값을 입력하려고 할 때 안에있는 글을 지워주기 위해서 아래와 같이 jQuery를 사용할 수 있다. defaultValue는 페이지가 처음 읽어들여졌을 때 가지고 있던 텍스트를 의미한다. 필드의 텍스트를 지워도, 웹 브라우저는 처음의 값을 기억하기 때문에 이렇게 사용할 수 있다. 필드의 현재값(field.val() )을 처음 필드에 있던 값과 같은지 비교해서 같다면 자바스크립트는 필드에 있는.. 2012. 1. 30.
jQuery) Submit (전송버튼) 폼이 signup이라는 아이디를 가지고 있으며 내부에 username이라는 아이디를 가진 이름 필드가 있다고 할 때, 이 폼에 대한 유효성 검사는 아래와 같이 할 수 있다. 3번째 줄에서는 필드가 비었는지를 확인하고, 아무런 값도 포함하지 않았다면 경고창을 보여주고, return false로 폼 전송을 중단시킨다. 만약 이 부분이 생략된다면 방문객의 이름이 입력되지 않아도 폼을 전송해 버린다. $(document).ready(function(){ $('#signup').submit(function(){ if($('#username').val() == ''){ alert('이름 필드에 값을 입력해 주세요.'); return false; } }); }); 2012. 1. 30.
jQuery) 폼 필드 선택자 귀찮아서 안적어 놓을까도 했는데 ㅠㅠ 인터넷에 찾아보니 없다. 날 위해서라도 적어 놓아야겠다. $(':input') - 모든 폼 HTML 요소를 선택한다. $(':text') 이렇게 jQuery 형식으로 :password, :radio, :checkbox, :submit, :image, :reset, :button, : file, :hidden 이 있고, 사용할 수 있다. 그리고 폼 선택자를 다른 선택자와 조합해서 사용할 수도 있다. 선택하려는 폼이 signup이라는 아이디를 가지고 있고, 이 폼에 있는 텍스트 필드를 선태하려고 한다면 $('$signup :text') 로 사용할 수 있다. 그리고 jQuery는 특정 상태와 일치하는 폼 필드를 찾을 수 있는 유용한 필터도 제공한다. :checked 는 체.. 2012. 1. 30.
탐색 메뉴 HTML을 사용해서 중첩하는 링크를 만들고, CSS를 사용해 이 링크들을 탐색 메뉴처럼 꾸민 후 하위 메뉴는 숨기도록 한다. 그 다음에 탐색 메뉴의 버튼에 마우스를 올리면 메뉴를 애니메이션하며 보여주는 자바스크립트를 추가하면 된다. 탐색 메뉴에 사용할 HTML은 태그를 사용하는 순서 없는 목록이다. 최상위 태그는 탐색 메뉴의 메인 버튼이다. 하위 메뉴를 만들려면, 먼저 하위 메뉴를 포함할 태그 안에 중첩하는 태그를 만든다. 처음으로 제품소개 ~~~ 써주고 ~~~ 써주고 이런식으로 할 수 있다. 이러면 탐색버튼은 처음으로, 제품소개 두개가 나오게 되고, 제품소개 아래에는 두개의 중첩 목록이 생긴다. 실제 대부분의 작업을 담당하는 것은 탐색 메뉴에 사용할 스타일 시트이다. 스타일 시트는 한 무더기의 중첩되는.. 2012. 1. 25.

티스토리툴바