手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JQuery 技巧和窍门整理(8个)
JQuery 技巧和窍门整理(8个)
摘要:1.新窗口打开链接XHTML1.0Strict版本不支持target="_blank"属性,而使用JQuery能很好地解决这个问题,实现新窗...

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;

});

});

【JQuery 技巧和窍门整理(8个)】相关文章:

jQuery预加载图片常用方法

jquery中添加属性和删除属性

Jquery中基本选择器用法实例详解

JQuery插件jcarousellite的参数中文说明

JavaScript使用技巧精选

jQuery构造函数init参数分析续

JQuery中attr方法和removeAttr方法用法实例

JQuery中层次选择器用法实例详解

jQuery聚合函数实例

全面详细的jQuery常见开发技巧手册

精品推荐
分类导航