JQuery运用技巧

JQuery使用技巧
一、ajax的应用
Java代码  收藏代码

    $.ajax({url: 'stat.php', 
     
    type: 'POST', 
     
    data:{Name:"keyun"}, 
     
    dataType: 'html', 
     
    timeout: 1000, 
     
    error: function(){alert('Error loading PHP document');}, 
     
    success: function(result){alert(result);} 
     
    });  


二、禁止鼠标右键

Java代码  收藏代码

    $(document).ready(function(){  
    $(document).bind("contextmenu",function(e){  
    return false;  
    });  
    });  


三、隐藏搜索框文本

Java代码  收藏代码

    $(document).ready(function() { 
    $("input.text1").val("Enter your search text here"); 
    textFill($('input.text1')); 
    }); 
    function textFill(input){ //input focus text function 
    var originalvalue = input.val(); 
    input.focus( function(){ 
    if( $.trim(input.val()) == originalvalue ){ input.val(''); } 
    }); 
    input.blur( function(){ 
    if( $.trim(input.val()) == '' ){ input.val(originalvalue); } 
    }); 
    }  


四、返回页面顶部

Java代码  收藏代码

    $(document).ready(function() { 
    $('a[href*=#]').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) { 
    var $target = $(this.hash); 
    $target = $target.length && $target 
    || $('[name=' + this.hash.slice(1) +']'); 
    if ($target.length) { 
    var targetOffset = $target.offset().top; 
    $('html,body') 
    .animate({scrollTop: targetOffset}, 900); 
    return false; 
    } 
    } 
    }); 
    // how to use 
    // place this where you want to scroll to 
    <A name=top></A> 
    // the link 
    <A href="#top">go to top</A> 
    });  


五、延时加载功能

Java代码  收藏代码

    $(document).ready(function() { 
    window.setTimeout(function() { 
    // do something 
    }, 1000); 
    });  



六、使元素居于屏幕中间
Java代码  收藏代码

    $(document).ready(function() { 
    jQuery.fn.center = function () { 
    this.css("position","absolute"); 
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
    return this; 
    } 
    $("#id").center(); 
    });  



七、引用google主机上的jquery类库
Java代码  收藏代码

    <SCRIPT src="http://www.google.com/jsapi"></SCRIPT> 
    <SCRIPT type=text/javascript> 
    google.load("jquery", "1.2.6"); 
    google.setOnLoadCallback(function() { 
    // do something 
    }); 
    </SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT> 
    // Example 2:(the best and fastest way) 
    <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>