Jquery | 基礎 | 使用 jQuery 表單過濾選擇器
阿新 • • 發佈：2018-10-08
提交按鈕 密碼框 1.0 doc nal gid 過濾 選擇器 ffffff
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 使用 jQuery 表單過濾選擇器 </title>
<script language="javascript" type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
body {
font-size: 12px;
text-align: center
}
form {
width: 241px
}
textarea,
select,
input,
span {
display: none
}
.btn {
border: #666 1px solid;
padding: 2px;
width: 60px;
filter: progid:DXImageTransform.Microsoft. Gradient(GradientType=0, StartColorStr=#ffffff,
EndColorStr=#ECE9D8);
}
.txt {
border: #666 1px solid;
padding: 3px
}
.img {
padding: 2px;
border: solid 1px #ccc
}
.div {
border: solid 1px #ccc;
background-color: #eee;
padding: 5px
}
</style>
<script type="text/javascript">
$(function () {
//重置頁面
$("#btn0").click(function () {
window.location.reload();
})
// 顯示 Input 類型元素的總數量
$("#btn1").click(function () {
$("#form1 div").html(" 表單共找出 Input 類型元素 :" + $("#form1 :input").length);
$("#form1 div").addClass("div");
})
// 顯示所有文本框對象
$("#btn2").click(function () {
$("#form1 :text").show(3000);
})
// 顯示所有密碼框對象
$("#btn3").click(function () {
$("#form1 :password").show(3000);
})
// 顯示所有單選按鈕對象
$("#btn4").click(function () {
$("#form1 :radio").show(3000);
$("#form1 #Span1").show(3000);
})
// 顯示所有復選框對象
$("#btn5").click(function () {
$("#form1 :checkbox").show(3000);
$("#form1 #Span2").show(3000);
})
$("#btn6").click(function () {
// 顯示所有提交按鈕對象
$("#form1 :submit").show(3000);
})
$("#btn7").click(function () {
// 顯示所有圖片域對象
$("#form1 :image").show(3000);
})
$("#btn8").click(function () {
// 顯示所有重置按鈕對象
$("#form1 :reset").show(3000);
})
$("#btn9").click(function () {
// 顯示所有按鈕對象
$("#form1 :button").show(3000);
})
$("#btn10").click(function () {
// 顯示所有文件域對象
$("#form1 :file").show(3000);
})
})
</script>
</head>
<body>
<form id="form1">
<textarea class="txt"> TextArea</textarea>
<select>
<option value="0"> Item 0</option>
</select>
<input type="text" value="Text" class="txt" />
<input type="password" value="PassWord" class="txt" />
<input type="radio" /><span id="Span1"> Radio</span>
<input type="checkbox" />
<span id="Span2"> CheckBox</span>
<input type="submit" value="Submit" class="btn" />
<input type="image" title="Image" src="Images/logo.gif" class="img" />
<input type="reset" value="Reset" class="btn" />
<input type="button" value="Button" class="btn" />
<input type="file" title="File" class="txt" />
<div id="divShow"></div>
</form>
<button id="btn0">重置</button> <br/>
<button id="btn1">顯示 Input 類型元素的總數量<button> <br/>
<button id="btn2">顯示所有文本框對象</button> <br/>
<button id="btn3">顯示所有密碼框對象</button> <br/>
<button id="btn4">顯示所有單選按鈕對象</button> <br/>
<button id="btn5">顯示所有復選框對象</button> <br/>
<button id="btn6">顯示所有提交按鈕對象<button> <br/>
<button id="btn7">顯示所有圖片域對象</button> <br/>
<button id="btn8">顯示所有重置按鈕對象</button> <br/>
<button id="btn9">顯示所有按鈕對象</button> <br/>
<button id="btn10">顯示所有文件域對象 </button> <br/>
</body>
</html>
Jquery | 基礎 | 使用 jQuery 表單過濾選擇器