大數據(前期鋪墊)————JQuery學習1.1 time: 2019.9.9

一.HTML基本常用屬性

https://www.w3school.com.cn/tags/tag_a.asp    本連接爲HTML參考手冊。裏面記錄了所有標籤

二.編程工具

  編程工具爲HBuilder,步驟如下建立工程

文件->新建->Web項目

 

這裏可以看到新建了一個web項目

然後需要下載JQuery插件進行下載,將JQuery文件複製然後鼠標點擊js文件夾 Ctrl+V即可將其複製過去

三.將JQuery導入到Web項目中

1.輸入<scrip即可出現有路徑的選擇

 

2.編寫簡單的網頁(因爲時間原因很多細節就不去說了,因爲主要只是獲取到接收到的值。下一節會介紹關於網頁的增刪)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js" ></script>
		<script>
//			jQuery實現頁面初始化.
			$(function(){
				//將功能函數寫在下面
				var username=$("#username");
				var pwd=$("#userpwd");
				var spwd=$("#surepwd");
				var sex=$("input:radio:checked");
				//獲取html屬性對象有三種方法   
				/*
				 * 1.元素選擇器   $("input/(其他標籤)")此時會獲取頁面所有input 的元素   (ps  獲取標籤下其他類型的可以 $("標籤:屬性1:子屬性"))
				 * 2.#id選擇器  $("#id")選擇器通過 HTML 元素的 id 屬性選取指定的元素。
				 * 3..class選擇器 $(".class")類選擇器可以通過指定的 class 查找元素。
				 * 
				 * 那有這麼多選擇器 我們應該如何去使用呢?
				 *  1.單獨操作一個標籤對象時使用id 
					2.操作多個相同name屬性標籤時用name
					3.當你想獲取一個標籤內容時,先確定是標籤屬性內的還是標籤屬性外的
				 */
				
				//給id爲submit的按鈕添加事件
				$("#submit").click(function(){
					if(pwd.val()==spwd.val()){
						alert(sex.val());
						alert("註冊成功\n賬號:"+username.val()+"\n密碼:"+pwd.val()+"\n性別:"+sex.val());
					}
				});
			});
			
		</script>
	</head>
	<body>
		
		<!--創建一個註冊頁面-->
		<div>
			賬號:<input type="text" name="username" id="username" value=""   data-validate="required:請填寫賬號" /><span class="icon icon-user margin-small"></span>

			<br />
			密碼:<input type="password" name="userpwd" id="userpwd" value="" /><span id="s2"></span>
			<br />
			確密:<input type="password" name="surepwd" id="surepwd" value="" /><span id="s3"></span>
			<br />
			性別:<input type="radio" name="1" id="sex1" value="男" />男
				<input type="radio" name="1" id="sex2" value="女" />女
			<!--	注意這裏name屬性要相同-->
				<br />
			<input type="button" name="submit" id="submit" value="提交" />
			<input type="button" name="remove" id="remove" value="重置" />
				
		</div>
	</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章