본문 바로가기

공부/자바스크립트 jQuery36

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.
jQuery) 새 창을 여는 이벤트 자바스크립트를 사용할 때, 창을 열 수 있는 이벤트로 허용된 것은 사용자가 링크를 클릭하거나 폼을 전송할 때뿐이다. 따라서, 새 창을 열려면 HTML 요소에(반드시 링크일 필요는 없다) click 이벤트를 추가해야 한다. 가령 페이지에 있는 어떤 링크들을 너비, 높이가 각각 300 픽셀이고 스크롤바가 있으며, 크기 조절이 가능하고, (도구 모음과 같은) 그 밖의 요소는 없는 창에 열고 싶다고 가정했을때 $('.popup').click(function(){ var winProps='height=300, width=300, resizable=yes, scrollvars=yes'; var newWin=open($(this).attr('href'),'aWin',winProps); } 이렇게 특별한 링크들에 po.. 2012. 1. 25.

티스토리툴바