惯用jquery使用技巧

2012-10-08

常用jquery使用技巧一、ajax的应用$.ajax({url: stat.php,type: POST,data:{Name:keyun},dataType:

常用jquery使用技巧
一、ajax的应用

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

二、禁止鼠标右键

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

三、隐藏搜索框文本

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

四、返回页面顶部

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

五、延时加载功能

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

六、使元素居于屏幕中间

$(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类库

<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>

希望以上内容在大家在JQUERY的日常使用中能够起到一定的作用。

热点排行

Web前端

惯用jquery使用技巧