表单选择器

简介: 表单选择器

1.需求描述:选中表单中的文本框、密码框、文件框、按钮、提交按钮、重置按钮等,设置其背景为红色

<form>
    <input type="text"><br>
    <input type="password"><br>
    <input type="file"><br>
    <input type="button" value="按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
</form>
$('input:text').css('background', 'red');
$('input:password').css('background', 'red');
$('input:file').css('background', 'red');
$('input:button').css('background', 'red');
$('input:submit').css('background', 'red');
$('input:reset').css('background', 'red');


2.需求描述:选中复选框、单选框,然后输出标签信息


<form>
    <input type="checkbox">复选框<br>
    <input type="radio">单选框<br>
</form>
console.log($(':checkbox')[0]);
console.log($(':radio')[0]);



3.需求描述:输出表单获取焦点、表单选中、表单禁用、表单列表项选中的状态所在的标签信息

<form>
<input type="text" autofocus><br>
<input type="checkbox" checked>复选框<br>
<input type="radio" disabled>单选框<br>
<select>
<option selected>列表项1</option>
<option>列表项2</option>
</select>
</form>
console.log($(':focus')[0]);
console.log($(':checked')[0]);
console.log($(':disabled')[0]);
console.log($(':selected')[0]);



相关文章
|
3月前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
97 0
|
5月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
68 0
|
前端开发 程序员
【前端】使用样式选择器before和after布局,以及简单的表单输入框布局
本篇文章来讲解下样式选择器before和after的用法,以及doctype的作用 有时候真的需要温故而知新,用了那么多年的前端,对一些知识点灵活运用加点小技巧也是挺有趣的
156 0
|
JavaScript 前端开发 索引
jQuery选择器之过滤选择器
jQuery选择器之过滤选择器
183 11
|
JavaScript
JQUERY选择器--筛选选择器
JQUERY选择器--筛选选择器
63 0
|
前端开发 数据安全/隐私保护
【前端】HTML标签:表单标签(form标签)
HTML标签:表单标签(form标签)
131 0
|
移动开发 前端开发 JavaScript
《简单记个笔记》之表单标签加CSS选择器
简单讲解表单标签+CSS选择器
81 0
《简单记个笔记》之表单标签加CSS选择器
|
前端开发 程序员
【CSS 选择器世界】 自定义单选框
【CSS 选择器世界】 自定义单选框
192 0
【CSS 选择器世界】 自定义单选框
|
JavaScript
jQuery常用选择器【标签选择器】【id选择器】【class选择器】【集合选择器】
jQuery常用选择器【标签选择器】【id选择器】【class选择器】【集合选择器】
165 0
jQuery常用选择器【标签选择器】【id选择器】【class选择器】【集合选择器】