Jquery 기술(마스터해야 함)_jquery
- WBOY원래의
- 2016-05-16 15:10:291384검색
jQuery가 로드되었는지 확인
jQuery를 사용하기 전에 jQuery가 로드되었는지 확인해야 합니다.
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
맨 위로 가기 버튼
jQuery에서 animate 및 scrollTop 메소드를 사용하면 플러그인 없이도 간단한 스크롤 업 효과를 만들 수 있습니다.
// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>
scrollTop의 값을 조정하여 스크롤 착지 위치를 변경합니다. 실제로 수행하는 작업은 문서 본문이 맨 위로 스크롤될 때까지 800밀리초 이상 문서 본문의 위치를 지속적으로 설정하는 것입니다.
이미지 미리 로드
웹페이지에서 즉시 표시되지 않는 이미지(예: 마우스 오버로 실행되는 이미지)를 많이 사용하는 경우 다음 이미지를 미리 로드하는 것이 좋습니다.
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
이미지 로딩 여부 확인
어떤 경우에는 스크립트를 계속 실행하려면 이미지가 완전히 로드되었는지 확인해야 합니다.
$('img').load(function () {
console.log('image load successful');
});
마찬가지로 id 또는 class 속성과 함께 a1f02c36ba31691bcfe87b2722de723b 태그를 사용하면 특정 이미지가 로드되었는지 확인할 수도 있습니다.
실패한 이미지 자동 복구
웹사이트에서 깨진 이미지 링크를 발견하면 하나씩 교체하는 것이 번거로운 일입니다. 이 간단한 코드는 고통을 많이 덜어줄 수 있습니다:
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
아직 끊어진 링크가 없더라도 이 코드를 추가하면 잃을 것이 없습니다.
마우스오버 전환 클래스
사용자가 마우스를 올렸을 때 클릭 가능한 요소의 시각적 효과를 변경하려면 요소에 마우스를 올렸을 때 요소에 클래스를 추가하고 마우스가 더 이상 움직이지 않으면 다음 클래스를 제외하고 이동하세요.
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
더 쉬운 경로를 찾고 있다면ggleClass 메소드를 사용하고 필요한 CSS를 추가하면 됩니다.
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
참고: 이 경우 CSS를 사용하는 것이 더 빠른 해결 방법일 수 있지만 이 방법은 여전히 약간의 지식을 얻을 가치가 있습니다.
입력 필드 비활성화
가끔 사용자가 특정 작업(예: '약관을 읽었습니다' 확인 상자 선택)을 완료할 때까지 양식의 제출 버튼을 비활성화하거나 입력 필드 중 하나를 비활성화할 수 있습니다. 입력 필드에 비활성화된 속성을 추가한 다음 필요할 때 활성화할 수 있습니다.
$('input[type="submit"]').prop('disabled', true);
입력 필드에 prop 메소드를 다시 실행했지만 이번에는 비활성화된 값을 false로 변경합니다.
$('input[type="submit"]').prop('disabled', false);
링크 로딩 차단
특정 페이지에 연결하거나 현재 페이지를 다시 로드하고 싶지 않지만 다른 스크립트를 실행하는 등 다른 작업을 수행하기를 원하는 경우가 있습니다. 이를 위해서는 기본 작업을 차단하는 작업이 필요합니다.
$('a.no-link').click(function (e) {
e.preventDefault();
});
jQuery 선택자 캐싱
프로젝트에서 얼마나 많은 동일한 선택기를 반복해서 작성하는지 생각해 보세요. 각 $('.element')는 DOM이 실행되었는지 여부에 관계없이 전체 DOM을 한 번 쿼리해야 합니다. 대신 선택기를 한 번만 실행하고 결과를 변수에 저장합니다.
var blocks = $('#blocks').find('li');
이제 매번 DOM을 쿼리하지 않고도 어디서나 블록 변수를 사용할 수 있습니다.
$('#hideBlocks').click(function () {
blocks.fadeOut();
});
$('#showBlocks').click(function () {
blocks.fadeIn();
});
jQuery 선택자를 캐싱하는 것은 간단한 성능 향상입니다.
페이드/슬라이드 전환
페이드와 슬라이드는 모두 jQuery에서 많이 사용하는 효과입니다. 사용자가 요소를 클릭할 때만 요소를 표시하고 싶을 수도 있습니다. 이 경우 fadeIn 및 SlideDown 메소드가 완벽합니다. 하지만 처음 클릭할 때 요소가 나타나고 다시 클릭하면 사라지도록 하려면 다음 코드가 유용합니다.
// 淡出
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// 切换
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
간단한 아코디언 효과
아코디언 효과를 얻는 빠르고 쉬운 방법은 다음과 같습니다.
// 关闭所有面板
$('#accordion').find('.content').hide();
// 手风琴效果
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
이 스크립트를 추가함으로써 실제로 수행하는 작업은 제대로 작동하는 데 필요한 HTML 요소를 제공하는 것뿐입니다.
두 div의 높이를 동일하게 만듭니다
각각 포함된 콘텐츠에 관계없이 두 개의 div가 항상 동일한 높이를 갖기를 원하는 경우가 있습니다.
$('.div').css('min-height', $('.main-div').height());
这个例子设置了 min-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());
});
在新标签页 / 新窗口打开外部链接
在一个新的浏览器标签页或窗口中打开外部链接，并确保相同来源的链接在同一个标签页或者窗口中打开：
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
注： window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。
通过文本查找元素
通过使用 jQuery 的 contains() 选择器，你能够查找元素内容中的文本。若文本不存在，该元素将被隐藏：
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
在 visibility 属性变化时触发
当用户的焦点离开或者重新回到某个标签页时，触发 Javasrcipt：
$(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!');
}
});
Ajax 调用错误处理
当一个 Ajax 调用返回 404 或 500 错误时，错误处理程序将被执行。若错误处理未被定义，其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理：
$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});
链式插件调用
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。
检查 jQuery 是否加载
在使用 jQuery 进行任何操作之前，你需要先确认它已经加载：
if (typeof jQuery == 'undefined') {
console.log('jQuery hasn\'t loaded');
} else {
console.log('jQuery has loaded');
}
返回顶部按钮
利用 jQuery 中的 animate 和 scrollTop 方法，你无需插件就可以创建简单的 scroll up 效果:
// 返回顶部
$('a.top').click(function (e) {
e.preventDefault();
$(document.body).animate({scrollTop: 0}, 800);
});
<!-- 设置锚 -->
<a class="top" href="#">Back to top</a>
调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置，直到它滚动到顶部。
预加载图片
如果你的网页使用了大量并非立即可见的图片（例如悬停鼠标触发的图片），那么预加载这些图片就显得很有意义了:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');
判断图片是否加载完成
在有些情况下，为了继续执行脚本，你需要检查图片是否已经完全加载:
$('img').load(function () {
console.log('image load successful');
});
同样，换用一个带有 id 或者 class 属性的 a1f02c36ba31691bcfe87b2722de723b 标签，你也可以检查特定图片是否加载完成。
自动修复失效图片
如果你在你的网站上发现了失效的图片链接，逐个去替换它们将会是个苦差。这段简单的代码可以很大程度地减轻痛苦：
$('img').on('error', function () {
if(!$(this).hasClass('broken-image')) {
$(this).prop('src', 'img/broken.png').addClass('broken-image');
}
});
即使你暂无任何失效的链接，添加这段代码也不会有任何损失。
鼠标悬停切换 class
如果你希望在用户将鼠标悬停在某个可点击元素上时改变它的视觉效果，你可以在该元素被悬停时给它添加一个 class，当鼠标不再悬停时，移除这个 class：
$('.btn').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
如果你还寻求更简单的途径，可以使用 toggleClass 方法，仅需添加必要的 CSS：
$('.btn').hover(function () {
$(this).toggleClass('hover');
});
注：在这种情况下，使用 CSS 或许是一个更快速的解决方案，但这种方法仍然值得稍作了解。
禁用输入字段
有时，你可能希望在用户完成特定操作（例如，勾选“我已阅读条例”的确认框）前禁用表单的提交按钮或禁用其中某个输入框。你可以在你的输入字段上添加disabled 属性，而后你能在需要时启用它：
$('input[type="submit"]').prop('disabled', true);
你只需在输入字段上再次运行 prop 方法, 但是这一次把 disabled 值改为 false：
$('input[type="submit"]').prop('disabled', false);
阻止链接加载
有时你不希望链接到指定页面或者重载当前页面，而是想让它们干些别的，例如触发其它脚本。这需要在阻止默认动作上做些文章：
$('a.no-link').click(function (e) {
e.preventDefault();
});
缓存 jQuery 选择器
想想你在项目中一次又一次地写了多少相同的选择器吧。每个 $('.element') 都必须查询一次整个 DOM,不管它是否曾这样执行过。作为代替，我们只运行一次选择器，并把结果储存在一个变量中：
var blocks = $('#blocks').find('li');
现在你能在任何地方使用 blocks 变量而无需每次查询 DOM 了:
$('#hideBlocks').click(function () {
blocks.fadeOut();
});
$('#showBlocks').click(function () {
blocks.fadeIn();
});
缓存 jQuery 的选择器是种简单的性能提升。
切换淡出 / 滑动
淡出和滑动都是我们在 jQuery 中大量使用的效果。你可能只想在用户点击后展现某个元素，此时用 fadeIn 和 slideDown 方法就很完美。但是如果你希望这个元素在首次点击时出现，再次点击时消失，这段代码就很有用了：
// 淡出
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// 切换
$('.btn').click(function () {
$('.element').slideToggle('slow');
});
简单的手风琴效果
这是一个快速实现手风琴效果的简单方法:
// 关闭所有面板
$('#accordion').find('.content').hide();
// 手风琴效果
$('#accordion').find('.accordion-header').click(function () {
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});
通过添加这段脚本，你实际要做的只是提供必要的 HTML 元素以便它正常运行。
使两个 div 等高
有时你希望无论两个 div 各自包含什么内容，它们总有相同的高度：
$('.div').css('min-height', $('.main-div').height());
这个例子设置了 min-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());
});
在新标签页 / 新窗口打开外部链接
在一个新的浏览器标签页或窗口中打开外部链接，并确保相同来源的链接在同一个标签页或者窗口中打开：
$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');
注： window.location.origin 在 IE10 中不可用. 这个修复方案 正是关注于该问题。
通过文本查找元素
通过使用 jQuery 的 contains() 选择器，你能够查找元素内容中的文本。若文本不存在，该元素将被隐藏：
var search = $('#search').val();
$('div:not(:contains("' + search + '"))').hide();
在 visibility 属性变化时触发
当用户的焦点离开或者重新回到某个标签页时，触发 Javasrcipt：
$(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!');
}
});
Ajax 调用错误处理
当一个 Ajax 调用返回 404 或 500 错误时，错误处理程序将被执行。若错误处理未被定义，其它 jQuery 代码可能不再有效。所以定义一个全局的 Ajax 错误处理：
$(document).ajaxError(function (e, xhr, settings, error) {
console.log(error);
});
链式插件调用
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 中用以简化和优化代码的最佳实践。