《JavaScript DOM编程艺术》学习笔记(一)
这本书是我听说学习前端基础入门书籍,于是就开始看了,大概是从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;
举例:
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值。下面验证:
function() {
var para = document.createElement("p")
var info = "nodeName";
info += para.nodeName;
info += " nodeType:";
info+= para.nodeType;
alert(info);
}
16、把新创建的节点插入某个文档的节点树的最简单的办法是让它成为这个文档某个现有节点的一个子节点。
用appendChild方法把变量para插入变量testdiv:
testdiv.appendChild(para);
写这么多花了70多分钟吧。打算分三个部分写,第一部分先写到这,又累又热。发现笔记本上还写了点错别字,少了标点符号,还得仔细辨别一下。
《JavaScript DOM编程艺术》学习笔记(一)的更多相关文章
- 《Hadoop》大数据技术开发实战学习笔记(二)
搭建Hadoop 2.x分布式集群 1.Hadoop集群角色分配 2.上传Hadoop并解压 在centos01中,将安装文件上传到/opt/softwares/目录,然后解压安装文件到/opt/mo ...
- 《Hadoop大数据技术开发实战》学习笔记(一)
基于CentOS7系统 新建用户 1.使用"su-"命令切换到root用户,然后执行命令: adduser zonkidd 2.执行以下命令,设置用户zonkidd的密码: pas ...
- 超人学院Hadoop大数据技术资源分享
超人学院Hadoop大数据技术资源分享 http://bbs.superwu.cn/forum.php?mod=viewthread&tid=807&fromuid=645 很多其它精 ...
- java大数据最全课程学习笔记(1)--Hadoop简介和安装及伪分布式
Hadoop简介和安装及伪分布式 大数据概念 大数据概论 大数据(Big Data): 指无法在一定时间范围内用常规软件工具进行捕捉,管理和处理的数据集合,是需要新处理模式才能具有更强的决策力,洞察发 ...
- hadoop大数据技术架构详解
大数据的时代已经来了,信息的爆炸式增长使得越来越多的行业面临这大量数据需要存储和分析的挑战.Hadoop作为一个开源的分布式并行处理平台,以其高拓展.高效率.高可靠等优点越来越受到欢迎.这同时也带动了 ...
- 除Hadoop大数据技术外,还需了解的九大技术
除Hadoop外的9个大数据技术: 1.Apache Flink 2.Apache Samza 3.Google Cloud Data Flow 4.StreamSets 5.Tensor Flow ...
- 大数据技术之_09_Flume学习_Flume概述+Flume快速入门+Flume企业开发案例+Flume监控之Ganglia+Flume高级之自定义MySQLSource+Flume企业真实面试题(重点)
第1章 Flume概述1.1 Flume定义1.2 Flume组成架构1.2.1 Agent1.2.2 Source1.2.3 Channel1.2.4 Sink1.2.5 Event1.3 Flum ...
- 大数据技术之_19_Spark学习_01_Spark 基础解析 + Spark 概述 + Spark 集群安装 + 执行 Spark 程序
第1章 Spark 概述1.1 什么是 Spark1.2 Spark 特点1.3 Spark 的用户和用途第2章 Spark 集群安装2.1 集群角色2.2 机器准备2.3 下载 Spark 安装包2 ...
- 大数据技术之_16_Scala学习_01_Scala 语言概述
第一章 Scala 语言概述1.1 why is Scala 语言?1.2 Scala 语言诞生小故事1.3 Scala 和 Java 以及 jvm 的关系分析图1.4 Scala 语言的特点1.5 ...
- 大数据技术之_16_Scala学习_04_函数式编程-基础+面向对象编程-基础
第五章 函数式编程-基础5.1 函数式编程内容说明5.1.1 函数式编程内容5.1.2 函数式编程授课顺序5.2 函数式编程介绍5.2.1 几个概念的说明5.2.2 方法.函数.函数式编程和面向对象编 ...
随机推荐
- 【原创】大叔经验分享(51)docker报错Exited (137)
docker container启动失败,报错:Exited (137) *** ago,比如 Exited (137) 16 seconds ago 这时通过docker logs查不到任何日志,从 ...
- 数据库入门-pymysql模块的使用
一.pymysql模块安装 由于本人的Python版本为python3.7,所以用pymysql来连接数据库(mysqldb不支持python3.x) 方法一: #在cmd输入 pip3 instal ...
- 快捷键打开Generate
在eclipse下有覆盖toString.hashcode.setter.getter等功能. 在intelj idea中,同样具有类似的功能. 按下键盘上的alt+insert键,就会弹出gener ...
- Bootstrap-datepicker3官方文档中文翻译---Options/选项(原文链接 http://bootstrap-datepicker.readthedocs.io/en/latest/index.html)
Options/选项 带“Date”的所有选项都可以处理 Date 对象; 字符串格式化根据 给定的 format 而定; 相对于今天的时间变量, 如 “-1d”, “+6m +1y”等等, 其中有效 ...
- python-os创建文件夹-create_dir_if_not_exist.py
#!/bin/usr/env python3 __author__ = 'nxz' import os import argparse MESSAGE = '%s 文件夹已经存在' def creat ...
- WIN10远程连接,报错身份验证错误,要求的函数不受支持
我电脑是win10系统,我办公时经常需要远程连接其他电脑.突然间远程连接时就开始报错以下错误,导致无法远程连接. 这可能是由于CredSSP加密Oracle修正. 解决方法: 运行 gpedit.ms ...
- Log4j2入门
转载自:http://www.cnblogs.com/hzhuxin/p/6406272.html Log4j2 是 Log4j的升级版本,对其进行解压,可以看到以下几个jar包. log4j-1.2 ...
- 2018-2019-2 20165239 《网络对抗技术》Kali的安装 第一周
2018-2019-<网络对抗技术> Kali安装 20165239其米仁增 一.资源下载以及工具安装 1.下载虚拟机工具VMware. 下载链接 :https://www.baidu.c ...
- Python2出现SyntaxError: Non-ASCII character '\xe5' in file *******
在使用Python2编写Python时,当使用中文输出或注释时运行脚本,会提示错误信息:SyntaxError: Non-ASCII character '\xe5' in file ******* ...
- 二、自动化测试平台搭建-搭建jango环境
上篇说的是安装虚拟环境,后面的项目全部放在虚拟环境上 1.创建一个虚拟环境py3,进入虚拟环境 2.安装django包:pip install django==1.8.2 3.在家目录下的Deskto ...