본문 바로가기

Programming/Javascript4

[CSS/JS] 텍스트 마우스 오버 시 저장된 이미지 보이기 텍스트에 마우스를 올렸을 때 이미지가 나타나는 효과를 만들어 보려고 합니다. css의 position(relative, absolute)을 이용하여 이미지를 띄워보겠습니다. 마우스 올리기 전 마우스 올린 후 HTML 이름 나이 홍길동 25 JavaScript //이름 마우스 오버 시 사진 preview $("#parentTable").on('mouseover', 'td.tdName', function (e) { var offset = $(this).offset();//element의 top, left 위치 var width = $(this).outerWidth();//element의 border까지 포함한 width //사진경로 var image_data = "/images/empl/hong.png" $.. 2024. 1. 18.
[JavaScript] isNaN() 함수 / 값이 NaN인지 확인하기 NaN은 "Not a Number"의 약자로 숫자가 아닌 값을 의미합니다. 변수의 값이 NaN인지 확인하고 싶을 때 isNaN() 함수를 사용하여 확인할 수 있습니다. 기본 형식 isNaN() 함수의 반환값은 boolean형입니다. 값이 NaN인 경우 true를 반환하고, NaN이 아닌 경우(숫자) false를 반환합니다. isNaN() 함수는 값을 검사하기 전에 숫자형식으로 변환한 후 검사합니다. 즉 '123'의 문자열 형식을 isNaN() 함수로 검사하면 false를 반환합니다. 예시 isNaN(123)//false isNaN(-1.23)//false isNaN(5-2)//false isNaN(0)//false isNaN('123')//false isNaN('abc')//true isNaN('2022.. 2022. 9. 27.
[jQuery] trigger() 함수 / 강제 이벤트 발생 trigger() jQuery의 trigger() 함수는 선택된 요소에 강제로 이벤트를 발생시키는 함수입니다. 기본 형식 selector 요소를 지정하는 선택자입니다. event 필수 매개변수입니다. 지정된 요소에 대해 트리거할 이벤트를 지정합니다. 표준 이벤트 또는 사용자 지정 이벤트입니다. param 선택 매개변수입니다. 이벤트 처리기에 전달할 추가 매개변수입니다. 주로 사용자 지정 이벤트에 사용합니다. 예시 $(function() { $("#btn_search").click(function(){ obj.search(); }); $("#btn_search").trigger("click"); }); search 버튼을 클릭하지 않아도 강제로 클릭 이벤트를 실행합니다. $(function(){ $("p".. 2022. 9. 8.
[jQuery] jQuery 시작 / 기본 문법 정리 jQuery 소개 jQuery는 자바스크립트 라이브러리로 Javascript 프로그래밍을 크게 단순화합니다. HTML/DOM 조작, CSS 조작, 이벤트, 효과 및 애니메이션, Ajax등의 기능이 포함되어 있습니다. jQuery 연결하기 jQuery를 연결하는 방법에는 두 가지가 있습니다. 1. 다운로드 받기 html의 2. CDN 이용 html의 jQuery 구문 jQuery의 기본 형식입니다. $(selector).action();// $(선택자).동작함수() $(document).ready() 안에 jQuery 함수를 입력합니다. → 문서가 완전히 로드되고 나서 jQuery를 실행합니다. $(document).ready(function(){ // jQuery methods go here... });.. 2022. 8. 26.