JQuery 技巧和窍门整理(8个)


Posted in Javascript onApril 22, 2010

1. 新窗口打开链接
XHTML 1.0 Strict 版本不支持 target="_blank" 属性,而使用 JQuery 能很好地解决这个问题,实现新窗口打开网页:

$('a[@rel$='external']').click(function(){ 
this.target = "_blank"; 
}); /* 
Usage: 
<a href="http://www.mangguo.org/" rel="external">mangguo.org</a> 
*/

2. 获得匹配元素的总数
以下代码将返回匹配元素的数目:

$('element').size();

3. 预加载图像
当使用 Javascript 处理图像载入时,可以使用图像实现预加载:

jQuery.preloadImages = function() 
{ 
for(var i = 0; i").attr("src", arguments[i]); 
} 
}; // Usage 
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

4. 检测浏览器
根据不同浏览器加载不同 CSS 能防止因浏览器差异造成的样式表渲染差异,使用 JQuery 可以轻松实现:
//A. Target Safari 
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" ); //B. Target anything above IE6 
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" ); 
//C. Target IE6 and below 
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" ); 
//D. Target Firefox 2 and above 
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

5. 字符串替换
用 JQuery 能对文本内容中的特定字符串进行替换操作:
var el = $('#id'); 
el.html(el.html().replace(/word/ig, ""));

6. 列高度相等
用 CSS 实现两列高度相等并不容易,JQuery 能帮你解决:
function equalHeight(group) { 
tallest = 0; 
group.each(function() { 
thisHeight = $(this).height(); 
if(thisHeight > tallest) { 
tallest = thisHeight; 
} 
}); 
group.height(tallest); 
} /* 
Usage: 
$(document).ready(function() { 
equalHeight($(".recent-article")); 
equalHeight($(".footer-col")); 
}); 
*/

7. 字体大小重设
字体大小重设是一个非常常用的功能:
$(document).ready(function(){ 
// Reset Font Size 
var originalFontSize = $('html').css('font-size'); 
$(".resetFont").click(function(){ 
$('html').css('font-size', originalFontSize); 
}); 
// Increase Font Size 
$(".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 Font Size 
$(".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; 
}); 
});

8. 禁用右键菜单
有许多 JavaScript 代码段可禁用右键菜单,但 JQuery 使操作变得更容易:
$(document).ready(function(){ 
$(document).bind("contextmenu",function(e){ 
return false; 
}); 
});
Javascript 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
js select常用操作控制代码
Mar 16 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 #Javascript
基于jquery的超简单上下翻
Apr 20 #Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 #Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 #Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 #Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 #Javascript
jquery+json 通用三级联动下拉列表
Apr 19 #Javascript
You might like
PHP的开发框架的现状和展望
2007/03/16 PHP
php模板函数 正则实现代码
2012/10/15 PHP
destoon数据库表说明汇总
2014/07/15 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
简述JS控制台的使用
2018/07/15 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
DBA的职责都有哪些
2012/05/16 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
应用电子技术专业个人求职信
2013/09/21 职场文书
策划助理岗位职责
2013/11/18 职场文书
自我评价的写作规则
2014/01/06 职场文书
安全例会汇报材料
2014/08/23 职场文书
升学宴答谢词
2015/01/05 职场文书
学生通报表扬范文
2015/05/04 职场文书
中学推普周活动总结
2015/05/07 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
Python实现byte转integer
2021/06/03 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
css3应用示例:新增的选择器
2022/03/16 HTML / CSS