ajax 요청 시 마우스 커서가 로딩표시로 바뀌도록 설정 //AJAX 통신 시작 $( document ).ajaxStart(function() { //마우스 커서를 로딩 중 커서로 변경 $('html').css("cursor", "wait"); }); //AJAX 통신 종료 $( document ).ajaxStop(function() { //마우스 커서를 원래대로 돌린다 $('html').css("cursor", "auto"); });
💻 MDN Web DOC https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match String.prototype.match() - JavaScript | MDN The match() method retrieves the result of matching a string against a regular expression. developer.mozilla.org 💻 특정 문자 포함여부 체크 var telValue = $('#tel').val(); if ( telValue.match("-")) { alert('-을 제거해주세요.'); return false; }
| 체크박스에 체크된 obj들 조회하여 value 가져오기 // 체크된 obj들 조회하여 value 가져오기 $("input[name=partChk]:checked").each(function() { console.log($(this).val()); }) | 체크박스 전체 선택/해제 $("input[name=partChk]").prop("checked", false); //전체 해제 $("input[name=partChk]").prop("checked", true); // 전체 선택 | 체크박스 중복값 있는지 체크 var duplicatedList = new Array(); //이미 추가된 모든 checkbox 조회하여 순회 $(opener.document).find("input[name=partChk]..
목표 : 이미지를 팝업창으로 열어서 확대/축소 등 기능 적용 소스 결과 참고 URL https://github.com/nzbin/magnify GitHub - nzbin/magnify: 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+! 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+! - GitHub - nzbin/magnify: 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+! github.com 참고 URL
목표 : TABLE의 특정 컬럼 클릭 시 해당객체 > 상위객체 > 하위의 7번째 TD컬럼 값 가져오기 $(".partNumber2, .partNumber3").click(function() { console.log(' -- partNumber2 -- '); var selectedObj = $(this); // 해당객체 console.log(selectedObj); var parentObj = selectedObj.parent(); //상위객체 console.log(parentObj); var p = parentObj.find("td:eq(7)").text(); // 하위객체의 td의 7번째 요소 값 가져오기 console.log('p === ' , p); var subObj = document.getEl..
// $("#테이블명").on("click", "tr", function(){ $("#tempList tbody").on("click", "tr", function(){ alert( $(this).find("td:eq(0)").text() ); alert( $(this).find("td:eq(1)").text() ); }); td:eq(0) -> 선택(클릭)한 row의 첫번째 데이터 -> 컬럼0 td:eq(1) -> 선택(클릭)한 row의 두번째 데이터 -> 컬럼1
jQuery를 활용해 특정값의 option값이 selected 되도록 하는 방법 $("#select_id").on("change", function(){ // 값이 1인 option 선택 $(this).val("1").prop("selected", true); // OR option 순서값으로 선택 // 첫번째 option 선택 $(this).find("option:eq(0)").prop("selected", true); }); // value 값으로 선택 $("#select_id").val("1").prop("selected", true); // OR option 순서값으로 선택 $("#select_id option:eq(0)").prop("selected", true);
$.ajax() 사용 방법 비동기 요청 시 사용하는 방법이다. index.jsp Controller package org.kyhslam.controller; import java.text.DateFormat; import java.util.Date; import java.util.Locale; import javax.servlet.http.HttpServletRequest; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotat..
$.getJSON 사용법 index.jsp JSON파일( person.json ) [ { "id": "1", "name": "Tiger Nixon" }, { "id": "2", "name": "joy" }, { "id": "3", "name": "young" } ] http://localhost:8080/ 결과화면
ready() : 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document)의 로딩이 끝나면 이벤트를 발생시킨다. load() : 외부에 연동된 (iframe, img, video)의 로딩이 끝나면 이벤트를 발생시킨다. hello script 메일주소 전화번호 실행을 해보면 A - > C -> onload -> DOM로딩 -> jquery -> BB 순서로 출력이 된다. 즉, $(document).ready 는 태그 등 로딩이 완료되었을 시점에 이벤트를 발생 시킨다.