五个有用的jQuery技巧

上一篇 / 下一篇 2012-03-03 16:31:17 / 个人分类：软件开发相关

查看( 276 ) / 评论( 0 ) / 评分( 0 / 0 )

一、字体大小的调整。

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

//check that the DOM is ready
$(document).ready(function() {
//get the current font size
var riginalFontSize = $('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(&quot;contextmenu&quot;,function(e) {                
        //warning prompt - optional 
        alert(&quot;No right-clicking!&quot;); 
                      
        //cancel the default context menu 
        return false; 
    }); 
});

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

五、返回顶部链接

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

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