JS DOM 编程艺术 笔记

一.JS 简史

什么是DOM(文档对象模型)?


DOM概念1


DOM概念2

JS 版本进化        

1995年------Netscape公司与Sun公司合作开发------Netscape  Navigator2 浏览器-------JS1.0版本;

             ------微软公司发布VBScript------IE3浏览器------同时以JScript为名发布了JS的一个版本;

面对微软的竞争,那俩公司联合ECMA(欧洲计算机制造商协会)对JS语言进行了标准化;

1996年------JS,ECMAScript,JScript都稳了,Netscape和微软在各自第三版浏览器中都不同程度地支持------JS1.1版本


脚本语言JS

1997年6月------Netscape  Navigator4发布

           10月------IE4发布

浏览器战争,版本改进,DOM扩展,使JS发挥发挥空间变大,新名词产生:DHTML(动态HTML)


DHTML

不幸的是,那俩浏览器制造商虽然目标一样,但是实现方法完全不一样(我们不一样),即两种不兼容的DOM。


浏览器之间的战争


DOM标准制定


DOM与API


微软由于windows系统自带IE战胜Netscape公司


战争结束新起点开始

二.JS语法复习

1.准备工作

解释型和编译型

2.JS语句


语句

3.注释

单行注释://

多行注释:/*  */

注意:在HTML中有一种注释方式是<!--  -->,这个在JS中只适用于单行。

<!---   --->注释方式

4.变量


最有效率的声明变量方式


变量名规范

5.数据类型

1.字符串------字符串之中的特殊符号要用\\来转义(String);

2.数值------可以是浮点数(Number);

3.布尔值(Boolean),

曾经学过的数电知识好像(自动化专业学生)

4.数组(Array),

标量及数组


关联数组及其本质

5.对象(Object),

属性名和属性值

6.操作

1.算术操作符

=------切记是赋值操作;

+------可以做加法运算,也可以 拼接  字符串;

+=------快捷操作,完成加法和赋值;

2.条件语句


if语句基本语法
另一种写法

比较操作符:>,<,>=,<=,

不等于

逻辑操作符:&&  ,||    ,!;

逻辑非

3.循环语句


本质

while循环


本质解答

do...while循环


在希望我们代码至少执行一次的时候用这个

for 循环

与while循环比较

7.函数


函数定义


函数用法1


函数用法2


命名习惯

变量的作用域


变量作用域隐患

8.对象


函数?方法?
实例概念

JS提供了很多预先定义的对象,这些可以拿来就用的对象称为内建对象。


宿主对象

三.DOM

D------document(文档)

D

O------Object

window对象是宿主对象,document对象也是

M------Model,Map

M

节点树------元素节点,文本节点,属性节点

节点概念

元素节点

元素节点

文本节点

文本节点

属性节点

属性节点

获取元素------DOM  API提供三种方法,分别是通过元素ID,标签名字和类名字来获取。

1.getElementById()

返回的是对象

2.getElementsByTagName()

返回数组,数组中的每一个值都是一个对象
通配符也适用

3.getElementsByClassName()

这个常用的居然是H5新增的
返回数组
可以这样使用

阶段小结

小结

获取和设置属性

1.getAttribute()

这是个函数,不是对象

2.setAttribute()

也是个函数


威力!!!

四.案例研究:JS图片库

知识点:事件处理函数

事件处理函数


事件处理函数工作机制

遇到问题:当把函数写在window.onload=function(){ }中时,由于作用域的问题,事件处理函数没有识别到函数,会报错;假如在 onload中绑定点击事件,便可以识别,这都是由于JS中作用域的问题。

childNodes属性

获取节点所有直接子元素的方法,返回的是数组,空格也被当做子元素返回

nodeType属性

节点类型

nodeValue

改变文本节点的值

firstChild和lastChild

数组的属性

小结

小结

五.最佳实践


开头语:什么是最佳实践!

新概念:伪协议

伪协议

最佳实践方案:分离JS------对象检测

使用之前先检测

------浏览器嗅探技术(不怎么样,被淘汰)

性能考虑

1.尽量减少访问DOM和尽量减少标记;

2.合并和放置脚本,减少加载页面时发送的请求数量;

3.压缩脚本(包括修改局部变量名长度,去除没有必要的空格和注释)。

小结

六.案例研究:图片库改进版


态度鸡汤


小知识1


三元操作符

DOM Core和HTML-DOM

这些并不是JS


优化小结

实用的代码片段

有意思

七.动态创建标记


根本思维理解

createElement方法------只能创建元素节点

文档碎片---新概念

appendChild方法

以上两个方法是创建元素节点并把它接到DOM树上

createTextNode------创建文本节点,和createElement用法一样

insertBefore()------在已有元素前插入一个新元素

insertBefore使用方法

实用代码片段:insertAfter()------在已有元素的后面插入一个元素

小技巧

AJAX

概念

技术核心

AJAX技术核心


第七章小结

看到此处,AJAX及XMLHttpReuqest对象仍然不是很明白,此时此刻我百度了下,所有BOM和DOM都是宿主对象,日后在说!

八.充实文档的内容


知识点


本章小结,主要是用JS和DOM技术去处理文档

九.CSS—DOM

前面没提到的DOM


原来是这样


DOM只能读取内敛样式的值


可贵的编程思想


小结

本章讲的只要是用DOM方法去改变CSS样式,重点是在这种方法中体会其中的编程思想。

十.用JS实现动画效果


是否是JQ实现动画的逻辑?


JS允许自创属性


读完本章,明白了实现动画的基本思路,也知道了一点开发框架的思路。

十一.HTML5


H5的冰山一角,凭兴趣去研究

文中提到在目前兼容还不是很好的情况下并不适合全部使用H5。

十二.综合示例

把之前学习的所有的东西再综合运用下

看来对JQ研究还不够,竟然不知道


罪过罪过


菜死了菜死了


至此,看完了

看完此书,更明白了一些库在实现一些功能背后的原理,本书属于基础书,很好。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,980评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,422评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,130评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,553评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,408评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,326评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,720评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,373评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,678评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,722评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,486评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,335评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,738评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,283评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,692评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,893评论 2 335

推荐阅读更多精彩内容