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 json 新手入门文档
Dec 03 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
angularjs实现猜大小功能
Oct 23 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
超级酷和最实用的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 截取字符串专题集合
2010/08/19 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP7新增函数
2021/03/09 PHP
常用js脚本
2006/12/03 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
js的回调函数详解
2015/01/05 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
Python 函数返回值的示例代码
2019/03/11 Python
python实现加密的方式总结
2020/01/19 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
python能自学吗
2020/06/18 Python
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
前台接待员岗位职责
2015/04/15 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书