Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)


Posted in Javascript onMarch 01, 2010

比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。

具体如下:

1. 禁止右键点击

$(document).ready(function(){ 
$(document).bind("contextmenu",function(e){ 
return false; 
}); 
});

2. 隐藏搜索文本框文字
$(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(''); } 
}); 
input.blur( function(){ 
if( $.trim(input.val()) == '' ){ input.val(originalvalue); } 
}); 
}

3 在新窗口中打开链接
$(document).ready(function() { 
//Example 1: Every link will open in a new window 
$('a[href^="http://"]').attr("target", "_blank"); 
//Example 2: Links with the rel="external" attribute will only open in a new window 
$('a[@rel$='external']').click(function(){ 
this.target = "_blank"; 
}); 
}); 
// how to use 
<A href="http://www.opensourcehunter.com" rel=external>open link</A>

4 检测浏览器
注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量。
$(document).ready(function() { 
// Target Firefox 2 and above 
if ($.browser.mozilla && $.browser.version >= "1.8" ){ 
// do something 
} 
// Target Safari 
if( $.browser.safari ){ 
// do something 
} 
// Target Chrome 
if( $.browser.chrome){ 
// do something 
} 
// Target Camino 
if( $.browser.camino){ 
// do something 
} 
// Target Opera 
if( $.browser.opera){ 
// do something 
} 
// Target IE6 and below 
if ($.browser.msie && $.browser.version <= 6 ){ 
// do something 
} 
// Target anything above IE6 
if ($.browser.msie && $.browser.version > 6){ 
// do something 
} 
});

5 预加载图片
$(document).ready(function() { 
jQuery.preloadImages = function() 
{ 
for(var i = 0; i").attr("src", arguments[i]); 
} 
}; 
// how to use 
$.preloadImages("image1.jpg"); 
});

6 页面样式切换
$(document).ready(function() { 
$("a.Styleswitcher").click(function() { 
//swicth the LINK REL attribute with the value in A REL attribute 
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
}); 
// how to use 
// place this in your header 
<LINK href="default.css" type=text/css rel=stylesheet> 
// the links 
<A class=Styleswitcher href="#" rel=default.css>Default Theme</A> 
<A class=Styleswitcher href="#" rel=red.css>Red Theme</A> 
<A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A> 
});

7 列高度相同
如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
$(document).ready(function() { 
function equalHeight(group) { 
tallest = 0; 
group.each(function() { 
thisHeight = $(this).height(); 
if(thisHeight > tallest) { 
tallest = thisHeight; 
} 
}); 
group.height(tallest); 
} 
// how to use 
$(document).ready(function() { 
equalHeight($(".left")); 
equalHeight($(".right")); 
}); 
});

8 动态控制页面字体大小
用户可以改变页面字体大小
$(document).ready(function() { 
// Reset the font size(back to default) 
var originalFontSize = $('html').css('font-size'); 
$(".resetFont").click(function(){ 
$('html').css('font-size', originalFontSize); 
}); 
// Increase the font size(bigger font0 
$(".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; 
}); 
// Decrease the font size(smaller font) 
$(".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 返回页面顶部功能
$(document).ready(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; 
} 
} 
}); 
// how to use 
// place this where you want to scroll to 
<A name=top></A> 
// the link 
<A href="#top">go to top</A> 
});

