모두에게 친숙한 15가지 jquery 팁을 공유하세요_jquery

jQuery 애플리케이션 개선에 도움이 되는 15가지 잘 알려진 jquery 팁을 모든 사람과 공유하세요

• 맨 위로 가기 버튼
• 이미지 미리 로드
• 이미지가 로드되었는지 확인
• 손상된 이미지 자동 복구
• 호버 스위치 수업
• 입력 비활성화
• 링크 로드 중지
• 페이드/슬라이드 전환
• 간단한 아코디언
• 두 개의 DIV를 같은 높이로 만들기
• 브라우저 탭/새 창에서 외부 링크 열기
• 텍스트를 기반으로 요소 가져오기
• 눈에 보이는 변화의 트리거
• Ajax 호출 오류 처리
• 체인운영
  

1. 위로 가기 버튼

jQuery에서 animate 및 scrollTop 메서드를 사용하면 간단한 스크롤-투-톱 애니메이션을 만들기 위해 플러그인을 사용할 필요가 없습니다.

// Back to top

$('.top').click(function (e) {

 e.preventDefault();

 $('html, body').animate({scrollTop: 0}, 800);

});

<!-- Create an anchor tag -->

<a class="top" href="#">Back to top</a>

scrollTop의 값을 사용하여 스크롤하려는 위치를 변경합니다. 본질적으로 이것이 바로 여러분이 하는 일입니다. 페이지가 문서 상단으로 스크롤될 때까지 다음 800밀리초 동안 페이지가 스크롤되도록 하십시오.

참고: scrollTop의 장난스러운 행동 중 일부를 살펴보겠습니다.

2. 이미지 사전 로딩

웹 페이지에서 숨겨진 이미지 파일을 많이 사용하는 경우(예: 마우스 오버 시 표시되는 이미지) 이미지를 미리 로드하는 것이 좋습니다.

$.preloadImages = function () {
 for (var i = 0; i < arguments.length; i++) {
 $('<img>').attr('src', arguments[i]);
 }
}; 
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

3. 이미지 로드 여부 확인

때때로 해당 js 코드를 계속 실행할 수 있도록 이미지가 로드되었는지 확인해야 할 수도 있습니다.

$('img').load(function () {
 console.log('image load successful');
});

특정 이미지가 로드되어 ID나 클래스가 있는 태그로 대체되었는지 확인할 수도 있습니다.

4. 손상된 이미지 자동 복구

사이트에서 깨진 이미지 링크를 발견하면 하나씩 교체하는 것이 어려울 수 있습니다. 이 간단한 코드를 사용하면 많은 수고를 덜 수 있습니다.

$('img').on('error', function () {
 if(!$(this).hasClass('broken-image')) {
 $(this).prop('src', 'img/broken.png').addClass('broken-image');
 }
});

깨진 링크가 없더라도 이 코드를 추가해도 아무런 영향이 없습니다.

5. 호버 스위칭 수업

사용자가 페이지 요소 위로 마우스를 가져갈 때 페이지 요소의 시각적 효과를 변경한다고 가정해 보겠습니다. 사용자가 요소 위로 마우스를 가져가면 요소에 클래스를 추가하고 마우스가 멈추면 클래스를 제거할 수 있습니다.

$('.btn').hover(function () {
 $(this).addClass('hover');
}, function () {
 $(this).removeClass('hover');
});

toggleClass 메소드를 더 간단하게 사용하려면 필요한 CSS를 추가하세요.

$('.btn').hover(function () {
 $(this).toggleClass('hover');
});

참고: 이 경우 CSS는 빠른 솔루션이지만 알아둘 가치가 있습니다.

6. 입력 비활성화

사용자가 작업(예: '약관을 읽었습니다' 체크박스 선택)을 수행할 때까지 양식의 제출 버튼이나 입력 필드를 사용해야 하는 경우가 있습니다. 입력란에 비활성화된 속성을 설정한 다음 필요할 때 활성화하세요.

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

$('input[type="submit"]' ).prop ('비활성화됨', true);

입력 상자에서 prop 메소드를 다시 실행하고 비활성화된 값을 false로 설정하기만 하면 됩니다.

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

$('input[type="submit"]' ).prop ('비활성화', false);

7. 링크 로드 중지

특정 웹페이지에 연결하거나 페이지를 다시 로드하고 싶지 않은 경우가 있는데, 다른 스크립트를 실행하는 등 다른 작업을 수행하기를 원할 수도 있습니다. 계약 위반을 방지하기 위한 팁은 다음과 같습니다.

$('a.no-link').click(function (e) {
 e.preventDefault();
});

8. 페이드/슬라이드 전환

슬라이딩과 페이드인/페이드아웃은 jQuery에서 자주 사용하는 애니메이션입니다. 사용자가 특정 클릭 이벤트를 수행할 때만 요소를 표시하려고 할 수 있으며, 이 경우 페이드 인/아웃 또는 슬라이딩 방법이 필요합니다. 하지만 해당 요소를 처음 클릭할 때 나타나고 두 번째 클릭할 때 사라지도록 하려면 코드는 다음과 같습니다.

// Fade
$('.btn').click(function () {
 $('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
 $('.element').slideToggle('slow');
});

9. 심플한 아코디언

아코디언을 만드는 빠르고 쉬운 방법은 다음과 같습니다.

// Close all panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function () {
 var next = $(this).next();
 next.slideToggle('fast');
 $('.content').not(next).slideUp('fast');
 return false;
});

通过添加这个脚本，你需要做的则是必要的HTML操作在你的页面上。

10、使两个DIV同等高度

有时你会想要两个DIV有相同的高度，无论他们都有什么内容：

复制代码 代码如下:

$('.div').css('min-height', $('.main-div').height());

这个例子设置了DIV的最小高度，这意味着它的高度只可以比这个设置的高度大而不能小。然而，一个更灵活的方法是循环的一组元素，并设置将最高元素的高度作为高度：

var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() > height) {
 height = $(this).height();
 }
});
$columns.height(height);

如果你想要所有的列有相同的高度：

var $rows = $('.same-height-columns');
$rows.each(function () {
 $(this).find('.column').height($(this).height());
});

11、在浏览器标签/新窗口打开外部链接

在新的浏览器标签或窗口中打开外部链接，并确保在同一个标签或窗口中打开的是同一个源的链接：

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

备注：window.location.origin 在IE10不工作。

12、根据文本获取元素

通过jQuery中的contains()选择器，你能找到一个元素内的文本内容。如果文本不存在，则这个元素将被隐藏：

var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();

13、可见变化的触发

当用户不再聚焦或者重新聚焦一个标签时触发javascript脚本：

$(document).on('visibilitychange', function (e) {
 if (e.target.visibilityState === "visible") {
 console.log('Tab is now in view!');
 } else if (e.target.visibilityState === "hidden") {
 console.log('Tab is now hidden!');
 }
});

14、Ajax调用错误处理

当一个Ajax调用返回一个404或500的错误时，将执行该错误处理。如果该处理未定义，则其他jQuery代码便可能不会执行了。定义一个全局Ajax错误处理程序：

$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

15、链式操作

jQuery允许通过链式操作来减轻反复查询DOM和创建多个jQuery对象的过程。比如下面是你的方法调用：

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

这代码可以通过链式大大的提高：

$('#elem')
 .show()
 .html('bla')
 .otherStuff();

另一个方法是在一个可变的元素缓存（$作为前置）：

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

链式和jQuery缓存方法是最好的做法，导致更短、更快的代码。

以上就是本文的全部内容，希望帮助大家提高jQuery应用能力。