您好,欢迎访问一九零五行业门户网

JQuery 技巧和窍门整理(8个)_jquery

1. 新窗口打开链接
xhtml 1.0 strict 版本不支持 target=_blank 属性,而使用 jquery 能很好地解决这个问题,实现新窗口打开网页:
复制代码 代码如下:
$('a[@rel$='external']').click(function(){
this.target = _blank;
});
/*
usage:
mangguo.org
*/
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
//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;
});
});
其它类似信息

推荐信息