jQuery技巧
1.禁用页面的右键菜单
$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });
2.新窗口打开页面
$(document).ready(function(){ //例子1:href="http://"的超链接将会在新窗口打开链接 $('a[href^="http://"]').attr("target"."_blank"); }) //例子2:rel="external"的超链接将会在新窗口打开链接 $("a[rel$='external']").click(function){ this.target = "_blank"; }); }); //use <a href= "http://www.cssrain.cn" rel="external">open link</a>
3.输入框文字获取和失去焦点
$(document).ready(function(){ $("input.text1").val("Enter your search text here"); textFill($('input.text1')); }); function textFill(input){ //input focus text function var originalvalue = input.val(); input.focus(function(){ if($.trim(input.val()) == originalvalue){ input.val(''); } }).blur(function(){ if($.trim(input.val()) == ''){ input.val(originalvalue); } }); }
4.返回头部滑动动画
jQuery.fn.scrollTo = function(speed){ var targetOffset = $(this).offset().top; $('html.body').stop().animate({scrollTop:targetOffset},speed); return this; }; //use $('#goheader').click(function(){ $("body").scrollTo(500); return false; });
5.获取鼠标位置
$(document).ready(function(){ $(document).mousemove(function(e){ $('#XY').html("X:" + e.pageX + "|Y" + e.pageY); }); });
6.判断元素是否存在
$(document).ready(function(){ if($('#id').length){ //do something } });
7.点击div也可以跳转
$('div').click(function(){ window.location = $(this).find("a").attr("href"); return false; }); ///use <div><a href = "index.html"></a></div>
8.根据浏览器大小添加不同的样式
$(document).ready(function(){ function checkWindowSize(){ if($(window).width()>1200){ $('body').addClass('large'); }else{ $('body').removeClass('large'); } } $(window).resize(checkWindowSize); });
9.设置div在屏幕中央
$(document).ready(function(){ jQuery.fn.center = function(){ this.css("position","absolute"); this.css("top",($(window).height() - this.height())/2+$(window).scrollTop() + "px"); this.css("left",($(window).width() - this.width())/2+$(window).scrollLeft() + "px"); return this; }; //use $("#XY").center(); });
10.创建自己的选择器
$('document').ready(function(){ $.extend($.expr[':'],{ moreThen500px :function(a){ return $(a).width() > 500; } }); $('.box:moreThen500px').click(function(){ //... }); });
11.关闭所有动画效果
$(document).ready(function(){ jQuery.fx.off = true; });
12.检测鼠标的右键和左键
$(document).ready(function(){ $("#XY").mousedown(function(e){ alert(e.which); //1 = 鼠标左键;2 = 鼠标中键;3 = 鼠标右键 }); });
13.回车提交表单
$(document).ready(function(){ $("input").keyup(function(e){ if(e.which == "13"){ alert("回车提交!") } }); });
14.获取选中的下拉框
$('#someElement').find('option:selected');
$('#someElement option:selected');
15.使用siblings()来选择同辈元素
//不这样做 $('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active'); }); //替代做法是 $('#nav li').click(function(){ $(this).addClass('active').siblings().removeClass('active'); });
16.个性化链接
$(document).ready(function(){ $("a[href$='pdf']").addClass("pdf"); $("a[href$='zip']").addClass("zip"); $("a[href$='psd']").addClass("v"); });
17.在一段时间之后自动隐藏或关闭元素
//这是1.3.2中我们使用setTimeout来实现的方式 setTimeout(function(){ $('div').fadeIn(400) },3000); //而在1.4之后的版本可以使用delay()这一功能来实现的方式 $("div").slideUp(300).delay(3000).fadeIn(400);