javascript学习日志系列的所有博客,主要理论依据是<javascript权威指南>(犀牛书第6版)以及<javascript高级程序设计第三版>(红色书),目前js行业内公认的两本权威圣经,无奈有些地方两本书会有一些说辞不一致,那我加入了一些自我理解,尽量将两者融会贯通,通读之后发现,js确实魅力无限,每次看一遍都会有新的理解和感悟,所以这系列我会持续更新,一旦有新的理解我会立即写下来,不断的推翻重建再推翻再重建,我很享受这个自我认知不断更新的过程. 我知道学习js的路很漫…

一,基本定义 DOM是针对HTML和XML文档的API,根据W3C的HTML DOM标准,html文档中所以内容(无论是元素还是标签还是注释还是元素属性)都是节点. 二,Node类型:每一个节点都含有一个nodeType属性,对应着不同的数字,一共有12个,这里只记住前三个: 1.代表元素节点,也是最多的 2.代表属性节点,就是元素的属性,也是节点 3.代表文本,一个空格,一个回车都是代表#text节点 9.代表document文档 如果nodeType=1,元素节点,则nodeName就是标签…

jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,在jQuery官网有许多插件: jQuery1.9.1版源代码中文注释 一.插件开发基础 1.1.$.extend 在jQuery根命名空间下直接调用的方法可以认为是jQuery的静态方法或属性,常常使用$.方法名来调用,使用$.extend这个静态方法可以完成两个功能: 1.1.1.扩展属性或方法…

本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步添加额外的功能. 预留退路:为内容添加的样式和行为要留有足够的退路,以保证用户能访问到核心内容. 以用户为中心的设计: DHTML(动态HTML):是dynamic HTML 的简称.它不是一项单一的新技术,而是HTML.CSS.javascript这三种技术相结合的产物.现在的DHTML已经成为了一种简单.…

DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节点类型,利用12个数值来表示.1代表Element,2代表attribute,3代表Text... 2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型 2.节点关系相关属性 I.childNodes属性,返回一个NodeList对象,这是一个有生命,会呼吸的对象,能够…

这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!!!还得重新继续敲,所以提醒各位笔者,永远不要相信所谓的时时保存,敲一点记得保存一点!坑!!! 一,概念梳理 1,事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间: 2,事件流:描述的是从页面中接收事件的顺序:IE团队提出的是事件冒泡流,Netscape团队提出的是事件捕获流: 3,事件冒泡:事件…

DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节点类型,利用12个数值来表示.常见的有:1代表元素节点,2代表属性节点,3代表文本节点,8代表注释节点,9代表document,11代表iframe 2) NodeName与NodeValue 这两个属性的值完全取决于特定的节点类型.例:如果是元素节点,那么nodeName的值为元素的标签名,nod…

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应 查找 HTML 元素 通过 id 找到 HTML 元素 var x=document.getE…

DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibling: 下一个姐妹或兄弟节点 previousSibling: 前一个兄弟节点 案例:打开网页出现随机位置星星,点击星星,星星消失 <script type="text/javascript"> window.onload = init; function init() { w…

目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM)使 JavaScript 可以访问和操作 HTML 文档 当网页被加载时,浏览器会创建页面的文档对象模型,根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都被视为节点,而 HTML 文档则被视为节点树 2.方法 DOM 方法定义在节点上执行的动作,以下列出常用的 DOM 方法:…

BOM的核心对象就是window,这一章没什么好说的,总结一些比较常用的: 1,a未定义,a; //报错window.a; //undefined 不能用delete删除全局变量 2,html5不支持<frame>标签,但是支持<iframe>标签 3,js中window对象的top,opener,parent,self属性(虽然对于window来说,它们是一种属性,但是也可以直接用他们作为对象)的区别: top:该变更永远指分割窗口最高层次的浏览器窗口.如果计划从分割窗口的最高层…

一,变量分为两种类型:基本类型值和引用类型值,基本类型包括:Undefined, String, Boolean, Null, Number,我们无法给基本类型值添加属性: 二,复制变量值的时候,如果改变复制的值,那么原来的值是否会变化? 这个取决于原来的值是什么类型: 1.基本类型值:只是存在于栈内存中,如果复制,相当于栈内存里又多了一个值,两者相互独立,改变其中一个,另一个不变 2.引用类型值:实际上是指向堆内存中的一个object,复制相当于多了一个指针,也是指向这个堆内存中的一小块obj…

javascript有自动添加分号的功能,但是不是所有情况都会自动添加,要区分: 1,如果语句独占一行 如果当前行内的语句能够被js正确解析,那么就会在句尾添加一个分号. (如何判断是否正确解析?你在控制台执行当前语句,不报错就可以-.-) 那么反之,如果当前语句不能被正确解析,那么就不会添加分号,而是将此行的末尾和下一行的开头连起来解析,所以就会产生其他问题. a=1 b=1; // 第一个分号可以省略 var a a = 1 // 解析为 var a; a = 1; 因为等号是没办法解析的,…

DOM event(事件) 定义事件: // 定义事件: //方式一,直接在标签上定义事件 // 方式二: var a11 = document.getElementsByName('a11')[0]; a11.onclick = function f1() { console.log("OK!!!") } //方式三(this方式) var a11 = document.getElementsByName('a11')[0]; a11 = function f1() { this.o…

DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节点 整个文档是一个文档节点(document对象)每个html元素是元素节点(element对象)html元素内的文本是文本节点(text对象)每个html属性是属性节点(arrtibute对象)注释是注释节点(comment对象) html 标签 <div id="XX">X…

