(정리중) JQuery Command

자바스크립트에서 해당 ID를 찾을 쓰는 구문을 제이쿼리로 한다면
document.getElementById("test") -> $("#test")

자바스크립트로 스타일을 변경하고 싶을때
document.getElementById("test").style.display = 'none' -> $("#test").css("display","none")

자바스크립트로 select box 안에 선택된 값을 찾을때
document.getElementById("test").options[document.getElementById("test").selectedIndex].value
-> $("#test option:selected").val()

자바스크립트로 checkbox 중 선택된거 알아올때
var ck = document.getElementByName("test");
var str = "";
for(var i = 0;i<ck.length;i++){
    if(ck[i].checked)
        str += ck[i].value + "|";
}
->
var str = "";
$("#test:checked").each(
    str += $(this).val() + "|";
);

//체크박스(이름을 이용)의 값을 ,를 이용해 붙이는식
var result = "";
$("input:checked[name=chkkbn]").each(function(i){
       result += $(this).val()+",";                        
});
("input:[name=goodkbn]").val(result);

//Page Load Event
jQuery(document).ready(function () {
    var code = $("input[name=goodkbn]").val().split(","); //name이 goodkbn인것의 값을 ,로 분리
    for (var i=0 ; i<= code.length ;  i++)
    {
        $("#chk"+code[i]).attr('checked','checked');  //checked 속성에 checked 를 할당 ""를 할당하면 체크가 삭제됨
    }
});

//클래스추가
$("#menu_modify").addClass("active");

//input check박스등의 value 를 알아보는방법
GET : $("#menu_modify").val()   // SET : $("#menu_modify").val("기록문자")

##체크여부확인
$("#ITEM").is(':checked')


//Enter 키 눌림시에 다음 입력칸으로 이동
        $('#userID').keydown(function() {
            var keycode = event.keyCode;
            if (keycode == 13) $('#passwd').focus();
        });

     //따라다니는 레이어 구성

  var options = { 'speed' : 800, 'initTop': 123, 'alwaysTop' : false, 'default_x' : '#quick_set'}
  $('#quick').Floater(options);



//레이어팝업
 jQuery(document).ready(function (){

         //마스크감싸고 팝업창 출력
        $("#btn_import").click(function(e) {
            wrapMask();
            $("#layerpopup .window").show("slow");

            var win = $(window);
            var x = win.width();
            var y = win.height();

            var element = $("#layerpopup .window");
            element.css('left', x/2 - element.width()/2 - 500);
            element.css('top', y/2 - element.height()/2 - 150);

        });

        //마스크 및 팝업창 닫기
        $("#layerpopup .close").click(function(e) {
            e.preventDefault();
            //$("#layerpopup .uplink").show("slow");
            $("#layerpopup .mask").hide("slow");
            $("#layerpopup .window").hide("slow");
        });
    });

    function wrapMask() {
        //화면의 너비 높이
        var width = $(document).width();
        var height = $(document).height();
       
        //링크없애기
        //$("#layerpopup .uplink").hide("slow");

        //마스크 화면의 높이 너비로 생성
        $("#layerpopup .mask").css({'width':width,'height':height});
        $("#layerpopup .mask").fadeTo("fast",0.2);
    }


하단에 레이어표시

<!--엑셀파일업로드 레이어-->
<div id="layerpopup" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px;">
    <div class="mask"></div>
    <div class="window">
        <!--엑셀업로드 표시 레이어-->
        <? include "frm_csvimport.php"; ?>
    </div>
</div>

아래와 같은 코드의 추가로 페이지 맨위로 가는 스크롤 탑 효과를 낼 수 있다.

$( 'html, body' ).animate( { scrollTop: 0 }, 0 );

부드러운 스크롤링 효과를 내고 싶을땐 slow를 추가해준다.

$( 'html, body' ).animate( { scrollTop: 0 }, 'slow' );

스크롤바가 상단에서 일정부분 떨어진 부분에서 멈추게 하고 싶을때

$( 'html, body' ).animate( { scrollTop: 원하는 px수치 }, 'slow' );

jquery에 적용할 전체 소스

$(document).ready(function() {

$('.backtotop').click(function(){

$('html, body').animate({scrollTop:0}, 'slow');

;});