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 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