开发备忘

HTML

form表单中的button标签如果没有设置type属性，那么默认属性为submit，点击后会发生页面刷新，如果不需要页面刷新，应设置type为button；
textarea标签书写时不要有空格或者换行，否则在获得焦点的时候光标无法在开始的位置，用户体验很不好；
注意嵌套规则，当把div嵌套在p标签里时，div会自动跑到p标签的外面 ，有几个特殊块级元素只能包含内联元素，不能包含块级元素。这几个特殊标签是 h1~h6、p、dt，行内块可以嵌套块级元素；
查看公众号二维码在地址栏输入： open.weixin.qq.com/qr/code/?username=微信号
360浏览器默认使用极速模式

<meta name="renderer" content="webkit">

网页内嵌腾讯视频需要在服务器环境下运行

<object>
<param name="autostart" value="true">
<param name="movie" value="http://cache.tv.qq.com/qqplayerout.swf?playertype=4&v=p0024bgbsyk">
<param name="allowFullScreen" value="true">
<param name="wmode" value="opaque">
<param name="allowScriptAccess" value="always">
<param name="allownetworking" value="all">
<embed width="780" height="500" class="blog_video" id="blog_video_1479535406954" src="http://cache.tv.qq.com/qqplayerout.swf?playertype=4&auto=0&v=p0024bgbsyk" type="application/x-shockwave-flash" data-playtime="" data-mp4="" data-coverwidth="" data-coverheight="" data-vid="" data-duration="" data-type="" allownetworking="all" allowscriptaccess="always" enablecontextmenu="False"></embed> 
</object>

输入框的defaultValue属性可获取初始值，可以把用户的输入值和初始值进行对比，然后做事

JS

阻止冒泡：http://caibaojian.com/javascript-stoppropagation-preventdefault.html
* 加载更多内容方法

function loadMore(){
   $.ajax({
      type: "post",
      contentType: "application/json",
      url: "index.json",
      beforeSend: function () {
         $(".loading").show();
      },
      success: function (data) {
         $("#Items").append("<div class='more'></div>");
         var lastDiv = $(".more:last")//chose last div has class more
         $(lastDiv).setTemplateElement("Template-Items").processTemplateURL("index.json");
      },
      complete: function () {
         $(".loading").hide();
      },
      error: function (data) {
         console.info("error: " + data.responseText);
      }
   });
}

/*
 * 价格保留2位小数
 * @param price 用户输入的价格
 */
float_num2: function(price){
    var f_x = parseFloat(price);
    if (isNaN(f_x)){
          return 0;
        }
    var f_x = Math.round(price * 100) / 100;
    var s_x = f_x.toString();
    var pos_decimal = s_x.indexOf('.');
    if (pos_decimal < 0){
      pos_decimal = s_x.length;
      s_x += '.';
    }
    while (s_x.length <= pos_decimal + 2){
      s_x += '0';
    }
    return s_x;
},

/* 模拟点击a标签打开新窗口 */
 var a = $("<a href='http://www.test.com' target='_blank' >test</a>").get(0);
 var e = document.createEvent('MouseEvents');
     e.initEvent('click', true, true);
     a.dispatchEvent(e);

/* return的用法 */
'1.用于结束当前函数，并返回函数的值，
    return相当于return null 
    return false 阻止默认行为，如a标签跳转和form表单提交
    return true 结束函数并不阻止默认行为
 2.用在$.each()中，return fasle 结束each遍历，如果没有fasle，那么只结束当前遍历函数，进入下一次遍历
 3.return 后面可以写多个表达式，返回值取最后一个表达式的值
     return console.log("1"),alert("2"),!1; 返回值为最后一个表达式'

/* new Date 设置时间（一个是0点，一个是8点开始） */
var t2 = new Date("2017-06-07")
// Wed Jun 07 2017 08:00:00 GMT+0800 (中国标准时间)

var t3 = new Date("2017,06,07")
// Wed Jun 07 2017 00:00:00 GMT+0800 (中国标准时间)

var t5 = new Date(2017,5,7)
// 如果未加引号，月份需要减1

// 获取当前时间 （年月日时分秒） 在input中显示 "2017-09-27 17:53:26"
// html代码 <input type="" id="clock" name="" value="">
function getNowDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }

    var h = date.getHours();
    if (h >= 0 && h < 10) {
        h = "0" + h;
    }
    var m = date.getMinutes();
    if (m >= 0 && m <= 9) {
        m = "0" + m;
    }
    var s = date.getSeconds();
    if (s >= 0 && s <= 9) {
        s = "0" + s;
    }

    return date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + h + seperator2 + m + seperator2 +  s;
}

function clock() {
    var t = getNowDate()
    document.getElementById("clock").value = t
}
var int = setInterval("clock()", 1000)

