pc前端开发小经验

1.先把每个页面的shortcut设置好，还要title属性。
2.在写样式时候有数字的时候需要多考虑如果数字多几位那么样式是否会被改变。
3.$(".login-aside").css("background","url(../../img/login.png) no-repeat");
 这个url的地址是js相对图片的地址
4.
    在html页面上<input type="hidden" name="flag" class="flag" value="true" />
    js代码里面如下：
     var flag = $(".flag").val();
      if(flag=="true"){
          alert("true");
      }else{
          alert("false");
      }
      运行的结果是
      alert（"true"）;
     要是 js代码是：
     var flag = true;这个表示是布尔值，

     if(flag =="true"){
        alert("true");//注意flag是布尔值，可字符串相比较，是不等以的
     }else{
         alert("false");
     }
     运行结果是：
     alert("false")。
     第二种情况是：
     在html页面是<input type="hidden" name="flag" class="flag" value="flase" />，
     在js代码里面：
      var flag = $(".flag").val();
      alert(typeof flag);//这个运行结果是string类型
      if(flag){
          alert("true"); //这个是只要有值就是输出true
      }else{
          alert("false");
      }

     运行结果是：
     alert("true")

5.在用input type=checkbox这个标签时候，需要改变这个打钩的样式和边框的样式，根据是否打钩来判断一定的逻辑处理，那么现在换另外一种方式实现：
<p class="agree">
<span class="agree-span" style="background-color: #00CD98;" id="agree">√</span><a class="green" href="javascript:;"><span class="agree-text">我已阅读并同意</span>钱包用户服务协议</a>
</p>
css样式
.agree{
    margin-top: 1rem;
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
}
.agree .green{
    color:#63C2A1 ;

}
.agree-text{
    color: rgb(120, 120, 120);
}
.agree-span{

    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    line-height: 1.4rem;
    border-radius: 0.9rem;
    border:1px solid #00CD98 ;
    text-align: center;
    color: white;
}
js代码：
/*阅读同意按钮样式控制*/
    var agree = document.getElementById("agree");
    var flag = true;//这个flag就可以判断是否打钩
    agree.onclick=function(){
        if(this.style.backgroundColor == 'rgb(0, 205, 152)'){
            this.style.backgroundColor = 'white';
            $("#agree").html("x");
            flag = false;
        }else{
            flag = true;
            this.style.backgroundColor = '#00CD98';
            $("#agree").html("√");

        }

    };
    运行结果截图：
    ![默认打钩](http://img.blog.csdn.net/20160310152939252)
    ![点击之后不打勾，再次点击就是默认打钩的图片，如此循环](http://img.blog.csdn.net/20160310153009203)