前端小白页面开发注意事项及小工具

最新推荐文章于 2024-07-18 12:01:28 发布

dianjiao8565

最新推荐文章于 2024-07-18 12:01:28 发布

阅读量161

点赞数 1

文章标签：前端后端 php ViewUI

原文链接：http://www.cnblogs.com/lisaShare/p/10328198.html

版权

HTML

1. HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
说明：class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

CSS

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual

说明：
（1）由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。
（2）盒模型排在第二位，因为它决定了组件的尺寸和位置。
（3）其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

声明样式

class 命名

规范：
（1）class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。
（2）避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
（3）class 名称应当尽可能短，并且意义明确。
（4）使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
（5）基于最近的父 class 或基本（base） class 作为新 class 的前缀。
（6）使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

1. 垂直水平居中，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法：

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

2. CSS/JS解决页面多次点击时出现部分蓝色（注：如果使用复制功能这个属性会影响）

CSS：html, body{
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}

JS：document.body.onselectstart = document.body.ondrag = function() {return false;}
但是IE6-IE9还没有相关的CSS属性，需要用上面的js才能实现，引入的时候我们需要做一个浏览器版本的判断，是IE6－IE9这几个浏览器才引入上面这一段js，其他的无需引入，因为用css就可以了。

3. CSS单行文本溢出省略显示

    width: abc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

4. CSS布局英文不能折行

    word-break:break-all;
    word-wrap:break-word;

5. 布局注意缺省图片

background:

6. 布局中考虑字数过多的情况

7. input 默认选框更改大小

   input[type=checkbox] {
        -ms-transform: scale(1.5); 
        -moz-transform: scale(1.5); 
        -webkit-transform: scale(1.5);
        -o-transform: scale(1.5); 
    }

8. 输入框大写、小写转换属性

text-transform: uppercase; 
text-transform: capitalize ; 
text-transform: lowercase;

9. css绘制三角形

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>三角形</title>
    <style>
        div{
            width:0;height:0;
            border: 20px solid;
            /*平分效果*/
            border-color:red green blue black;
            /*单个三角形*/
            /*border-color:transparent transparent lightgreen transparent;*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

10. 使用 :not() 选择器来决定表单是否显示边框，更加清晰，具有可读性

/* 添加边框 */
.nav li{border-right:1px solid #666;}
/* 为最后一个去除边框 */
.nav li:last-child{border-right:none;}
/* 使用这种写法 */
.nav li:not(:last-child){border-right:1px solid #666;}
/* 选择除前3个之外的所有项目，并显示它们 */
li:not(:nth-child(-n+3)) {display: none;}

JS

1. js检测输入框是否含有emoji表情（移动端比较常见）

var param = document.getElementById(id).value; 
var regRule = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g; 
if(param.match(regRule)) { 
    param = param.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, “”); 
    alert(“不支持表情”); 
}

PHP后端代码
function have_emoji($str){
    $mat = [];
    preg_match_all('/./u', $str,$mat);
    foreach ($mat[0] as $v){
        if(strlen($v) > 3){return true;}
    }
    return false;
}

2. html input的type设置为number后可以输入e

正常情况下e不是数字所以不能被输入，原因是e在数学上代表2.71828182845904523536，所以它也还是一个数字

//加上这段代码
<input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' />

3. js中获得当前时间是年份和月份

js中获得当前时间是年份和月份，形如：201208
      
 //获取完整的日期
 var date=new Date;
 var year=date.getFullYear(); 
 var month=date.getMonth()+1;
 month =(month<10 ? "0"+month:month); 
 var mydate = (year.toString()+month.toString());

注意，year.toString()+month.toString()不能写成year+month。不然如果月份大于等于10，则月份为数字，会和年份相加，如201210，则会变为2022，需要加.toString()

以下是搜到的有用内容：

var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

4. 截取字符长度，多余用...表示

function sliceStr(str, count){
      if( str && str.length > count ){
          str = str.substr(0, count);
          return str + '...';
      }
      return str;
}

5. 表单监控input是否输入值,清空msg提示

$("#g-name").on('input propertychange',function() {
    $('.msg-box').text("");
});

6.随机数

function randomInt( min,max ){
    if( min>max ){var t=min;min=max;max=t;}
    return Math.floor(   Math.random()*( max-min+1 )+min  )  
}

## JQ

如何获取动态添加的dom

var $dom = $("body").find("select");
动态加载的dom你不能直接获取，因为直接获取找不到的，要从已经存在于页面的元素获取那个动态加载的dom元素才行！

未完待续

转载于:https://www.cnblogs.com/lisaShare/p/10328198.html