分类目录归档：前端

jq获取上级、同级、下级元素

记事本 > Javascript

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从
p元素开始找,等同于$("p span")

本条目发布于2020-05-31。属于Javascript分类。
input输入框自动消除空格

记事本 > Div+CSS
```
<input type="text" class="form-control" id="assetId" onkeyup="this.value=this.value.replace(/[, ]/g,'')"></input>
```
1：在input框里面输入编号的过程中，出现空格，自动消除
2：input首尾出现空格，自动消除
3：复制粘贴的文本里面出现空格，自动消除
本条目发布于2020-05-31。属于Div+CSS分类。

在HTML页面中引入公共的部分的代码

<div id="head"></div>
<div id="side"></div>

 <script>
 $("#head").load("com/head.html");
 $("#side").load("com/side.html");
 </script>

本条目发布于2020-05-31。属于Javascript分类。

jQuery验证身份证号码

记事本 > Javascript

function submit() {
	var idCard = $('#card').val();
	var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	if(!regIdNo.test(idCard)) {
		alert('身份证号填写有误');
		return false;
	}
}

本条目发布于2020-05-31。属于Javascript分类。

小程序验证车牌号（含新能源车牌）

记事本 > Javascript

 let reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
    const careg = reg.test(that.data.carNum);
    if (!careg) {
      wx.showToast({
        icon: 'none',
        title: '请输入正确车牌号',
      })
      return;
    }

本条目发布于2020-05-30。属于Javascript分类。

jQuery验证车牌号（含新能源车牌）

记事本 > Javascript

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="col-md-12 col-sm-12  col-xs-12">
            <div class="form-group">
                <label class="col-md-3 col-sm-3  col-xs-3 control-label">车牌号                </label>
                <div class="col-md-5 col-sm-5  col-xs-5">
                    <input type="text" class="form-control " placeholder="请输入车牌号" id="carNumb" name="carNumb">
                </div>
            </div>
        </div>
        
        <button type="button" class="btn btn-primary" style="margin-left:28px;" onclick="submit()">submit</button>
        
        <script type="text/javascript">
            function submit() {
                /* 车牌号码验证 */
                var $car_num = $("#carNumb").val();
                var reg01 =
                    /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
                if (reg01.test($car_num)) {
                    alert("车牌号正确");
                } else {
                    alert("请填写正确的车牌号")
                    return;
                }
            }        </script>
    </body></html>

本条目发布于2020-05-30。属于Javascript分类。

jQuery的toFixed() 方法-保留小数位数

记事本 > Javascript

当后端给的返回值是小数的时候，前端需要对小数进行处理，得到自己想要的来展示，多数的时候，是保存小数点后面一位或者两位，这个时候，可以使用toFixed() 方法，可把 Number 四舍五入为指定小数位数的数字。

1：保留小数点后面两位

<script type="text/javascript">
   let speed=43.3657
   console.log(speed.toFixed(2))
</script>

2：保留小数点后面1位

<script type="text/javascript">
      let speed=43.3657
      console.log(speed.toFixed(1))
</script>

3：保留整数

<script type="text/javascript">
        let speed=43.3657
        console.log(speed.toFixed(0))
</script>

或者

<script type="text/javascript">
        let speed=43.3657
        console.log(speed.toFixed())
</script>

实际运用代码

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>toFixed() 方法</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        速度:<span id="speed"></span>
    </body>
    <script type="text/javascript">
        $.ajax({
            url: "data.json",
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                //console.log(JSON.stringify(data))
                var htm = "";
                $.each(data, function(i, item) {
                    htm += '<span >' + item.speed.toFixed(1) + 'km/h</span>';
                })
                $('#speed').html(htm)
            }
        });
    </script>
</html>

json数据格式，data.json

[{
    "speed": 36.6666    
}]

本条目发布于2020-05-30。属于Javascript分类。

CSS设置超出显示省略号代码

记事本 > 前端
CSS设置超出宽度或调试显示省略号代码，可以设置一行或多行。
修改：-webkit-line-clamp数字设置行数。
```
word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical
```
本条目发布于2020-05-30。属于前端分类。
防止表格被内容撑破的解决办法总结

记事本 > 前端
默认情况下，设定了表格大小，看起来没什么问题，但当表格里装了很多比表格宽度要宽的内容时就会发现表格自然的被撑大了。
第一种情况是表格被英文单词撑破了。
解决办法是在表格的属性里设置
```
style="word-wrap:break-word;"
```
但其实还是有问题。当往表格里装一长串的英文字母时，表格还是会被撑破。这就是第2种情况了
解决办法是在表格风格属性里再加一个属性。style="word-wrap:break-word;word-break:break-all;"
但还有一种情况。当往表格里放一张被表格大得多的图片时，表格照样还是被撑破了。
解决办法有2种，第一种。把表格的风格设置为：
```
style="overflow-x:no;word-wrap:break-word;word-break:break-all;table-layout:fixed;"
```
记得要为表格设置宽度大小，但table-layout:fixed设置了的话，对于表格布局将会很困难，推荐使用第2种解决办法。
本条目发布于2020-05-30。属于前端分类。

1 2 3 4

搜索

分类