本文主要汇总自己收集与总结的一些jquery代码片段与心得体会，与大家分享，如果有错误，请轻拍砖~
-
返回顶部按钮
// Back to top
$('.top').click(function(e){
e.preventDefault();
$('html,body').animate({scrollTop:0});
});
Note：再加这段代码的时候，可以先判断滚轮划过屏幕多少才显示处返回Top的按钮，比如知乎上面的文章就是如此，还可以通过设置scrollTop来达到你想要滚动到的地方,让animate自己计算动画时间。 -
使用jQuery插件Preload Images
用途：当你的页面需要加载很多图片的时候，比如外观360车图，一般至少需要36张图片，还有瀑布流需要大量的图片加载，这个时间通过插件可以将这些图片预加载或者点击的时候在预加载，提高网站访问速度，适用场景自己用后体验。
$.preloadImages = function(){
for(var i = 0; i < arguments,length; i++){
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('images/1.jpg','images/2.jpg',...);
//这块可以将arguments转换成数组传进去:
var srcList = [
'images1.jpg',
''...
] -
判断图片是否加载成功
$('img').load(function(){
console.log('image load successful!');
})
Note：注意 console在ie8下不识别，会报错哦. -
给图片加上error事件，当图片破碎替换成其他的图片，不至于太难看
$('img').on('error', function(){
if(!$(this).hasClass('broken-image') ){
$(this).prop('src', 'omg/broken.png').addClass('broken-image');
}
}); -
使用Toggle，在hover的时候增加class，鼠标移出后删除class
应用场景一般是给当前的对象加css动画的class
$('.btn').hover(function(){
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
//简写：
$('.btn').hover(function(){
$(this).toggleClass('active');
})
Note：当然css也是可以解决的，不过这样做在很多时候还是有优势的. -
禁用文本框
$('input[type="submit"]').prop('disabled', true); -
使用:selected选择器来获取option的值，并且其只适用于<option>
$('select option:selected').val();
Note：这里提到主要是为了避免和其他几个表单取值混淆了. -
阻止a标签跳转
$('a.no-link').click(function(e){
e.preventDefault();
}) -
类似于5一样，使用fadeToggle和slideToggle
// Fade
$('.btn').click(function () {
$('.element').fadeToggle('slow');
});
// Toggle
$('.btn').click(function () {
$('.element').slideToggle('slow');
}); -
手风琴效果
//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;
}); -
使两个div的高度相等
var $columns = $('.column');
var height = 0;
$columns.each(function(){
if($(this).height() > height){
height = $(this).height();
}
});
$columns.height(height);
//当然，我们也可以使用css来解决，更方便，比如我们要使右侧的列始终与左侧相等，可以这样搞；
.box { overflow: hidden;} //这个是父级
.box .aside { padding-bottom: 2000px; margin-bottom:-2000px;}//侧栏
//这样侧栏aside会始终与左侧等高，其中说明的这些属性是必须属性。 -
查找文本元素
利用contains()选择器，你可以找到一个元素的文本内容，如果元素的文本是不存在，则将不存在文本的元素隐藏
var search = $('.search').val();
$('div:not(:contains("'+search+'"))').hide();
Note：应用场景暂时还没有想到 -
可见标签的触发事件
当用户切换浏览器选项卡的时候会触发javascript
$(document).on('visibilitychange', function(e){
if(e.target.visibilityState=== 'visible'){
console.log("是当前标签");
}else if( e.target.visibilityState === 'hidden' ){
console.log('当前页面被隐藏');
}
});
Note：这里解释一下，visibilitychange是html5新增的属性，主要用来判断是否在当前tab下，document.hidden属性，它显示页面是否为用户当前观看的页面，值为ture或false；visibilityState的值要么是visible(表明页面为浏览器当前激活tab，而且窗口不是最小化状态)，要么是hidden(页面不是当前激活tab页面，或者窗口最小化了。)，或者prerender(页面在重新生成，对用户不可见。)
应用场景：
什么时候需要使用visibilitychange事件呢？比如，如果你的页面上有嵌入视频正在播放，当用户切换到其它标签页时，你的标签页上的视频应自动暂停播放，当用户切换回来时继续接着播放。再比如，如果你的页面有自动刷新动作，当用户切换到其它标签页时，你就应该停止刷新，而当用户切换回来时继续之前的动作。
-
定义全局的Ajax请求错误处理函数，捕捉ajax请求错误
$(document).ajaxError(function(e,xhr,setting,error){
console.log('error')
}); -
反序访问jQuery对象的元素
在某些场景下，我们可能需要反序访问通过JQuery选择器获取到的页面元素对象，这个怎么实现呢？
var arr = $(.nav'').find('li').get().reverse();
arr. each(function(elem,index){
//code
}); -
访问iFrame里面的元素
var $iframe = $('iframe#id').contents(); -
管理搜索框的值
$('#search')
.focus(function(){
$(this).val(' ');
}).blur(function(){
$(this).val() == ''?$(this).val('请输入值') : null;
});
Note：当然这种方式比较low了，我们现在都可以通过html5新增的placeholder属性来设置，这种设置特别方便，不过如果你是需要兼容到低版本的话，比如ie那就得用js咯~ -
部分页面加载更新
setInterval(function(){
$('.content').load(url);
}); -
采用data来缓存数据
var cache = {};
$.data(cache, 'key', 'value');
Note：当然如果比如说你做轮播图，用到插件一般需要新建对象，比如说在videojs里面，你将视频做成tab选项卡这种的时候，点击这个视频另一个需要暂停，就需要将其对象存储起来，我们一般用data存储，很方便 -
使jquery与其他库兼容的方法
//第一种
var $j = jQuery.noConflict();
$j('#id')...
//第二种,推荐使用的方式
(function($){
$(function(){
//code..
})
})(jQuery); -
根据屏幕尺寸自适应的遮罩层
$('.overlay').css({
width: $(window).width(),
height: $(window).height()
});
$(window).on('resize', function(){
var $w = $(window).width();
var $h = $(window).height();
$('.overlay').css({
width: $w,
height: $h
});
}); -
测试密码的强度
在某些网站注册时常常会要求设置密码，网站也会根据输入密码的字符特点给出相应的提示，如密码过短、强度差、强度中等、强度强等。这又是怎么实现的呢？
<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>
//下面的正则表达式建议各位收藏哦，项目上有可能会用得着
$('#pass').keyup(function(e) {
//密码为八位及以上并且字母数字特殊字符三项都包括
var strongRegex = new RegExp("^(?=.{8,})(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.\W).$", "g");
//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
var mediumRegex = new RegExp("^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))|((?=.[A-Z])(?=.[0-9]))|((?=.[a-z])(?=.[0-9]))).$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok'; $('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!'); }
return true;
}); -
定时触发resize，scroll等事件
类似resize，scroll这种事件当滚轮滑动或者页面尺寸在变化，每一个像素都会触发一下，所以导致很多时候会出现问题，所以一般我们会加定时器来解决
var status;
$(window).on('resize', function(){
if(status){
clearTimeout(status);
}
status = setTimeout(function(){
//code...
}, 500);
});
Note：其实思路很简单：可以分为两次，第一次调用是不存在status的，所以会执行下面的；第二次的时候会先干掉第一次执行的，这样，每次调用的时候会先等待500ms然后执行里面的代码，然后如果用户过快的刷新，会清除上次的定时器；还有另一种方式是通过开关来控制的，先在外面定义一个开关flag=false；然后在里面判断满足条件后，再判断flag==false，如果是现将flag=true，然后执行代码，完毕后将flag=false； -
鼠标滑动加载到一定位置后自动加载更多的判断
//第一种方式
$(window).scrollTop()+$(window).height())+250)>=$(document).height();
//第二种方式,$addMore是加载更多按钮
$addMore.offset().top - $(window).scrollTop() < $(window).height(); -
使用jQuery重绘图片
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
}); -
音频播放，多用在手机端html5页面背景音乐
$('.music-box').on('click', function(){
var is = $(this).hasClass('pause');
var audio =document.getElementById('myaudio');
if(is){
audio.play();
$(this).removeClass('pause');
}else{
audio.pause();
$(this).addClass('pause');
}
})
var firstPlayedAudio = false; // 解决safari播放问题
var audioLoaded = false;
var audio = document.getElementById('myaudio');
$(audio).on('loadeddata', function(){
audioLoaded = true;
audio.play();
});
$('body').on('touchstart', function(){
if(!firstPlayedAudio){
firstPlayedAudio = true;
audio.play();
}
});
document.addEventListener("WeixinJSBridgeReady", function() {
audio.play();
}); - 箭头向下滑动
-webkit-animation: 'wakedown' 1.4s linear infinite alternate;
animation: 'wakedown' 1.4s linear infinite alternate;
/* wakedown */
@-webkit-keyframes wakedown {
0% { opacity: 0.2; -webkit-transform: translateY(0); }
100% { opacity: 1; -webkit-transform: translateY(-8px); }
}
@keyframes wakedown {
0% { opacity: 0.2; transform: translateY(0); }
100% { opacity: 1; transform: translateY(-8px); }
} - fullpage基本配置，主要用来快速完成任务
最好参看API文档
$('#container').fullpage({
menu: '#pager',
anchors: ['page1', 'page2', 'page3'],
verticalCentered: true,
sectionSelector: '.section',
resize: true,
css3: false,
easing: 'easeInExpo',
scrollingSpeed: 700
}); - chrome经典bug
chrome经典bug，需要强制GPU渲染
-webkit-transform: translateZ(0); transform: translateZ(0);
当页面进入的时候所有图片堆到一起的问题
.section {
display: table;
table-layout: fixed;
width: 100%;
} - 取data
// 糟糕
$('#id').data(key,value);
// 建议 (高效)
$.data('#id',key,value);
累死了，终于整理了一部分了，以后积累下来的将会继续整理和更新，希望能够帮到需要的人，另外，不要忘记支持小编哦，需要转载或者引用请私信。
