효과적인 웹 개발을 위한 10가지 jQuery 코드 조각

지난 몇 년 동안 jQuery는 가장 널리 사용되는 JavaScript 스크립팅 라이브러리였습니다. 오늘 우리는 웹 개발자를 위한 가장 실용적인 10가지 jQuery 코드 조각을 제공할 것입니다. 초보자도 배울 수 있습니다 jQuery~

1. Internet Explorer 버전 감지
CSS 디자인에 있어서 Internet Explorer는 항상 개발자와 디자이너에게 문제였습니다. IE6의 암흑기가 지나고 IE의 인기가 점점 줄어들고 있지만 여전히 쉽게 감지할 수 있는 것이 좋습니다. 물론 아래 코드를 사용하여 다른 브라우저를 검색할 수도 있습니다.

$(document).ready(function() {
   if (navigator.userAgent.match(/msie/i) ){
    alert('I am an old fashioned Internet Explorer');
   }
});

2. 페이지 상단으로 부드럽게 슬라이드하세요
이것은 가장 널리 사용되는 jQuery 효과 중 하나입니다. 링크를 클릭하면 페이지가 부드럽게 상단으로 이동합니다. 새로운 것은 없지만 모든 개발자는 가끔씩 이런 함수를 작성해야 합니다.

$("a[href='#top']").click(function() {
 $("html, body").animate({ scrollTop: 0 }, "slow");
 return false;
});

3. Pin on top
요소를 상단에 고정할 수 있는 매우 유용한 코드 조각입니다. 탐색 버튼, 도구 모음 또는 중요한 정보 상자에 매우 유용합니다.

$(function(){
 var $win = $(window)
 var $nav = $('.mytoolbar');
 var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
 var isFixed=0;
 processScroll()
 $win.on('scroll', processScroll)
 function processScroll() {
 var i, scrollTop = $win.scrollTop()
 if (scrollTop >= navTop && !isFixed) { 
 isFixed = 1
 $nav.addClass('subnav-fixed')
 } else if (scrollTop <= navTop && isFixed) {
 isFixed = 0
  $nav.removeClass(&#39;subnav-fixed&#39;)
 }
}

4. html 마크를 다른 콘텐츠로 교체
jQuery를 사용하면 html 마크를 다른 콘텐츠로 쉽게 교체할 수 있습니다. 가능성은 무한합니다.

$('li').replaceWith(function(){
 return $("<div />").append($(this).contents());
});

5. 창 너비 감지
이제 모바일 장치가 오래된 컴퓨터보다 보편화되었으므로 더 작은 창 너비를 쉽게 감지할 수 있으면 도움이 될 것입니다. 운 좋게도 jQuery를 사용하면 매우 쉽습니다.

var responsive_viewport = $(window).width();
/* if is below 481px */
if (responsive_viewport < 481) {
  alert(&#39;Viewport is smaller than 481px.&#39;);
} /* end smallest screen */

6. 손상된 이미지를 자동으로 찾아서 복구합니다.
사이트가 상대적으로 크고 수년 동안 온라인에 있었다면 인터페이스 어딘가에서 손상된 이미지를 접하게 될 것입니다. 이 유용한 기능은 손상된 이미지를 감지하고 이를 원하는 이미지로 교체하여 방문자에게 문제를 알리는 데 도움이 될 수 있습니다.

$('img').error(function(){
 $(this).attr('src', 'img/broken.png');
});

7. 복사, 붙여넣기 및 잘라내기 작업 감지
jQuery를 사용하면 요구 사항에 따라 복사, 붙여넣기 및 잘라내기 작업을 쉽게 감지할 수 있습니다.

$("#textA").bind('copy', function() {
  $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
  $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
  $('span').text('cut behaviour detected!')
});

8 외부 링크가 나타나면 target="blank"의 속성을 자동으로 추가합니다.
외부 사이트에 링크할 때 target="blank" 속성을 사용하여 사이트를 열 수 있습니다. 새로운 인터페이스. 문제는 target="blank" 속성이 유효한 W3C 속성이 아니라는 것입니다. jQuery를 사용하여 이 문제를 해결해 보겠습니다. 다음 코드는 링크가 외부 링크인지 여부를 감지하고, 그렇다면 자동으로 target="blank" 속성을 추가합니다.

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
  this.target = "_blank";
});

9. 사진에 머무를 때 점차 증가하거나 감소하는 투명도 효과
또 다른 "클래식" 코드인 이 코드는 때때로 구현하므로 도구 상자에 있어야 합니다.

$(document).ready(function(){
  $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
  $(".thumbs img").hover(function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
  },function(){
    $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
  });
});

10. 텍스트나 비밀번호를 입력할 때 스페이스바를 비활성화하세요.
이메일, 사용자 이름, 비밀번호 등 많은 양식 필드에서는 스페이스바가 필요하지 않습니다. 선택한 입력에서 스페이스바를 비활성화하는 데 사용할 수 있는 간단한 방법은 다음과 같습니다.

$('input.nospace').keydown(function(e) {
 if (e.keyCode == 32) {
 return false;
 }
});

위 내용은 효율적인 웹 개발을 위한 10개의 jQuery 코드 조각의 모든 내용입니다. 필요하면 저장해도 됩니다.

관련 권장 사항:

7개의 유용한 jQuery 코드 조각 share_ jquery

15 ​​직접 사용할 수 있는 jQuery 코드 조각_jquery

18 멋진 jQuery 코드 조각_jquery

위 내용은 효과적인 웹 개발을 위한 10가지 jQuery 코드 조각의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!