jQuery - 锋利的 jq 使用技巧

1 . 根据浏览器大小添加不同样式

// 根据浏览器大小添加不同的样式
                function checkWindowSize(){
                    if( $(window).width() > 1200 ){
                        $('body').css({'background-color':'red'});
                    }else{
                        $('body').css({'background-color':'blue'});
                    }
                }
                
                // 屏幕缩放的时候调用
                $(window).resize(checkWindowSize);
                
                // 触发调用
                $(window).trigger('resize');

 

2. 设置 div 在屏幕中央

                  // 设置 div 在屏幕中央
                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;
                }
                
                $('#xinlang').center();
                
                $(window).resize(function(){
                    $('#xinlang').center();
                });

 

3. 切换复选框

                   // 切换复选框
                var tog = false;
                $('#iss').on('click',function(){
                    $('input[type=checkbox]').prop('checked',!tog);
                    tog = !tog;
                });

 

4. $.proxy() 的使用

               <div id="panel" style="display:none;">
                    <button>Close</button>
                    panel
                </div>
                
                $('#panel').fadeIn(function(){
　　　　　　　　　　　　// 使用 $.proxy()
                    $('#panel button').click($.proxy(function(){
                        $(this).fadeOut();
                    },this));
                });