这本书是我听说学习前端基础入门书籍, 于是就开始看了, 大概是从 5 月 10 号开始看的吧, 一直看到现在, 差不多要看完了, 书是挺厚的...286 页, 不过比起 JAVASCRIPT 权威指南来说还是差多了, 权威指南才看没多少, 加油吧.
本来一直是把笔记抄在我的笔记本上的, 但经常忘记带身边, 想看时没法看, 就决定记在博客上, 也方便阅读~
小巧的笔记本, 嘿嘿, 就这样抄了差不多 20 页了, 听说一个合格的程序猿都是会手写代码的, 所以我也抄了点, 就抄了不少代码.. 博客里就少上点代码吧.
1, 用一个 method 方法去定义新方法:
- Function.prototype.method = function(name,func){
- this.prototype[name] = func;
- return this;
- }
2, 检查某项数据是否和 null 值, 即检查它是否存在:
if(something) 与 if(something!=null) 完全等价
3, 把传递给函数的数据称为参数 (argument).
4,typeof 可以告诉我们它的操作数是一个对象, 数值, 布尔值, 字符串或是一个函数.
5, 数组也可以创建成对象:
- var lennon = Object();
- lennon.name = "小李";
- lennon.year = 1940;
- lennon.living = false;
创建对象花括号法:
var lennon = {name:"小李", year:194, living:false};
6, 只要需要访问 childNodes 数组的第一个元素, 都可以写成 firstChild:
node.firstChild 完全等价于 node.childNodes[0]
- 7,
- var txt = whichpic.getAttribute("title");
- // 当图片库页面上的某个图片连接被点击, 练级的 title 属性值将保存到 txt 变量中
- var description = document.getElementById("description");
- // 得到 id 为 "description" 的 < p > 元素, 并保存至变量 description
- description.firstChild.nodeValue = txt;
- // 把 description 对象的第一个子节点的 nodeValue 属性值设为变量 txt 的值
8, 为 JavaScript 代码预留出退路: 在连接里把 href 属性设为 URL 地址. this 可以用来代表任何一种当前元素, 所以可以用 this 和 getAttribute() 方法来提取 href 属性的值:
<a href="http://www.cnblogs.com/undezhi" onclick="popUp(this.getAttribute('href');return false)">Example</a>
用 DOM 提供的 this.href 属性:
<a href="http://www.cnblogs.com/undezhi" onclick="popUp(this.href;return false;)">Example</a>
9, 因为脚本加载时文档可能不完整, 所以模型也不完整. 没有完整的 DOM,getElementsByTagName 等方法就不能正常工作.
必须让代码在 html 文档全部加载到浏览器之后马上开始执行. 还好, HTML 文档全部加载完毕时将出发一个时间, 这个时间有它自己的时间处理函数.
文档将被加载到一个浏览器窗口里, document 对象又是 windows 对象的一个属性. 当 windows 对象出发 onload 事件时, document 对象已存在.
把 JS 代码大包在 prepareLink 函数里, 并把这个函数添加到 windows 对象的 onload 事件上去, 这样 DOM 就可以正常工作, 如下:
- windows.onload = prepareLinks;
- function prepareLinks() {
- var (links = document.getElementsByTagName("a"));
- for(var i = 0; i <links.length; i++) {
- if(links[i].getAttribute("class") == "popUp") {
- links[i].onclick = function() {
- popUp(this.getAttribute("href");
- return false;}
- }
- }
- }
把 popUp 函数也保存至文件:
- function popUp(winURL) {
- window.open(winURL,"popUp","wdith=320";)}
- 10,
- gallery.getElementsByTagName("a");
- // 上面和下面等价
- document.getElementById("imagegallery").getElementsByTagName("a");
11, 若把 placeholder 图片从标记文档里删掉并在浏览器里刷新, 就会发现无论点击清单里的哪一个链接都没有任何响应.
为验证此问题, 应该在返回前验证 showPic 的返回值, 以便决定是否阻止默认行为. 如果 showPic 返回 true, 那么更新 placeholder.
- links[i].onclick = function() {
- return !showPic(this);
- }
现在, 如果 showPic 返回 true, 我们返回 false, 浏览器就不会打开链接.
如果 showPic 返回 false, 那么任务图片没有更新, 于是返回 true 以允许默认行为发生.
12, 在 showPic 函数里仍存在一些需要处理的假设.
比如, 假设每个链接都有一个 title 属性:
var txt = whichpic.getAttribute("title");
作为一种简单的视觉反馈, 在 title 属性不存在时把变量 txt 的值设为空字符串:
- if(whichpic.getAttribute("title") {
- var txt = whichpic.getAttribute("title");
- } else {
- var txt = "";
- }
同样操作的另一种办法:
var txt = which.getAttribute("title")?which.getAttribute("title"):"";
检查 placeholder 元素是否存在, 但须假设那是一张图片. 为了验证, 用 nodeName 属性来测试:
if(placeholder.nodeName!="IMG") return false;
13, 让 onkeypress 事件与 onclick 事件出发同样行为, 可以简单地把有关指令复制一份:
- links[i].onclick = function() {
- return showPic(this)? false: true;
- }
- links[i].onkeypress function() {
- return showPic(this)? false: true;
- }
更简单的方法确保 onkeypress 模仿 onclick 事件的行为:
links[i].onkeypress = links[i].onclick;
14,HTML-DOM 提供了一个 forms 对象. 这个对象可以把下面语句:
document.getElementsByTagName("form");
简化为
- document.forms;
- HTML-DOM: placeholder.src = source;
- 15,
- <div id="testdiv">
- <p>This is<em>my</em>content</p>
- </div>
结构图:
(请原谅这张这么丑的图 -_-, 本来我是想拍张照放上来的)
想把一段文本插入元素. 用 DOM 语言说就是添加一个 p 元素节点, 并把此节点作为 div 元素的一个子节点.
分两步骤:(1) 创建一个新的元素;(2) 把这个新元素插入节点树.
新创建出的 p 元素已存在, 但它还不是任何一棵 DOM 节点树的组成部分, 称之为文档碎片 (document fragment), 还无法显示在浏览器的窗口画面里.
但这个 p 元素已经有一个 nodeType 和一个 nodeName 值.
写了这么多, 花了差不多 70 分钟. 打算分三个部分写, 第一部分先写到这, 又累有热. 发现笔记本上还写了点错别字, 少了标点符号, 还得仔细辨别一下.
来源: https://www.cnblogs.com/undezhi/p/9193809.html