8가지 실용적인 jQuery 팁_jquery

1) 마우스 오른쪽 버튼 클릭 기능 비활성화
사용자의 웹사이트 정보를 보호하려면 개발자가 이 코드를 사용할 수 있습니다. 마우스 오른쪽 버튼 클릭 기능을 비활성화합니다.

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

$(document).ready(function( ) {
//오른쪽 클릭 컨텍스트 메뉴 잡기
$(document).bind("contextmenu",function(e) {
//경고 프롬프트 - 선택 사항
Alert("권한 없음 -클릭!");

//기본 컨텍스트 메뉴 삭제
return false;
});
});

2) jQuery를 사용하여 텍스트 크기 설정
이 코드를 사용하면 사용자는 필요에 따라 텍스트 크기를 조정(증가 또는 감소)할 수 있습니다.

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

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

//텍스트 크기 늘리기
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNumber = parsFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
return false;
});

//텍스트 크기 줄이기
$(".decreaseFont").click(function() {
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parsFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});

// 글꼴 크기 재설정
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
} );
});

3) 새 창에서 링크 열기
이 코드를 사용하면 사용자가 새 창에서 링크를 열고 더 나은 서비스를 제공할 수 있습니다. 사용자 경험.

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

$(document).ready(function( ) {
//href에 http가 있는 모든 앵커 태그를 선택합니다
//target=_blank
를 적용합니다. $("a[href^='http']").attr('target ',' _blank');
});

4) 스타일 목록 변경
이 코드를 사용하면 스타일 목록을 변경할 수 있습니다.

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

$(document).ready(function() {
$ ("a.cssSwap").click(function() {
//링크 rel 속성을 rel의 값으로 바꿉니다
$('link[rel=stylesheet]').attr( 'href' , $(this).attr('rel'));
});
});

5) 상위 링크로 돌아가기
이 코드는 한 페이지를 오랫동안 클릭하는 것이 매우 유용하며, 중요한 순간에 "맨 위로 돌아가기" 기능을 클릭할 수 있습니다.

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

$(document).ready(function( ) {
//id="top" 링크를 클릭한 경우
$('#top').click(function() {
//페이지를 다시 맨 위로 스크롤
$ (문서) .scrollTo(0,500);
}
});

6) 마우스 포인터의 X/Y축 가져오기

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

$().mousemove(function(e){
//display the x 및 P 요소 내부의 y축 값
$('p').html("X Axis : " e.pageX " | Y Axis " e.pageY);
});

7) 현재 마우스 좌표 감지
이 스크립트를 사용하면 모든 웹 브라우저에서 마우스 좌표를 얻을 수 있습니다.

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

$(document).ready(function() {
$ ().mousemove(function(e)
{
$('# MouseCoordinates ').html("X 축 위치 = " e.pageX " 및 Y 축 위치 = " e.pageY);
});

8) 이미지 미리 로드
이 코드는 사용자가 이미지나 웹페이지를 빠르게 로드하는 데 도움이 됩니다.

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

jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr {
jQuery("").attr("src", 인수[ctr]);
}
}
위 방법을 사용하려면 다음 코드를 사용할 수 있습니다.
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
이미지가 로드되었는지 확인하려면 다음 코드를 사용할 수 있습니다.
$('#imageObject').attr('src', 'image1.gif').load(function() {
Alert( '이미지가 로드되었습니다…');
});