JavascriptDom编程艺术(笔记)
如果想快速学习dom的话,建议去菜鸟教程,比较浅显易懂,实战性较强.我是看纸质的书,主要是花钱,心疼,所以看完,容易记住.
1.重点:
.变量
-.var修饰
-.赋值,用=号,例如ver age = ;
-.可以一次声明多个变量.
.数据类型:.String字符串,单引号或双引号,.数值number,.布尔值boolean,.数组.Array,.对象.Object
.操作符:算术+,-,*,/
条件,if,else,
比较:>,<,<=,>=,==,===
逻辑:&&(两个都是true,为true),||(两个其中一个true,为true)
.循环:while,for,do..while,
.函数,function.一组随时可以调用的语句.
.变量作用域:
-:可以在脚本的任意位置引用.
-:只存在与那个声明他的函数内部.
.对象:
-:属性是属于特定对象的变量.
-:对象是只有某个特定对象调用的函数.
.节点:一份文档就是一颗节点树,文档也是节点构成的集合.节点类型,(元素节点,属性节点,文本节点)
.获取元素,getElementById(),获取id属性对应的一个对象.
getElementsByTagName 标签,返回一组对象.
getElementsByClassName class属性,返回一组对象.
.获取和设置属性.getAttribute,打算查询属性的名称.
setAttribute,设置属性的名称.
childNodes属性,用来获取一个元素的任意子元素.
nodeType : 元素节点, 属性节点, 文本节点
nodeValue : 它用来得到和设置一个节点的值.
.document.write 行为和样式没有分离.
.innerHTML属性. 属性设置或返回一个链接的内容。
Dom操作:
.createElement 创建元素节点
.createTextNode 创建文本节点.
.appendChild 方法,成为这个文档现有节点的一个子节点.
.insertBefore 把一个新元素插入到一个现有元素前面.
网页有3层,结构层html,表示层css,行为层javascript.
style属性只能返回内嵌样式.只有把style属性插入到标记里.
javascript实现动画效果:
.位置.绝对定位..
.时间.setTimeout
-:setTimeout(必需。要调用的函数后要执行的 JavaScript 代码串,必需在执行代码前需等待的毫秒数。) 方法用于在指定的毫秒数后调用函数或计算表达式。
-:时间递增量.
思路,.获取元素当前的位置.
.如果元素已经到达它的目的,退出.
.如果元素未到达它的目的,把它向目的地移近一点.
.经过一段时间间隔之后从步骤1开始重复上述的步骤.
.抽象,以便重用方法.
.鼠标移动到某一个链接的时候把图片加载过去,即便是网速在快,也需要花费点时间,怎么能立即响应?
解决方法,把所有预览的图片集合成一张集体照,隐藏绝大部分,只显示相应的部分.
css的overflow
.变量的作用域:
.安全检查:如果它必须的变量不存在拿,需要进行判断不存在就退出这个函数.
2.提示:
提示:-javascript的引入方式:.页面上直接写javascript标签。
.创建文件,src引入.
-注释://,/**/
-内建对象:比如Array,Date,Math,就是已经建好了的对象.
-宿主对象:由浏览器提供的对象被称之为宿主对象,Form,Image,Element,document.
-console.log("xx \' x"); 特殊字符需要转义.
-javascript中属性和方法可以用点来访问.
提示:
dom节点.
d : document 文档
o : 对象,自定义对象,宿主对象,内建对象.
m : 模型,代表地图.
提示:
.可以把自己写的js,都整合在一起,减少对站点的访问.
.事件函数的机制,被调用的Javascript代码可以返回一个值,这个值将被传递给那个事件的处理函数.
.将javascript的引入放在最后的body上面.
提示:ajax,XMLHttpRequest对象.
GET,POST请求.
readyState:0表示未初始化,1表示正在加载,2表示加载完毕3.表示正在交互4.表示完成
提示:nextSibling返回列表项的下一个同胞
提示:absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
relative生成相对定位的元素,相对于其正常位置进行定位。
form对象有个elements属性,所有表单元素的值,input,select,访问.value相当于getAttribute('value');
使用Javascript验证表达需要记住3件事情:
.验证脚本写的不好,反而不如没有验证.
.js写验证,后台也要写验证.
.客户端的验证就是客户填好数据,节省他们的时间,后端的验证就是保护服务器和后台系统的安全.
.压缩代码.
建议看教程,看点收费的,(自己)花钱心疼,肯定能看完.
JavascriptDom编程艺术(笔记)的更多相关文章
- JavaScriptDOM编程学习笔记(二)图片库案例
<JavascriptDOM编程艺术>提供一个图片库的demo,主要讲解如何更好的使用JavaScript在网页中,跟随作者的思路来分析一下这个案例 首先需求是将图片发布到网上,但是如果发 ...
- [Objective-C]编程艺术 笔记整理
看了<禅与 Objective-C 编程艺术>,发现不少平时不注意的或注意但没有系统总结的东西,特此记录一下. 这次没有整理完,后续更新会结合手里的一些其他资料整理. 新博客wossone ...
- javascriptDOM编程艺术_学习笔记_知识点 动态创建标记
传统技术:document.write 和 innerHTML 深入剖析DOM方法:createElement.createTextNode.appendChild 和 insertBefore ...
- javascriptDOM编程艺术_学习笔记_知识点 DOM
第三章 getElementById 返回一个与那个有着给定id属性值的元素节点对应的对象. document.getElementById(id) 下面一个例子: document.get ...
- JavaScript DOM编程艺术 笔记(一)
探测浏览器品牌版本代码-----浏览器嗅探 代码 JavaScript==ECMAScript java几乎可以部署在任何环境,js只应用于web浏览器 API是一组得到各方面共同认同的基本约定(元素 ...
- JavaScriptDOM编程学习笔记(一)DOM概述
首先介绍下DOM,一套对文档的内容进行抽象和概念化的方法.即Document Object Model,当创建了一个网页并加载到Web浏览器中时,DOM就把编写的网页转换为一个文档对象,而通过浏览器提 ...
- javascript dom编程艺术笔记之图片库的改进
dom的操作要遵守的原则 1.平稳退化 2.分离javascript 3.向后兼容 4.性能考虑 改进后的显示图片方法 function showpic(whichpic){ if(!document ...
- javascript dom 编程艺术笔记 第四章:图片库
首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- javascript dom编程艺术笔记第三章:DOM操作的5个基本方法
JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...
随机推荐
- [P5162] WD与积木
每种堆法(理解成名次序列,举例3,3,8,2和7,7,100,2都对应2,2,1,3这个名次序列)等概率出现:题目中"两种堆法不同当且仅当某个积木在两种堆法中处于不同的层中"可见这 ...
- 8.python面向对象编程
基本概念 Class 类一个类即是对一类拥有相同属性的对象的抽象.蓝图.原型.在类中定义了这些对象的都具备的属性(variables(data)).共同的方法 Object 对象 一个对象即是一个类的 ...
- Android--多线程之进程与线程
前言 对于Android程序中,使用多线程的技术是必不可少的,就拿之前最简单的例子来说明,对于Android4.0+的应用而言,访问网络必须另起线程才可以访问.本片博客介绍Android下进程和线程, ...
- 全网最详细的最新稳定OSSEC搭建部署(ossec-server(CentOS7.X)和ossec-agent(CentOS7.X))(图文详解)
不多说,直接上干货! 前言 写在前面的话,网上能够找到一些关于ossec方面的资料,虽然很少,但是总比没有强,不过在实际的使用过程中还是会碰到许多稀奇古怪的问题.整理整理我的使用过程,就当做一篇笔记吧 ...
- [Shell]Shell调用并获取执行jar包后的返回值
----------------------------------------------------------------- 原创博文,如需转载请注明出处! 博主:疲惫的豆豆 链接:http:/ ...
- 函数式编程之-F#类型系统
在深入到函数式编程思想之前,了解函数式独有的类型是非常有必要的.函数式类型跟OO语言中的数据结构截然不同,这也导致使用函数式编程语言来解决问题的思路跟OO的思路有明显的区别. 什么是类型?类型在编程语 ...
- 为什么你作为一个.NET的程序员工资那么低?
最近看到很多抱怨贴,也许有一定的道理,但是你想过没,为什么大部分.NET程序员工资相对低?我个人是这么看的: 大批半罐子水的程序员,永远被局限在.NET的原始的小圈圈里.前端不会(你放弃了一项很重要的 ...
- 手把手在Ubuntu上面安装Docker
一.环境准备 1.Ubuntu64位系统(目前docker仅支持64位系统) 2.官方支持的Ubuntu版本(1)Ubuntu Trusty 14.04(LTS)(2)Ubuntu Precise 1 ...
- Java基础系列--包装类
原创作品,可以转载,但是请标注出处地址http://www.cnblogs.com/V1haoge/p/5462489.html 1.8种基本数据类型都有各自的包装类,其对应关系为: 基本—————— ...
- dd、split、csplit命令
在Linux最常用的文件生成和切片工具是dd,它功能比较全面,但无法以行为单位提取文件数据,也无法直接将文件按大小或行数进行均分(除非借助循环).另两款数据分割工具split和csplit能够比较轻松 ...