jquery的表单选择器

Original 2019-02-22 14:56:45 207
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jquery表单选择器</title> <script type="text/javascript" src="jquery-3.3.1.min.js&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery表单选择器</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
// 表单选择器
// 语法:
// $(':enabled')所有激活的input元素(可以使用的input元素)
// $(':disabled')所有禁用的input元素(不可以使用的input元素)
// $(':selected')所有被选取的元素,针对于select元素
// $(':checked')所有被选中的input元素
$(document).ready(function(){
$(':enabled').css('background','pink');
$(':disabled').css('background','blue');
$(':selected').css('color','blue');
$(':checked').parent().css('color','red');
})

</script>
<form>
输入1<input type="text" name=""><br>
输入2<input type="text" name=""><br>
输入3<input type="text" name=""><br>
输入4<input type="text" name="" disabled><br>
输入5<input type="text" name=""><br>
<select>
     	  <option>摩羯座</option>
   	  <option selected>双鱼座</option>
    <option>射手座</option>
 	  <option>天蝎座</option>
 	</select>
 	<label><input type="checkbox" name="">1</label>
 	<label><input type="checkbox" name=""checked>2</label>
 	<label><input type="checkbox" name="">3</label>
</form>
</body>
</html>


Correcting teacher:查无此人Correction time:2019-02-22 16:18:34
Teacher's summary:完成的不错。下次把代码缩进,看着整齐。jquery选择器功能很强大,要多练习,继续加油。

Release Notes

Popular Entries