10 获得鼠标指针XY值
$(document).ready(function() { 
$().mousemove(function(e){ 
//display the x and y axis values inside the div with the id XY 
$('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY); 
}); 
// how to use 
<DIV id=XY></DIV> 
});

11 验证元素是否为空
$(document).ready(function() { 
if ($('#id').html()) { 
// do something 
} 
});

12 替换元素
$(document).ready(function() { 
$('#id').replaceWith(' 
<DIV>I have been replaced</DIV> 
'); 
});

13 jQuery延时加载功能
$(document).ready(function() { 
window.setTimeout(function() { 
// do something 
}, 1000); 
});

14 移除单词功能
$(document).ready(function() { 
var el = $('#id'); 
el.html(el.html().replace(/word/ig, "")); 
});

15 验证元素是否存在于Jquery对象集合中
$(document).ready(function() { 
if ($('#id').length) { 
// do something 
} 
});

16 使整个DIV可点击
$(document).ready(function() { 
$("div").click(function(){ 
//get the url from href attribute and launch the url 
window.location=$(this).find("a").attr("href"); return false; 
}); 
// how to use 
<DIV><A href="index.html">home</A></DIV> 
});

17 ID与Class之间转换当改变Window大小时,在ID与Class之间切换
$(document).ready(function() { 
function checkWindowSize() { 
if ( $(window).width() > 1200 ) { 
$('body').addClass('large'); 
} 
else { 
$('body').removeClass('large'); 
} 
} 
$(window).resize(checkWindowSize); 
});

18 克隆对象
$(document).ready(function() { 
var cloned = $('#id').clone(); 
// how to use 
<DIV id=id></DIV> 
});

19 使元素居屏幕中间位置
$(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; 
} 
$("#id").center(); 
});

20 写自己的选择器
$(document).ready(function() { 
$.extend($.expr[':'], { 
moreThen1000px: function(a) { 
return $(a).width() > 1000; 
} 
}); 
$('.box:moreThen1000px').click(function() { 
// creating a simple js alert box 
alert('The element that you have clicked is over 1000 pixels wide'); 
}); 
});

21 统计元素个数
$(document).ready(function() { 
$("p").size(); 
});

22 使用自己的 Bullets
$(document).ready(function() { 
$("ul").addClass("Replaced"); 
$("ul > li").prepend("‒ "); 
// how to use 
ul.Replaced { list-style : none; } 
});

23 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.
//Example 1 
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT> 
<SCRIPT type=text/javascript> 
google.load("jquery", "1.2.6"); 
google.setOnLoadCallback(function() { 
// do something 
}); 
</SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT> 
// Example 2:(the best and fastest way) 
<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>

24. 禁用Jquery(动画)效果
$(document).ready(function() { 
jQuery.fx.off = true; 
});

25.与其他Javascript类库冲突解决方案
$(document).ready(function() { 
var $jq = jQuery.noConflict(); 
$jq('#id').show(); 
});

26. Load() 函数的运用(页面载入提示):

> 首先写好 CSS,绝对定位到页面右上角。

#loading { 
    position:absolute;    z-index:900;text-align:center; 
    background-color:#eef2fa;border:1px solid #d8e3e8; 
    color:#000;font-size:12px;padding:3px;width:80px; 
    right:0;top:0; 
}

> 然后用 jQuery 然后在所有图片载入完成之后,隐藏 Loading DIV。
> 别忘记载入 jQuery 库哈,刚才测试代码的时候地址写错了,差点疯掉。
<script> 
jQuery(document).ready(function($){ 
$('img').load(function(){ 
        $('#loading').css("display","none"); 
}); 
}); 
</script>

> 随便某处插入一个 DIV 即可,O(∩_∩)O 哈哈。
Javascript 相关文章推荐
JavaScript执行顺序详细介绍
Dec 04 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 #Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 #Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 #Javascript
在chrome中window.onload事件的一些问题
Mar 01 #Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 #Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 #Javascript
使用js获取QueryString的方法小结
Feb 28 #Javascript
You might like
深入PHP FTP类的详解
2013/06/13 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
使用Apache的rewrite
2021/03/09 Servers
javascript之AJAX框架使用说明
2010/04/24 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
javascript实现简易计算器
2017/02/01 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
Python实现从URL地址提取文件名的方法
2015/05/15 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python使用xpath实现图片爬取
2020/09/16 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
小学亲子活动总结
2014/07/01 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2015年计生工作总结范文
2015/04/24 职场文书