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 中的replace方法说明
Apr 13 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
js 操作css实现代码
Jun 11 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
Vue实现Layui的集成方法步骤
Apr 10 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数组是否为空的代码
2011/09/08 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JavaScript数组去重的6个方法
2017/01/21 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
Python中的装饰器用法详解
2015/01/14 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python处理中文标点符号大集合
2018/05/14 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
基于Python实现扑克牌面试题
2019/12/11 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python中pickle模块浅析
2020/12/29 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
德国苹果商店:MacTrade
2020/05/18 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
公司业务主管岗位职责
2013/12/07 职场文书
股东合作协议书
2014/04/14 职场文书
促销活动总结怎么写
2014/06/25 职场文书
经理聘任证明
2015/03/02 职场文书
郭明义观后感
2015/06/08 职场文书