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 相关文章推荐
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
详解TypeScript中的类型保护
Apr 29 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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
AngularJS基础知识
2014/12/21 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python动态参数用法实例分析
2015/05/25 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python写一个md5解密器示例
2018/02/23 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
super关键字的用法
2012/04/10 面试题
就业推荐自我鉴定
2013/10/06 职场文书
技术总监管理职责范本
2014/03/06 职场文书
企业文明单位申报材料
2014/05/16 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
python基础之错误和异常处理
2021/10/24 Python
python自动化测试之Selenium详解
2022/03/13 Python