第七章: 1.dom方法创建并且插入标签:(这种方法并没有改变文档的物理内容,而是在改变dom树) ①创建元素节点:createElement(); ②内部前插入:appendChild() ③创建文本节点:createTextNode(); ④设置属性节点:setAttribute(); ⑤外部前插入:父元素.insertBefore(插入的元素,目标元素);                  插入的元素被插入到,目标元素的前面. ⑥没有inserAfter()函数. 2.小知识点:①appe…
第五章: 1.题外话:首先大声疾呼,"js无罪",有罪的是滥用js的那些人.js的father 布兰登-艾克,当初为了应付工作,10天就赶出了这个js,事后还说人家js是c语言和self语言"约"的产物,(百度百科说的,这些).....一个可怜的孩子-js.然后命运弄"人",js此时已世人皆知.可能是因为js的毁誉参半,它老爸才不想承认它吧.如果js会说话,它可能会给它布兰登-艾克说,"你当初怎么不把*******在墙上".这…
第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯一一个没有被其它元素包含的元素. 3.元素节点并非直接包含文本节点,例如:<ul><li>你好</li><ul>    ul元素并没有直接包含文本元素 4.获取元素的方法: ①getElementById() ②getElementsByTagName ()  …
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad…
第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让不规范的页面得到运行. 使用时应避免出发兼容模式. html5 DOCTYPE默认的是标准模式 ②abbr标签--简称.缩写.此标签到ie7才被ie支持 2.js只能充实文档内容,避免使用dom技术来创建核心内容.    避免使用dom设置重要样式 第九章 1.css正在利用伪类(例如:hover.…
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(2016年12月11): 1.js由网景和sun公司合作开发. ECMAscript-标准化的JS js最开始叫做LiveScript 2.Dom 是一套大家约定俗称的标准.比如,大家把那种有4个轮子,会跑的东西叫做汽车 dom是一种api.在软件开发领域来说,api是前端与后台约定好的一套标准,前端发送…
从7月29号到8月8号,断断续续地看完了这本书,做了部分实践联系.总体感觉本书真的只能算是个入门,学完之后看到库的那一章才感觉是个大坑,实践中大部分应该都是用的现成的库吧,所以还要重新学习一个库,但是这本书也算是给这门语言包括DOM的学习打下了个基础,明白了这些底层的东西,才能将库这些用的更好吧.总体来说,难度入门级,阅读体验良好.注:看完书一定要自己敲敲代码,会出现很多你意想不到的错误,自己学着调试找出错误并改正,这也是一项必备能力吧. 一.JavaScript简史 JavaScript语言使…
一.JavaScript示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Just a Test</title> </head> <body> <script src="example.js"></script> </bod…
一,JavaScript的起源 JavaScript是Netscape与Sun公司合作开发,它是一种脚本语言,通常只能通过Web浏览器去完成一些操作.JavaScript为程序员提供了一些操控Web浏览器的手段. 二,DOM DOM是一套对文档的内容进行抽象化的方法. DHTML(动态HTML)的含义: 利用HTML把网页标记为各种元素 利用CSS设置元素样式和它们的显示位置 利用JavaScript实时地操控页面和改变样式 三,制定标准 W3C于1998年完成了第一个DOM标准,随后,各大厂商…
十.用JavaScript实现动画效果 鼠标放到链接上,每次只显示图片的一小部分,加快加载速度. js: function prepareSlideshow(){ //对象检测 if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementById("linklist")) return false; //创建窗口元素…
四.案例研究:JavaScript图片库 js: function showPic(whichpic){ //取得链接 var source=whichpic.getAttribute("href"); //取得占位图 var placeholder=document.getElementById("placeholder"); //改变占位图src属性 placeholer.setAttribute("src",source); //取得文字描…
1.1)dom-core方法:(不专属于js,支持dom的任何一种程序设计语言都可以使用它,它们的用途,也不仅限于处理网页,也可以用来处理任何一种标记语言编写处理的文档)  ①getElementById()  ②getElementsByTagName() ③getElementsByClassName() ④getAttribute()   ⑤setAttribute() 2)html-dom方法:(是html专用属性,不能用于任何其他标记语言文档) ①document.write(); ②…
七.动态创建标记 在文档中不写占位图片和文字代码,在能调用js的情况下动态创建,文档支持性更好. 在原来的addLoadEvent prepareGallery showPic的基础上增加函数preparePlaceHolder 最后调用preparePlaceHolder和prepareGallery两个函数 function preparePlaceHolder(){ //对象检测 if(!document.createElement) return false; if(!document.…
第十二章 1.本章是综合前面章节的所有东西的,一个综合实例 2.流程:①项目简介:a.获取原始资料(包括文本.图片.音视频等) b.站点结构(文件目录结构) c.页面(文件)结构 ②设计(切图) ③css -  base.css用于引入使用的css文件 color.css  - 用于设置样式 layout.css - 用于设置布局 Typography.css - 用于设置版式 3.题外话:①在实际开发中,即使是一个空白项目也往往不会从一无所有做起,而借助的平台一般会提供目录结构,所以需要把自己…
第十章 1.动画中,因为js的效率高,所以看不见过渡效果 2.题外话:①国外人写书,总是先感谢一遍亲朋好友,最后感谢自己的家人. 3."除非允许用户'冻结'移动的内容,否则应该避免让内容在页面中移动" 4.动画经常遇到的问题:鼠标来回移动,则动画就会出问题. 原因:队列事件积累. 解决:判断,如果此时有动画,则清空队列. 5.小知识点:①ceil 向上取整 ②floor 向下取整 ③round 取最近的整数 第十一章 1."html5 问世背后的明争暗斗就像是一步韩国肥皂剧&…
1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身不由己的.不过是个好习惯 4.数据类型:①标量:(数字,字符串,布尔值)  - 标量,在任何时刻只能有一个值. ② 集合:(数组[ 索引数组,关联数组 ],对象) 5.闲话布尔值:电子设备的终极原理:0和1.他们远比人心简单,0就是0 ,1就是1.不会说是吗0包含1,1包含1之类的人生哲学. * 6…
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 看到版本翻译为预留退路,刚刚看到个名词,我觉得很奇怪,以前没有听说过啊.不过看到英文注释就知道了Graceful degradation不就是优雅降级么,听说过! 书中举了个例子,点击一个链接,弹出一个窗口的方法. function popUp(WinURL){ window.open(WinURL,&quo…
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> document.write("<p>This is inserted.</p>"); </script> </body>document.write:缺点就是违背了"行为与表现分离的原则",即使把这句语句挪到外部,还是…
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某些功能无法使用,但是最基本的操作仍能顺利完成 window.open(url,name,features); 打开一个新的窗口 这个函数是使用BOM的好案例url 新窗口的链接name 新窗口的名字 代码里边可以通过这个name和新窗口通信features 新窗口的各种属性 比如尺寸 或者被启用或者…
第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML(Dynamic HTML):动态HTML的简称,不是一项新技术,而是通过HTML CSS 和Javascript组合的.DHTML背后的含义其实就是: 利用HTML把网页标记为各种元素: 利用CSS设置元素样式和它们显示的位置: 利用JavaScript实时地操纵页面和改变样式. 但是虽然浏览器制造…
1.CSS: 继承是CSS技术中的一项强大功能,节点树上的各个元素将继承其父元素的样式属性. 2.3种获取DOM元素方法:getElementById返回一个对象,getElementsByTagName.getElementsByClassName返回对象数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Sh…
1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head>标签中的<script>标签之间:一种更好的方式是把JavaScript代码存为一个扩展名为.js的独立文件,在文档<head>部分放一个<script>标签,并把它的src属性指向该文件. 但最好的做法是把<script>标签放到HTML文档的最后,&l…
第一章:JavaScript 简史 1.1 javascript的起源 JavaScript是一种脚本语言,通常只能通过web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,需要由Web浏览器进行解释和执行. 1.2 DOM DOM是一套对文档的内容进行抽象和概念化的方法. DOM是一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容.结构和样式. 1.3 浏览器战争 1.3.1 DHTML DHTML是 "Dynamic HTML” (动态HTML…
2. JavaScript语法 2.1 注释      HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"<!--"来作为标志.JavaScript解释器对"<!--"的处理与对"//"的处理是一样的. 2.2 变量      在JavaScript语言中,变量和其他语法元素的名字都是区分字母大小写的.      JavaScript语法不允许变量中包含空格…
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 第一个参数是个字符串,所以需要单引号!!! move_elem = setTimeout(repeat,interval); //复制给一个变量,当我们想取消一个正在排队等待执行的函数,可以用clearTimeout(mov…
这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是书中的最后版本,好像是第二版吧.后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了. 只贴出两个函数. //显示图片方法 function showPicture (whichpic) { //综合绑定的事件考虑,条件执行失败,希望浏览器可以让用户打开图片,因此在onclick处re…
一:这本书由几个案列带入知识点,通俗易懂.最大的收获莫过于作者多次提到的逐渐增强和平稳退化. "渐进增强"指的是给所用用户同等的基本使用体验,再根据用户终端的级别给予更高级的用户更为高效轻松的用户体验."平稳退化"同样是给所有用户同等的一个基准,但其方向却是与渐进增强相反,此方法是剥夺低级用户的一些体验. 二:解决部分浏览器不兼容html5.css3 的问题 使用modernizr解决 https://modernizr.com/download?setclasse…
1. 把<script>标签放到HTML文档的最后,<body>标签之前能使浏览器更快地加载页面. 2. nodeType的常见取值 元素节点(1) 属性节点(2) 文本节点(3) 3. <a href="http://www.baidu.com" onclick="popUp(this.href);return false;">Example</a>…
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 第五章 最佳实践 平稳退化 渐进增强 向后兼容 分离js 性能考虑 第六章 案例:图片库改进 第七章 动态创建标记 传统方法 DOM方法 Ajax 第八章 充实文档内容 <JavaScript DOM 编程艺术> 学习笔记 概念: 平稳退化 渐进增强 以用户为中心 第一章 js简史 可以使用DO…
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本是因为这本书从实例开始带领读者一步步学习,写作风格也如其名字一样具有艺术感,阅读起来很舒服.本书第一二三稍微有计算机基础的人阅读起来都不困难,也没有什么好记录的,从第四章开始,本书开始介绍案例图片库~每一节都是干货满满滴~ 第四章——案例研究:JavaScript图片库: 4.1 标记 无序清单元素<u…