常用的jquery 中一些js
时间:2019-10-22
本文章向大家介绍常用的jquery 中一些js,主要包括常用的jquery 中一些js使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.验证用户登录信息
$(function () { $("#phone").blur(function () { var checkPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/; var username = $(this).val(); //手机号匹配成功 if(checkPhone.test(username)){ $("#divErrorMssage").html(""); } //手机号匹配不成功 else{ $("#divErrorMssage").html("<b><font style='color:red'>输入不合法</font></b>"); } }); $("#txtPassword").blur(function(){ var reg = /^[a-zA-Z]\w{5,17}$/; var password = $(this).val(); //密码匹配成功 if(reg.test(password)){ $("#divErrorMssage").html(""); usn = true; } //密码号匹配不成功 else{ $("#divErrorMssage").html("<b><font style='color:red'>输入不合法</font></b>"); usn = false; } }); }) //总体校验表单是否可以提交了 如果返回的true表单才可以提交。 function checkForm() { var username = checkUsername(); var password = checkPassword(); if (username && password) { return true; } else { return false; } } //邮箱验证 $("#txtEmail").blur(function () { var checkPhone = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; var username = $(this).val(); //手机号匹配成功 if(checkPhone.test(username)){ $("#emailValidMsg").html(""); } //手机号匹配不成功 else{ $("#emailValidMsg").html("<b><font style='color:red'>输入不合法</font></b>"); } }); //邮箱验证 $("#txtNickName").blur(function () { var checkPhone = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; var username = $(this).val(); //手机号匹配成功 if(checkPhone.test(username)){ $("#nickNameValidMsg").html(""); } //手机号匹配不成功 else{ $("#nickNameValidMsg").html("<b><font style='color:red'>输入不合法</font></b>"); } }); //重复验证密码 $("#txtRepeatPass").blur(function () { var checkPhone = /^[a-zA-Z]\w{5,17}$/; var username = $(this).val(); //手机号匹配成功 if(checkPhone.test(username)){ $("#repeatPassValidMsg").html(""); } //手机号匹配不成功 else{ $("#repeatPassValidMsg").html("<b><font style='color:red'>输入不合法</font></b>"); } });
2. 获取下拉框所选中的元素
js: 的实现
$(function () { $("#address").change(function () { //获取地址的id并将结果查出来 var opt = $("#address option:selected"); var value = opt.val(); window.location.href="${pageContext.request.contextPath}/mybook/shouhuo_findAsignAddress?id="+value; }) })
html 代码
<p> 选择地址: <select id="address"> <option value="0">填写新地址</option> <c:forEach items="${addressA }" var="address"> <option id="${address.id }" value="${address.id }">${address.xiangaddress }</option> </c:forEach> </select> </p>
3. 动态获取 id 和对应文本框的值
<td > <input class="del_num" id="${item.value.book_id}" type="text" size="3" maxlength="34"/> <a href="#" onclick="change(${item.value.book_id})">变更</a> </td>
js 实现:
<script> function change(id){ //正则表达式 验证正整数 //var rule = /^[0-9]*[1-9][0-9]*$/; var rule = /^[1-9]*[1-9][1-9]*$/; //输入框的值 var count = $("#"+id).val(); //获取 指定id 处的文本框的值 if(rule.test(count)){ location.href="${path}/mybook/showPage_updateCart?indexId="+id+"&count="+count; }else{ alert("输入错误"); } </script>
4. table 中 tr 的隐藏
$(function () { /* 点击删除按钮改变状态 */ $("#id").click(function () { $("#id").css("display","none"); //搞定 $("#tr").css("display","block")
//或者
$("#id").hide(); //$("#tr").show() //将这一行数据隐藏 })
5 . 更换图片
<td rowspan="3"> <label id="file_upload1_label" for="file_upload1"> <!-- <span id="uploadtip">添加图书封面</span> --> <img id="uploadimg" alt="添加图书封面" src="" alt="" width="118px" height="143px" /> </label> <input type="file" name="file" class="" id="file_upload1" onchange="upload_review()"> </td>
js 代码:
function upload_review() { var img = document.getElementById("uploadimg"); var input = document.getElementById("file_upload1"); var tip = document.getElementById("uploadtip"); var file = input.files.item(0); var freader = new FileReader(); freader.readAsDataURL(file); freader.onload = function(e) { img.src = e.target.result; tip.style.display = "none"; }; }
6. ajax 进行提交
$(function () { $("#addActivity").submit(function(){ $(this).ajaxSubmit({ url:"${path }/mybook/uploadFile_UploadSingleFile", success:function(data){ console.log("========="+data); //alert('保存成功'); return false; }, resetForm:true, // dataType:'json' }) return false; }); });
7. 判断图片是否改变
$(function () { //获取图片的路径 //点击提交按钮出发事件 $("#mytijiao").click(function() { //当点击提交按钮判断地址 var src = $('img').attr('src');//获取src中的地址 var yuan = "${path }${product.picture }"; //原图片的地址 if(src===yuan){ //判断两个地址是否相同 //改变input的类型和name属性就可以了 $("input[name='file']").attr('name','file1'); //如果相同我后台就不接收这个图片 不定义这个类型的参数 //使用ajax进行交互显示 图片没有改变 //获取标签体的类型 var msg = $("input[type='file']").attr('name'); $("#addActivity").submit(function(){ $(this).ajaxSubmit({ url:"${path }/mybook/uploadFile_UploadSingleFile?judgePage=2", success:function(data){ alert("成功") return false; }, resetForm:true, /* dataType:'json' */ }) return false; }); }else{ //图片改变就不改变file的类型 alert("图片改变"); $("#addActivity").submit(function(){ $(this).ajaxSubmit({ url:"${path }/mybook/uploadFile_UploadSingleFile?judgePage=2", success:function(data){ alert("成功") return false; }, resetForm:true, /* dataType:'json' */ }) return false; }); } })
8. el 表达式在 js 中的使用 就要借助数据
$(function () { var array = new Array(); <c:forEach items="${firstCategory }" var="category"> var msg = {"name": " ${category.category_name }"} array.push(msg); </c:forEach> var ch = false; $("#onetijiao").click(function() { var value = $("#fname").val(); if(value === null || value === ''){ alert("内容不能为空"); return false; } for(i in array){ if(array[i].name.trim() === value.trim()){ alert("一级类别已存在,请重新输入"); return false; } } }); /* $('#jq').css('border','3px solid red'); */ $('#fnameMsg').css('color','red'); })
应用场景二: 使用el表达式进行判断
<script type="text/javascript"> var second = new Array(); //定义二级类别数组 <c:forEach items="${sesondCategory }" var="category"> <c:if test="${category.parent_id !=0}"> var module = {"name":"${category.category_name }"} second.push(module); </c:if> </c:forEach> $(function () { //判断二级类别 //判断一级类别 $("#tijiao").click(function () { var value = $("#checkName").val(); if(value === null|| value === ''){ alert("参数不能为空"); return false; } var array = new Array(); //定义一级数组 $("#myselect option").each(function(){ //遍历全部option var txt = $(this).text(); //获取option的内容 if(txt != "全部") //如果不是“全部” array.push(txt); //添加到数组中 }); for(i in array){ if(array[i].trim() === value.trim()){ alert('一级类别存在,请更换'); return false; } } for(var j=0;j<array.length;j++){ if(second[j].name === value){ alert("二级类名已存在请重新取值"); return false; } } }); }) </script>
原文地址:https://www.cnblogs.com/zhulina-917/p/11720677.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java实现基本数据结构(三)——队列
- Java实现基本数据结构(二)——栈
- Java实现基本数据结构(一)——数组
- concurrently 实现前后端连载启动
- Vue+Koa2 前后端分离项目线上部署
- Nativefier— 将网站打包成桌面程序
- JAVA反射功能
- Git
- Bootstrap实用功能总结
- Bootstrap基础学习笔记
- 基于Paddle Lite在Android手机上实现图像分类
- redis学习笔记-set
- 图解一致性哈希算法,全网(小区局域网)最通俗易懂
- ES 创建索引时使用Dynamic Mapping动态映射 对字符串字段生成keyword字段
- Java 报错信息 Error during JavaScript execution