share_jquery를 위한 8개의 매우 실용적인 jQuery 함수 코드

이 글에서는 jQuery 사용자를 위한 8가지 매우 실용적인 팁을 공유하겠습니다. jQuery는 JavaScript를 위한 최고의 라이브러리 중 하나이며 주로 애니메이션 및 이벤트 처리에 사용되며 Ajax 및 HTML 스크립트 클라이언트를 지원합니다. 또한 jQuery에는 개발자가 최단 시간에 웹사이트/웹페이지를 빠르게 만들 수 있도록 돕는 다양한 플러그인도 있습니다.

이 기사에서 공유한 실용적인 코드가 마음에 드셨으면 좋겠습니다.

1) 마우스 오른쪽 버튼 클릭 기능 비활성화
사용자를 위해 웹사이트 정보를 저장하려는 경우 개발자는 이 코드를 사용할 수 있습니다. 마우스 오른쪽 버튼 클릭 기능을 비활성화하세요.

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

$(문서).ready(함수() {
//오른쪽 클릭 컨텍스트 메뉴 잡기
$(document).bind("contextmenu",function(e) {
//경고 메시지 - 선택 사항
Alert("마우스 오른쪽 버튼 클릭 금지!");

//기본 컨텍스트 메뉴 삭제
false를 반환합니다.
});
});

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

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

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

$(문서).ready(함수() {
//현재 글꼴 크기 찾기
var originalFontSize = $('html').css('글꼴 크기');

//텍스트 크기 늘리기
$(".increaseFont").click(function() {
var currentFontSize = $('html').css('글꼴 크기');
var currentFontSizeNumber =parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$('html').css('font-size', newFontSize);
false를 반환합니다.
});

//텍스트 크기 줄이기
$(".decreaseFont").click(function() {
var currentFontSize = $('html').css('글꼴 크기');
var currentFontSizeNum =parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
false를 반환합니다.
});

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

3) 새 창에서 링크 열기

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

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

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

4) 스타일 목록 변경

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

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

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

5) 상위링크로 돌아가기

이 코드는 한 페이지를 장기간 클릭할 때 매우 유용합니다. 중요한 순간에 "맨 위로 돌아가기" 기능을 클릭할 수 있습니다.

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

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

6) 마우스 포인터의 X/Y축 구하기

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

$().mousemove(함수(e){
//P 요소 내부에 x, y축 값 표시
$('p').html("X축 : " e.pageX " | Y축 " e.pageY);
});

7) 현재 마우스 좌표 감지

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

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

$(문서).ready(함수() {
$().mousemove(함수(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('이미지가 로드되었습니다…');
});