现在的位置: 首页 > 综合 > 正文

刚学点jQuery

2014年01月16日 ⁄ 综合 ⁄ 共 4223字 ⁄ 字号 评论关闭

<script type="text/javascript" language="javascript">
    //添加Large Print的事件
   /* $(document).ready(function(){
        $('#switcher-default').hide();
        $('#switcher-narrow').hide();
        $('#switcher-large').hide();
        $('#switcher').show();
        //$('#switcher').hide();
        $('#switcher').bind('click',function(){
            $('#switcher').hide();
            $('#switcher-default').show();
            $('#switcher-narrow').show();
           $('#switcher-large').show();
       });
       
       
        $('#switcher-large').bind('click',function(){
            $('body').removeClass('narrow').addClass('large');
        });
        $('#switcher-narrow').bind('click',function(){
            $('body').removeClass('large').addClass('narrow');
           
           
        });
        $('#switcher-default').bind('click',function(){
            $('body').removeClass('large').removeClass('narrow');
        });
        $('#switcher').bind('click',function(){
        $('#switcher').removeClass('selected');
        $('this').addClass('selected');
        });
    });*/
       
       
    //添加选择样式的类 
    /*$(document).ready(function(){
        $('#switcher .button').bind('click',function(){
            $('body').removeClass();
            if(this.id=='switcher-narrow'){
                $('body').addClass('narrow');
            }else if(this.id=='switcher-large')
            {
                $('body').addClass('large');
            }
                $('#switcher .button').removeClass('selected');
                $(this).addClass('selected');
         });
     });*/
    
     $(document).ready(function(){
        $('#switcher .button').click(function(event){
            $('body').removeClass();
            if(this.id=='switcher-narrow'){
            $('body').addClass('narrow');
            }else if(this.id=='switcher-large')
            {
                $('body').addClass('large');
            }
            $('#switcher .button').removeClass('selected');
            $(this).addClass('selected');
            event.stopPropagation();
        });
     });
    
    
    
    
    
        
     /*$(document).ready(function(){
        $('#switcher h3').toggle(function(){
            $('#switcher .button').addClass('hidden');
        },function(){
            $('#switcher .button').removeClass('hidden');
        });
     });*/
    
     //另一种现实和隐藏的实现
     /*$(document).ready(function(){
        $('#switcher').click(function(event){
            if(event.target==this){
                $('#switcher .button').toggleClass('hidden');
            }
        });
     });*/
    
     /*$(document).ready(function(){
        var toggleStyleSwitcher=function(){
            $('#switcher .button').toggleClass('hidden');
        };
        $('#switcher').click(toggleStyleSwitcher);
     });
    
     $(document).ready(function(){
     });*/
    
    
     //.unbind()方法将一种事件类型作为第一个参数,将要移除的函数作为第二个参数  例子在上
     /*$(document).ready(function(){
        var toggleStyleSwitcher=function(){
            $('#switcher .button').toggleClass('hidden');
        };
        $('#switcher').click(toggleStyleSwitcher);
        $('#switcher-narrow,#switcher-large').click(function(){
            $('#switcher').unbind('click',toggleStyleSwitcher);
        });
     });*/
    
     //切换样式转换器的行为当页面加载时会绑定,当单击narrow、large
     //时会接触绑定,当单击default时又会重新绑定
     $(document).ready(function(){
        var toggleStyleSwitcher=function(){
            $('#switcher .button').toggleClass('hidden');
        };
        $('#switcher').click(toggleStyleSwitcher);
        $('#switcher-default').click(function(){
            $('#switcher').click(toggleStyleSwitcher);
        });
        $('#switcher-narrow,#switcher-large').click(function(){
            $('#switcher').unbind('click',toggleStyleSwitcher);
        });
     });
    
    
    
     //加载样式转化器
     $(document).ready(function(){
        $('#switcher').trigger('click');
     });
    
    
    
    
    
     //对于只绑定一次之后就接触绑定的情况
     /*$(document).ready(function(){
        var toggleStyleSwitcher=function(){
            $('#switcher .button').toggleClass('hidden');
        };
        $('#switcher').noe('click',toggleStyleSwitcher);
     });*/
    
    
    
     //设置当鼠标滑过时的样式
     $(document).ready(function(){
        $('#switcher .button').hover(function(){
            $('#switcher .button').addClass('hover');
        },function(){
            $('#switcher .button').removeClass('hover');
        });
     });
        
    </script>

抱歉!评论已关闭.