프로그래밍/JQuery
-
Enter, Tab, ESC 키 이벤트프로그래밍/JQuery 2022. 11. 7. 22:26
Enter 키를 누를 경우, $("#txtCode").on("keydown", function (e) { if (e.keyCode == 13) { alert(e.keyCode); } }); Tab 키를 누를 경우, $("#txtCode").on("keydown", function (e) { if (e.keyCode == 9) { alert(e.keyCode); } }); ESC 키를 누를 경우, $("#txtCode").on("keydown", function (e) { if (e.keyCode == 27) { alert(e.keyCode); } }); keyPress 이벤트 발생시에는 보조키 Tab, Shift 등 입력시 이벤트가 발생하지 않았지만, keyDown 이벤트에서는 Tab, Shift 등 입..
-
이벤트(event) 종류프로그래밍/JQuery 2022. 11. 4. 22:55
이벤트는 시스템에서 일어나는 사건이나 발생을 의미하며, 원하는 요소에 이벤트를 예약해두고 이벤트를 작동시키면 특정 함수가 실행되는 것을 의미한다. 원하는 시점에 필요한 기능을 할 수 있도록 도와주는 형태이다. 이벤트의 종류로는 마우스, 키보드, 브라우저, 문서로딩, 폼이 있다. 마우스 이벤트 종류 설명 click 마우스를 클릭 했을 때 발생 dblclick 더블 클릭 했을 때에 발생 hover mouseenter와 mouseleave mousedown 마우스를 눌렀다가 떼었을 때에 발생 mouseenter 마우스가 진입했을 때에 발생 mouseleave 마우스가 벗어났을 때에 발생 mousemove 요소 내에서 마우스를 움직였을 때에 발생 mouseout 요소 내에서 마우스 포인터가 떠났을 때에 발생 m..
-
박스모델 메소드프로그래밍/JQuery 2022. 11. 1. 20:55
박스모델의 가로, 세로 크기를 받아오거나 설정해주는 메소드를 알아보자. 종류 설명 width() 가로 크기를 가져오거나 설정하는 메소드 height() 세로 크기를 가져오거나 설정하는 메소드 innerWidth() 요소의 (가로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드 innerHeight() 요소의 (세로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드 outerWidth() 요소의 (가로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드 outerHeight() 요소의 (세로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드 outerWidth(true) 요소의 (가로크기 + 패딩 + 테두리 + 마진의 가로 크기)를 가져오거나 설정하는 메소드 ou..
-
자식, 자손 요소의 탐색프로그래밍/JQuery 2022. 10. 31. 20:44
특정 요소에서 자식, 자손요소에 해당하는 요소를 탐색하는 방법에 대해 알아보자 종류 설명 children() 매개변수로 전달된 요소를 바로 하위 요소(자식 요소)에서 찾아줌 find() 선택한 요소의 자손 요소 중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택 별표(*)를 인수로 전달하여 선택한 자손 요소를 모두 선택할 수도 있음 div 요소 ul 요소 li 요소 li 요소 p요소 span 요소 li 요소 li 요소 ul 요소의 모든 자식 요소 li 요소의 모든 자손 요소 스크립트 children() 적용 스크립트 find() 적용
-
형제요소 탐색프로그래밍/JQuery 2022. 10. 30. 09:54
특정 요소에서 형제 요소에 해당하는 요소를 탐색하는 방법에 대해 알아보았다. 종류 설명 siblings() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택 next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택 nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택 전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음 prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택 prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택 전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음 div 요소 ul 요소 li 요소 li 요소 li 요소 p요소 span 요소 li 요소 li 요소 li 요소의 형제 요소 스크립트 siblings(..
-
조상요소 탐색프로그래밍/JQuery 2022. 10. 28. 10:11
선택자로 선택된 특정 요소의 조상 요소를 탐색하는 방법에 대해 알아보자. 종류 설명 parent() 선택한 요소의 부모요소를 선택함. 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 부모 요소만을 선택할 수 있음. parents() 선택한 요소의 조상요소를 선택함. 선택자를 인수로 전달하여 전달받은 선택자에 해당하는 조상요소만을 선택할 수 있음 parentsUntil() 선택한 요소의 조상 요소 중에서 전달받은 선택자에서 해당하는 요소 바로 이전까지의 요소만을 모두 선택함. 선택자를 인수로 전달하지 않으면 parents() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택함. div 요소 ul 요소 li 요소 li 요소 p요소 span 요소 p 요소의 부모 요소 스크립트 parent() 적용 스크립..