页面有多个class相同的input输入框,在提交数据的时候,进行验证,验证input框不能为空,如果哪个为空,则弹出提示:
<body> 司乘卡号: <input class="personDeviceId" type="text" /><br /> 司乘卡号: <input class="personDeviceId" type="text" /><br /> 司乘卡号: <input class="personDeviceId" type="text" /><br /> <button type="button" class="btn blue" id="addBtn">保存</button> </body> <script type="text/javascript"> $("#addBtn").on("click", function() { //验证车乘 var personDeviceId = ($(".personDeviceId").length); for (var i = 0; i < personDeviceId; i++) { if ($(".personDeviceId").eq(i).val().length == 0) { alert("第" + (i + 1) + "个司乘卡号为空"); return; }; }; }) </script>
type:请求类型,GET 或 POST,默认为 GET;
async:true(异步)或 false(同步),默认情况下为true,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行;
url:发送请求的地址(跨域请求时应为绝对地址);
dataType:指定服务器返回的数据类型;
jsonpCallback:自定义JSONP回调函数名称;
success:请求成功后回调函数;
error:请求失败时调用此方法。
$(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"message",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){ alert('你的名字:' + json.name + ' 年龄: ' + json.age); }, error: function(){ alert('fail'); } }); });
服务器返回的数据类型:
message({"state":"0","str":""})
通过JS判断 window.navigator.userAgent 是否包含 MicroMessenger,如果存在就是通过微信访问。
window.navigator.userAgent.indexOf("MicroMessenger") != -1
如果需要更精确怎么区分呢?比如通过朋友圈分享、好友分享。
在分享时,微信会增加自动在url后边增加参数。from=timeline代表朋友圈,from=singlemessage代表来自好友转发。所有分享的链接,还会增加isappinstalled=n。知道这个规则,就好处理了
//来自微信转发 location.search.indexOf("&isappinstalled=") != -1 //来自朋友圈 location.search.indexOf("from=timeline") != -1 //来自好友转发 location.search.indexOf("from=singlemessage") != -1
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")
<div id="head"></div> <div id="side"></div> <script> $("#head").load("com/head.html"); $("#side").load("com/side.html"); </script>
function submit() { var idCard = $('#card').val(); var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; if(!regIdNo.test(idCard)) { alert('身份证号填写有误'); return false; } }
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; }
<!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>
当后端给的返回值是小数的时候,前端需要对小数进行处理,得到自己想要的来展示,多数的时候,是保存小数点后面一位或者两位,这个时候,可以使用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 }]