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 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 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
PHP5中MVC结构学习
2006/10/09 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python 全局变量的import机制介绍
2017/09/07 Python
django 常用orm操作详解
2017/09/13 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
高中学生自我评价范文
2014/09/23 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
爱国教育主题班会
2015/08/14 职场文书
六年级作文之自救
2019/12/19 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP