最实用、最常用的jQuery代码片段

  1 // chinacoder.cn JavaScript Document
  2 
  3   $(document).ready(function() {
  4       
  5     //.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素
  6 
  7     // 使用has()来判断一个元素是否包含特定的class或者元素
  8     $("input").has(".email").addClass("email_icon");  
  9     
 10     //使用jQuery切换样式
 11     $("link[media=‘screen‘]").attr(‘href‘, ‘Alternative.css‘); 
 12     
 13     //设置IE指定的功能
 14     if ($.browser.msie) { /*Internet Explorer is a sadist.*/ };
 15     
 16     //创建元素时使用对象来定义属性
 17     var e = $("", { href: "#", class: "a-class another-class", title: "..." }); 
 18     
 19     //使用过滤器过滤多属性
 20     var elements = $(‘#someid input[type=sometype][value=somevalue]‘).get(); 
 21     
 22     //隐藏包含特定值的元素
 23     $("p.value:contains(‘thetextvalue‘)").hide();
 24     
 25     //关闭右键的菜单
 26     $(document).bind(‘contextmenu‘,function(e){ return false; });
 27     
 28     //指定时间后自动隐藏或者关闭元素(
 29     setTimeout(function() { $(‘.mydiv‘).hide(‘blind‘, {}, 500)}, 5000);
 30     //And here‘s how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
 31     $(".mydiv").delay(5000).hide(‘blind‘, {}, 500);
 32     
 33     //元素屏幕居中
 34     jQuery.fn.center = function () {
 35         this.css(‘position‘,‘absolute‘);
 36         this.css(‘top‘, ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + ‘px‘);
 37         this.css(‘left‘, ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + ‘px‘);
 38         return this;
 39      }
 40     //Use the above function as: $(‘#gbin1div‘).center();      
 41       
 42       //使用 jQuery 判断对象是否隐藏
 43        if(!$("#demo").is(":visible")){
 44            
 45        }
 46        if($("#demo2").css("visibility") == "hidden" ){
 47            
 48        }
 49        
 50       //使用 jQuery 重定向页面
 51        window.location.replace("http://www.baidu.com"); 
 52        window.location.href = "http://www.baidu.com" ;
 53        
 54       //Google AJAX 库加载 jQuery 的最好方法
 55        if (typeof jQuery == ‘undefined‘) {
 56           document.write(unescape("%3Cscript src=‘/js/jquery-1.7.2.min.js‘  type=‘text/javascript‘%3E%3C/script%3E"));
 57        } 
 58        
 59       //jQuery实现图片预览
 60       xOffset = 10; 
 61       yOffset = 30; 
 62       $("#imglist").find("img").hover(function(e) { 
 63           $("this.src + "‘ />").appendTo("body"); 
 64           $("#imgshow") .css("top", (e.pageY - xOffset) + "px") 
 65                         .css("left", (e.pageX + yOffset) + "px") 
 66                         .fadeIn("fast"); 
 67         }, function() { 
 68           $("#imgshow").remove(); 
 69       });
 70 
 71       $("#imglist").find("img").mousemove(function(e) { 
 72           $("#imgshow") .css("top", (e.pageY - xOffset) + "px") 
 73                              .css("left", (e.pageX + yOffset) + "px") 
 74       });
 75       
 76       //翻转
 77       $(‘.banner‘).find(‘a‘).hover(function(){
 78           $(this).find(‘.img1‘).stop().animate({‘width‘:0,‘left‘:‘116px‘},110,function(){
 79                $(this).hide().next().show();
 80                $(this).next().animate({‘width‘:‘232px‘ , ‘left‘:‘0‘},110);
 81           });
 82         },function(){
 83           $(this).find(‘.img2‘).animate({‘width‘:0,‘left‘:‘116px‘},110,function(){
 84                $(this).hide().prev().show();
 85                $(this).prev().animate({‘width‘:‘232px‘,‘left‘:‘0px‘},110);
 86           });
 87       });
 88       
 89       
 90        
 91   });
 92   
 93     //插件架构
 94      /*
 95       * jQuery-anipadding-0.1.js
 96       * Copyright (c) 2013 Nicky Yan  http://www.chinacoder.cn
 97       * Date: 2013-11-16
 98       * 使用anipadding可以方便实现动态效果。先提供的功能有划过位移,鼠标移上高亮显示.
 99      */
100     (function($){
101          $.fn.extend({
102               yourname:function(options){
103                   var defaults = {
104                        //参数  参数用逗号隔开
105                   };
106                   var options = $.extend(defaults , options);      //合并多个对象为一个
107                   return this.each(function(){
108                       // var o = options ;
109                       // var obj = $(this);
110                       // var items = $("li a" , obj) ;      
111                       // code    
112                   });              
113               }     
114          });
115     })(jQuery);