다른 곳에서는 배울 수 없는 jQuery 팁과 요령(수집 환영)

아래 에디터는 프로그래머에게 매우 도움이 되는 8가지 팁을 정리했습니다.

1) 마우스 오른쪽 버튼 클릭 비활성화

jQuery 프로그래머는 이 코드를 사용하여 웹 페이지에서 마우스 오른쪽 버튼 클릭을 비활성화할 수 있습니다.

$(document).ready(function() {
//catch the right-click context menu
$(document).bind("contextmenu",function(e) { 
//warning prompt - optional
alert("No right-clicking!");
//delete the default context menu
return false;
});
});

로그인 후 복사

2) jQuery를 사용하여 텍스트 크기 조정

이 코드를 사용하면 사용자는 웹사이트의 텍스트 크기를 조정(증가 및 감소)할 수 있습니다.

$(document).ready(function() {
//find the current font size
var originalFontSize = $('html').css('font-size');
//Increase the text size
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
return false;
});
//Decrease the Text Size
$(".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;
});
// Reset Font Size
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
});

로그인 후 복사

3) 새 Windows에서 링크 열기

　이 jquery 코드를 사용하면 사용자가 사이트의 링크를 클릭한 후 새 창으로 이동하므로 이 코드를 사용하여 사이트 노출수를 늘리세요. -

$(document).ready(function() {
//select all anchor tags that have http in the href
//and apply the target=_blank
$("a[href^='http']").attr('target','_blank');
});

로그인 후 복사

4) 스타일시트 교환

이 코드를 사용하여 스타일 시트를 교체하고 "스타일 시트 교체" 스크립트는 아래와 같습니다. -

$(document).ready(function() {
$("a.cssSwap").click(function() { 
//swap the link rel attribute with the value in the rel 
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
}); 
});

로그인 후 복사

5) 상단 링크로 가기

　요즘 이브 사이트에서 볼 수 있는 매우 일반적인 기능은 "맨 위로 가기"입니다. 이 기능은 한 번의 클릭으로 긴 페이지를 짧게 만드는 데 매우 유용합니다. -

$(document).ready(function() {
//when the id="top" link is clicked
$('#top').click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});

로그인 후 복사

6) 마우스 커서의 x축, y축 가져오기

마우스 포인터의 X 및 Y 좌표 값을 찾을 수 있습니다. 코드는 다음과 같습니다. -

$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

로그인 후 복사

7) 현재 마우스 좌표 감지

이 스크립트를 사용하면 jQuery가 지원하는 모든 웹 브라우저에서 현재 마우스 좌표를 찾을 수 있습니다. 코드는 다음과 같습니다.

$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});
});

로그인 후 복사

8) jQuery에서 이미지 미리 로드

이 이미지 사전 로드 스크립트는 이미지나 웹페이지를 매우 빠르게 로드하는 데 도움이 됩니다. 이미지가 로드될 때까지 기다릴 필요가 없습니다. 코드:

jQuery.preloadImagesInWebPage = function() 
{
for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("<img alt="">").attr("src", arguments[ctr]);
}
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
});

로그인 후 복사

jQuery 성능을 크게 향상하려면 다음을 수행하세요

1. 루프 외부에 추가

DOM과 관련된 모든 것에는 대가가 있습니다. DOM에 많은 요소를 추가하는 경우 여러 번 추가하는 대신 한 번에 모두 추가하는 것이 좋습니다. 루프에 요소를 추가할 때 일반적인 문제가 발생합니다.

$.each( myArray, function( i, item ) {
var newListItem = "<li>" + item + "</li>";
$( "#ballers" ).append( newListItem );
});

로그인 후 복사

일반적인 기술은 문서 조각을 사용하는 것입니다. 루프가 반복될 때마다 DOM 요소 대신 조각에 요소를 추가합니다. 루프가 끝나면 조각을 DOM 요소에 추가합니다.

var frag = document.createDocumentFragment();
$.each( myArray, function( i, item ) {
var newListItem = document.createElement( "li" );
var itemText = document.createTextNode( item );
newListItem.appendChild( itemText );
frag.appendChild( newListItem );
});
$( "#ballers" )[ ].appendChild( frag );

로그인 후 복사

또 다른 간단한 방법은 루프가 반복될 때마다 문자열을 지속적으로 작성하는 것입니다. 루프가 끝나면 DOM 요소의 HTML을 이 문자열로 설정합니다.

