jQuery
jQuery简介：
一个JavaScript库,极大地简化了JavaScript编程。
特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 添加jQuery库： <script type="text/javascript" src="jquery.js"></script>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="全选" onclick="selectAll()"> 10 <input type="button" value="反选" onclick="reverseAll()"> 11 <input type="button" value="取消" onclick="cancelAll()"> 12 13 <table id="tb" border="1"> 14 <tr> 15 <th>选择</th> 16 <th>主机</th> 17 <th>端口</th> 18 </tr> 19 <tr> 20 <td><input type="checkbox"> 21 </td> 22 <td>10.10.1.1</td> 23 <td>80</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>10.10.1.1</td> 28 <td>80</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox"></td> 32 <td>10.10.1.1</td> 33 <td>80</td> 34 </tr> 35 <tr> 36 <td><input type="checkbox"></td> 37 <td>10.10.1.1</td> 38 <td>80</td> 39 </tr> 40 41 </table> 42 43 <script src="jquery-1.12.4.js"></script> 44 45 <script> 46 function selectAll() { 47 $('#tb :checkbox').prop('checked',true) 48 } 49 50 function cancelAll() { 51 $('#tb :checkbox').prop('checked',false) 52 } 53 54 function reverseAll() { 55 $('#tb :checkbox').each(function () { 56 // DOM实现方式 57 // if(this.checked){ 58 // this.checked = false; 59 // }else{ 60 // this.checked = true; 61 // } 62 63 //jQuery实现方式 64 // if($(this).prop('checked')){ 65 // $(this).prop('checked',false); 66 // }else{ 67 // $(this).prop('checked',true); 68 // } 69 70 //jQuery三元运算 v=条件?真值:假值 71 var v = $(this).prop('checked')?false:true; 72 $(this).prop('checked',v) 73 74 }) 75 } 76 77 </script> 78 79 </body> 80 </html>
作用域：
作用域：
1. 默认以函数作为作用域
2. 函数的作用域在被调用之前已经被创建
3. 函数的作用域存在作用域链,并且也是在被调用之前创建
4. 函数内局部变量 声明提前
原型：
function Foo(n){
this.name = n; # this相当于Python里面的self
}
# Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name)
}
}
var obj = new Foo("me"); # 定义对象时要加new
obj.sayName()；
绑定事件的两种方式：
绑定事件两种方式：
a. 直接标签绑定 onclick='xxx()' onfocus
b. 先获取Dom对象, 然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus //onfocus 获取聚焦
a. 第一种绑定方式
<input type='button' onclick='ClickOn(this)'> // this: 当前触发事件的标签
function ClickOn(self){
// self 当前点击的标签
}
b. 第二种绑定方式
<input id='i1' type='button'>
document.getElementById('i1').onclick = function(){
// this 代指当前点击的标签
}
行为、样式 、结构 相分离的页面（ js、css、html ）
文本操作：
#text()/html()获取文本内容, text("<a>1</a>")/html("<a>1</a>")设置文本内容
$(..).text() ===> 不解析标签
$(..).html() ===> 解析标签
$(..).val() 获取值
$(..).val('1213') 设置值
var v = $(..).index() # 获取索引位置
$(..).children().eq(v) # 获取孩子对应的索引
样式操作：
addClass removeClass toggleClass ===> 有就删除，没有就加上
属性操作：
$(..).attr() ===> 一个参数是获取，两个参数是设置
$(..).removeAttr() ===> 删除属性
# 专门用于checkbox,radio
$(..).prop('checked') # 获取值
$(..).prop('checked', true) # 设置值
<input id="chk1" type="checkbox" />是否可见<input id="chk2" type="checkbox" checked="checked" />是否可见
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
固定表格中列的顺序，不能任意调整
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .a1{ 9 position: fixed; 10 top: 50%; 11 left: 50%; 12 width: 500px; 13 height: 400px; 14 margin-left: -250px; 15 margin-top: -250px; 16 background-color: pink; 17 z-index: 10; 18 } 19 20 .a2{ 21 position: fixed; 22 top: 0; 23 left: 0; 24 bottom: 0; 25 right: 0; 26 background-color: black; 27 z-index: 8; 28 opacity: 0.6; 29 } 30 31 .hidden{ 32 display: none; 33 } 34 35 </style> 36 </head> 37 <body> 38 39 <input type="button" value="添加"> 40 41 <table border="1"> 42 <tr> 43 <th>主机</th> 44 <th>端口</th> 45 <th>操作</th> 46 </tr> 47 48 <tr> 49 <td>10.10.10.1</td> 50 <td>80</td> 51 <td> 52 <p class="edit"><a>编辑</a> | <a>删除</a></p> 53 </td> 54 </tr> 55 56 <tr> 57 <td>10.10.10.1</td> 58 <td>80</td> 59 <td> 60 <p class="edit"><a>编辑</a> | <a>删除</a></p> 61 </td> 62 </tr> 63 64 <tr> 65 <td>10.10.10.1</td> 66 <td>80</td> 67 <td> 68 <p class="edit"><a>编辑</a> | <a>删除</a></p> 69 </td> 70 </tr> 71 72 <tr> 73 <td>10.10.10.1</td> 74 <td>80</td> 75 <td> 76 <p class="edit"><a>编辑</a> | <a>删除</a></p> 77 </td> 78 </tr> 79 </table> 80 81 <div class="a1 hidden"> 82 <input type="text" name="hostname"> 83 <input type="text" name="port"> 84 <input type="button" value="取消"> 85 </div> 86 87 <div class="a2 hidden"></div> 88 89 <script src="jquery-1.12.4.js"></script> 90 91 <script> 92 $("input[value='添加']").click(function () { 93 $(".a1,.a2").removeClass("hidden"); 94 }); 95 96 $('.a1 input[value="取消"]').click(function () { 97 $(".a1,.a2").addClass("hidden"); 98 $('.a1 input[value="取消"]').siblings().val(""); 99 }); 100 101 $('.edit').click(function () { 102 $(".a1,.a2").removeClass("hidden"); 103 var tds = $(this).parent().siblings(); 104 var host = $(tds[0]).text(); 105 var port = $(tds[1]).text(); 106 $(".a1 input[name='hostname']").val(host); 107 $(".a1 input[name='port']").val(port); 108 }) 109 110 </script> 111 112 </body> 113 </html>
可以任意调整表格中列的顺序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .a1{ 9 position: fixed; 10 top: 50%; 11 left: 50%; 12 width: 500px; 13 height: 400px; 14 margin-left: -250px; 15 margin-top: -250px; 16 background-color: pink; 17 z-index: 10; 18 } 19 20 .a2{ 21 position: fixed; 22 top: 0; 23 left: 0; 24 bottom: 0; 25 right: 0; 26 background-color: black; 27 z-index: 8; 28 opacity: 0.6; 29 } 30 31 .hidden{ 32 display: none; 33 } 34 35 </style> 36 </head> 37 <body> 38 39 <input type="button" value="添加"> 40 41 <table border="1"> 42 <tr> 43 <th>主机</th> 44 <th>端口</th> 45 <th>操作</th> 46 </tr> 47 48 <tr> 49 <td target="hostname">10.10.10.1</td> 50 <td target="port">80</td> 51 <td> 52 <p class="edit"><a>编辑</a> | <a>删除</a></p> 53 </td> 54 </tr> 55 56 <tr> 57 <td target="hostname">10.10.10.1</td> 58 <td target="port">80</td> 59 <td> 60 <p class="edit"><a>编辑</a> | <a>删除</a></p> 61 </td> 62 </tr> 63 64 <tr> 65 <td target="hostname">10.10.10.1</td> 66 <td target="port">80</td> 67 <td> 68 <p class="edit"><a>编辑</a> | <a>删除</a></p> 69 </td> 70 </tr> 71 72 <tr> 73 <td target="hostname">10.10.10.1</td> 74 <td target="port">80</td> 75 <td> 76 <p class="edit"><a>编辑</a> | <a>删除</a></p> 77 </td> 78 </tr> 79 </table> 80 81 <div class="a1 hidden"> 82 <input type="text" name="hostname"> 83 <input type="text" name="port"> 84 <input type="button" value="取消"> 85 </div> 86 87 <div class="a2 hidden"></div> 88 89 <script src="jquery-1.12.4.js"></script> 90 91 <script> 92 $("input[value='添加']").click(function () { 93 $(".a1,.a2").removeClass("hidden"); 94 }); 95 96 $('.a1 input[value="取消"]').click(function () { 97 $(".a1,.a2").addClass("hidden"); 98 $('.a1 input[value="取消"]').siblings().val(""); 99 }); 100 101 $('.edit').click(function () { 102 $(".a1,.a2").removeClass("hidden"); 103 104 var tds = $(this).parent().siblings(); 105 tds.each(function () { 106 // 这样写跟字段的顺序就没有关系，可以任意加其他字段 107 // var v1 = $(this).attr('target'); 108 // var text = $(this).text(); 109 // var temp = '.a1 input[name="' + v1 + '"]'; 110 // $(temp).val(text); 111 112 $('.a1 input[name="' + $(this).attr('target') + '"]').val($(this).text()); 113 }); 114 }) 115 116 </script> 117 118 </body> 119 </html>
文档处理
append 在标签内后面追加 prepend 在标签内的前面添加 after 标签外的后面，与标签平级 before 标签外的前面，与标签平级 remove 索引数据一起删除 empty 只清空数据 clone
css处理
$('t1').css('样式名称','样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- clearInterval
- 透明度 1 ==> 0
- position
- 字体大小，位置
位置
$(window).scrollTop() #获取页面滑轮值
$(window).scrollTop(0) #跳转的滑轮的某个值
$("div").scrollTop() # div标签中的滑轮值
scrollLeft([val])
offset() # 指定标签在html中的坐标（$('#i1').offset() ===> 获取#i1坐标）
offset().left
offset().top
position() # 获取指定标签相对父标签(relative)标签坐标
$('.i1').height() # 获取标签的高度
$('.i1').innerHeight() # 标签高度 + padding高度
$('.i1').outerHeight() # 边框 + 标签高度 + padding高度
$('.i1').outerHeight(true) # 边框 + 标签高度 + padding高度 + margin高度
事件绑定
DOM：三种绑定方式
jQuery：
1. $('.c1').click()
2. $('.c1').bind('click', function(){})
- $('.c1').unbind('click', function(){})
3. $('.c1').delegate('a','click', function(){}) # .c1下的a标签, 能把增加的数据绑定上事件
- $('.c1').undelegate('a','click', function(){})
4. $('.c1').on('click', function(){})
- $('.c1').off('click', function(){})
阻止事件:
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...) //要绑定的事件与操作
})
jQuery扩展
- $.extend
执行方法： $.方法
$.extend({
'wangsen':function(){
return 'sb';
}
});
===> $.wangsen()
- $.fn.extend
执行方法： $(..).方法
$.fn.extend({
'wangsen':function(){
return 'sb';
}
});
===> $('#i1').wangsen()
定义jquery时注意：
(function(){
var status = 1; //封装变量
方法
})()
判断元素是否含有指定的类
两种方法有着相同的功能：
hasClass(‘classname’)
is(‘.classname’)
以下是一个div元素是否包含一个redColor的例子：
使用is(‘.classname’)的方法： $('div').is('.redColor')
使用hasClass(‘classname’)的方法(注意jquery的低版本可能是hasClass(‘.classname’))
$('div').hasClass('redColor')
返回值均为true/false
页面中不同标题对应不同文本内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .hidden{ 9 display: none; 10 } 11 12 .header{ 13 height: 30px; 14 line-height: 30px; 15 background-color: #eee; 16 } 17 18 .header .header-item{ 19 float: left; 20 border-right: 1px solid #ddd; 21 padding: 0 8px; 22 } 23 24 .content{ 25 min-height: 100px; 26 border: 1px solid #ddd; 27 } 28 29 .active{ 30 background-color: rebeccapurple; 31 } 32 33 </style> 34 </head> 35 <body> 36 37 <div style="width: 500px; margin: 0 auto"> 38 <div class="header"> 39 <div class="header-item active" a="1">标题一</div> 40 <div class="header-item" a="2">标题二</div> 41 <div class="header-item" a="3">标题三</div> 42 </div> 43 44 <div class="content"> 45 <div b="1">内容一</div> 46 <div class="hidden" b="2">内容二</div> 47 <div class="hidden" b="3">内容三</div> 48 </div> 49 </div> 50 51 <script src="jquery-1.12.4.js"></script> 52 53 <script> 54 $(".header-item").click(function () { 55 $(this).addClass("active").siblings().removeClass("active"); 56 // var tag = $(this).attr("a"); 57 $(".content").children('[b="' + $(this).attr("a") + '"]').removeClass("hidden").siblings().addClass("hidden"); 58 59 }) 60 61 </script> 62 63 </body> 64 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .a1{ 9 position: fixed; 10 top: 50%; 11 left: 50%; 12 width: 500px; 13 height: 400px; 14 margin-left: -250px; 15 margin-top: -250px; 16 background-color: pink; 17 z-index: 10; 18 } 19 20 .a2{ 21 position: fixed; 22 top: 0; 23 left: 0; 24 bottom: 0; 25 right: 0; 26 background-color: black; 27 z-index: 8; 28 opacity: 0.6; 29 } 30 31 .hidden{ 32 display: none; 33 } 34 35 </style> 36 </head> 37 <body> 38 39 <input type="button" value="添加"> 40 41 <table border="1" id="tb"> 42 <tr> 43 <th>主机</th> 44 <th>端口</th> 45 <th>操作</th> 46 </tr> 47 48 <tr> 49 <td target="hostname">10.10.10.1</td> 50 <td target="port">80</td> 51 <td> 52 <a class="edit">编辑</a> | <a class="del">删除</a> 53 </td> 54 </tr> 55 56 <tr> 57 <td target="hostname">10.10.10.1</td> 58 <td target="port">80</td> 59 <td> 60 <a class="edit">编辑</a> | <a class="del">删除</a> 61 </td> 62 </tr> 63 64 <tr> 65 <td target="hostname">10.10.10.1</td> 66 <td target="port">80</td> 67 <td> 68 <a class="edit">编辑</a> | <a class="del">删除</a> 69 </td> 70 </tr> 71 72 <tr> 73 <td target="hostname">10.10.10.1</td> 74 <td target="port">80</td> 75 <td> 76 <a class="edit">编辑</a> | <a class="del">删除</a> 77 </td> 78 </tr> 79 </table> 80 81 <div class="a1 hidden"> 82 <input type="text" name="hostname"> 83 <input type="text" name="port"> 84 <input type="button" value="取消"> 85 <input type="button" value="确定"> 86 </div> 87 88 <div class="a2 hidden"></div> 89 90 <script src="jquery-1.12.4.js"></script> 91 92 <script> 93 94 $(".del").click(function () { 95 $(this).parent().parent().remove(); 96 var v = $('.a1 #2').val(); 97 console.log(v); 98 }); 99 100 $(".a1 input[value='确定']").click(function () { 101 var tr = document.createElement("tr"); 102 $(".a1 input[type='text']").each(function(){ 103 var n = $(this).attr("name"); 104 var v = $(this).val(); 105 var td = document.createElement("td"); 106 td.innerHTML = v; 107 td.setAttribute("target",n); //添加属性 108 $(tr).append(td); 109 }); 110 var td2 = document.createElement("td"); 111 td2.innerHTML = '<a class="edit">编辑</a> | <a class="del">删除</a>'; 112 $(tr).append(td2); 113 114 $("#tb").append(tr); 115 116 }); 117 118 $("input[value='添加']").click(function () { 119 $(".a1,.a2").removeClass("hidden"); 120 }); 121 122 $('.a1 input[value="取消"]').click(function () { 123 $(".a1,.a2").addClass("hidden"); 124 $('.a1 input[value="取消"]').siblings().val(""); 125 }); 126 127 $('.edit').click(function () { 128 $(".a1,.a2").removeClass("hidden"); 129 130 var tds = $(this).parent().siblings(); 131 tds.each(function () { 132 // 这样写跟字段的顺序就没有关系，可以任意加其他字段 133 // var v1 = $(this).attr('target'); 134 // var text = $(this).text(); 135 // var temp = '.a1 input[name="' + v1 + '"]'; 136 // $(temp).val(text); 137 138 $('.a1 input[name="' + $(this).attr('target') + '"]').val($(this).text()); 139 }); 140 }) 141 142 </script> 143 144 </body> 145 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .content{ 9 padding: 50px; 10 border: 1px solid #ddd; 11 } 12 13 .a1{ 14 width: 30px; 15 position: relative; 16 } 17 18 </style> 19 20 </head> 21 <body> 22 23 <div class="content"> 24 <div class="a1"> 25 <span>赞</span> 26 </div> 27 </div> 28 29 <div class="content"> 30 <div class="a1"> 31 <span>赞</span> 32 </div> 33 </div> 34 35 <div class="content"> 36 <div class="a1"> 37 <span>赞</span> 38 </div> 39 </div> 40 41 <div class="content"> 42 <div class="a1"> 43 <span>赞</span> 44 </div> 45 </div> 46 47 <script src="jquery-1.12.4.js"></script> 48 49 <script> 50 $('.content .a1').click(function () { 51 item = this; 52 var tag = document.createElement("i"); 53 54 var color = "green"; 55 var position = "absolute"; 56 var fontSize = 10; 57 var top = 6; 58 var right = 4; 59 var opacity = 1; 60 61 var obj = setInterval(function () { 62 fontSize = fontSize + 2; 63 top = top - 2; 64 right = right - 2; 65 opacity = opacity - 0.1; 66 67 $(tag).text("+1"); 68 $(tag).css('color',color); 69 $(tag).css('position', position); 70 $(tag).css('fontSize', fontSize + 'px'); 71 $(tag).css('top', top + 'px'); 72 $(tag).css('right', right + 'px'); 73 $(tag).css('opacity', opacity); 74 $(item).append(tag); 75 76 if(opacity <= 0){ 77 clearInterval(obj); 78 $(tag).remove(); 79 } 80 },100); 81 82 83 84 85 }) 86 </script> 87 88 </body> 89 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .error{ 9 color: red; 10 } 11 </style> 12 13 </head> 14 <body> 15 16 <form id="f1" action="s6.html" method="post"> 17 <div><input name="n1" type="text"></div> 18 <div><input name="n2" type="password"></div> 19 <div><input name="n3" type="text"></div> 20 <div><input name="n4" type="text"></div> 21 <div><input type="submit" value="提交"></div> 22 </form> 23 24 <script src="jquery-1.12.4.js"></script> 25 26 <script> 27 $(':submit').click(function () { 28 var flag = true; 29 $('#f1').find('.error').remove(); 30 $('#f1').find('input[type="text"],input[type="password"]').each(function () { 31 var v = $(this).val(); 32 if(v.length == 0){ 33 console.log(v.length); 34 flag = false; 35 var tag = document.createElement("span"); 36 $(tag).text("必填"); 37 $(tag).addClass("error"); 38 $(this).after(tag); 39 return false; 40 } 41 }); 42 return flag; 43 }) 44 45 </script> 46 47 </body> 48 </html>
正则匹配
语法 /正则表达式主体/修饰符(可选) exec() 方法用于检索字符串中的正则表达式的匹配。 实例： var patt = /runoob/i 实例解析： /runoob/i 是一个正则表达式。 runoob 是一个正则表达式主体 (用于检索)。 i 是一个修饰符 (搜索不区分大小写)。 修饰符 描述 i 执行对大小写不敏感的匹配。 g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 m 执行多行匹配。 表达式 描述 [abc] 查找方括号之间的任何字符。 [0-9] 查找任何从 0 至 9 的数字。 (x|y) 查找任何以 | 分隔的选项。 元字符 描述 \d 查找数字。 \s 查找空白字符。 \b 匹配单词边界。 \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> 7 8 <style> 9 .error{ 10 color: red; 11 font-size: 12px; 12 } 13 .icon{ 14 color: green; 15 } 16 </style> 17 18 </head> 19 <body> 20 21 <form id="f1" action="s6.html" method="post"> 22 <div><input id="user" name="user" type="text" placeholder="username"></div> 23 <div><input id="pwd" name="password" type="password" placeholder="password"></div> 24 <div><input name="phone" type="text" placeholder="phone"></div> 25 <div><input name="email" type="text" placeholder="email"></div> 26 <div><input type="submit" value="提交"></div> 27 </form> 28 29 <script src="jquery-1.12.4.js"></script> 30 31 <script> 32 $("input#user").blur(function(){ 33 var v = $(this).val(); 34 $(this).next().remove(); 35 $(this).after("<span></span>").next().addClass("error"); 36 console.log(v); 37 if(v == ""){ 38 var text = "user不能为空"; 39 $(this).next().text(text); 40 }else{ 41 var patrn = /^[a-zA-Z][\w]{5,20}$/; 42 console.log(patrn.exec(v)); 43 if(patrn.exec(v) == null){ 44 var text = "用户名必须以字母开头,5-20个字母、数字、下划线组成的"; 45 $(this).next().text(text); 46 }else{ 47 $(this).next().remove(); 48 $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 49 } 50 } 51 }); 52 53 $("input[name='password']").blur(function(){ 54 var v = $(this).val(); 55 $(this).next().remove(); 56 $(this).after("<span></span>").next().addClass("error"); 57 console.log(v); 58 if(v == ""){ 59 var text = "密码不能为空"; 60 $(this).next().text(text); 61 }else{ 62 var patrn = /^[\w\W+]{8,20}$/; 63 console.log(patrn.exec(v)); 64 if(patrn.exec(v) == null){ 65 var text = "密码长度为8-20个任意字符"; 66 $(this).next().text(text); 67 }else{ 68 $(this).next().remove(); 69 $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 70 } 71 } 72 }); 73 74 $("input[name='phone']").blur(function(){ 75 var v = $(this).val(); 76 $(this).next().remove(); 77 $(this).after("<span></span>").next().addClass("error"); 78 console.log(v); 79 if(v == ""){ 80 var text = "手机号不能为空"; 81 $(this).next().text(text); 82 }else{ 83 var patrn = /^[0-9]{11}$/; 84 console.log(patrn.exec(v)); 85 if(patrn.exec(v) == null){ 86 var text = "手机由11个数字组成"; 87 $(this).next().text(text); 88 }else{ 89 $(this).next().remove(); 90 $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 91 } 92 } 93 }); 94 95 $("input[name='email']").blur(function(){ 96 var v = $(this).val(); 97 $(this).next().remove(); 98 $(this).after("<span></span>").next().addClass("error"); 99 console.log(v); 100 if(v == ""){ 101 var text = "email不能为空"; 102 $(this).next().text(text); 103 }else{ 104 var patrn = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; 105 console.log(patrn.exec(v)); 106 if(patrn.exec(v) == null){ 107 var text = "email地址输入有误"; 108 $(this).next().text(text); 109 }else{ 110 $(this).next().remove(); 111 $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 112 } 113 } 114 }); 115 116 117 // $("input").blur(function(){ 118 // var v = $(this).val(); 119 // var name = $(this).attr("name"); 120 // $(this).next().remove(); 121 // $(this).after("<span></span>").next().addClass("error"); 122 123 // console.log(v); 124 // if(v == ""){ 125 // var text = name + "不能为空"; 126 // $(this).next().text(text); 127 // }else{ 128 // if(name == 'user'){ 129 // var patrn = /^[a-zA-Z][\w]{5,20}$/; 130 // if(patrn.exec(v) == null){ 131 // var text = "用户名必须以字母开头,5-20个字母、数字、下划线组成的"; 132 // $(this).next().text(text); 133 // }else{ 134 // $(this).next().remove(); 135 // $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 136 // } 137 // }else if(name == 'password'){ 138 // var patrn = /^[\w\W+]{8,20}$/; 139 // if(patrn.exec(v) == ""){ 140 // var text = "密码长度为8-20个任意字符"; 141 // $(this).next().text(text); 142 // }else{ 143 // $(this).next().remove(); 144 // $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 145 // } 146 // }else if(name == "phone"){ 147 // var patrn = /^[0-9]{11}$/; 148 // if(patrn.exec(v) == ""){ 149 // var text = "手机由11个数字组成"; 150 // $(this).next().text(text); 151 // }else{ 152 // $(this).next().remove(); 153 // $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 154 // } 155 // }else if(name == "email"){ 156 // var patrn = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; 157 // if(patrn.exec(v) == ""){ 158 // var text = "email地址输入有误"; 159 // $(this).next().text(text); 160 // }else{ 161 // $(this).next().remove(); 162 // $(this).after('<i class="fa fa-check icon" aria-hidden="true"></i>'); 163 // } 164 // } 165 // } 166 // }); 167 168 169 $(':submit').click(function () { 170 var flag = true; 171 $('#f1').find('.error').remove(); 172 $('#f1').find('input[type="text"],input[type="password"]').each(function () { 173 var v = $(this).val(); 174 if(v.length == 0){ 175 console.log(v.length); 176 flag = false; 177 var tag = document.createElement("span"); 178 $(tag).text("必填"); 179 $(tag).addClass("error"); 180 $(this).after(tag); 181 return false; 182 } 183 }); 184 return flag; 185 }) 186 187 </script> 188 189 </body> 190 </html>
