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>
jquery实现:全选、反选、取消

 作用域:

作用域:
	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

可以任意调整表格中列的顺序

  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>
表格修改2

文档处理

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>
表格修改3
 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>
登陆框验证

 

posted @ 2018-04-19 22:36  ︻◣_蝸犇り~  阅读(123)  评论(0编辑  收藏  举报