From 0ce3d1c1ab83b8b235d39f0f0fe223156a1213ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E4=B8=96=E6=B6=9B?= <2124876211@qq.com>
Date: Thu, 1 Dec 2022 13:17:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9E=97=E4=B8=96=E6=B6=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2022.11.30\344\275\234\344\270\232.html"  | 223 ++++++++++++++++++
 .../2022.12.1\347\254\224\350\256\260.md"     |  77 ++++++
 2 files changed, 300 insertions(+)
 create mode 100644 "23\346\236\227\344\270\226\346\266\233/\344\275\234\344\270\232/2022.11.30\344\275\234\344\270\232.html"
 create mode 100644 "23\346\236\227\344\270\226\346\266\233/\347\254\224\350\256\260/2022.12.1\347\254\224\350\256\260.md"
diff --git "a/23\346\236\227\344\270\226\346\266\233/\344\275\234\344\270\232/2022.11.30\344\275\234\344\270\232.html" "b/23\346\236\227\344\270\226\346\266\233/\344\275\234\344\270\232/2022.11.30\344\275\234\344\270\232.html"
new file mode 100644
index 0000000..a62c439
--- /dev/null
+++ "b/23\346\236\227\344\270\226\346\266\233/\344\275\234\344\270\232/2022.11.30\344\275\234\344\270\232.html"
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>注册表单验证</title>
+		<script src="./../bag.js"></script>
+		<style type="text/css">
+			.errInfo{color: red; font-size: 12px;}
+			.errInfo img{ vertical-align:middle;}
+		</style>
+
+	</head>
+	<body>
+		<form action="Demo12_01.html" >
+		<table width="1000" align="center">
+			<caption>用户注册</caption>
+			<tr>
+				<td width="300" align="right" height="30">用户名:</td>
+				<td width="700"><input type="text" id="txtAccount" >
+					<span id="spanAccount" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">密码:</td>
+				<td width="700"><input type="password" id="txtPwd" >
+					<span id="spanPwd" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">密码确认:</td>
+				<td width="700"><input type="password" id="txtPwdOk">
+					<span id="spanPwdOk" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">性别:</td>
+				<td width="700">
+					<input type="radio" name="sex" id="rdBoy" value="男" >男
+					<input type="radio" name="sex" id="rdGirl" value="女" >女	
+					<span id="spanSex" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">专业:</td>
+				<td width="700">
+					<select id="selProfessional" >
+						<option value="">--请选择--</option>
+						<option value="软件开发">软件开发</option>
+						<option value="电子商务">电子商务</option>
+						<option value="国际贸易">国际贸易</option>
+						<option value="工商管理">工商管理</option>
+						<option value="高级护理">高级护理</option>
+					</select>
+					<span id="spanProfessional" class="errInfo"></span>
+				</td>
+			</tr>			
+			<tr>
+				<td width="300" align="right" height="30">爱好:</td>
+				<td width="700" >
+					<input type="checkbox" name="hobby" value="抽烟" >抽烟
+                    <input type="checkbox" name="hobby" value="喝酒" >喝酒
+					<input type="checkbox" name="hobby" value="打游戏" >打游戏
+					<input type="checkbox" name="hobby" value="烫头发" >烫头发
+					<input type="checkbox" name="hobby" value="足球" >足球
+					<input type="checkbox" name="hobby" value="篮球" >篮球
+					<span id="spanHobby" class="errInfo"></span>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">自我介绍:</td>
+				<td width="700">
+					<textarea id="mySelf" rows="10" cols="60"></textarea>
+				</td>
+			</tr>
+			<tr>
+				<td width="300" align="right" height="30">&nbsp;</td>
+				<td width="700">
+					<input type="submit" value="注册" />
+					<input type="reset" value="取消" />
+				</td>
+			</tr>
+		</table>
+		
+		</form>	
+		<script type="text/javascript">
+		$('#txtAccount').blur(user)
+		function user(){
+			var $input = $('#txtAccount').val()
+			if ($input.length<6&&$input.length>0) {
+				$('#spanAccount')[0].innerHTML='不到六位数'
+				return false
+			}else if($input.length==0){
+				$('#spanAccount')[0].innerHTML='不能为空'
+				return false
+			}else{
+				$('#spanAccount')[0].innerHTML=''
+			}
+		}
+		
+		$('#txtPwd').blur(txtPwd)
+		function txtPwd (){
+			var txt = $('#txtPwd').val()
+			if (txt.length<8&&txt.length>0) {
+				$('#spanPwd').html('密码长度不足八位')
+                return false
+			}else if(txt.length==0){
+				$('#spanPwd').html('密码不能为空')
+                return false
+            }else{
+                $('#spanPwd').html('')
+            }
+		}
+
+
+		$('#txtPwdOk').blur(txtPwdOk)
+		function txtPwdOk () {
+			var txtok = $('#txtPwdOk').val()
+			var txt = $('#txtPwd').val()
+			if (txtok!=txt) {
+				$('#spanPwdOk').html('两次密码不同')
+                $('#txtPwdOk').val('')
+                return false
+			}else{
+                $('#spanPwdOk').html('')
+            }
+		}
+		
+
+
+		$(':radio').attr('onclick','sexchose()')
+		var sex
+		function sexchose() {			
+			var $radio = $(':radio')
+			for (let i = 0; i < $radio.length; i++) {
+				if ($radio[i].checked) {
+					sex = $radio[i].value
+					break
+				}
+			}
+			console.log(sex);
+		}
+
+
+
+		$('#selProfessional').attr('onchange','Professional()')
+		var selProfessional
+		function Professional() {
+			var sel = $('#selProfessional').val()
+			selProfessional=sel
+			console.log(selProfessional);
+		}
+
+
+
+
+		$(':checkbox').attr('onchange','checkbox()')
+		var hobbies=''
+		function checkbox() {
+			var check = $(':checkbox')
+			var text=''
+			for (let i = 0; i < check.length; i++) {
+				if (check[i].checked) {
+					text+=check[i].value
+					
+				}
+			}
+			hobbies=text
+			console.log(hobbies);
+		}
+
+
+		$('#mySelf').attr('onkeyup','text()')
+		function text() {
+			var txt= $('#mySelf')[0].value
+			console.log(txt);
+			if (txt.length>30) {
+				// $('#myself')[0].value
+				$('#mySelf')[0].value = txt.slice(0,30)
+			
+			}
+		}
+
+
+		$(':submit').eq(0).click(
+			function(){
+				var num=0
+				if (sex==null) {
+					$('#spanSex').html('没有选择性别')
+                    num++
+				}else{
+                    $('#spanSex').html('')
+                }
+				if (selProfessional==null) {
+					  $('#spanProfessional').html('没有选择专业')
+                      num++
+				}else{
+                    $('#spanProfessional').html('')
+                }
+				if (hobbies=='') {
+					  $('#spanHobby').html('没有选择爱好')
+                      num++
+				}else{
+                    $('#spanHobby').html('')
+                }
+				if (user()==false) {
+                    num++				
+                }
+				if (txtPwd()==false) {
+                    num++				
+                }
+                if (txtPwdOk()==false) {
+                    num++				
+                }
+                if (num!=0) {
+                    return false
+                }
+				
+			}
+		)
+
+		</script>	
+	</body>
+</html>
\ No newline at end of file
diff --git "a/23\346\236\227\344\270\226\346\266\233/\347\254\224\350\256\260/2022.12.1\347\254\224\350\256\260.md" "b/23\346\236\227\344\270\226\346\266\233/\347\254\224\350\256\260/2022.12.1\347\254\224\350\256\260.md"
new file mode 100644
index 0000000..db4efa3
--- /dev/null
+++ "b/23\346\236\227\344\270\226\346\266\233/\347\254\224\350\256\260/2022.12.1\347\254\224\350\256\260.md"
@@ -0,0 +1,77 @@
+ 16、jQuery
+
+jQuery 是一个 JavaScript 库。
+
+## jQuery 选择器
+
+| $("*")                   | 选取所有元素                                        |
+| ------------------------ | --------------------------------------------- |
+| $(this)                  | 选取当前 HTML 元素                                  |
+| $("p.intro")             | 选取 class 为 intro 的 <p> 元素                     |
+| $("p:first")             | 选取第一个 <p> 元素                                  |
+| $("ul li:first")         | 选取第一个 <ul> 元素的第一个 <li> 元素                     |
+| $("ul li:first-child")   | 选取每个 <ul> 元素的第一个 <li> 元素                      |
+| $("[href]")              | 选取带有 href 属性的元素                               |
+| $("a[target='_blank']")  | 选取所有 target 属性值等于 "_blank" 的 <a> 元素           |
+| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素          |
+| $(":button")             | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
+| $("tr:even")             | 选取偶数位置的 <tr> 元素                               |
+| $("tr:odd")              | 选取奇数位置的 <tr> 元素                               |
+
+## jQuery操作属性
+
+### 查询属性
+
+.attr('属性名')
+
+.prop('属性名')：如果返回值为boolean
+
+.attr('属性名','属性值')：添加属性
+
+.removeAttr('属性名')：删除属性
+
+### 操作属性内容
+
+.html()：连同标签一起获取
+
+.text()：只获取文本节点
+
+.val()：获取值
+
+### 操作属性样式
+
+.css('样式名','样式值'....)：为对象添加属性样式（可多个）
+
+添加元素
+
+.prepend(创建的节点对象)：在对象开头添加节点
+
+.append(创建的节点对象)：在对象末尾添加节点
+
+要删除的对象.remove()：删除子节点（连同自身）
+
+要删除的对象.empty()：只删除子节点
+
+## jQuery事件
+
+$('').事件名()：绑定事件
+
+$('').off('事件名')：解绑事件
+
+$('').one('事件名')：只执行一次的事件
+
+$('').bind('事件名'，函数体)：为多个事件绑定同一个函数
+
+$('').on('事件名'，函数体)：跟bind一样，添加为动态添加的元素进行事件绑定
+
+e.preventDefault()：禁止默认
+
+e.stopPropagation()：禁止冒泡
+
+### 事件对象
+
+target：事件源对象
+
+currentTarget：当前调用的对象
+
+delegateTarget：当前调用的 jQuery 事件处理程序所添加的元素
\ No newline at end of file
-- 
Gitee


用户名:	+ +
密码:	+ +
密码确认:	+ +
性别:	+ 男 + 女 + +
专业:	+ + +
爱好:	+ 抽烟 + 喝酒 + 打游戏 + 烫头发 + 足球 + 篮球 + +
自我介绍:	+ +
	+ + +