[Jquery] 참고 기능

====================================================================================
- 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"){
///////////////////////////////////////////////////////////////////////////////////////////