我们需要实现的是点击上面的小图标下面的颜色自动匹配相应的颜色，实际上也就是实现的我们的更换主题色的样式我们的思路大概是这样的：上面的小图标用一个ul依次表示，然后点击一个li，就为当前的li添加一个对号，然后点击下一个li的时候，清除前面一个li的对号然后点击每一个li元素的时候获取当前的背景色，然后将背景色赋值给下面的div的颜色下面我们对以上思路进行实现先来个ul 写出5个小框，定义相应的CSS样式
```<div > <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>``` 定义相应的CSS样式```li{ 20px; height: 20px; border: 1px solid gray; **display: inline-block;**--->这里直接通过display:inline-block 可以让所有的li显示在同一行，并且不用设置左右的间距}ul{ list-style: none;}``` 接下来是为每一个li元素添加背景色，这里由于添加背景色是一个重复的动作，我们将之利用jQuery通过函数来实现背景色的填充这里我们先用一个数组存储所有的颜色，然后利用for循环依次将每个颜色填充对应的li，那么我们还要获取到所有的li元素```console.log($("li")); ``` 通过控制台先打印出来：
可以看出我们获得了一个所有的li元素的一个jQuery的对象，返回的是一个所有的li的数组 ```var list = $("li"); for (var i=0;i<colors.length;i++) { console.log(list[i]); }` `` 我们先利用控制台将获取的每一个元素，查看是DOM对象还是jQuery对象
可以看到这里返回的DOM对象 ，所以我们还需要将他转换为jQuery对象，然后利用添加CSS的方式，将颜色添加为背景色 ``` for (var i=0;i<colors.length;i++) { // console.log(list[i]); $(list[i]).css("background-color",colors[i]); }``` 利用jQuery对象添加CSS样式的时候，前面的属性名字和CSS的名字一样只是需要添加双引号下面每个li的颜色我们就利用循环的方式利用jQuery添加好了
接下来我们就需要给每一个li添加一个点击事件，点击到哪个li，就在哪个li添加一个对勾，然后将下面的div的背景颜色替换成相应的颜色``` $("li").click(function(){ // console.log($(this)); console.log(this); })``` 给每个li添加一个点击事件，利用this返回调用的li，（注意this的含义是谁调用我，我就是谁，这里谁调用了点击事件，那么this就代表哪一个li），我们先直接将this打印出来看看是返回的DOM对象还是jQuery对象
可以看到这里的this，是我们点击哪一个li，返回的就是相应的DOM对象，所以同样的我们这里需要将他转换为jQuery对象``` $("li").click(function(){ console.log($(this)); // console.log(this); })```
转换为jQuery对象之后我们就需要在点击的li里面添加一个√符号 在jQuery对象里面添加文字的方法直接是$().text("√") ``` $("li").click(function(){ // console.log($(this)); // console.log(this); $(this).text("√"); })``` 我们可以看到每点击一个li，就添加了一个√
但是问题又来了，我们点击了一个li之后，点击下一个li之前需要将前面一个li的对勾去掉 ``` $("li").click(function(){ // console.log($(this)); // console.log(this); $("li").text("");//在添加对勾之前需要将所有的li的√去掉 $(this).text("√"); })```
接下来还需要将下面的背景色填充为点击的li的背景色 ``` $("li").click(function(){ // console.log($(this)); // console.log(this); $("li").text("");//在添加对勾之前需要将所有的li的√去掉 $(this).text("√"); bgcolor = $(this).css("background-color");--->通过css属性获取到$(this).background-color的属性 // console.log(bgcolor); $("div").css("background-color",bgcolor); })```
那么一个能够简单的选择主题色的功能我们现在就已经实现了 ----------