jquery 应用.

青旅半醒 2022-08-07 02:55 116阅读 0赞

一、ajax的应用

Java代码 [![复制代码][1465640203732860551.jpg]][1465640203732860551.jpg 1]  ![收藏代码][5772207347405949637.jpg]![jquery 应用. - zhou8622 - zhou8622的博客][jquery _. - zhou8622 - zhou8622]

1.  $.ajax(\{url: 'stat.php',   
2.    
3.  type: 'POST',   
4.    
5.  data:\{Name:"keyun"\},   
6.    
7.  dataType: 'html',   
8.    
9.  timeout: 1000,   
10.   
11. error: function()\{alert('Error loading PHP document');\},   
12.   
13. success: function(result)\{alert(result);\}   
14.   
15. \});

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

二、禁止鼠标右键

1.  $(document).ready(function()\{    
2.  $(document).bind("contextmenu",function(e)\{    
3.  **return** **false**;    
4.  \});    
5.  \});

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

三、隐藏搜索框文本

1.  $(document).ready(function() \{   
2.  $("input.text1").val("Enter your search text here");   
3.  textFill($('input.text1'));   
4.  \});   
5.  function textFill(input)\{ //input focus text function   
6.  var originalvalue = input.val();   
7.  input.focus( function()\{   
8.  **if**( $.trim(input.val()) == originalvalue )\{ input.val(''); \}   
9.  \});   
10. input.blur( function()\{   
11. **if**( $.trim(input.val()) == '' )\{ input.val(originalvalue); \}   
12. \});   
13. \}

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

四、返回页面顶部

1.  $(document).ready(function() \{   
2.  $('a\[href\*=\#\]').click(function() \{   
3.  **if** (location.pathname.replace(/^\\//,'') == this.pathname.replace(/^\\//,'')   
4.  && location.hostname == **this**.hostname) \{   
5.  var $target = $(**this**.hash);   
6.  $target = $target.length && $target   
7.  || $('\[name=' + **this**.hash.slice(1) +'\]');   
8.  **if** ($target.length) \{   
9.  var targetOffset = $target.offset().top;   
10. $('html,body')   
11. .animate(\{scrollTop: targetOffset\}, 900);   
12. **return** **false**;   
13. \}   
14. \}   
15. \});   
16. // how to use   
17. // place this where you want to scroll to   
18. <A name=top></A>   
19. // the link   
20. <A href="\#top">go to top</A>   
21. \});

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

五、延时加载功能

1.  $(document).ready(function() \{   
2.  window.setTimeout(function() \{   
3.  // do something   
4.  \}, 1000);   
5.  \});

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

六、使元素居于屏幕中间

1.  $(document).ready(function() \{   
2.  jQuery.fn.center = function () \{   
3.  **this**.css("position","absolute");   
4.  **this**.css("top", ( $(window).height() - **this**.height() ) / 2\+$(window).scrollTop() + "px");   
5.  **this**.css("left", ( $(window).width() - **this**.width() ) / 2\+$(window).scrollLeft() + "px");   
6.  **return** **this**;   
7.  \}   
8.  $("\#id").center();   
9.  \});

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

1.  <SCRIPT src="[http://www.google.com/jsapi][http_www.google.com_jsapi]"></SCRIPT>   
2.  <SCRIPT type=text/javascript>   
3.  google.load("jquery", "1.2.6");   
4.  google.setOnLoadCallback(function() \{   
5.  // do something   
6.  \});   
7.  </SCRIPT><SCRIPT src="[http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js][http_ajax.googleapis.com_ajax_libs_jquery_1.2.6_jquery.min.js]" type=text/javascript></SCRIPT>   
8.  // Example 2:(the best and fastest way)   
9.  <SCRIPT src="[http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js][http_ajax.googleapis.com_ajax_libs_jquery_1.2.6_jquery.min.js]" type=text/javascript></SCRIPT>

[1465640203732860551.jpg]: http://img.bimg.126.net/photo/5CpBX9vml1lCF-sbywLHHg==/1465640203732860551.jpg
[1465640203732860551.jpg 1]: http://www.iteye.com/topic/1114643#
[5772207347405949637.jpg]: http://img.bimg.126.net/photo/Ta7Rv3t_9JT40lkMQZUD5Q==/5772207347405949637.jpg
[jquery _. - zhou8622 - zhou8622]: http://img.bimg.126.net/photo/TUtnnA675w_hQvq5jMP5RA==/5775022097173064732.jpg
[http_www.google.com_jsapi]: http://www.google.com/jsapi
[http_ajax.googleapis.com_ajax_libs_jquery_1.2.6_jquery.min.js]: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js