close


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>



顯示結果：







arrow
arrow
    文章標籤
    jquery button script checkbox option 匹配 radio submit hidden reset head value input Selector
    全站熱搜
    創作者介紹
    創作者 PG Levin Li 的頭像
    PG Levin Li

    程式開發學習之路

    PG Levin Li 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