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 相关文章推荐
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
微信小程序实现禁止分享代码实例
Oct 19 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应用技巧
2008/03/27 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python 专题四 文件基础知识
2017/03/20 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
利用python生成照片墙的示例代码
2020/04/09 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
产品推广策划方案
2014/05/10 职场文书
2014高考励志标语
2014/06/05 职场文书
大学生就业自荐书
2014/06/16 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
如何写新闻稿
2015/07/18 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python