发表于: 2017-04-13 22:50:23

1 1173


今天完成的事情

修理电脑,抱着电脑主机吭哧吭哧跑了俩修理部,结果还是无力回天,要寄回上海调换主板,只好先让老爹把我的小本本带来用着先。

继续学习js:


利用JS创建图片库:把整个图片库的浏览链接集中安排在图片库主页里,只在用户点击了这个主页的某个图片链接时才把相应的图片传送给他(可以避免页面变得过于庞大)

1.标记

为这些图片创建一个链接清单,把标记保存在html文件中,把图片集中保存在目录images里(img目录和html文件要位于同一个目录下),这个时候,每个链接就会指向一张相应的图片。

然后通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域;

在点击图片链接时,拦截网页的跳转行为;

在点击图片链接时,替换“占位符”图片为链接相对应的图片。

<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 

2.javascript

为了把占位符图片替换为想要查看的图片,需要改变它的src属性,可以通过setAttribute把它改变为参数图片,这个从逻辑上来讲不复杂,但是操作步骤上会比较繁琐:

首先获取链接图片的内容:声明一个函数获得指向图片的a标签,根据a标签获得路径href,把href路径存入变量;

然后获取占位符图片:通过decument.getElementById("placeholder");

最后偷梁换柱:把占位符图片的src值换成链接图片的src值,placeholder.setAttribute("src",source)

大功告成!


用非DOM方法也可以实现,因为:

element.value="the new value"效果等同于element.setattribute("value","the new value"),但是不建议使用,因为setAttribute可以修改文旦中任何一个元素的任何一个属性,而用非DOM还要去记,记错了怎么办


应用JavaScript函数

应把多个js文件合并在一个文件中,这样可以减少对站点的请求次数(提高性能)

需要插入一个链接来引用js脚本文件,比如:

<script type="text/javascript src="script/showPic.js"></script>

需要添加事件处理函数才会调用js脚本文件,比如指针悬停或离开时需要使用onmouseover或onmouseout事件处理函数,点击链接时触发动作则需要onclick事件处理函数。

this关键字表示“这个对象”

可以通过给链接添加onclick事件处理函数来阻止链接被点击的默认效果(通过传递false的布尔值使它判定链接并没有被点击),防止用户被带到目标链接窗口


利用JS和DOM可以实现在同一个页面上切换展示不同的文本

childNodes属性:用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组,这样数组length属性就可以清楚的知道它所包含的元素的个数


后面的内容明天理解吧,已经不像一开始那样一路看过去就理解了,要停下来思考一下,写写验证验证加深记忆了


明天要做的事情:

准备小课堂,亚历山大,这几天的事真多,很为小课堂没有干货而担忧啊


遇到的问题:

实战实战实战!实践是检验真理的唯一标准!


收获:

通过看书学习新名词,回想起前几次小课堂师兄们分享的一些内容,渐渐有点理解此函数非彼函数,在代码的世界里,要用机器的语言去说话啊







返回列表 返回列表
评论

    分享到