微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

jquery如何改变html标签的样式(两种实现方法)_jquery

php中文网
发布： 2016-05-16 17:43:37
原创
1577人浏览过

对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了。
一　通过修改标签属性来改变它的样式
js设置和获取标签的属性

豆绘AI
豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

豆绘AI 485
查看详情 豆绘AI
复制代码 代码如下:

　

jq设置和获取标签的属性
复制代码 代码如下:




值得注意的是JS的window.onload方法块的内容是在JQ的$(function(){})方法块执行完成后，再执行的。
二　通过修改标签的css样式来改变它的样式
看看基本的语法：
复制代码 代码如下:

$("#attr").addClass("banner");//添加样式
$("#attr").removeClass("banner");//移除样式
　　　　　　　　　　　　　　　　　　//ＪＱ支持连带写法，因为removeClass的返回结果也是一个Jq对象，所以Jq对象的所有方法和事件它都可以使用
$("#attr").removeClass("banner").addClass("bannerOver");

下面是一个例子，当在dd标签上单击时，将当前dd块进行高亮显示
复制代码 代码如下:


<script> <BR>$(function () { <BR>$('#menu_title').find('dd').click(function () { <BR>$('#menu_title').find('dd').removeClass('cur'); <BR>$(this).addClass('cur'); <BR>}) <BR>}) <BR></script>


下面是为表格的隔行变色效果
复制代码 代码如下:

.odd { background: #808080; }
.even { background: #ffd800; }
.selected { background: #0094ff; color: #fff; }　　　　 .hover { background: #808080; }

复制代码 代码如下:

var $trs = $("#menu_title>dd"); //选择所有行 $trs.filter(":odd").addClass("odd"); //给奇数行添加odd样式 $trs.filter(":even").addClass("even"); //给偶数行添加odd样式

单击行后，让当前行高亮显示
复制代码 代码如下:

//点击行,添加变色样式
$trs.click(function(e) {
$(this).addClass("selected")
　　　　　　　　　.siblings()　　　　　　　　　.removeClass("selected");
})

添加鼠标移入与移出事件
复制代码 代码如下:

　　　　　　　// 鼠标移入 与移出
$("#menu_title>dd").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

恩，好了对于标签的样式控制这块内容就讲到这里吧，感谢您的阅读！

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript真的不难-回顾一下基础知识_基础知识 下一篇：javascript图像处理—仿射变换深度理解_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript_跨平台开发与Electron实战 Electron是基于Chromium和Node.js的桌面应用开发框架，支持HTML、CSS、JavaScript技术栈，广泛用于VSCode、Slack等跨平台应用。
2025-11-21 20:35:02
322
JavaScript算法优化_时间复杂度与空间复杂度分析 斐波那契数列计算中，原始递归法时间复杂度为O(2ⁿ)，因重复计算导致效率低下；通过记忆化优化可降至O(n)，显著提升性能。
2025-11-21 20:34:02
544
JavaScript物联网_设备连接与数据处理 JavaScript通过MQTT协议实现物联网设备连接，利用Node.js解析传感器数据并格式化为标准结构，结合InfluxDB存储时序数据，支持前端可视化与云端转发，构建完整IoT数据链路。
2025-11-21 20:33:35
717
ES6新特性_箭头函数应用 箭头函数是ES6引入的简洁函数语法，使用=>定义，省略function关键字和return语句，单参数可省括号，如n=>n*2；它不绑定this，继承外层作用域的this值，解决回调中this指向问题，如在setTimeout或对象方法中正确访问属性；广泛用于map、filter、reduce等数组方法，提升可读性，但不能用作构造函数，也没有arguments对象，合理使用可使代码更简洁且this更可控。
2025-11-21 20:32:02
276
JavaScript装饰器_类与方法修饰实践 装饰器通过修改类或方法行为提升代码可维护性，如用LogCreation记录类创建时间，AddTimestamp添加实例属性，MeasureTime统计方法耗时，PreventConcurrent防止异步重复执行。
2025-11-21 20:31:02
254
JavaScript生物识别_WebAuthn认证流程 WebAuthn通过公钥加密和生物识别实现无密码认证，提升安全性和用户体验。1.注册时调用navigator.credentials.create()生成密钥对，公钥由服务器存储，私钥安全保存在设备中；2.登录时通过navigator.credentials.get()获取凭证，使用私钥对挑战进行签名完成身份验证；3.服务器负责生成挑战、验证签名结构、校验源和rpId一致性，并维护用户与凭证映射；4.生物识别仅用于本地验证用户存在，解锁私钥时不暴露生物数据，保障隐私。该方案依赖前后端协同，实现抗
2025-11-21 20:28:02
912
JavaScript原型防御：保护内置对象行为及预防策略 本文探讨了JavaScript中第三方脚本可能恶意修改原始类型原型的问题，导致内置方法行为异常。文章核心内容是介绍如何利用Object.freeze()方法来冻结内置对象的原型，从而有效预防原型被篡改，确保代码运行的稳定性和预期行为。同时，也指出了这种防御策略的局限性，如执行顺序要求和无法恢复已被修改的原型等。
2025-11-21 20:27:01
107
JavaScript元编程_Proxy与Reflect高级应用 Proxy和Reflect提供JavaScript元编程能力，Proxy可拦截对象操作如get、set、apply，结合Reflect能实现响应式系统、只读代理、自动嵌套对象等高级功能，提升灵活性但需注意性能与调试复杂度。
2025-11-21 20:24:02
574
Vue应用中SimpleMDE Markdown编辑器初始化失效问题的解决方案 在使用Vue应用中集成SimpleMDEMarkdown编辑器时，常见的初始化失败问题源于Vue在挂载时替换DOM节点。本文将详细阐述此问题的原因，并提供一种利用Vue生命周期钩子mounted和ref属性来正确初始化SimpleMDE编辑器的方法，确保其在Vue环境中正常运行并保持响应性。
2025-11-21 20:22:02
464
JavaScript构建工具_Gulp任务流与插件开发 Gulp是基于Node.js的流式前端构建工具，通过src()、dest()、pipe()和watch()四大核心方法实现高效的任务自动化处理。它利用内存中的文件流减少磁盘读写，提升性能，支持SASS编译、CSS压缩、JS合并等任务，并可通过自定义插件扩展功能，适用于轻量级或定制化项目构建场景。
2025-11-21 20:22:02
483
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部