jQuery常用技术
1.元素动态增删方案
2.正则表达式基础
3.表单验证案例
1.jQuery元素动态增删
使用JavaScript的形式进行元素的增删时，优点是逻辑清晰明了，缺点是比较繁琐
函数 | 描述 |
append | 将子元素添加到父元素内的最后 |
remove | 移除元素自身 |
parent | 获取父元素 |
//此处模拟从后台拿到的数据
var jsonArr = [
{name:"刘备",age:14,sex:"男",address:"三国"},
{name:"关羽",age:13,sex:"男",address:"三国"},
{name:"张飞",age:12,sex:"男",address:"三国"}
];
var i = 1;
$('button:eq(0)').click(function(){
$.each(jsonArr,function(index,json){
$('table').append("<tr class='add'><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+
json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td><td><span class='operation show'>查看</span><span class='operation del'>删除</span></td></tr>")
// $("<tr><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td></tr>").appendTo($('table'))
//$('table').prepend("<tr><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td></tr>")
})
})
$('button:eq(1)').click(function(){
//情况指定元素中的子元素
//$('table').empty()
$('tr').remove('[class="add"]')
})
//给删除标签添加点击事件
$('table').on('click','.del',function(){
$(this).parent().parent().remove()
})
2.正则表达式-RegExp
2.1 概述
正则表达式主要是为了去处理(验证)一些比较复杂的数据，例如：手机号运营商区分、身份证号验证等
如果只是简单的验证就不要多此一举再去使用正则表达式，例如：是否为空、是否是11位数字等
要求：只需要各位掌握其基本的使用形式即可，不需要你写复杂的表达式，因为，通常情况下，公司会提供所需要的正则表达式的语句，或者公司没这方面的要求，通常情况下就直接百度一个。
2.2 语法
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
- pattern（模式） 描述了表达式的模式
- modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
方括号用于查找某个范围内的字符:
表达式 | 描述 |
[abc] | 查找方括号之间的任何字符。 |
[^abc] | 查找任何不在方括号之间的字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
[a-z] | 查找任何从小写 a 到小写 z 的字符。 |
[A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
[A-z] | 查找任何从大写 A 到小写 z 的字符。 |
[adgk] | 查找给定集合内的任何字符。 |
[^adgk] | 查找给定集合外的任何字符。 |
(red|blue|green) | 查找任何指定的选项 |
量词（掌握加粗的三个使用方式即可）：
量词 | 描述 |
n+ | 匹配任何包含至少一个 n 的字符串。 |
n* | 匹配任何包含零个或多个 n 的字符串。 |
n? | 匹配任何包含零个或一个 n 的字符串。 |
n{X} | 匹配包含 X 个 n 的序列的字符串。 |
n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
n$ | 匹配任何结尾为 n 的字符串。 |
^n | 匹配任何开头为 n 的字符串。 |
?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
RegExp对象方法：
方法 | 描述 | FF | IE |
compile | 编译正则表达式。 | 1 | 4 |
exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 | 1 | 4 |
test | 检索字符串中指定的值。返回 true 或 false |
2.3 应用
2.3.1 验证11位手机号
let phone = $('input:eq(0)').val();
//定义验证规则
//let phoneVerify = /^1[0-9]{10}$/;
let phoneVerify = /^1{1}[0-9]{10}$/;
//进行验证
console.log(phoneVerify.test(phone));2.3.2 验证邮箱
let email = $('input:eq(0)').val();
let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
console.log(emailVerify.test(email));2.4 案例-表单验证
用户提交表单时对表单中的数据进行验证，同时，当输入框失去焦点时进行快速验证提示，提供用户体验性
<form action="#">
<input type="text" name="uname" id="uname"><span></span><br>
<input type="text" name="email" id="email"><span></span><br>
<input type="submit" value="check">
</form>
//定义用户名及邮箱的验证规则
let unameVerify = /^[0-9A-z]{6,12}$/i;
let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
//定义表单提交事件
$('form').submit(function(){
//验证表单内容是否完全符合规则
let flag = false;
$('input:not([type="submit"])').each(function(){
let content = $(this).val();
//用户名验证
if($(this).attr('name') == "uname"){
if(!unameVerify.test(content)){
//不符合规则
flag = false;
return;
}
flag = true;
}
if($(this).attr('name') == "email"){
if(!emailVerify.test(content)){
flag = false;
return;
}
flag = true;
}
})
return flag;
})
//通过焦点事件对单个输入框进行验证
$('input:not([type="submit"])').on({
focus:function(){
if($(this).attr("name") == "uname"){
$(this).next().text("数字+字母6~12位");
$(this).next().css("color","#b0b0b0");
}
if($(this).attr("name") == "email"){
$(this).next().text("邮箱格式：xxx@xx.cn/com");
$(this).next().css("color","#b0b0b0");
}
},
//失去焦点事件
blur:function(){
let content = $(this).val()
if($(this).attr("name") == "uname"){
if(!unameVerify.test(content)){
$(this).next().text("用户名格式不正确");
$(this).next().css("color","red");
}
}
if($(this).attr("name") == "email"){
if(!emailVerify.test(content)){
$(this).next().text("邮箱格式不正确");
$(this).next().css("color","red");
}
}
}
})
本章小结
1.jQuery的动态增删注意拼接形式
2.正则表达式会基础的使用即可，也可单独研究
作业
1、书写拥有三个选择框的穿梭框,使数据允许在三个选择框中移动