René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"【JavaScript】【学习心得】学习 JavaScript 第三天","articleBody":"艾玛，昨天的 [【JavaScript】【学习心得】学习 JavaScript 第三天](http://www.imooc.com/wenda/detail/235873)被运营同学推荐置顶了，并且推荐编辑器支持 markdown 语法也注意到了，imooc 超棒的。好的，咱们继续学习 JavaScript 吧。\n\n先回顾下昨天学的知识吧，主要学习了常用的几个 DOM 操作方法：\n- `document.getElementById(id)`；\n- `document.getElementsByTagName(tag)`；\n- `document.getElementsByClassName(class)`,注意旧的浏览器不支持，需要重写；\n- `object.getAttribute(attribute)`\n- `object.setAttribute(attribute,value)`\n\n好了今天咱们学习《第四章  案例研究： JavaScript 图片库》 来动起手来，咱们一起来写一个简单的 JavaScript 图片库，至于细节方面大家可以翻下下仔细研读下，我就不搬运了，我怕作者来打我。\n\n好了，我们首先来掌握下我们需要知道的知识点：\n1. 事件处理函数(event handler)的作用是：在特定事件发生时调用特定的 JavaScript 代码。\n2. 如何禁止点击事件之后，链接继续跳转。\n   \n   ```\n   \u003ca href=\"images/codercat.jpg\"  onclick=\"showPic(this);return false;\"\u003ecodercat\u003c/a\u003e\n   ```\n3. `childNodes`  属性返回包含被选节点的子节点的 NodeList。\n   如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释为节点，而它们也全部包含在 `childNodes` 属性所返回的数组当中。\n4. `nodeType` 属性可返回节点的节点类型。  \n   `nodeType` 属性总共有 12 种可能值，但其中仅有 3 种具有使用价值：\n   - 元素节点的 `nodeType` 属性值为 1；\n   - 属性节点的 `nodeType` 属性值为 2；\n   - 文本节点的 `nodeType` 属性值为 3；\n5. `nodeValue` 属性可设置或返回某节点的值，根据其类型。\n   \n   ```\n   \u003cp id=\"decription\"\u003e请选择一张图片\u003c/p\u003e\n   ```\n   \n   `document.getElementById('decription').nodevalue` 为空，其文本内容应该是第一个字节点。\n   \n   应该是 `document.getElementById('decription').childNodes[0].nodevalue`\n   1. `firstChild` 属性返回被选节点的第一个子节点。`lastChild` 属性返回被选节点的最后一个子节点。\n      如果它们选定的节点没有子节点，则该属性返回 NULL。\n\n好的 我们来看下代码结构：\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh-cmn-Hans\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003e1-4 案例研究： JavaScript 图片库\u003c/title\u003e\n    \u003cstyle\u003e\n        body {\n           margin: 1em 10%;\n           color: #333;\n           background-color: #ccc;\n           font-family: \"Helvetica\",\"Arial\",serif;\n        }\n        h1 {\n            color: #333;\n            background-color: rgba(0, 0, 0, 0);\n        }\n        a {\n            color: #c60;\n            background-color: rgba(0, 0, 0, 0);\n            font-weight: bold;\n            text-decoration: none;\n        }\n        ul {\n            padding: 0;\n        }\n        li {\n            float: left;\n            padding: 1em;\n            list-style-type: none;\n        }\n        img {\n            display: block;\n            clear: both;\n            width: 424px;\n            height: 424px;\n            border: 1px solid #ccc;\n        }\n    \u003c/style\u003e\n\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003ch1\u003eSnapshots\u003c/h1\u003e\n    \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"images/codercat.jpg\"  title=\"This is codercat.jpg.\" onclick=\"showPic(this);return false;\"\u003ecodercat\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"images/inspectocat.jpg\" title=\"This is inspectocat.jpg.\" onclick=\"showPic(this);return false;\"\u003einspectocat\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"images/maxtocat.gif\" title=\"This is maxtocat.gif.\" onclick=\"showPic(this);return false;\"\u003emaxtocat\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"images/yaktocat.png\" title=\"This is yaktocat.png.\" onclick=\"showPic(this);return false;\"\u003eyaktocat\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"images/octobiwan.jpg\" title=\"This isoctobiwan.jpg.\" onclick=\"showPic(this);return false;\"\u003eoctobiwan\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n\n    \u003cimg id=\"placeholder\"  src=\"images/codercat.jpg\" alt=\"\"\u003e\n\n    \u003cp id=\"decription\"\u003e请选择一张图片\u003c/p\u003e\n\n    \u003cscript\u003e\n        function showPic(whichpic){\n            var source = whichpic.getAttribute('href');\n            var placeholder = document.getElementById('placeholder');\n            placeholder.setAttribute('src',source);\n            //placeholder.src = source;\n            var text = whichpic.getAttribute('title');\n            var decription = document.getElementById('decription');\n            decription.firstChild.nodeValue = text;\n        }\n    \u003c/script\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n你掌握了吗，自己敲出来看看。 是不是很棒哦，哦 对了，这里的图片我选的很萌很萌的 github　的那些猫。 \n### DEMO 地址:[codepen](http://codepen.io/paddingme/pen/qCuDo) 或者[1-4.html](https://github.com/paddingme/Learning-JavaScript/blob/master/Demo/1-4.html)\n","author":{"url":"https://github.com/paddingme","@type":"Person","name":"paddingme"},"datePublished":"2014-11-19T15:00:29.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/6/Learning-JavaScript/issues/6"}