천천히 알아가는 세상

안녕하세요. JQuery에서 Enter 이벤트 작성하는 방법입니다. login_id 아이디를 가진 곳에서 Enter를 클릭하면 이벤트가 발생합니다. keyCode를 이제는 안 쓰는 것으로 알고는 있지만, 아직 사용하는 곳도 있기 때문에 2개다 작성하였습니다. $("#login_id").keydown(function (key) { if (key.key == "Enter" || key.keyCode == "13") { user_login(); } }); 감사합니다.

안녕하세요. 이번에는 JQuery 이벤트 리스너에 대하여 알아보겠습니다. 여기서는 로딩, 마우스, 키보드 이벤트에 대해서만 간략하게 알아보겠습니다 1. 로딩 이벤트 .ready(), $() html 문서 로딩이 된 후에 실행되는 함수입니다. 사용하는 방식은 다음과 같습니다. $(document).ready(function() { )}; 1.8 버전에서는 deprecated, 3.0 버전에서 미지원 $(function() { }); 해당 코드로 사용하는 것을 권장 ready() 대신에 다음과 같이 코드를 사용합니다. html 문서를 실행하면 입력했던 ‘테스트’ 알림 창이 나오는 것을 볼 수 있습니다. 2. 마우스 이벤트 click(), mouseover(), hover, scroll() 마우스에 의해서 발..

안녕하세요. 이번에는 JQuery 기능 중에서 JQuery UI에 대하여 간단하게 알아보겠습니다. JQuery UI는 JQuery를 기본으로 하면서, 뷰를 표현하는 다양한 컴포넌트, 위젯을 모아놓은 User Interface를 모아 놓은 것입니다. JQuery UI는 CDN 형식으로 사용할 수 없기에 다운로드를 받아서 사용해야 합니다. JQueryUI 공식 홈페이지 jQuery UI jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web ..

안녕하세요. 이번에는 JQuery의 Class 관련 함수에 대해 알아보겠습니다. 1. addClass 클래스를 추가하는 함수입니다. div입니다. addClass addClass 버튼을 클릭하면 div 태그에 ‘test’ 이름의 class가 추가됩니다. test 클래스가 이미 있는 상태에서는 버튼을 다시 눌러도 추가 적용되지는 않습니다. 2. removeClass 클래스를 삭제하는 함수입니다 div입니다. addClass removeClass 이번에는 addClass로 추가되었던 test 클래스를 removeClass 버튼을 클릭하여 삭제하는 장면입니다 3. hasClass 해당 클래스가 있는지 검사하여 존재 여부에 따라 True, False 값을 반환합니다. div입니다. addClass removeC..

안녕하세요. 이번에는 JQuery의 선택자에 대하여 간단하게 알아보겠습니다. parent $( 선택자 ).parent().함수() • 바로 위에 존재하는 하나의 부모 요소 선택 parents $( 선택자 ).parents().함수() • 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택 next $( 선택자 ).next().함수() • 선택된 요소 바로 다음에 위치한 형제 요소 선택 prev $( 선택자 ).prev().함수() • 선택된 요소 바로 이전에 위치한 형제 요소 선택 children $( 선택자 ).children().함수() • 선택된 요소의 자식 요소 모두 선택 li 태그의 부모에 append 함수로 li 태그를 추가하는 코드입니다. 그리고 콘솔 로그를 이용하여 각 요소 선택자에 ..