常用的35个jQuery小技巧

1. 禁止右键点击

$(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});

2. 隐藏搜索文本框文字

$(function() {
$(“input.text1″).val(“Enter your search text here”);
textFill($(‘input.text1′));
});
function textFill(input){
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(”); }
});
input.blur( function(){
if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
});
}

3. 在新窗口中打开链接

$(function() {
$(‘a[href^="http://"]‘).attr(“target”, “_blank”);
$(‘a[@rel$='external']‘).click(function(){
this.target = “_blank”;
});
});

4. 检测浏览器
注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量

$(function() {
if ($.browser.mozilla && $.browser.version >= “1.8″ ){
// do something
}
if( $.browser.safari ){
// do something
}
if( $.browser.chrome){
// do something
}
if( $.browser.camino){
// do something
}
if( $.browser.opera){
// do something
}
if ($.browser.msie && $.browser.version <= 6 ){ // do something } if ($.browser.msie && $.browser.version > 6){
// do something
}
});

5. 预加载图片

$(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?

“).attr(“src”, arguments);
}
}
// how to use
$.preloadImages(“image1.jpg”);
});

6. 页面样式切换

$(function() {
$(“a.Styleswitcher”).click(function() {
$(‘link[rel=stylesheet]‘).attr(‘href’ , $(this).attr(‘rel’));
});
});

7. 列高度相同
如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

$(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

});

8. 动态控制页面字体大小
用户可以改变页面字体大小

$(function() {
var originalFontSize = $(‘html’).css(‘font-size’);
$(“.resetFont”).click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
$(“.increaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
$(“.decreaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
});

9. 返回页面顶部功能

$(function() {
$(‘a[href*=#]‘).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=' + this.hash.slice(1) +']‘);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
});

10. 获得鼠标指针XY值

$(function() {
$().mousemove(function(e){
$(‘#XY’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
});

11.返回顶部按钮
你可以利用 animate 和 scrollTop 来实现返回顶部的动画，而不需要使用其他插件。

$(‘a.top’).click(function () {
$(document.body).animate({scrollTop: 0}, 800);
return false;
});

改变 scrollTop 的值可以调整返回距离顶部的距离，而 animate 的第二个参数是执行返回动作需要的时间(单位：毫秒)。

12.预加载图片
如果你的页面中使用了很多不可见的图片（如：hover 显示），你可能需要预加载它们：

$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$(‘

‘).attr(‘src’, arguments);
}
};
$.preloadImages(‘img/hover1.png’, ‘img/hover2.png’);

13.检查图片是否加载完成
有时候你需要确保图片完成加载完成以便执行后面的操作：

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

你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。