[分享]五个有用的jQuery技巧

柔光的暖阳◎ 2022-06-14 05:18 226阅读 0赞

**导读：**作为轻量级的JS库，jQuery随着JavaScrīpt脚本的大热而备受Web开发者亲睐。下文里技巧实现的效果虽然并不新鲜，但通过jQuery的封装，HTML实现了很大的清洁。清爽简洁又高效的代码任何时候都是开发者所醉心追求的终极目标，也许它简单，但是它能量巨大。一起来看看Michael Dorf推荐给大家的五个非常实用的jQuery技巧。

这里要介绍jQuery优化系列的五个jQuery技巧，希望能对你有用。

**一、字体大小的调整。**

允许用户在访问站点时能自由地调节页面字体大小，将带来很好的用户体验。下面的代码就是jQuery要告诉我们怎样做到这点的：

//check that the DOM is ready  
        $(document).ready(function() {  
            //get the current font size  
            var originalFontSize = $('html').css('font-size');  
          
            //Increase the font size  
            $(".increaseFont").click(function() {  
                var currentFontSize = $('html').css('font-size');  
                var currentFontSizeNumber = parseFloat(currentFontSize, 10);  
                //increases the font- could be set to a value from   
                //the user as well  
                var newFontSize = currentFontSizeNumber*1.2;  
                $('html').css('font-size', newFontSize);  
                return false;  
            });  
          
            //Decrease the Font Size  
            $(".decreaseFont").click(function() {  
                var currentFontSize = $('html').css('font-size');  
                var currentFontSizeNum = parseFloat(currentFontSize, 10);  
                //decreases font.  Could be set to a value from  
                //the user as well  
                var newFontSize = currentFontSizeNum*0.8;  
                $('html').css('font-size', newFontSize);  
                return false;  
            });  
          
            // Reset Font Size  
            $(".resetFont").click(function(){  
            $('html').css('font-size', originalFontSize);  
          });  
        });

建立增减字体大小的样式。

**二、在新窗口打开链接**

为了让访问者尽量停留在自己的站点上，我们通常会设置在新窗口打开所有外部链接。但在XHTML 1.0中，是没有“\_blank”标签属性的。在这类情况下，使用以下jQuery技巧就可以避免这个问题，并能在新窗口中打开所有外部链接。

//check that the DOM is ready  
        $(document).ready(function() {  
            //select all anchor tags that have http in the href  
            //and apply the target=_blank  
            $("a[href^='http']").attr('target','_blank');  
        });

这样就行了！现在，所有的外部链接都可以从一个新窗口打开，以便用户留在原页面。如果原页面使用了很多外部文档的链接，如PDF或DOC文件，那我们可以创建一些规则以便在新窗口中加载这些文件。

**三、交换样式表**

除了允许访问者改变页面字体大小，还可以允许访问者通过选择不同的页面主题样式来感受不同的页面风格。

//check that the DOM is ready  
        $(document).ready(function() {  
            $("a.cssSwap").click(function() {   
                //swap the link rel attribute with the value in the rel      
                $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));   
            });   
        });

**四、禁用右键**

通常禁用右键是为了防止访问者直接从页面拷贝信息，或者是想创建自己独特的右键功能。当然，不管什么原因，禁用右键可以通过以下代码实现：

//check that the DOM is ready  
        $(document).ready(function() {  
            //catch the right-click context menu  
            $(document).bind("contextmenu",function(e) {                 
                //warning prompt - optional  
                alert("No right-clicking!");  
                               
                //cancel the default context menu  
                return false;  
            });  
        });

jQuery使我们更容易使用右键来对网页进行处理。

**五、返回顶部链接**

如果页面过长，可能通过增加“返回顶部”的链接来使访问者方便地返回页面顶部。这是一个简单的JavaScript效果，我们可以通过jQuery运用滚动效果增添一点点小技巧。

$(document).ready(function() {  
            //when the id="top" link is clicked  
            $('#top').click(function() {  
                //scoll the page back to the top  
                $(document).scrollTo(0,500);  
            }  
        });

对于拥有长页面的站点来说，这真是一个必备功能。

当你成为一个jQuery熟手时，一定会发现更多的诸如此类的开发技巧。加油！