이 글은 주로 클래식하고 실용적인 jQuery 코드 개발 기술을 요약합니다. 는 모두의 빠른 발전에 도움이 될 수 있습니다. 관심 있는 친구들은 을 참고하세요. 자세한 내용은 다음과 같습니다.
1. 우클릭 금지
$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
2. 검색 텍스트 상자 텍스트 숨기기검색 필드를 클릭하면 값이 숨겨집니다. (예는 아래 댓글 필드에서 확인할 수 있습니다.)
$(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($('input.text1')); }); function textFill(input){ //input focus text function var originalvalue = input.val(); input.focus( function(){ if( $.trim(input.val()) == originalvalue ){ input.val(''); } }); input.blur( function(){ if( $.trim(input.val()) == '' ){ input.val(originalvalue); } }); }
3. 새 창에서 링크 열기
XHTML 1.0 Strict에서는 이 속성을 허용하지 않습니다. 코드를 유효하게 유지하려면 이를 사용하세요.$(document).ready(function() { //Example 1: Every link will open in a new window $('a[href^="http://"]').attr("target", "_blank"); //Example 2: Links with the rel="external" attribute will only open in a new window $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); }); // how to useopen link
4. 브라우저 감지
참고: jQuery 버전에서 1.4, $.support $.browser 변수 대체
$(document).ready(function() { // Target Firefox 2 and above if ($.browser.mozilla && $.browser.version >= "1.8" ){ // do something } // Target Safari if( $.browser.safari ){ // do something } // Target Chrome if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something } // Target Opera if( $.browser.opera){ // do something } // Target IE6 and below if ($.browser.msie && $.browser.version 6){ // do something } });
5. 이미지 미리 로드이 코드는 모든 이미지 로딩을 방지해 이미지가 많은 사이트에 유용할 수 있습니다.
$(document).ready(function() { jQuery.preloadImages = function() { for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?").attr("src", arguments[i]); } } // how to use $.preloadImages("image1.jpg"); });
6. 페이지 스타일 전환
$(document).ready(function() { $("a.Styleswitcher").click(function() { //swicth the LINK REL attribute with the value in A REL attribute $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); // how to use // place this in your header// the linksDefault ThemeRed ThemeBlue Theme});
7. 열 높이가 동일합니다. 두 개의 CSS 열을 사용하는 경우 이 방법을 사용합니다. 기둥의 높이가 동일합니다.
$(document).ready(function() { function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } }); group.height(tallest); } // how to use $(document).ready(function() { equalHeight($(".left")); equalHeight($(".right")); }); });
8. 페이지 글꼴 크기를 동적으로 제어사용자가 페이지 글꼴 크기를 변경할 수 있습니다
$(document).ready(function() { // Reset the font size(back to default) var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Increase the font size(bigger font0 $(".increaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $('html').css('font-size', newFontSize); return false; }); // Decrease the font size(smaller font) $(".decreaseFont").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*0.8; $('html').css('font-size', newFontSize); return false; }); });
9. 페이지 상단 복귀 기능정상(또는 임의의 위치)으로 원활하게(애니메이션) 돌아갈 수 있습니다.
$(document).ready(function() { $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top; $('html,body') .animate({scrollTop: targetOffset}, 900); return false; } } }); // how to use // place this where you want to scroll to// the linkgo to top});
10. 마우스 커서 값 가져오기
마우스 커서가 어디에 있는지 알고 싶으세요?
$(document).ready(function() { $().mousemove(function(e){ //display the x and y axis values inside the div with the id XY $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); }); // how to use});
11. 위로 가기 버튼
다른 버튼을 사용하지 않고도 animate 및 scrollTop을 사용하여 맨 위로 돌아가는 애니메이션을 구현할 수 있습니다. 플러그인.
// Back to top $('a.top').click(function () { $(document.body).animate({scrollTop: 0}, 800); return false; }); Back to top
jQuery 동영상 튜토리얼을 방문하세요!