8 个很有用的 jQuery 技巧

红薯 发布于 2014/03/02 07:46
阅读 1K+
收藏 59

1) 禁用鼠标右键点击

If you want to save your sites information from users, developers should use this code for disable Right clicking functionality. Using this code, jquery programmers can deactivate right clicking on web pages. Here are the code below: -

$(document).ready(function() {
    //catch the right-click context menu
    $(document).bind("contextmenu",function(e) {                 
        //warning prompt - optional
        alert("No right-clicking!");

        //delete the default context menu
        return false;
    });
});

2) 更改文本字体大小

Using this code, users can re-size(increase and decrease) the text of websites. Users can increase and decrease fonts according to their requirement. Code is here: -

$(document).ready(function() {
    //find the current font size
    var originalFontSize = $('html').css('font-size');

    //Increase the text size
    $(".increaseFont").click(function() {
        var currentFontSize = $('html').css('font-size');
        var currentFontSizeNumber = parseFloat(currentFontSize, 10);

        var newFontSize = currentFontSizeNumber*1.2;
        $('html').css('font-size', newFontSize);
        return false;
    });

    //Decrease the Text 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;
    });

    // Reset Font Size
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
});

3) 在新窗口打开链接

Try this code and increase your site impressions because using this jquery code users will go on new window after clicking on any link of your site. Code is below: -

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

4) CSS 样式切换

Swap style sheets using this code and the “Style sheets swap” script  is below: -

$(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')); 
    }); 
});

5) 返回页面顶部的链接

That is very common function you can see on eve site nowadays is ” Back to Top”. This functionality is very useful for long pages for make short in a single click. Visit this code below: -

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

6) 获取鼠标指针当前的坐标

You can find the values of X and Y coordinator of mouse pointer. Code is blow : -

$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

7) 检测当前鼠标的坐标

Using this script, you can find the current mouse coordinates in the any web browser supported jquery. Code is below: -

$(document).ready(function() {
$().mousemove(function(e)
{
$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});

});

8) 预加载图片

this image preloading script helps to load image or web page very quickly. You not need wait to image load. The code is below:

jQuery.preloadImagesInWebPage = function() 
{
     for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("").attr("src", arguments[ctr]);
}
}
To use the above method, you can use the following piece of code:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
To check whether an image has been loaded, you can use the following piece of code:
$('#imageObject').attr('src', 'image1.gif').load(function() {
alert('The image has been loaded…');
});
via designzum
加载中
1
Spance
Spance
jQuery这个大坑,不知多少人深陷其中不能自拔,被无数个美刀 $不知割去了多少节操。。。
0
依然菜刀
依然菜刀
楼上说的确实会有这个情况,jquery用多了,你会发现原生的js就不怎么会写了
0
产品哥
产品哥
这个不错。
0
蜡笔小新_
蜡笔小新_
我还是偏向写原始的JS,呵呵,虽然JQuery很强大!
0
Mr_Zhou
Mr_Zhou
没看明白 6  和 7  有什么区别。。
0
顺其自然001
顺其自然001
收藏按钮能藏的再隐蔽点么? 找了好几圈。。。。
返回顶部
顶部