==========================================================================================================
자료출처 : http://blog.naver.com/rainyray/30068037948
자료 스크랩에 대해 문제가 된다면 삭제 토록 하겠습니다.
연락처 : baboty7@paran.com
==========================================================================================================
1. 해당 엘리먼트 접근하기
$("#id");
- 엘리먼트의 id접근시 # , class 접근시 .
2. 해당 엘리먼크의 값 접근하기
$("#id").val();
- 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");
3. 해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드
$("#id").is(':checked');
- 체크박스 및 라디오버튼에 체크 상태인지를 boolean형으로 반환
- $("id").is(".orange, .blue, lightblue"); id의 class속성중 orange, blue, lightblue가 하나라도 있으면 true
4. 해당 엘리먼트의 css속성 부여하기
$("#id").css("border", "4px solid yellow");
- 첫번째인자는 속성이름 , 두번째인자는 속성값을 넣으면 된다.
5. 해당 엘리먼트의 display속성 부여하기
$("#id").hide(); , $("#id").show();
- hide숨김, show보임 , hide, show안에 인자를 slow, normal, fast중 하나로 보임숨김의 속도를 조절 할 수 있다.
- 아니면 수치로 1000분의 1초로 할 수 있음 show(950)
6. 체크박스의 전체선택 / 해제
$(document).ready(function() {
$('#allCheck').click(function(){
if($('#allCheck').is(':checked')){
$('.delCheck').each(function() {
$(this).attr('checked','checked');
});
} else {
$('.delCheck').each(fucntion(){
$(this).attr('checked','');
});
}
});
});
7. 엘리먼트의 존재여부를 체크하기
if($("#id").length>0)
- 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 jQuery는 객체의 길이를 체크해서 존재여부를 체크한다.
8. 달력의 이용
$(".set_data").datepicker();
input type~~~ class="set_data"
9. Ajax로 전송하기
var options = {
dataType : 'json'
, beforeSubmit: showRequest // pre-submit callback
, success:processJosn // post-submit callback
};
$("#frm_channel").ajaxForm(options);
- datatype은 전송완료 후 받을 데이터 타입으로 json을 사용한다.
beforeSubmit에서 전송전에 실행할 함수를 적고 success에 전송완료 후 실행할 함수를 적는다.
showRequest에서 데이터 유효성 체크해 주고 blockUI적용하고 processJson에서 결과를 json
으로 받아 처리해주고 unblock시키고 제대로 저장이 되었다면 다음 작업이 가능하게 해준다.
jQuery Form Plugin http://malsup.com/jquery/form/#getting-started
jQuery BlockUI Plugin http://malsup.com/jquery/block/#overview
10. 다음은 셀렉트 박스 선택시 동적으로 데이타 가져오기
재대행사를 선택하면 재대행사 리스트를 불러와서 업체명에 셀렉트박스를 표시해준다.
셀렉트 박스는 숨겨놓았다가 리스트 가져와서 옵션값을 추가해준다.
$("#AGENT_TYPE").change(function() {
$("#select_agent").show(300);
$.post("Action.aspx", { mode: "select_agent" }, function(data) {
for (i = 0; i < data.item.length; i++) {
$("#select_agent").get(0).options[i + 1] = new Option(data.item[i].text, data.item[i].value);
}
}, "json");
});
ajax로 post 통신을 하고 결과값을 json 형태로 받는다.
리스트 갯수만큼 루프를 돌며 선택옵션을 추가해 준다.
11. 업체명을 선택하면 역시 업체정보를 동적으로 가져와서 기본 정보를 입력해준다.
$("#select_agent").change(function() { // 선택값 가져오기
var key = "", text = "";
$("select[name='select_agent'] option:selected").each(function() {
key = $(this).val();
text = $(this).text();
});
// 업체명 입력하고 수정 못하게 설정
$("#AGENT_NAME").val(text).attr("readonly", true);
// 키값으로 업체정보 가져오기
$.post("Action.aspx", { mode: "get_agent_info", idx_agent: key }, function(data) {
// 설정값 셋팅
$("#OVERTURE_HS").val(data.OVERTURE_HS);
$("#NAVER_CPC_HS").val(data.NAVER_CPC_HS);
$("#NAVER_CPM_HS").val(data.NAVER_CPM_HS);
$("#GOOGLE_HS").val(data.GOOGLE_HS);
$("#DAUM_HS").val(data.DAUM_HS);
}, "json");
});