development_jquery에 사용할 수 있는 jQuery 팁

1) 오른쪽 클릭 비활성화
웹 애플리케이션을 개발하다 보면 오른쪽 클릭 기능을 비활성화해야 하는 상황이 있습니다. 이 코드를 사용하여 jQuery 개발자는 웹 페이지에서 마우스 오른쪽 버튼 클릭을 비활성화할 수 있습니다. 코드는 다음과 같습니다.

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

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

//기본 컨텍스트 메뉴 삭제
return false;
}); 🎜>2) 텍스트 크기 조정
다음 코드를 사용하면 사용자는 필요에 따라 웹 페이지의 글꼴 크기를 늘리거나 확대/축소할 수 있습니다. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. $(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 =parseFloat(currentFontSize, 10);

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

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


3) 새 창에서 링크 열기
이 jQuery 코드를 사용하면 사용자가 웹사이트에서 클릭하는 모든 링크가 새 창에서 열립니다.

코드 복사


코드는 다음과 같습니다.

$(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() { //스크롤 페이지 맨 위로 $(document).scrollTo(0,500); }

})

6) 마우스의 X, Y 좌표를 가져옵니다
다음 코드는 마우스의 X, Y 좌표를 얻을 수 있으며 코드는 다음과 같습니다.




코드 복사

코드는 다음과 같습니다 :

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

7) 현재 마우스 좌표를 감지합니다.

다음 코드를 사용하여 가져옵니다. 현재 마우스 좌표는 다음과 같이 jQuery를 지원하는 모든 위치에 있습니다.




코드 복사

코드는 다음과 같습니다.

$(document).ready(function() { $().mousemove(function(e){ $('# MouseCoordinates ').html("X 축 위치 = " e.pageX " 및 Y 축 위치 = " e.pageY) })
8) 이미지 미리 로드
이 이미지 미리 로드 스니펫을 사용하면 기다리지 않고 빠르게 이미지를 미리 로드할 수 있습니다. 코드는 다음과 같습니다.

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

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

호출 방법 :

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

$.preloadImages("image1.gif", "image2.gif", "image3.gif")
이미지가 로드되었는지 확인:
$('#imageObject') .attr('src', 'image1.gif ').load(function() {
alert('이미지가 로드되었습니다...');
})