var myHtml = "";
$.each( myArray, function( i, item ) {
myHtml += "<li>" + item + "</li>";
});
$( "#ballers" ).html( myHtml );

로그인 후 복사

물론 시도해 볼 수 있는 다른 기술도 있습니다. jsperf라는 사이트는 이러한 속성을 테스트하기 위한 좋은 출구를 제공합니다. 이 사이트를 통해 각 기술을 벤치마킹하고 크로스 플랫폼 성능 결과를 시각화할 수 있습니다.

2. 루프 중 캐시 길이

for 루프에서는 미리 캐시해야 할 때마다 배열의 길이 속성에 액세스하지 마세요.

var myLength = myArray.length;
for ( var i = ; i < myLength; i++ ) {
// do stuff
}

로그인 후 복사

3. 요소를 분리하여 작업하세요

DOM 조작은 느리기 때문에 가능한 한 정렬을 적게 하는 것이 좋습니다. jQuery는 이 문제를 해결하는 데 도움이 되도록 버전 1.4에서 detach()라는 메서드를 도입했습니다. 이 메서드를 사용하면 DOM에서 요소를 작업할 때 요소를 분리할 수 있습니다.

var $table = $( "#myTable" );
var $parent = $table.parent();
$table.detach();
// ... add lots and lots of rows to table
$parent.append( $table );

로그인 후 복사

4. 부재한 요소에 대해 조치를 취하지 마세요

빈 선택기에서 많은 코드를 실행하려는 경우 jQuery는 힌트를 제공하지 않습니다. 오류가 발생하지 않은 것처럼 계속 실행됩니다. 선택기에 포함된 요소 수를 확인하는 것은 사용자의 몫입니다.

// Bad: This runs three functions before it
// realizes there's nothing in the selection
$( "#nosuchthing" ).slideUp();
// Better:
var $mySelection = $( "#nosuchthing" );
if ( $mySelection.length ) {
$mySelection.slideUp();
}
// Best: Add a doOnce plugin.
jQuery.fn.doOnce = function( func ) {
this.length && func.apply( this );
return this;
}
$( "li.cartitems" ).doOnce(function() {&#8232;
// make it ajax! \o/&#8232;
});

로그인 후 복사

이 가이드는 선택기에 요소가 포함되어 있지 않을 때 많은 오버헤드가 필요한 jQuery UI 위젯에 특히 유용합니다.

5. 최적화 선택기

많은 브라우저가 document.querySelectorAll() 메서드를 구현하고 jQuery가 선택기의 부담을 브라우저로 이전하기 때문에 선택기 최적화는 과거만큼 중요하지 않습니다. 하지만 여전히 명심해야 할 몇 가지 팁이 있습니다.

ID 기반 선택기

항상 ID로 선택기를 시작하는 것이 가장 좋습니다.

// Fast:
$( "#container div.robotarm" );
// Super-fast:
$( "#container" ).find( "div.robotarm" );

로그인 후 복사

采用 .find() 方法的方式将更加的快速，因为第一个选择器已经过处理，而无需通过嘈杂的选择器引擎 -- ID-Only的选择器已使用 document.getElementById() 方法进行处理，之所以快速，是因为它是浏览器的原生方法。

特异性

尽量详细的描述选择器的右侧，对于左侧则应反其道而行之。

// Unoptimized:
$( "div.data .gonzalez" );
// Optimized:
$( ".data td.gonzalez" );

로그인 후 복사

尽量在选择器的最右侧使用 tag.class 的形式来描述选择器，而在左侧则尽量只使用 tag 或者 .class 。

避免过度使用特异性

$( ".data table.attendees td.gonzalez" );
// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

로그인 후 복사

去讨好“DOM”总是有利于提升选择器的性能，因为选择器引擎在搜寻元素时无需进行太多的遍历。

避免使用通用选择器

如果一个选择器明确或暗示它能在不确定的范围内进行匹配将会大大影响性能。

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.
$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.

로그인 후 복사

6. Use Stylesheets for Changing CSS on Many Elements

假如你使用 .css() 方法来改变超过20个元素的CSS，应当考虑为页面添加一个样式标签作为替代，这样做可以提升将近60%的速度。

// Fine for up to elements, slow after that:
$( "a.swedberg" ).css( "color", "#ad" );
// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #ad }</style>")
.appendTo( "head" );

로그인 후 복사

7. Don't Treat jQuery as a Black Box

把jQuery的源码当成文档，可以把它（http://bit.ly/jqsource）保存在你的收藏夹内，经常的查阅参考。