JQuery 팁과 요령(8)_jquery

1. 새 창에서 링크 열기
XHTML 1.0 Strict 버전은 target="_blank" 속성을 지원하지 않지만 JQuery를 사용하면 이 문제를 잘 해결할 수 있고 새 창에서 웹 페이지를 열 수 있습니다. window:

코드 복사 코드는 다음과 같습니다.

$('a[@rel $='external']').click (function(){
this.target = "_blank";
})

/*
사용법:
< a href="http://www.mangguo.org/" rel="external">mangguo.org
*/

2. 일치하는 요소의 총 개수
아래 코드는 일치하는 요소의 개수를 반환합니다:

$('element').size()

3. 이미지 미리 로드
Javascript를 사용하여 이미지를 처리하는 경우 로드할 때 이미지를 사용하여 미리 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

jQuery .preloadImages = function()
{
for(var i = 0; i").attr("src", 인수[i ]);
}
};

// 사용법
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3. jpg");

4 . 브라우저 감지
브라우저별로 서로 다른 CSS를 로드하면 브라우저 차이로 인한 스타일 시트 렌더링 차이를 방지할 수 있습니다. 이는 다음을 사용하여 쉽게 달성할 수 있습니다. JQuery:

코드 복사 코드는 다음과 같습니다.

//A. 🎜>if( $.browser.safari ) $("#menu li a") .css("padding", "1em 1.2em" )

//B. IE6 이상을 대상으로 합니다
if ($.browser.msie && $.browser.version > 6 ) $( "#menu li a").css("padding", "1em 1.8em" )

//C. IE6 이하를 대상으로 합니다
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" )

//D. 대상 Firefox 2 이상
if ($ .browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding ", "1em 1.8em" );

5. 문자열 교체 JQuery를 사용하여 텍스트 콘텐츠의 특정 문자열 바꾸기:

코드 복사 코드는 다음과 같습니다.

var el = $('#id')
el.html( el.html().replace(/word/ig, "") ; >

코드 복사

코드는 다음과 같습니다.

function equalHeight(group) {

tallest = 0; group.each( function() { thisHeight = $(this).height(); if(thisHeight > maximum) { tallest = thisHeight; } });

group .height(tallest)

}

/*
사용법:
$(document) .ready(function() {
equalHeight($(".recent-article" ));
equalHeight($(".footer-col"));
}); >*/




7. 글꼴 크기 재설정

글꼴 크기 재설정은 매우 일반적으로 사용되는 기능입니다:



코드 복사

코드는 다음과 같습니다.

$(document).ready(function(){ // 글꼴 크기 재설정
var originalFontSize = $('html').css('font-size');

$(".resetFont").click(function(){ $('html').css( 'font-size', originalFontSize) }); // 글꼴 크기 늘리기 $(".increaseFont").click(function(){ var currentFontSize = $('html ').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize , 10);

var newFontSize = currentFontSizeNum*1.2; size', newFontSize);

return false;
});
// 글꼴 크기 줄이기
$(".decreaseFont").click(function(){
var currentFontSize = $ ('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8; 'font-size', newFontSize);
return false;
})
})

8. 컨텍스트 메뉴 비활성화

컨텍스트 메뉴를 비활성화하는 JavaScript 스니펫이 많지만 JQuery를 사용하면 더 쉽습니다.




코드 복사


코드는 다음과 같습니다.

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});