一.JavaScript"=="的作用 当==两边的内容是字符串时,则比较字符串的内容是否相等. 当==两边的内容是数字时,则比较数字的大小是否相等. 当==两边的内容是对象或者是对象的函数属性时,则比较内存地址是否相等. 二.==和===的区别 ==用于一般比较,===用于严格比较,==在比较的时候可以转换数据类型,===严格比较,只要类型不匹配就返回flase. 举例说明: <script type="text/javascript"> alert(…

javascript数据类型: 字符串string.数字number.未定义Undefined.空Null.布尔Boolean.数组Array.对象Object.javascript对象: 对象由花括号分隔,在括号内部,对象的属性以名称和值的形式(name:value)来定义,属性由逗号分隔. 对象的创建推荐用var people={Name:'jerry',Age:21,eat:function(){} } 也可以创建对象再追加属性和方法: var people=new Object(); p…

javascript用法: 1.HTML中的脚本必须位于<script>与</script>标签之间,可被放置在HTML页面的<body>和<head>部分中: 2.也可以把脚本放在外部.js文件中,需要使用时,在<script>标签的“src“属性中设置引用路径.外部脚本不能包含<script>标签.javascript输出: 1.使用window.alert()弹出警告框: 2.使用document.write()方法将内容写到H…

目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允许我们通过脚本对页面中的所有元素进行访问和设置 注意:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问 (1)集合 all[]:提供对文档中所有 HTML 元素的访问 anchors[]:返回对文档中所有 Anchor 对象的引用 lin…

js函数与其它 高级语言相比有一个特点.没有返回值,一个简单函数就是function关键字+函数名字构成 this 对象是在运行中基于函数的执行环境绑定的,在全局函数中,this等于window,而当函数被 作为某个对象的方法调用时,this等于那个对象 也就是说this关键字就是指代调用者. call.apply示例: 1.简单用法:绑定一些函数,用于传递参数.调用 2.用于扩展用于函数运行的作用域: js没有块级作用域的概念: 模拟高级语言实现块级作用域的功能示例: 通过运用匿名函数自执行实…

说实话,前面一节的原型和原型链在当初学的时候并没有很头疼,对着高级编程第三版撸了几遍就理解透了,闭包这一节真的挺头疼的,很惭愧,看了差不多十来遍吧,还翻看了网上的其他博客和解释文档,五花八门的表达方式,虽然核心思想都一致,但是实在是不能做到自己的理解,后来结合函数作用域链,好不容易有点开窍,趁着热乎劲儿,赶紧写下来,感兴趣的可以参考一下. 闭包:高级编程上面的解释是指有权访问另一个函数作用域中的变量的函数,(是一个函数): 创建闭包的常见方式,就是在一个函数内部创建另一个函数. 在理解闭包之前,…

1,ECMAScript不像其他面向对象的语言那样有类的概念,它的对象与其他不同. 2,ECMAScript有两种属性:数据属性和访问器属性.([[]]这种双中括号表示属性为内部属性,外部不可直接访问) 1.数据属性:[[ Configurable ]]:表示能否通过delete删除属性,能否修改属性的特性,能否将属性修改为访问器属性,默认为true. [[ Enumerable ]]:表示能否通过for-in循环返回属性,默认为true. [[ Writable ]]:表示能否修改属性的值,默…

html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick="add()">add</button> </div> <div id="a3"> <button onclick="del()">del</button> </div> &l…

String对象 更详细转:http://www.w3school.com.cn/jsref/jsref_obj_string.asp //-------------------------------------------------------- // string对象属性: // length var x = [1,2,3,4,5,6] document.write(x.length) //-------------------------------------------------…

…

1.本文实现的功能为鼠标与地图之间的交互,能够在地图上绘制不同形状的图形 2.代码部分主要讲到的为Graphic函数的相关功能 <!DOCTYPE html> <html> <head> <title>地图绘制工具</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-eq…

数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学计数法表示数,参数指定小数位个数  toPrecision() 方法自动判断调用toFixed()或toExponential()方法,参数指定所有数的位数 复制代码代码如下: var num = 99;  alert(toFixed(2)); //99.00  alert(toExponentia…

JavaScript学习总结(一)——JavaScript基础 JavaScript学习总结(二)——逻辑Not运算符详解 JavaScript学习总结(三)——逻辑And运算符详解 JavaScript学习总结(四)——逻辑OR运算符详解 JavaScript学习总结(五)——Javascript中==和===的区别 JavaScript学习总结(六)——JavaScript判断数据类型总结 JavaScript学习总结(七)——JavaScript函数(function) JavaScrip…

最近做项目中遇到了一些关于javascript数据类型的判断处理,上网找了一下资料,并且亲自验证了各种数据类型的判断,在此做一个总结吧! 一.JS中的数据类型  1.数值型(Number):包括整数.浮点数. 2.布尔型(Boolean) 3.字符串型(String) 4.对象(Object) 5.数组(Array) 6.空值(Null) 7.未定义(Undefined) 二.判断一个变量的数据类型 1.数值型(number) 比较常用的判断方法是: function isNumber(val)…

Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原有的内容上进行增添,修改,删除,为了方便操作,Javascript中有些非常实用的属性: 一.innerHTML 二.innerText 三.textContent 等等..我们接下来要操作的就是以上几种属性. 对于<p id = 'test'>Hello!</p>  因为在HTML的…