==================================================================================== - function 명 insXXX - 등록(예)insBoard() updXXX - 수정(예)updBoard() delXXX - 삭제(예)delBoard() getXXX - 모든 화면 이동(예)getBoardList(), getBoardView() saveXXX - 확인(예)saveBoard() chkXXX - 체크 chkBoard() resetXXX - resetBoard() 이외 다른 용도는 각자 정의해서 사용함 ==================================================================================== // 초기 로딩시(onLoad) $(document).ready(function() { // 초기화 로직 수행 }); //selector 제어 id 접근: $("#아이디") class 접근: $(".class") object 접근 : $("input") name 접근 : $("태그명[name=네임명]") -> ex)$("div[name=test_name]")val(); tip) 이런식으로 사용이 가능 $('div>a[id=test]').attr('src')$('div>a[id=test]').attr('src'); div 태그 안에 a 링크에 id가 테스트인 src 값 // form 객체 제어 # 예시 : <form method="post" name="devForm" id="devForm" ></form> $("#devForm").attr("action", "/admin/test/testList.do"); $("#devForm").attr("target", "_self"); $("#devForm").attr("encoding", "multipart/form-data"); $("#devForm").attr("encoding", "application/x-www-form-urlencoded"); //default $("#devForm").submit(); // input 객체 제어 (이 패턴은 value 속성을 가진 모든 객체에 유효하다) # 예시 : <input type="text" name="title" id="title"/> - 값 가져오기 : $("#title").val(); - 값 셋팅하기 : $("#title").attr("value", "제목입니다."); - 포커스 주기 : $("#title").focus() // select 객체 제어 # 예시 : <select id="selEng" name="selEng"> <option value="">선택</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> - 선택된 값 가져오기 : $("#selEng option:selected").val(); - 지정된 값으로 선택하기 : $("#selEng > option[value='A']").attr("selected", true); // checkbox 객체 제어(1) : 단일 # 예시 : <input type="checkbox" id="chkEng" name="chkEng" value="필드값"/> - 체크 여부 판별하기 : $("#chkEng").is(':checked'); // true: 체크됨, false: 체크안됨 - 체크 하기 : $("#chkEng").attr("checked", true); // true: 체크함, false: 체크하지않음 - 체크된 객체의 값 가져오기 : $("#chkEng option:checked").val(); $("#chkEng").val(); $("input:checkbox[name=dongchkbox]:checked").val() // checkbox 객체 제어(2) : 다중 # 예시 : <input type="checkbox" id="listCheck" name="chkEng"/> <input type="checkbox" id="listCheck" name="chkEng"/> <input type="checkbox" id="listCheck" name="chkEng"/> <input type="checkbox" id="listCheck" name="chkEng"/> - 체크 된 갯수 가져오기 : $("input:checkbox[id=listCheck]:checked").length; // id 값으로 판별 cf) name 으로 판별하려면: $("input:checkbox[name=listCheck]:checked").length 으로 선언하면 된다. // 객체 비활성화 시키기(모든 객체에 유효하다) # 예시 : <input type="text" name="title" id="title"/> $("#title").attr("disabled", true); // true : 비활성화, false: 활성화 // ReadOnly 적용 # 예시 : <input type="text" name="title" id="title"/> $("#title").attr("readonly", true); // true : 읽기전용, false: 편집모드 //reset $("#devForm")[0].reset(); // [0]가 있어야 함 // innerHTML 적용 $("#div1").html(ihtml); // html 적용 $("#div1").text(itext); // text 적용 // style display block, none $("#div1").show(); // block $("#div1").hide(); // none // 엘리먼트의 존재여부를 체크하기 if($("#id").length > 0) // 있다. if($("#id").length == 0) // 없다. // 이미지 처리 $("#img1").attr("src") // 해당이미지 명 $("#img1").attr("src", "/images/test/btn_close_s.gif") // 해당이미지 변경 // onClick=>click, onChange=>change, onMouseOver=>mouseover, onMouseOut=>mouseout, onKeyDown=>keydown.... // onClick 이벤트 적용(주의 $(document).ready(function() 안에서만 인식된다) 예시 : <input type="checkbox" id="chkEng" name="chkEng" value="필드값"/> $(document).ready(function() { $("#chkEng").click(function(){ // onClick 이벤트시 로직실행 }); }); // onChange 이벤트 적용(주의 $(document).ready(function() 안에서만 인식된다) 예시 : <select id="selEng" name="selEng"> <option value="">선택</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> $(document).ready(function() { $("#selEng").change(function() { // onChange 이벤트시 로직실행 }); }); // onMouseOver 이벤트 적용(주의 $(document).ready(function() 안에서만 인식된다) # 예시 : <input type="text" name="title" id="title"/> $(document).ready(function() { $("#title").mouseover(function() { // onMouseOver 이벤트시 로직실행 }); }); // Style 속성사용하기 (style 로 선언되면, style 에서 사용되는 모든 속성이 사용가능하다) 예시 : <span id="spanId" style="display:none"></span> $("#spanId").attr("style", "display:block"); // style class 변경 $("#zonec").addClass("zone2"); $("#zonec").removeClass("zone2"); $("#zonec").addClass("zone1"); // style css 적용 $("#zonec").css({ "background-color":"#FFff00", width:"100px" }); /////////////////////////////////////////////////////////////////////////////////////////// // ajax-json 예제 - json 형태의 데이타를 가져와서 파싱해서 사용함 {"result":{"seq":0,"userid":""},"testList":[{"seq":3,"userid":"asdf","username":"fasdf"},{"seq":62,"userid":"asd","username":"fasd"},{"seq":63,"userid":"33","username":"333"},{"seq":82,"userid":"444","username":"44"},{"seq":83,"userid":"asd","username":"asdf"}]} $("#devForm").attr("action", "/kr/admin/customer/foreigner/foreignerList.do"); $("#devForm").attr("target", "_self"); $("#devForm").ajaxSubmit({success: function(json) { var jsonlen = json['testList'].length; if(jsonlen > 0){ for(i=0; i<jsonlen; i++){ alert(json['testList'][i].seq); } } }}); } // ajax-html 예제 - html 형태로 데이타를 가져와서 뿌려준다. $("#devForm").attr("action", "/kr/admin/customer/foreigner/foreignerList.do"); $("#devForm").attr("target", "_self"); $("#devForm").ajaxSubmitHtml({success: function(html) { $("#div1").html(html); }}); // 팝업 사용 <a href="#" onclick="POPUP.open('<s:url action="updateForm" namespace="/board" />?grpId=${grpId}&page=${currentPage}', 'updateForm', {width: 342, height: 210}); return false;" class="bt_18_a">수정</a> validation 체크 if(!Common.isValue($("#id").val()) && !Common.isValue($("#name").val()) && !Common.isValue($("#e_mail").val())){ alert('조건을 입력해 주세요.'); $("#id").focus(); return; } if($("input:radio[name=virusActionVo.detect_yn]:checked").length == 0){ if($("input:radio[name=webCommSurveiesVo.survey_dist]:checked").val() == "2"){ ///////////////////////////////////////////////////////////////////////////////////////////