JS和CSS使用的一些小技巧和问题

定制间隔线

需要上面这样一条虚线,怎么搞?

方法一:

border-top: 1px dashed #eee;

方法二:

//基于渐变
.dash {
        height: 1px;
        background-image: linear-gradient(90deg, #eee 0%, #eee 50%, transparent 50%, transparent 100%);
        background-size: 15px 1px;
        margin: 9px 0;
    }

PS: 看过一篇文章,一位大牛用css渐变写了超级玛丽:链接

append与appendChild

这里说的append是dom的方法,目前处于草案,虽然有很多浏览器支持,但是在开发h5页面时,偶尔还是会有报错,有些极个别浏览器拿不支持。mdn:https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

append的功能和jquery的append没有多大差别。

appendChild这个api是DOM level2的,现在基本所有浏览器都支持的。注意后面appendChild的参数必须是一个节点node

隐藏iframe的src

怎么搞?两种方法:

  1. 可以自己创建一个iframe,然后可以拿到iframe的contentWindow,contentDocument往里面写内容,
  2. 基于form表单的target属性,可以指定一个iframe的name来打开,这样表单提交后的结果会在iframe中展示,而iframe不会回显src的url。
postToIframe: function(iframeName, actionUrl, dataKey, data) {
                var _form = document.createElement("form")
                  , _input = document.createElement("input");
                _form.setAttribute("id", "hideForm"),
                _form.setAttribute("method", "POST"),
                _form.setAttribute("action", actionUrl),
                _form.setAttribute("target", iframeName),
                _input.setAttribute("type", "hidden"),
                _input.setAttribute("name", dataKey),
                _input.value = encodeURIComponent(JSON.stringify(data));
                var o = document.getElementById("hideForm");
                o && document.body.removeChild(o),
                document.body.appendChild(_form), 
                _form.appendChild(r),
                _form.submit() 
}

js设置important的css

function myFunction() {
    var x = document.querySelectorAll("#testDiv p.example");
    x[0].style.setProperty("background-color", "red", "important");
}

注意:直接使用document.querySelector("#xxx").style.marginTop="0 !important"是不行的。不能带后面的!important,只能通过setProperty来实现。

js操作class

function addClass(sel, cls) {
        document.querySelector(sel).classList.add(cls)
}
function removeClass(sel, cls) {
        document.querySelector(sel).classList.remove(cls)
}

classList这个属性是DOM2支持的,包含了add和remove方法。

promise执行then之后的reject

new Promise(function(resolve, reject){
    resolve(Promise.reject(5))
}).then(function(value){
    console.log('fulfill', value)
}, function(reason){
    console.log('reject', reason)
})
// reject 5

上面的大家都知道,那么第二次then会怎样?

new Promise(function(resolve, reject){
    resolve(Promise.reject(5))
}).then(function(value){
    console.log('fulfill', value)
    return 1;
}, function(reason){
    console.log('reject', reason)
    return 2;
}).then(res=>{
    console.log(res) //all gos here
},err=>{
    console.log(err)
})

你会发现,第一次then中的resolve或者reject的返回值都会走到第二次then的resolve。那么怎么走到第二次then的reject呢?

new Promise(function(resolve, reject){
    resolve(Promise.reject(5))
}).then(function(value){
    console.log('fulfill', value)
    return 1;
}, function(reason){
    console.log('reject', reason)
    //1. Promise.reject, goes next then reject
    Promise.reject(1)
    //2. throw Error, go next then reject
    throw new Error("2")
}).then(res=>{
    console.log(res) 
},err=>{
    console.log(err)
})

两种方法,使用Promise.reject 或者抛出一个异常

js 正则表达式判断非法字符 常用正则表达式


var pat=new RegExp("[^a-zA-Z0-9\_\u4e00-\u9fa5]","i"); 	  
var strTest = $("#testId").val();	  
if(pat.test(strTest)==true) 	  { 	      
    showMess("项目名称中含有非法字符"); 	      
    return false; 	  
}

示例其他正则代码:

验证数字的正则表达式集(转载)
验证数字:^[0-9]*$
验证n位的数字:^\d{n}$
验证至少n位数字:^\d{n,}$
验证m-n位的数字:^\d{m,n}$
验证零和非零开头的数字:^(0|[1-9][0-9]*)$
验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数:^\+?[1-9][0-9]*$
验证非零的负整数:^\-[1-9][0-9]*$
验证非负整数(正整数 + 0) ^\d+$
验证非正整数(负整数 + 0) ^((-\d+)|(0+))$
验证长度为3的字符:^.{3}$
验证由26个英文字母组成的字符串:^[A-Za-z]+$
验证由26个大写英文字母组成的字符串:^[A-Z]+$
验证由26个小写英文字母组成的字符串:^[a-z]+$
验证由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串:^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为:以字母开头,长度在6-18之间,只能包含字符、数字和下划线。
验证是否含有 ^%&’,;=?$\” 等字符:[^%&’,;=?$\x22]+
验证汉字:^[\u4e00-\u9fa5],{0,}$
验证Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码:^(\d3,4\d3,4|\d{3,4}-)?\d{7,8}$:–正确格式为:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
验证身份证号(15位或18位数字):^\d{15}|\d{}18$
验证一年的12个月:^(0?[1-9]|1[0-2])$ 正确格式为:“01”-“09”和“1”“12”
验证一个月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为:01、09和1、31。
整数:^-?\d+$
非负浮点数(正浮点数 + 0):^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数(负浮点数 + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)? ——————— 作者:zgcy123456 来源:CSDN 原文:https://blog.csdn.net/zgcy123456/article/details/8912057?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接!

H5页面在 ios 端滑动不流畅没有惯性的问题

在ios 下,只有body的overflow:auto有滑动惯性效果,

其他地方需要添加

-webkit-overflow-scrolling : touch;

知道吗

nodeList 你需要知道的

知识点1: nodeList 在 ie, ios safari 10 之前,chrome 51 之前是不支持forEach方法的。参考: https://developer.mozilla.org/en-US/docs/Web/API/NodeList , 所以新手经常会犯这个错误。直接
document,querySelectorAll("a").forEach(()=>{
    ....
})
然后看到监控平台一堆报错。解决办法:
var list = document.querySelectorAll('input[type=checkbox]');
Array.prototype.forEach.call(list, function (checkbox) {
  checkbox.checked = true;
});
还有暴力的(不推荐):
NodeList.prototype.forEach = Array.prototype.forEach;
知识点2: 

In some cases, the NodeList is live, which means that changes in the DOM automatically update the collection. For example, Node.childNodes 获取到的节点是对真实节点的实时引用(live node):

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // outputs "3"
 document.querySelectorAll() 返回的是执行时获取到的节点信息,是静态引用(节点发生变化,无感知,可以理解成内存中存在的引用),比如节点发生增删,之前返回的节点列表不会变化,所以循环要判空。

babel 打包 展开写法的JS代码的问题

[…document.querySelectorAll(“a”)]  经过babel-env 转义后成为 [].concat(document.querySelectorAll(“a”)),
简直是坑爹。 [0] = NodeList, 另外一种用法使用Array.from(document.querySelectorAll(“a”)) , 这样是把NodeList数据转化成数组。
关于preset,参考:https://babeljs.io/docs/en/env
preset: env 打包后;[].concat(document.querySelectorAll(“a”))
preset: es2015打包后:[].concat(babelHelpers.toConsumableArray(document.querySelectorAll(“a”))
"use strict";

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

[].concat(_toConsumableArray(smth));

从根本上来说不建议这么写 […nodeList] ,最好还是写Array.from( nodeList )。 如果必须这么写,那么配置必须是这样:

presets: [
    "es2015-rollup"
],

如果使用env,那么你就完蛋了,可能就引入了nodeList的bug,不能被concat的。貌似env环境后来去掉了babelHelpers.toConsumableArray的转换,有性能问题。

"presets": [[
                "env",
                {
                    "modules": false,
                    loose: true,
                    exclude: ['transform-es2015-typeof-symbol'],
                    targets: {
                        browsers: ["Android >= 4.4", "ios > 7"]
                    },
                    "useBuiltIns": true
                }
    ]],

webpack的配置类似,这里不说了。

怎么让比例不同的图片都能居中铺满展示,而且缩放比例不变形

不同比例图片铺满展示不变形的几种方法

fed123版权所有,转载请保留出处:前端123学堂 » JS和CSS使用的一些小技巧和问题

赞 (1) 打赏

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