常用jquery使用技巧

一、ajax的应用

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. });   
    
16. 
    
17. $.ajax({url: 'stat.php',
    
18. 
    
19. type: 'POST',
    
20. 
    
21. data:{Name:"keyun"},
    
22. 
    
23. dataType: 'html',
    
24. 
    
25. timeout: 1000,
    
26. 
    
27. error: function(){alert('Error loading PHP document');},
    
28. 
    
29. success: function(result){alert(result);}
    
30. 
    
31. });

复制代码

二、禁止鼠标右键

1. $(document).ready(function(){   
   
2. $(document).bind("contextmenu",function(e){   
   
3. return false;   
   
4. });   
   
5. });   
   
6. 
   
7. $(document).ready(function(){
   
8. $(document).bind("contextmenu",function(e){
   
9. return false;
   
10. });
    
11. });

复制代码

三、隐藏搜索框文本

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. }   
    
14. 
    
15. $(document).ready(function() {
    
16. $("input.text1").val("Enter your search text here");
    
17. textFill($('input.text1'));
    
18. });
    
19. function textFill(input){ //input focus text function
    
20. var originalvalue = input.val();
    
21. input.focus( function(){
    
22. if( $.trim(input.val()) == originalvalue ){ input.val(''); }
    
23. });
    
24. input.blur( function(){
    
25. if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
    
26. });
    
27. }

复制代码

四、返回页面顶部

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. });   
    
22. 
    
23. $(document).ready(function() {
    
24. $('a[href*=#]').click(function() {
    
25. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    
26. && location.hostname == this.hostname) {
    
27. var $target = $(this.hash);
    
28. $target = $target.length && $target
    
29. || $('[name=' + this.hash.slice(1) +']');
    
30. if ($target.length) {
    
31. var targetOffset = $target.offset().top;
    
32. $('html,body')
    
33. .animate({scrollTop: targetOffset}, 900);
    
34. return false;
    
35. }
    
36. }
    
37. });
    
38. // how to use
    
39. // place this where you want to scroll to
    
40. <A name=top></A>
    
41. // the link
    
42. <A href="#top">go to top</A>
    
43. });

复制代码

五、延时加载功能

1. $(document).ready(function() {   
   
2. window.setTimeout(function() {   
   
3. // do something   
   
4. }, 1000);   
   
5. });   
   
6. 
   
7. $(document).ready(function() {
   
8. window.setTimeout(function() {
   
9. // do something
   
10. }, 1000);
    
11. });

复制代码

六、使元素居于屏幕中间

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. });   
   
10. 
    
11. $(document).ready(function() {
    
12. jQuery.fn.center = function () {
    
13. this.css("position","absolute");
    
14. this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    
15. this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    
16. return this;
    
17. }
    
18. $("#id").center();
    
19. });

复制代码

七、引用google主机上的jquery类库

1. <SCRIPT src="[img]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="[img]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="[img]http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>   
   
10. 
    
11. <SCRIPT src="[img]http://www.google.com/jsapi"></SCRIPT>
    
12. <SCRIPT type=text/javascript>
    
13. google.load("jquery", "1.2.6");
    
14. google.setOnLoadCallback(function() {
    
15. // do something
    
16. });
    
17. </SCRIPT><SCRIPT src="[img]http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>
    
18. // Example 2:(the best and fastest way)
    
19. <SCRIPT src="[img]http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>

复制代码

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

建议使用最新的1.6.2,
不过你的某些功能在1.6.2下可能无法使用

BoneWG 写道
建议使用最新的1.6.2,
不过你的某些功能在1.6.2下可能无法使用


谢谢了。还没注意版本问题，后续会注意的

谢谢，提供资源。

就是不少了点啦，呵

不错，，谢谢分享

第6个有问题。

如果元素在body下面没有问题。
如果元素的祖先中没有position不是static的元素也没问题。（没设置相当于static）
如果元素的祖先中有position不是static的元素则会有问题的。