首页
零基础教程
分类浏览
编 程
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; } /* 效果样式 */ .myClass { box-shadow: inset 0 0 5px red; } </style> </head> <body> <div class="app"> <h3>表单对象属性筛选器</h3> <form lang="zh-CN"> <p> <label>姓名:</label> <input type="text" name="name" placeholder="你的姓名" /> </p> <p> <label>地址:</label> <input type="text" name="name" placeholder="你的地址" disabled /> </p> <p> <label>选择学历:</label> <select title="学历"> <option value="val1">小学</option> <option value="val2" selected>中学</option> <option value="val3">大学</option> </select> </p> <fieldset> <legend>兴趣爱好</legend> <input type="checkbox" title="运动" /> <label>运动</label> <input type="checkbox" title="看书" checked="checked" /> <label>看书</label> <input type="checkbox" title="旅行" /> <label>旅行</label> </fieldset> <p>我的特长:</p> <ul> <li>擅长编写代码</li> <li>擅长户外生存</li> <li>擅长下厨</li> <li>擅长打篮球</li> <li>擅长唱歌,歌声悦耳动听</li> </ul> </form> </div> <div> <!-- :enabled 匹配所有可用元素 --> <button type="button" onclick=" reset(); $('input:enabled').addClass('myClass'); ">input:enabled</button> <!-- :disabled 匹配所有不可用元素 --> <button type="button" onclick=" reset(); $('input:disabled').addClass('myClass'); ">input:disabled</button> <!-- :checked 匹配所有选中的被选中元素(复选框、单选框等,select中的option), 对于select元素来说,获取选中推荐使用 :selected --> <button type="button" onclick=" reset(); $('input:checked').addClass('myClass'); ">input:checked</button> <!-- :selected 匹配所有选中的option元素 --> <button type="button" onclick=" reset(); let selectedObj = $('option:selected'); if(!!selectedObj) { log.info('值:' + selectedObj.val() + ', 文本:' + selectedObj.text()); } ">option:selected</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