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 构造函数 面相对象学习必备知识
Jun 09 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
window.onload使用指南
Sep 13 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
基于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中for循环与foreach的区别
2017/03/06 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python如何将多个PDF进行合并
2019/08/13 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python 切分数组实例解析
2019/11/07 Python
Python加速程序运行的方法
2020/07/29 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
Python扫描端口的实现
2021/01/25 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
美国折扣宠物药房:Total Pet Supply
2018/05/27 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
护理专业毕业生自荐信
2014/06/15 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
前台岗位职责范本
2015/04/16 职场文书
色戒观后感
2015/06/12 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS