表单UI选择器和表单元素属性选择器:
实例:
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<title>Insert you title</title>
<meta http-equiv='description' content='this is my page'>
<meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
<style type='text/css'>
*{margin:0;padding:0;}
html{font:400 15px/1.2em 'Courier New';color:#333;}
#demo{850px;height:350px;margin:20px auto;}
#form{100%;}
label{display:block;font:400 15px/1.2em 'Courier New';color:#333;margin-top:5px;margin-bottom:5px;}
input{border:1px solid #999;}
input[type='text'],input[type='password']{100%;height:20px;height:30px;text-indent:5px;color:#000;font:400 15px/1.2em 'Courier New';}
input[type='checkbox']{15px;height:15px;margin:3px 10px;border:1px solid #000;background:#FFF;padding:0;color:#FFF;cursor:pointer;}/* 表单兼容样式暂不解决 */
input[type='radio']{margin:3px 10px;cursor:pointer;}
label[for='famale'],label[for='male']{float:left;margin-top:0;}
input[type='submit'],input[type='reset'],button{100%;height:30px;font:400 15px/30px 'Courier New';outline:none;margin:5px 0;background:#CCC;padding:0;border:0;transition:.5s all;border-radius:2px;}
input[type='submit']:hover,input[type='reset']:hover,button:hover{background:#9E9C32;color:#FFF;}
</style>
<script type='text/javascript'>
$(function(){
// 匹配所有 input, textarea, select 和 button 元素包括隐藏元素
console.log($(':input').size());
// ":text" : 匹配所有的单行文本框(可以加上前导进行限制范围)
console.log($('#form input:text').get(0).placeholder);
// ":password" : 匹配所有的密码框(可以加上前导进行限制范围)
console.log($('#form input:password').get(0).placeholder);
// ":checkbox" : 匹配所有的多选框(可以加上前导进行限制范围)
$('#form input:checkbox').each(function(){
console.log($(this).val());
});
// ":radio" : 匹配所有的单选框(可以加上前导进行限制范围)
$('#form input:radio').each(function(){
console.log($(this).val());
});
// ":hidden" : 匹配所有的隐藏框(可以加上前导进行限制范围)
$('#form input:hidden').each(function(index){
console.log($(this).attr('id'));
});
// ":submit" : 匹配所有的提交按钮(可以加上前导进行限制范围)
console.log($('#form input:submit').val());
// ":reset" : 匹配所有的提交按钮(可以加上前导进行限制范围)
console.log($('#form input:reset').val());
// ":button" : 匹配所有的提交按钮(可以加上前导进行限制范围)
console.log($('#form button:button').attr('type'));
/*
剩余的还有 :file :image 在此就不多做演示了
*/
// 匹配可用元素(可以加上前导进行限制范围)
console.log($('#form button:enabled').size());
// 匹配不可用元素(可以加上前导进行限制范围)
console.log($('#form :disabled').size());
// 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)(可以加上前导进行限制范围)
console.log($('#form :checked').size());
});
</script>
</head>
<body>
<div id='demo'>
<form id='form' method='post' action=''>
<label style='letter-spacing: 3px;'>用户名:</label><input type='text' id='user' placeholder='表单UI选择器":text"' />
<label style='letter-spacing: 3px;'>用户名:</label><input type='text' id='user' placeholder='禁用元素' disabled="disabled" />
<label style='letter-spacing: 5px;'>密 码:</label><input type='password' id='pw' placeholder=':password'/>
<label style='letter-spacing: 5px;'>爱 好:</label><input type='checkbox' value='read' checked="checked"/>read<input type='checkbox' value='music'/>music<input type='checkbox' value='tourism'/>tourism<input type='checkbox' value='game'/>game
<label style='letter-spacing: 5px;'>性 别:</label>
<label for='famale'><input type='radio' value='famale' name='sex' id='famale' checked="checked"/>famale</label>
<label for='male'><input type='radio' value='male' name='sex'/>male</label>
<input type='hidden' id='hidden01' name='Demo' value='Demo example of form pseudo class selector in jquery'>
<input type='hidden' id='hidden02' name='Demo' value='Demo example of form pseudo class selector in jquery'>
<input type='submit' value='submit' /><input type='reset' value='reset' /><button type='button'>button</button>
</form>
</div>
</body>
</html>