jQuery Selector 之表單類
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
1、
:input
匹配所有input, textarea, select 和button 元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:input 匹配所有input, textarea, select 和button 元素
//查找所有的input元素
var str=' ';//此變數顯示訊息用的
$(":input").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<!-- 下面這些元素都會被匹配到。 -->
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
2、
:text
匹配所有的單行文本框
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:text 匹配所有的單行文本框
//查找所有的text元素
var str=' ';//此變數顯示訊息用的
$(":text").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
3、
:password
匹配所有密碼框
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:password 匹配所有密碼框
//查找所有密碼框
var str=' ';//此變數顯示訊息用的
$(":password").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
4、
:radio
匹配所有單選按鈕
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:radio 匹配所有單選按鈕
//查找所有單選按鈕
var str=' ';//此變數顯示訊息用的
$(":radio").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
5、
:checkbox
匹配所有復選框
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:checkbox 匹配所有復選框
//查找所有復選框
var str=' ';//此變數顯示訊息用的
$(":checkbox").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
6、
:submit
匹配所有提交按鈕
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:submit 匹配所有提交按鈕
//查找所有提交按鈕
var str=' ';//此變數顯示訊息用的
$("input:submit").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
7、
:image
匹配所有圖像域
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:image 匹配所有圖像域
//查找所有圖像域
var str=' ';//此變數顯示訊息用的
$(":image").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
8、
:reset
匹配所有重置按鈕
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:reset 匹配所有重置按鈕
//查找所有重置按鈕
var str=' ';//此變數顯示訊息用的
$(":reset").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
9、
:button
匹配所有按鈕
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:button 匹配所有按鈕
//查找所有按鈕
var str=' ';//此變數顯示訊息用的
$(":button").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button value="Button">Button</button>
</form>
</body>
</html>
顯示結果：
10、
:file
匹配所有文件域
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:file 匹配所有文件域
//查找所有文件域
$(":file").css("background-color","red");
});
</script>
</head>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" value="Input checkbox"/>
<input type="file" value="Input file"/>
<input type="hidden" value="Input hidden"/>
<input type="image" value="Input image"/>
<input type="password" value="Input password"/>
<input type="radio" value="Input radio"/>
<input type="reset" value="Input reset"/>
<input type="submit" value="Input submit"/>
<input type="text" value="Input text"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
顯示結果：
11、
:hidden
匹配所有不可見元素，或者type為hidden的元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:hidden 匹配所有不可見元素，或者type為hidden的元素
//查找所有tr不可見元素
var str=' ';//此變數顯示訊息用的
$("tr:hidden").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
</form>
</body>
</html>
顯示結果：
沒有留言:
張貼留言