首页
零基础教程
分类浏览
编 程
Sentinel
Go语言
C语言
汇编语言
Android
Java工具库
Spring Cloud Alibaba
Spring Cloud
Spring Data
Spring Boot
Spring Batch
JSP/Servlet
Hadoop
Dubbo
J2Cache
Hibernate
OpenJPA
MyBatis
ShardingSphere
Freemarker
Thymeleaf
Activiti
POI
JMail
Log4j
LogBack
Dom4j
XML
RxJava
JasperReport
JUnit
JMock
Apache Commons
HttpComponents
CGLib
WebSocket
ESAPI
设计模式
前 端
CSS/CSS3
HTML5
JavaScript
JQuery
DHTMLX
浏览器
HTML
前端小知识
Vue.js
NodeJS
ECharts
Less
UmiJS
React
Ant Design
Bootstrap
uni-app
JS-XLSX
数据库
SQL
PL/SQL
MySQL
Oracle
Redis
SQLite
MongoDB
Zookeeper
H2
服务器
Podman
Prometheus
Tomcat
JBoss
RocketMQ
Docker
Nginx
RabbitMQ
其 他
程序员
Maven
SVN
Git
UML
Windows
办公软件
Axure
Jenkins
HTTP
macOS
Java
Spring
Linux
AI
代码片段
Get小技能
面试题
开发工具
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JQeury 教程:选择器</title> <!-- 引入 jQuery 库 --> <script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script> <!-- 引入 loglevel 库,方便在 DOM 中打印日志 --> <script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script> <style> div { margin:20px; } button { background: #EEE !important; border: 1px solid #ccc !important; min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; } sup {color: red; font-size: 12px; background: transparent !important;} ul li { margin: 3px 0;} h3 { font-size: 18px; } .app { border:solid 1px #ccc; padding: 5px; } form { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; } form p { margin: 4px; display: flex; align-items: flex-start; flex-wrap: wrap; } form p label { display: inline-block; width: 120px; } form p.ops { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } /* 效果样式 */ .myClass { box-shadow: inset 0 0 5px red; } </style> </head> <body> <div class="app"> <h3>表单选择器</h3> <form> <p> <input type="hidden" value="10240" /> </p> <p> <label>账号:</label> <input type="text" placeholder="请输入账号" /> </p> <p> <label>密码:</label> <input type="password" placeholder="请输入密码" /> </p> <p> <label>选择学历:</label> <select title="学历"> <option value="val1">小学</option> <option value="val2">中学</option> <option value="val3">大学</option> </select> </p> <p> <label>选择爱好:</label> <input type="checkbox" placeholder="游泳" />游泳 <input type="checkbox" placeholder="健身" />健身 <input type="checkbox" placeholder="看书" />看书 </p> <p> <label>婚姻情况:</label> <input type="radio" name="hunyin" value="0" placeholder="未婚" />未婚 <input type="radio" name="hunyin" value="1" placeholder="已婚" />已婚 </p> <p> <label>上传个人简历:</label> <input type="file" placeholder="选择一个文件" /> </p> <p> <label>自我简介:</label> <textarea placeholder="简单介绍自己吧..."></textarea> </p> <p class="ops"> <input type="button" value="Input Button"/> <input type="reset" value="Input Reset" /> <input type="submit" value="Input Submit" /> <input type="image" src="https://www.hxstrive.com/cdn/resources/img_submit.png" alt="提交" /> </p> <p class="ops"> <button type="button">Button</button> <button type="reset">Button Reset</button> <button type="submit">Button Submit</button> </p> </form> </div> <div> <!-- :input 匹配所有 input, textarea, select 和 button 元素 --> <button type="button" onclick=" reset(); $(':input').addClass('myClass'); ">:input</button> <!-- :text 匹配所有的单行文本框 --> <button type="button" onclick=" reset(); $(':text').addClass('myClass'); ">:text</button> <!-- :password 匹配所有密码框 --> <button type="button" onclick=" reset(); $(':password').addClass('myClass'); ">:password</button> <!-- :radio 匹配所有单选按钮 --> <button type="button" onclick=" reset(); $(':radio').addClass('myClass'); ">:radio</button> <!-- :checkbox 匹配所有复选框 --> <button type="button" onclick=" reset(); $(':checkbox').addClass('myClass'); ">:checkbox</button> <!-- :submit 匹配所有提交按钮 --> <button type="button" onclick=" reset(); $(':submit').addClass('myClass'); ">:submit</button> <!-- :image 匹配所有图像域 --> <button type="button" onclick=" reset(); $(':image').addClass('myClass'); ">:image</button> <!-- :reset 匹配所有重置按钮 --> <button type="button" onclick=" reset(); $(':reset').addClass('myClass'); ">:reset</button> <!-- :button 匹配所有按钮 --> <button type="button" onclick=" reset(); $(':button').addClass('myClass'); ">:button</button> <!-- :file 匹配所有文件域 --> <button type="button" onclick=" reset(); $(':file').addClass('myClass'); ">:file</button> </div> <script> function reset() { $('*').removeClass('myClass'); } </script> </body> </html>
在线代码编辑器
代码编辑区
自动执行
运行
选择模板
选择JS库
预览效果
清空
切换主题
字符数: 0
提示: 输入完整的HTML代码,包括<!DOCTYPE>和<html>标签
更多工具
Base64 加密/解密工具
JSON 格式化工具
密码随机生成工具
哈希值计算工具
时间戳转换工具
图片 & Base64 互转
HTTP 客户端
Websocket 客户端
选择模板
取消
选择库和版本
库
版本
文件
取消
已复制到剪贴板
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
链接
免责声明
隐私政策
其他应用
开源镜像网站
公众号
©2018-2020 hxstrive.com 版权所有 ICP证:
蜀ICP备14031461号-2
川公网安备51010802032098