jQuery实现点击切换颜色效果

需积分: 48 7 浏览量更新于2024-09-08 收藏 1KB TXT 举报

"该资源是一个使用jQuery实现的简单交互效果，点击色块后，被点击的色块会变为绿色，并显示字母'B'，其他色块则恢复为红色并显示字母'A'。" 在这个示例中，主要涉及了以下几个jQuery相关的知识点： 1. **jQuery库的引入**：首先在`<head>`标签内引入了jQuery库，通过`<script src="../public/js/jquery-2.2.3.min.js"></script>`，确保页面可以使用jQuery提供的JavaScript函数和方法。 2. **DOM准备就绪事件**：使用`$(function(){...})`包裹代码，这是jQuery中的DOM准备就绪事件，确保在执行JavaScript代码时，DOM结构已经加载完成。 3. **事件绑定**：`$('div').on('click', function() {...})`是jQuery中的事件绑定，这里的`click`表示监听每个`div`元素的点击事件。当用户点击任何一个`div`时，将触发内部的回调函数。 4. **jQuery选择器**：`$(this)`代表当前触发事件的元素（即被点击的`div`），`$(div).siblings()`则选择了所有同级的`div`元素。 5. **类操作**： - `hasClass('bg')`检查当前元素是否具有`bg`类。 - `addClass('bg_click')`和`removeClass('bg_click')`用于添加或移除`bg_click`类。 - `addClass('bg')`和`removeClass('bg')`用于添加或移除`bg`类。 6. **HTML内容修改**：`html('B')`和`html('A')`用来更改被选中`div`内的文本内容。 7. **CSS样式**：定义了两个CSS类，`.bg`和`.bg_click`，分别对应未被点击和被点击时的色块样式。`.bg`设置了红色背景，`.bg_click`设置了绿色背景。 8. **HTML结构**：在`<body>`中包含多个带有`bg`类的`div`元素，它们都是可点击的色块，初始状态下，第一个`div`被设置为`bg_click`类，显示绿色和字母'B'。通过这个简单的示例，我们可以学习到如何利用jQuery实现基本的交互效果，包括响应点击事件、改变元素的样式和内容，以及操作DOM中的类。这对于网页动态效果的开发是非常基础且重要的技能。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../public/js/jquery-2.2.3.min.js"></script>
<script>
$(function () {
$('div').on('click',function(){
var $div = $(this);
var $others = $div.siblings();
if($div.hasClass('bg')){
$div.removeClass('bg').addClass('bg_click').html('B');
}else {
$div.removeClass('bg_click').addClass('bg').html('A');
}
$others.addClass('bg').removeClass('bg_click').html('A');
});
})
</script>
<style>
.bg {
width: 18px;
height: 18px;
margin-top: 10px;
background-color: red;
}

.bg_click {
width: 18px;

下载后可阅读完整内容，剩余1页未读，立即下载

人生@过客

粉丝: 0
资源: 3

jQuery实现点击切换颜色效果

点击a标签变色

导航按钮点击变色

jQuery单击div更改背景颜色

jQuery展示表格点击变色、全选、删除

javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox

jQuery Table点击选中表格行变色代码

jQuery轻松实现表格的隔行变色和点击行变色的实例代码

jQuery Table点击选中表格行变色代码.zip

jquery变色动画下拉菜单.zip

jquery操作表格隔行,滑动,点击,变色

最新资源