js进阶 10-11/12 表单伪类选择器的作用
2024-10-01 22:17:32
js进阶 10-11 表单伪类选择器的作用
一、总结
一句话总结:能想到用伪类选择器来解决问题。如果能一次记住自然是最棒的。
1、表单伪类选择器分为哪两类?
表单元素和表单属性,表单元素例如input,表单属性例如disabled
2、表单属性伪类选择器有哪四种(重要)?
可用的,不可用的,下拉列表选择的,单选复选选中的(就是我一直弄的那个功能)
表单属性伪类选择器
- :enabled选择所有可用input元素
- :disabled所有禁用的input元素
- :selected选择所有被选中的option元素
- :checked选择所被选中的表单元素,一般用于radio和checkbox
3、表单标签伪类选择器的作用?
选择表单里面的任何类型的元素,也可以选择显示和隐藏
26 $(':input').css('background','#ccc')
27 $(':button').css('background','green')
4、表单标签伪类选择器有哪些?
所有的表单元素
二、表单伪类选择器的作用
1、相关知识
- 表单伪类选择器
- : Input选择所有input元素
- :button选择所有type="button"的input元素
- :submit选择所有type="submit"的input元素
- :reset选择所有type="reset"的input元素
- :text选择所有单选文本框
- :textarea选择所有多行文本框
- :password选择所有密码文本框
- :radio选择所有单选按钮
- :checkbox选择所有复选框
- :image选择所有图像域
- :hidden选择所有隐藏域
- :file选择所有文件域
- 表单属性伪类选择器
- :enabled选择所有可用input元素
- :disabled所有禁用的input元素
- :selected选择所有被选中的option元素
- :checked选择所被选中的表单元素,一般用于radio和checkbox
2、代码
10-11代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<form action="#">
<p>用户名:<input type="text" name="username"></p>
<p>密 码:<input type="password" name="password"></p>
<p>爱 好:<br>
<input type="radio" name="rad" value="A">新闻<br>
<input type="radio" name="rad" value="B">小说<br>
<input type="radio" name="rad" value="C">音乐<br>
</p>
<p>上传头像:<input type="file"></p>
<p>
<input type="reset" value="重置">
<input type="submit" value="提交">
<input type="button" value="按钮1">
<button type="button">按钮2</button>
</p>
</form>
<script>
$(':input').css('background','#ccc')
$(':button').css('background','green')
$(':submit').css('background','blue')
$(':text').css('background','#fcc')
$(':password').css('background','#fcc')
$(':radio').hide(3000)
$(':radio').show(3000)
$(':file').css('background','orange')
</script>
</body>
</html>
10-12代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<form action="#">
<p>用户名:<input type="text" name="username"></p>
<p>密 码:<input type="password" name="password"></p>
<p>爱 好:<br>
<input type="radio" name="rad" value="A" checked="">新闻
<input type="radio" name="rad" value="B">小说
<input type="radio" name="rad" value="C">音乐
<input type="button" class="btn1" value="隐藏单选框">
</p>
<p>
<input type="reset" value="重置" disabled="">
<input type="submit" value="提交">
</p>
<select onchange="selVal()" >
<option value="列表项1">列表项1</option>
<option value="列表项2">列表项2</option>
<option value="列表项3">列表项3</option>
</select>
</form>
<script>
$(':enabled').css('background','#ccc')
$(':disabled').css('background','green')
$('.btn1').click(function(){
$(':checked').hide()
}) function selVal(){
var str=$(':selected').val()
alert(str)
}
</script>
</body>
</html>
0 Links
最新文章
- HTML5_07之WebSocket
- 踢爆IT劣书出版黑幕——由清华大学出版社之《C语言入门很简单》想到的(1)
- MVC WebAPI中响应客户端请求返回图片
- iOS获取流量参考
- Java虚拟机学习(1):体系结构 内存模型
- J2EE相关总结
- (转)C#与Java的证书密钥转换
- javascript操作html元素CSS属性
- Android:mimeType
- Qt移动版优化后台云服务、支持跨平台开发
- DOM笔记2
- Ubuntu宿主机与VMware中其他系统虚拟机的互通
- Spring MVC相关
- forfiles命令详解
- MySQL SELECT 执行的具体步骤
- 微信小程序笔记<;七>;视图层 —— wxml
- MIT-6.828-JOS-lab6:Network Driver
- Python3下requests库发送multipart/form-data类型请求
- RSS 使用前详解
- C++新式转型
热门文章
- C#调用第三方ocx控件 (winform /aspx)
- JS实现动画的四条优化方法
- HttpWatch--简介及使用技巧
- DC中检查脚本错误
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- PHP Web木马扫描器代码
- 三个Bootstrap免费字体和图标库
- [Angular] Angular Global Keyboard Handling With EventManager
- 关于Android中设置闹钟的相对比较完善的解决方案
- Linux 下配置 Python IDE——Emacs