随便找一个来练习

正如题目，随便找了一个网页当项目来练习学到的。于是找了M记小程序上的点餐来试试。

想法是，首先是很简单的布局，先用不同颜色人DIV汤来区分区域，然后再局部实现其它功能。

结果就有了以下的稿。

因为是小程序，所以主要是用手机的尺寸来做。

手机尺寸略有出入，所以将width设置为auto。

这样基本就布局完成了，接下来就是逐步实现它的功能。。。

 

有了自律能力，没有什么事情是你做不到的。

2018.07.12 晚

 

============================================================================

本来想实现点击左边的div，来改变右边的css的，不过不知道为什么，onclick绑不上函数。目前正在问大神中。。。

 

 

小小的问题也被卡住了，愁。。。

2018.07.14傍晚

===========================================================================

问了大神，知道是因为关键字/保留词，所以不能作为函数名用。将images改为aa就绑上了。。。

还真不知道有这样的一个设定，日后要注意。

 

2018.07.15中午

 ===========================================================================

最近比较忙所以没心思继续，今天稍微前进一点。

上次搞清楚了修改函数的设定，已经能顺利改变css了，然后就是插入图片。

由于图片超出了范围，在那个div里的css加入“overflow:hidden”即可。

至于要做到“点击左边按钮，换右边图片”的话，刚才考虑了一下修改子节点，貌似不是一阵就解决的事，所以打算等到今晚再继续。

 

2018.07.20傍晚

 

===========================================================================

又学到了节点控制的原理了。

替换图片的思路很简单，不过操作上有点复杂。

需要的是先创建图片的标签（也就是"<img>"），然后就是添加<img>的属性和值（就是“src=/imges/01.jpg”之类的内容）。

最后就是用创建的<img>来替换旧的<img>

过程貌似是这样。

最后的imageC那个是因为要获取父节点的子节点才声明的，不过后面发觉直接用“.children[0]”就可以了。因为“.children”返回的是一个子节点的集合，你只要用[0]来表示想要的节点就可以了。

这次就是实践了“节点的控制”和“创建添加标签内容”！

 

2018.07.21中午

===========================================================================