'날카로운 jQuery'12, jQuery의 기교

title: [예리한 jQuery] 12, jQuery의 기교date: 2017-08-18 21:05:20 tags: 예리한 jQuery
페이지의 마우스 오른쪽 버튼 클릭 메뉴 비활성화

$(function(){
    $(document).on('contextmenu',function(){
        return false;
    })
})

머리 애니메이션으로 돌아가기

$.fn.scrollTo = function(speed,elem){
    var targetOffset = $(this).offset().top;
    elme.stop().animate({
        scrollTop: targetOffset,
    },speed);
    return this;
}

$('.goto').click(function(){
    $('body').scrollTo(500,$('html body'));
    return false;
})

아날로그 입력 상자의placeholder

$(function(){
    $('input.text1').val('      ');
    textFill($('input.text1'));

    function textFill(input){
        var originalvalue = input.val();
        input.focus(function(){
            if($.trim(input.val()) == originalvalue){
                input.val('');
            }
        }).blur(function(){
            if($.trim(input.val()) == ''){
                input.val(originalvalue);
            }
        })
    }
})

마우스 위치 가져오기

$(function(){
    $(document).mousemove(function(e){
        $('#xy').html('x: ' + e.pageX + '| y: ' + e.pageY);
    })
})

원소의 존재 여부를 판단하다

$(function(){
    if($('#id').length){
        // do something
    }
})

div를 눌러도 점프 가능

index

$('div').click(function(){
    window.location = $(this).find('a').prop('href');
    return false;
})

브라우저 크기에 따라 스타일 추가

$(function(){
    function checkWindowSize(){
        if($(window).width() > 1200){
            $('body').addClass('large');
        }else{
            $('body').removeClass('large');
        }
    }

    $(window).resize(checkWindowSize)
})

화면 중앙에 div 설정

$.fn.center = function(){
    this.css('position','absolute');
    this.css('top',($(window).height() - this.height()) / 2 + $(window).scrollTop() + 'px' );
    this.css('left',($(window).width() - this.width()) / 2 + $(window).scrollLeft() + 'px' );
}

모든 애니메이션 효과 닫기

$(function(){
    $.fx.off = true;

})

마우스 왼쪽 및 오른쪽 버튼 감지

$('#xy').mousedown(function(e){
    alert(e.which)   // 1      2      3     
})

글로벌 Ajax 매개변수 설정하기

$('#load').ajaxStart(function(){
    showLoading();    //    loading
    disableButtons();    //     
});

$('#load').ajaxComplete(function(){
    hideLoading();    //   loading
    enableButtons();   //     
})

선택한 드롭다운 상자 가져오기

$('#someElement').find('option:selected');
$('#someElement option:selected');

$.proxy() 사용

    Close

$('#panel').fadeIn(function(){
    $('#panel button').click(function(){
        $(this).fadeOut();
        console.log(this);
    })
})

상기 코드에서 this가 button를 가리키기 때문에 button 요소가 아니라 #panle 요소를 숨깁니다.

$('#panel').fadeIn(function(){
    $('#panel button').click($.proxy(function(){
        $(this).fadeOut();
        console.log(this);
    },this));
})

이렇게 이용하면$.proxy() 방법은this를#panel로 바꿀 수 있다.
입력 상자의 글자 수를 제한하다

$.fn.maxLength = function(max){
    this.each(function(){
        var type = this.tagName.toLowerCase();
        var inputType = this.type ? this.type.toLowerCase() : null;
        if(type == 'input' && inputType == 'text' || inputType == 'password'){
            //    maxLength
            this.maxLength = max;
        }else if(type == 'textarea'){
            this.onkeyup = function(e){
                console.log(this.value.length);
                if(this.value.length > max){
                    console.log(11);
                    this.value = this.value.substring(0,max);
                }
            }
        }
    })
}

요소 내부의 html 탭을 삭제하고 텍스트 내용만 남깁니다

$.fn.stripHTML = function(){
    var regexp = /])*>/gi;
    this.each(function(){
        $(this).html($(this).html().replace(regexp,''));
    })
    return $(this);
}