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

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; }); });

　　推荐阅读

　　js 获取子节点函数 (兼容FF与IE)

复制代码代码如下:function getFirstChild(obj) { var result = obj.firstChild; while (!result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.n>>>详细阅读

本文标题：JQuery 技巧和窍门整理(8个)

地址：http://www.17bianji.com/kaifa2/JS/26570.html

1/2 1