idong常用js总结

1.判断屏幕高度

$(document).ready(function() {
    $("#left").height($(window).height());
    $("#main").height($(window).height() - 80);
    //t = (screen.height - 30)  
});

2.下拉框选中内容替换原有文字(类似城市切换)

$(".display ul li").click(function() {
            $(".display").hide();
            $(".xzsj span").empty().prepend($(this).text());
});

3.简单开关按钮

     <p class="sexp" style="width: 150px">
            <span class="sex boy activesex">男</span>
            <span class="sex">女</span>
        </p>

  $('.sex').click(function(){
                    $(this).removeClass('activesex');
                    $(this).addClass('activesex').siblings('span').removeClass('activesex');
                })
  3.增加id

  $(".tab ul li").click(function(){
         $(".tab ul li").eq($(this).index()).attr('id',"active_tab").siblings().removeAttr('id','active_tab');
       //另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on');

        });

4.children parent用处多多

$('.boxlist1').mouseover(function(){
   $(this).children('.listdetail').children('.rightbj').css('display','block');
});
$('.boxlist1').mouseout(function(){
     $(".rightbj").hide();
});

 

    $('.hover_bj').mouseover(function(){
                    $(this).children('.xiugai').css('display','block');
                });
                $('.hover_bj').mouseout(function(){
                    $(this).children('.xiugai').css('display','none');
                    
                })

5.判断

 if ($(this).text()=="月报") {
      $(".selectzcfz").show();
         
     } else{
          $(".selectzcfz2").show();
          $(".selectzcfz").hide();
     }
6.   判断当前样式如果是a,则b隐藏,如果是b,则a隐藏

    <script>
                $(function(){
                    $('a').click(function(){
                        if($(this).hasClass('close')){
                            $(this).css('display','none');
                            $(this).siblings('a').css('display','inline');
                            
                        }else if($(this).hasClass('open')){
                            $(this).css('display','none');
                            $(this).siblings('a').css('display','inline');
                        }
                    })
                })
            </script>

7.切换按钮

$('.yiqiyong').click(function() {
    $(this).toggleClass('yiqiyong');
    $(this).toggleClass('yijinyong');
});

你可能感兴趣的:(js)