// 获取标签名称 input系列属性-复选框选中状态判断 
// JQ1.6之后，可以通过attr方法去获得属性，通过prop方法去获得特性;
$("#cb").attr("tagName"); //undefined   
$("#cb").prop("tagName"); //INPUT 

//获取是否选中   
var isChecked = $('#cb').prop('checked');   
//或   
var isChecked = $('#cb').is(":checked");   

//设置选中   
$('#cb').prop('checked',true); 

//获取选中的下拉选项 
jQuery("#select1  option:selected").text();

/**
* 复制操作人姓名和ID
* @param ID 待填充的下拉选择框ID "#XX"
*/
cloneOp:function(id){
 $(id).empty();        
 $('复制源的元素选择器').each(function(){ 
var oValue = $(this).val().toString(); 
        var oText = $(this).text().toString(); 
        $(id).append("<option value='"+oValue+"'>"+oText+"</option>");
    });
 $(id).children("option[value="+ $('#current_userid').val()+"]").attr("selected","selected");//设置为当前登录操作人
},

/* 数组转字符串 toString() 方法：会以逗号分隔的字符串形式返回数组项。 */
var arr = [1, 2 ,3, 4];
var str = arr.toString(); //"1,2,3,4"

/* join() 方法：只接受一个参数，即用作分隔符的字符串。会返回以传入分隔符来分隔的字符串形式，如果不传入参数或者传入 undefined ，则与 toString() 方法效果一样。 */
var arr = [1, 2 ,3, 4];
var str1 = arr.join();    //"1,2,3,4"
var str2 = arr.join("|"); //"1|2|3|4"
var str3 = arr.join("");  // "1234"

/* 字符串转数组 split() 方法：基于指定的分隔符将一个字符串分隔成多个子字符串，并将结果放在一个数组中返回。可以接受第二个可选的参数用于指定返回的数组大小。如果不指定分隔符，则将整个字符串放入数组中返回。*/

var colorText = "red,blue,green,yellow"
var colors1 = colorText.split(","); //["red","blue","green","yellow"]
var colors2 = colorText.split(",", 2); //["red","blue"]
var colors3 = colorText.split(); //["red,blue,green,yellow"]

 // 显示和关闭导航 注意点：阻止事件冒泡
 $("#menu").on("click", function (e) {
     $("#navList").slideToggle(400);
     $(document).on("click", function () {
         $("#navList").slideUp(400);
     });
     e.stopPropagation();
 });
 $("#navList").on("click", function (e) {
     e.stopPropagation();
 });

// 比较两个时间的大小
var yzstart_date="2017-10-24";
var yzend_date="2017-10-24";
if(new Date(yzstart_date.replace(/-/g, "/")).getTime()>new Date(yzend_date.replace(/-/g, "/")).getTime()){
  console.log("开始时间不能大于结束时间！");         
}else{
  console.log("ok")
}
// 发送Ajax请求时获取指定的URL地址
function (){
    var url = window.location.protocol +"//" + window.location.host + "/" + "子域名/";     
    return url;
}

//解决bootstrap时间控件 - 连续点击输入框时不弹出日期控件
$('.datetime_ymd').bind('click.myDatetimepicker',function(){         
     $(this).focus();               
})

jQuery

/* 使用JQ的动画时，需要加上stop(),防止重复和延迟 */
$("el").stop().fadeIn();

/* 让页面回到顶部，使用#相当于重新载入页面，需要平滑滚动时用scrollTo() */
//IE和火狐不支持body的scroll，而支持html的scroll

$("body,html").stop().animate({scrollTop:0},300);

/* JQ绑定多个事件写法，对象的形式 */
$("#box").on({
    click:function(){
        console.log("click");
    },
    mouseleave:function(){
        console.log("mouseleave")
    }
})

// 让页面中的某个输入框获得焦点 
setTimeout( function(){
  try{
    document.getElementById('userName').focus();
  } catch(e){}
}, 200);

//"yyyy-mm-dd" 格式的日期校验，已考虑平闰年。
var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/

CSS

/* CSS3禁用点击事件属性 */
.disabled { 
    pointer-events: none; 
}

/* honver时改变其它元素样式（sass语法） */
&:hover {
  .introduction_title {
        color: #069DFF;
    }
}
/* 子元素垂直水平居中flex方案1 */
.box{
    width: 60%;
    height: 600px;
    display: flex;
    margin: 0;
    border: 1px  solid #ccc;
}
.subbox{
    width: 300px;
    height: 300px;
    background-color: #ccc;
    margin: auto;
}

/* 子元素垂直水平居中flex方案2 */
.box{
    width: 60%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;    
}

