본문 바로가기

IT TIP/jQuery

기초문법..


jQuery에서 변수를 선언할 때 $를 붙이는 것과 안 붙이는 것의 차이점은 아래와 같음.

 

 변수 var a 와 var $a 의 차이점.

 

1. var a;
자바스크립트 변수. 흔히 아는 방식으로 스크립트만 사용 가능하다.

 

2. var $a;

jQuery 변수. jQuery에서 사용하는 내장 함수들을 모두 사용할 수 있음.

 

ex) var a 는 a.css('backgroundcolor', 'blue') 라는 메소드가 안 먹음.
.css 메소드는 jQeury에서만 사용하는 것이므로.
var $a 는 jQuery 변수이므로 모든 스크립트 사용이 가능함.
.css(), .hide(), .show() 등등


//$('#page').attr("style","display : none");
//$('#page').attr("style","display : show");
//$("#page").hide(); $("#page").show();

disable, enable

 

<script>
$("button:gt(1)").attr("disabled","disabled");
</script>


# -> ID
. -> class


# [jQuery] radio 값 가져오기, 설정하기

1. radio 버튼 에서 체크된 값 가져오기.
var mailTp  = $('radio:[name="mailTp"]:checked').val();


2. radio 버튼 값 체크하기
$('input:radio[name=mailTp]:input[value='+mailTp+']').attr("checked", true);


------------------------------------------------------------------
check
$("input[name=cUse]")[0].checked
$("input[name=cUse]").attr("checked", (chk== '1' ? 'checked' : ''));

책크여부확인
alert($('#id').is(':checked'));

책크 갯수 구하기
$("input[name=chk]:checkbox:checked").length

응용: 특정 갯수 이상일때 체크 해제
        $(".check_premier").click(function(){
            if($("input[name=chk_pr]:checkbox:checked").length > 3){
                    alert('최대 3개까지 선택가능합니다.');
                    $(this).attr("checked", '');
            }
        });


    $(".answer2").click(function(){
        if($(".answer2:checkbox:checked").length > 2){
            alert('최대 2개까지 선택가능합니다.');
            $(this).attr("checked", '');
        }
    });

책크박스수만큼 특정 함수 실행
$("input[name=chk]").each(
   function(){
      //실행
   }
}

//상기 응용으로 특정 책크박스가 책크일경우 실행
$("input[name=chk]").each(
   function(){
      if(this.checked){
        //책크되었음
      }else{
        //실행
      }
   }
}

//실응용예제
//jAlert 및 jConfirm 사용
//책크된 것이 있으면 실행하고 아니면 경고 메시지 띄우기
 $("#delfavor").click(function(){
        if($("input[name=chk_delList]:checkbox:checked").length == 0){
            jAlert('하나 이상 선택해 주세요', '경고메시지');
        }else{
            jConfirm('삭제된 데이타는 복구되지 않습니다.n삭제하시겠습니까?', '삭제확인', function(r) {
                if(r==true) {
                    $.post("/myshop/wishlist/wishlist/", {tid:tid,ajax:"true"}, function(data){
                    },"json");//
                }
            });
        }
    });   

체크 해제
$(this).attr("checked", false);

// 전체선택/해제


$("#check_all").click(function(){
            $('input[class="sel_check"]').attr("checked", ( $(this).is(':checked') ? 'checked' : false));                                                    
        });

//아래것보다 상위것을 추천


    //보낸 메일함 전체 선택
    //$("#select_all_sendlist").live('click', function(){    //이후 불러온 폼사용시
        $("#select_all_sendlist").click(function(){
            $('input[id="chk_sendList"]').attr("checked", ( $(this).is(':checked') ? 'checked' : ''));                                                    
    });   


<input type="checkbox" name="" id="select_all_sendlist" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />
<input type="checkbox" name="chk_sendList[{uniqueflag}]" id="chk_sendList" class="checkbox" />

 

//check box만 serialize하기
var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();
var idxs = $("input[name='comment_select[]']:checked").map(function(){return this.value}).get();

 

'IT TIP > jQuery' 카테고리의 다른 글

ul.li.selectable 소스  (0) 2017.04.11
selector 간략 정리  (0) 2017.04.04