jQuery样式操作与实践:开关灯效果与聚焦高亮

需积分: 10 4 下载量 34 浏览量 更新于2024-08-22 收藏 121KB PPT 举报
"这篇资料主要介绍了jQuery中的样式操作,包括获取和设置样式、添加、删除、切换样式以及判断样式存在的方法。此外,还提供了两个实际的案例:网页开关灯效果和聚焦控件的高亮显示。资料中给出了具体的HTML、CSS和JavaScript代码示例,帮助学习者理解和应用jQuery进行网页交互设计。" 在jQuery中,样式操作是非常常见的需求。通过以下方法,我们可以方便地处理元素的样式: 1. **获取样式**:使用`attr("class")`可以获取元素的class属性,从而得知其样式。 2. **设置样式**:通过`attr("class","myclass")`可以将指定的class设置给元素,替换原有的class。 3. **添加样式**:`addClass("myclass")`用于向元素添加一个或多个样式类,不会影响已有的其他样式。 4. **移除样式**:`removeClass("myclass")`可移除指定的样式类,不改变其他类。 5. **切换样式**:`toggleClass("myclass")`方法允许根据当前状态切换样式,如果元素已有该样式,则移除;如果没有,则添加。 6. **判断样式是否存在**:`hasClass("myclass")`可以用来检查元素是否已经拥有特定的样式类。 在提供的案例中: **网页开关灯效果**是通过切换一个名为`dark`的CSS类来实现的。当`dark`类存在时,页面背景色为黑色,反之则为默认颜色。通过`$("#btn").click(function() { $("body").toggleClass("dark"); })`,点击按钮即可实现这个效果。 **聚焦控件的高亮显示**利用了`focus`和`blur`事件,当文本框获得焦点时添加`focus`类,失去焦点时移除`focus`类,以改变输入框的视觉状态。代码如下: ```javascript $(":text").focus(function() { $(this).addClass("focus"); }).blur(function() { $(this).removeClass("focus"); }); ``` 这里,`:text`选择器选取所有文本输入框,`focus`和`blur`事件分别在元素获取和失去焦点时触发。 另外,还有两个练习题目: - 点击表格行后,被点击行背景变黄,其他行恢复白色。可以通过监听每个`tr`的`click`事件并修改背景颜色来实现。 - 设计一个按钮,点击后让网页变为黑白显示,再次点击恢复彩色。这可以通过添加和移除`filter:Gray` CSS样式实现。 jQuery因其简洁的API和强大的功能,成为JavaScript开发中广泛使用的库。它简化了DOM操作,提供了丰富的选择器,以及对事件处理、动画和Ajax操作的支持。在Visual Studio中,jQuery还提供了代码补全功能,使得开发更为便捷。