/* 子元素垂直水平居中transform + absolute方案 */
.box {
    position: relative;
  >.subbox {       
    position: absolute;
    top: 50%;
    left: 50%;
    /* 尽可能的不要让该元素的宽度或者高度出现奇数，否则可能会导致模糊 */
    transform: translate(-50%, -50%);    
  }
}

/* 子元素垂直水平居中margin + absolute方案 */
.box {
    position: relative;
  >.subbox {     
    position: absolute;
    top: 50%;
    left: 50%;
    width:1000px; 
    margin-left: -500px;/* 适用于尺寸固定的元素 */
  }
}

/* 为table设置table-layout属性后，单元格的宽度不再根据其内容进行调整，给th/td标签设置的宽度就起作用了 */
table {
 table-layout: fixed;
 width: 100%;
}

/* 自定义input输入框光标样式  */
input,textarea {
    caret-color: #80D480;
 }

/* 单行溢出省略显示  */
.overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行行溢出省略显示  */
.overflow{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* 设定显示的行数 */
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* 设置文本不能被选中 */
.disabled-sel{
  user-select: none; 
}

/*  :required 伪类指定具有required 属性的表单元素
    :valid 伪类指定一个通过匹配正确的所要求的表单元素
    :invalid 伪类指定一个不匹配指定要求的表单元素
 */
textarea:invalid {
    border-color: #D61D1D;
    box-shadow: inset 5px 0 0 #D61D1D;/* 实现单侧边框变宽效果 */
}

/* 改变浏览器文本选中色 */
::selection {
   color: #fff;
     background-color: #6bc30d;
 }

/* ::placeholder修饰input的placeholder属性的样式 */
input::-webkit-input-placeholder{
    color: #f00;
}
input::-moz-placeholder{
     color: #f00;
}
input:-ms-input-placeholder{
     color: #f00;
}

/* 消除inline-block的默认空隙 */
.father{
    font-size:0; /* inline-block容器，例：li标签没有用浮动就可以用这个 */
    .son{
        font-size:16px; /* 内容区域 */
    }
}

/* 改变浏览器默认滚动条 */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-button {
    width: 8px;
    height:5px;
}
::-webkit-scrollbar-track {
    background:#eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px #dfdfdf inset;
    border-radius:10px;
}
::-webkit-scrollbar-thumb {
    background:#999;
    border: thin solid gray;
    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
    background:#7d7d7d;
}

/* 块级元素默认宽度继承100%；但是当使用了定位后，宽度不再继承父元素的，所以必须手动设置宽高 */

/* 制作箭头导航 */
.flow-item {
     float: left;
     width: 16.66667%;
     max-width: 180px;
     text-align: center;
     margin-bottom: 9px;
     padding-right: 2px;
 }

 .flow-item>div {
     position: relative;
     padding: 5px 0 5px 12px;
     line-height: 20px;
     background: #90A4AE;
     white-space: nowrap;
     overflow: visible;
     color: #fff;
 }

 .flow-item>div:before,
 .flow-item>div:after {
     content: ' ';
     display: block;
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 15px 0 15px 15px;
     border-color: transparent transparent transparent #90A4AE;
     position: absolute;
     left: 0;
     top: 0
 }      
 .flow-item>div:before {
     border-left-color: #fff;
     z-index: 1
 }

 .flow-item>div:after {
     left: auto;
     right: -14px;
     z-index: 2
 }

 .flow-item-0>div:before {
     display: none
 }

 .flow-item-1>div {
     background: #1976D2
 }

 .flow-item-1>div:after {
     border-left-color: #1976D2
 }

 .flow-item-2>div {
     background: #4CAF50
 }

 .flow-item-2>div:after {
     border-left-color: #4CAF50
 }

 .flow-item-1>div:hover {
     background: #1565C0
 }

 .flow-item-1>div:hover:after {
     border-left-color: #1565C0
 }

 .flow-item-2>div:hover {
     background: #43A047
 }

 .flow-item-2>div:hover:after {
     border-left-color: #43A047
 }

</style>
<div class="flow-item flow-item-0">
     <div>主页</div>
</div>
<div class="flow-item flow-item-1">
     <div>导航一</div>
</div>
<div class="flow-item flow-item-2">
     <div>导航二</div>
</div>

CSS选择器
:empty 选择器匹配没有子元素(包括文本节点)的每个元素

li:not(:last-child)::after {
  content: attr(data-msg);/* 可以获取元素的自定义属性*/
}

body{
-webkit-overflow-scrolling: touch; /* 兼容移动端滚动条流畅ios5+ */
}
/* 让最外层的容器高度100% body和html无需设置高度100% */
#container {
  margin: 0 auto;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  min-width: 1280px;
  min-height: 730px;
  background: #2d373c;
}

编辑器

vscode 生成测试文本 Lorem

HTML

JS

jQuery

CSS

编辑器

猜你喜欢