常用的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>
未完待续...........................
常用的jquery 中一些js的更多相关文章
- jQuery中turn.js（翻页效果）学习笔记
Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- jQuery中常用的函数方法
jQuery中常用的函数方法总结 Ajax处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址. data (Map) : (可选) ...
- jQuery中的ready方法及实现按需加载css,js
模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...
- jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 选择器(第一节) 选择器的扩展方法(第一节) ...
- jQuery中的常用内容总结(二)
jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...
- jQuery中常用的函数方法总结
jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法.个人认为在开发中会比较常用的,仅供大家学习和参考. 事件处理 ready(fn) 代码: $(document).rea ...
- Html中Select的增删改查排序，和jQuery中的常用功能
这里主要通过select引出常用的jquery 前台页面 <select class="form-control" id="commonSelect"&g ...
- js便签笔记（6）——jQuery中的ready()事件为何需要那么多代码？
前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...
随机推荐
- 【C#】 Stopwatch详解
Stopwatch的命名空间是using System.Diagnostics; 1 namespace System.Diagnostics 2 { 3 // 4 // 摘要: 5 // 提供一组方 ...
- Map 综述（二）：彻头彻尾理解 LinkedHashMap
摘要: HashMap和双向链表合二为一即是LinkedHashMap.所谓LinkedHashMap,其落脚点在HashMap,因此更准确地说,它是一个将所有Entry节点链入一个双向链表的Hash ...
- mzy对于枚举的理解
关于enum,其实就是简化了的class,功能就是提供一个个独立的.特定含义的常量! 在JDK5.0之前我们想模拟enum的功能,只能使用自定义类的形式: 1.首先私有化构造方法,让外部不能new对象 ...
- 深入Pulsar Consumer的使用方式&源码分析
原文链接 1.使用前准备 引入依赖: <dependency> <groupId>org.apache.pulsar</groupId> <artifactI ...
- 查询ES6兼容的网站
http://kangax.github.io/compat-table/es6/ 查询es6兼容的网站
- golang net/http包
http协议 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准.设计HTTP最初的目的是为 ...
- proto buffer
protobuf是一种高效的数据格式,平台无关.语言无关.可扩展,可用于 RPC 系统和持续数据存储系统. protobuf介绍 Protobuf是Protocol Buffer的简称,它是Googl ...
- Android Parsing between JSON and Kotlin Object with Google Gson Library
Parsing between JSON and Kotlin Object with Google Gson Library dependencies { ... implementation 'c ...
- Windows内核-7-IRP和派遣函数
Windows内核-7-IRP和派遣函数 IRP以及派遣函数是Windows中非常重要的概念.IRP 是I/O Request Pocket的简称,意思是I/O操作的请求包,Windows中所有Use ...
- Flask - 解决 app.run() 添加 host、port、debug 参数后运行不生效的问题
问题背景 app.run() 添加了 host.port.debug 参数,运行后发现没有生效,咋肥事! 解决方案 要打开 debug 模式的话,勾选 FLASK_DEBUG 就好啦 再次运行,发现已 ...