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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php array的学习笔记
2012/05/10 PHP
微信API接口大全
2015/04/15 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js自定义事件代码说明
2011/01/31 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
Mac 上切换Python多版本
2017/06/17 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
详细分析Python collections工具库
2020/07/16 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
面试后感谢信怎么写
2014/02/01 职场文书
会计人员岗位职责
2014/03/19 职场文书
管理提升方案
2014/06/04 职场文书
植树节标语
2014/06/27 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2015年司法所工作总结
2015/04/27 职场文书
开工典礼致辞
2015/07/29 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