jQuery小案例

2023-09-09 阅读 20 评论 0

摘要：jQuery小案例这篇文章我们主要是讲如何改变网页的背景颜色和改变背景图片以及计算器这三个小案例，我们将用到jQuery的方式去实现效果我们先开始如何该表网页的背景颜色：第一步：还是老规矩，先把页面新建好，在开始写我们的代码第二步&#x

jQuery小案例

这篇文章我们主要是讲如何改变网页的背景颜色和改变背景图片以及计算器这三个小案例，我们将用到jQuery的方式去实现效果

我们先开始如何该表网页的背景颜色：

第一步：还是老规矩，先把页面新建好，在开始写我们的代码

第二步：开始写我们的html和css样式。这里我就把html和css样式的代码省略了，（图表1 则是我写的最终效果）

图表 1

样式写出来了，可是不我想要的一个效果，我想要的是点击一下红色方块整个网页的背景就变成了红色，点击绿色方块整个网页又变成了绿色，这个效果该怎么去实现了？

想一下啊，是点一下它就改变背景颜色，是不是应该给他绑定一个点击事件，点击事件是不是就只有一个单击事件和双击事件啊。这里我们则用单击事件给他绑定元素，也可以用双击事件，这里就由自己去决定

注意：在用jQuery实现改变背景颜色之前一定要把jQuery的插件添加进去【<script src="~/Content/jquery-3.2.1.min.js"></script>】，这是我添加jQuery插件的路径，具体路径则看自己添加的方式

插件插进来之后就开始写jQuery的代码了

插件引入成功之后，我们先写一个<script></script>标签，在<script></script>标签里面去写我的代码

我们要实现的功能是给几个div添加一个点击事件（这里的div则是图表1上面的红色方块），在点击事件里面去改变颜色

先来一个”$(function（）{ 需要执行的代码 })” 。javascript例子。$(function（）{ 需要执行的代码 })：页面加载之后要去执行的事件

我是想要给所有的div（除了外面包裹整个盒子的div）添加点击事件，之前在JavaScript里面需要一个个的获取一个个的绑定点击事件。在jQuery里面就需要通过选择器选中这个div之后直接一个click就可以了，这里又有一个需要注意点，在JavaScript里面绑定点击事件是onclick，在jQuery里面则是一个click

选择元素用 $+小括号，小括号里面加英文状态的双引号。我们在最外面的div里面放了“header”的id，在jQuery中想要找到这个id是通过一个“#”，

$(“#header”)它选中的是整个div，而我想要选择的是这个div下面的div，那我们就可以通过一个选择器“>”去选择它下面的div

$(“#header>div”)【这就是一个css的选择器】然后就直接.click直接绑定点击事件，然后里面又是一个function+()+{ }。jquerymobile案例，这又是一个命名函数，在这里叫做回调函数

什么叫回调函数？

回调函数就是我们创建的但是不由我们去调用，它是在点击事件里面去调用的

可以用一个alert(123);警告框去查看一下点击事件是否绑定成功

grtComputedStyle（）：用来获取元素显示样式，需要传入一个参数或两个参数都可以第一个参数是你要获取谁的样式，可以在前面定义变量

this：代表的是当前点击的事件

在控制台输出看一下返回回来的是一个什么东西

比如说，获取一个背景颜色：console.log(变量.backhroundColor)获取的则是一个rgb的值。获取对象除了通过“.”的方式还可以通过中括号。中括号就得注意了要添加双引号console.log(变量[“backhroundColor”])

获取到这个颜色要给到body，通过标签名称选择到的则是元素选择器。给它设置css样式，css的用法要么就是一个对象，要么就是两个参数

我们这里需要改变的是背景颜色，它的值就是刚刚求出来的变量.backhroundColor。这样我们这个案例就完成了（详情代码见图表2）