实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.表单过滤器</title>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>用户注册</legend>
<p>用户名:<input type="text" name="name" required></p>
<p>邮箱:<input type="email" name="email" required></p>
<p>密码:<input type="password" name="password1" required></p>
<p>确认密码:<input type="password" name="password2" required></p>
<p>性别:
<input type="radio" name="gender" value='male' checked>男
<input type="radio" name="gender" value='female'>女
</p>
<p>上传头像: <input type="file" name=""></p>
<p>Web语言:
<input type="checkbox" name="lang[]" value="javascript">JavaScript
<input type="checkbox" name="lang[]" value="php" checked>PHP
<input type="checkbox" name="lang[]" value="java">Java
<input type="checkbox" name="lang[]" value="python">Python
</p>
<p>级别:
<select>
<option value="0">小白</option>
<option value="1" selected>入门</option>
<option value="2">中级</option>
<option value="3">高级</option>
<option value="4">去火星吧</option>
</select>
</p>
<p>简介:<textarea cols="40" rows="5"></textarea></p>
<p><input type="hidden" name="userId" value="1010" disabled=""></p>
<p>
<!-- <input type="submit" name="submit" value="提交"> -->
<!-- <input type="reset" name="reset" value="重填"> -->
<button type="submit" name="submit">提交</button>
<button type="reset" name="reset">重填</button>
</p>
</fieldset>
</form>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//1根据类型选择表单控件元素
//css写法,仅选到到所有的input,其它的控件选不上
// $('input').css('background-color', 'lightgreen')
//jquery写法,前面加上冒号即可,除了input,select,button,textarea全部可以选上
// $(':input').css('background-color', 'lightgreen')
//如果只想选input标签,在:input之前加上标签限定:input即可,此时与css语法效果完全一致
// $('input:input').css('background-color', 'lightgreen')
//:input:本意就是选择全部的表单控件的意思,后面可以用css属性进行限制,例如获取密码框
// $(':input[type="password"]').css('background-color', 'lightgreen')
//后面除了可以用css属性进行限制外,更推荐使用jquery的过滤器,例如密码框过滤器就是:password
// $(':input:password').css('background-color', 'lightgreen')
//换个颜色以示区别,从这里可以看出,过滤器之间也支持链式操作
// $(':input:password').css('background-color', 'skyblue')
//我们再作几个练习
//2.根据表单控件的特征来选择元素
//:input,只选择表单元素,不包括:file,:image,:input这个我们已做过
//只选择file类型
$(':file').css('background-color', 'lightgreen')
//只选择文本框:type="text"
$(':text').css('color',"red")
//只选择提交按钮
$('button:submit').css({
'background-color':'orange',
'color':'white',
'font-size':'1.2em',
'border': 'none',
'width':'90px',
'height':'40px'
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
