前端开发小技术点记录（很实用）_前端分享小技术或者小效果

作者：繁依Fanyi0 | 2024-02-23 05:49:28

踩

前端分享小技术或者小效果

说明

有些常用的小技术点，长时间不用会遗忘，重新写又有点浪费时间，所以想记录下来方便查询，也能给其他同学一些帮助

技术点记录

1、获取A元素下的所有子元素（包括A元素本身）

$(".classA > .classB").prop("outerHTML")；

2、获取A元素下的所有子元素（不包括A元素本身）

$(".classA > .classB").html()；

3、获取A元素下的第一个子元素

$("#a").children(":first"); || $("#a").children().eq(0);

4、jQuery删除table中第一个 tr 以下的 tr

$("table tr:gt(0)").remove();

5、div水平垂直居中方法

position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);

6、序号和文字内容顶部对齐，文字内容左对齐排列


<p style="text-indent:0;">
    <span style="display: inline-block;vertical-align: top;width: 21px;">一．</span>
    <span style="font-family:宋体;display: inline-block;width: 96%;">XXXXXXX</span>
</p>

7、当图片没有加载出来之前，或者路径错误时，显示一张默认图片

8、JS浮点数计算精度缺失解决（摘自：js浮点数字计算精度缺失问题解决方法 – CrazyMing）

formatFloat(arg1,arg2){
               var r1, r2, m, c;
               try {
                   r1 = arg1.toString().split(".")[1].length;
               } catch (e) {
                   r1 = 0;
               }
               try {
                   r2 = arg2.toString().split(".")[1].length;
               } catch (e) {
                   r2 = 0;
               }
               c = Math.abs(r1 - r2);
               m = Math.pow(10, Math.max(r1, r2));
               if (c > 0) {
                   var cm = Math.pow(10, c);
                   if (r1 > r2) {
                       arg1 = Number(arg1.toString().replace(".", ""));
                       arg2 = Number(arg2.toString().replace(".", "")) * cm;
                   } else {
                       arg1 = Number(arg1.toString().replace(".", "")) * cm;
                       arg2 = Number(arg2.toString().replace(".", ""));
                   }
               } else {
                   arg1 = Number(arg1.toString().replace(".", ""));
                   arg2 = Number(arg2.toString().replace(".", ""));
               }
               return (arg1 + arg2) / m;
           }

9、判断{}对象是否为空，Object.keys(object).length

Object.keys(this.$route.query).length === 0 时{}为空。

总结

以上总结的技术点我都已测试，如在使用时校验发现问题可留言

欢迎各位同学交流分享~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/134123