javascript（DOM）实例

javascript DOM 操作

在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Model(文本对象模型). D : 文档(html或xml文档) O : 对象(文档对象) M : 模型 1.2.DOM结构 DOM将文档以家谱树的形式来表现. 下面是一个简单的html文档,我们可以看出该文档的DOM结构如下 <!DOCTYPE html> <html> <head&…

javaScript DOM JQuery AJAX

http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. 1.1 JavaScript代码存在形式  <script type="text/javascript" src="JS文件&…

javascript DOM操作HTML文档

文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态访问和更新文档内容.结构和样式的语言平台.提供了标准的HTML和XML对象集,并有一个标准接口来访问并操作他们,即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制. 1. DOM概述文档对象模型定义了JavaScript可以进行操作的浏览器,描述了文档对象的逻辑结构及各个功能组件的标准接口.主要包括以下内容: 核心Jav…

《JavaScript Dom 编程艺术》读书笔记-第4章

我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本是因为这本书从实例开始带领读者一步步学习,写作风格也如其名字一样具有艺术感,阅读起来很舒服.本书第一二三稍微有计算机基础的人阅读起来都不困难,也没有什么好记录的,从第四章开始,本书开始介绍案例图片库~每一节都是干货满满滴~ 第四章——案例研究:JavaScript图片库: 4.1 标记无序清单元素<u…

JavaScript DOM 对象

JavaScript DOM 对象什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器最与标准接近.单纯的Javascript要结合DOM才能做DHTML编程,才能做出漂亮的效果.应用于WEB.这点几乎与其它的语言无异,正如C/C++需要库支持是一样的道理.否则就是单纯的在语法上做研究了.我们最为关心的是,DO…

JavaScript 小实例 - 表单输入内容检测，对页面的增删改

JavaScript 小实例 - 表单输入内容检测,对页面的增删改效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页面写入数据 2.删除页面数据 + 删除提示[确实]才删除 3.获取表单输入的内容,并简单验证 4.打开一个新的窗口 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&…

前端基础：JavaScript DOM对象

JavaScript DOM对象通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM模型被构造为对象的树: 通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML. JavaScript能够改变页面中的所有HTML元素: JavaScript能够改变页面中的所有HTML属性: JavaScript能…

JavaScript DOM基础总结

上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来继续看我喜欢的红宝书,希望深入学习JavaScript DOM. DOM(文档对象模型)是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.删除和修改页面的某一部分. 1.Node方面 1.1 节点类型节点类型(nodeName) 数值常量(nodeValue) 元…

Javascript DOM 编程艺术（第二版）读书笔记——基本语法

Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一部分东西的概念在初学时是无法完全弄懂的,很多时候都是学到很多东西后,串起来才能更进一步.而我的博客目地是自学与交流,所以我只能是暂时地用红字标注这些东西,以后弄懂了会补全这些(相应的,有些东西会删除).所以虽然说是某本书的读书笔记,但是写到后面绝对是不仅仅是局限于这本书了.所以不要指望着只看读书笔记…

《JavaScript DOM 编程艺术》学习笔记

目录 <JavaScript DOM 编程艺术> 学习笔记第一章 js简史第二章 js语法准备工作语法第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库第五章最佳实践平稳退化渐进增强向后兼容分离js 性能考虑第六章案例:图片库改进第七章动态创建标记传统方法 DOM方法 Ajax 第八章充实文档内容 <JavaScript DOM 编程艺术> 学习笔记概念: 平稳退化渐进增强以用户为中心第一章 js简史可以使用DO…

10种JavaScript特效实例让你的网站更吸引人

我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者.这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读. 您还可以参考以下JavaScript/Ajax相关教程及资源:<10个非常棒的Ajax及Javascript实例资源网站><12种Javascript解决常见浏览器兼容问题的方法>&l…

JavaScript DOM编程艺术（第2版）的简单总结

介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介绍一下各章节的讲到的内容. 第1章 JavaScript简史本章主要讲解JavaScript的发展简史.不同的浏览器会采用不同的办法来完成一样的任务,这会影响JavaScript的发展,而DOM标准化,让这种情况有所改变.而本书要讲的就是JavaScript和DOM一起完成的任务,不需要讨论浏览器…

读书笔记：JavaScript DOM 编程艺术（第二版）

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…

javascript DOM 操作 attribute 和 property 的区别

javascript DOM 操作 attribute 和 property 的区别在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 attr() 方法时有些出问题,原来的代码如下: $("thead :checkbox").attr("checked", false); ... $("tbody tr").each(function() { $(this).find(":c…

JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interval) { //测试JS兼容性代码 if (elem.movement) { clearTimeout(elem.movement); } //计算并移动elementID位置 var repeat = "moveElement('"+elementID+"',"+fi…

javascript DOM操作之 querySelector,querySelectorAll

javascript DOM操作之 querySelector,querySelectorAll…

JavaScript : DOM文档解析详解

JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> Don’t forget to buy this stuff.</p> 节点及其类型元素节点: 属性节点:元素的属性,可以直接通过属性的方式来操作文本节点:元素节点的子节点,其内容通常为文本 2.Node接口的特性和方法现在给出一个演示的HTML文件: html <!doctype h…

JavaScript DOM 编程艺术（第2版）读书笔记（1）

JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出IE3的时候发布了自己的VBScript语言,同时以JScript为名发布了JavaScript 的一个版本,很快赶上了 Netscape 的步伐.面对微软公司的竞争,Netscape 和 Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript 语言进行了标准化,于是出现了ECMASc…

JavaScript DOM编程艺术学习笔记（一）

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad…

JavaScript DOM动态创建（声明）Object元素

http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用JavaScript DOM动态创建(声明)Object元素.这样可以避免加载没用到的控件,避免页面加载过慢.” 文中“DOM创建.添加元素具体就不详述了.”一句带过的部分内容,有朋友需要.我也曾经是个菜鸟,摸索出来的,愿意分享给后来者:另外,我也深知有些设备调试需要耐心和经验.但是,我已经两年多没接触代码…

JavaScript DOM实战：创建和克隆元素

DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的JavaScript DOM方法实战-修改文档树中已经用过它们.当时的目的是把新创建的元素添加到文档树里,使它成为某个元素的最后一个子节点. 1. //创建一个li新元素 2. var newChild=document.createElement('li'); 3. //创建一个a 新元素 4. v…

JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以读取文本框中的值.设置文本框中的值. JavaScript→DOM就是C#→.Net Framwork.没有.net,C#只能for.while,连WriteLine.MessageBox都不行.DOM就是一些让JavaScript能操作Html页面控件的类.函数. DOM也像WinForm一样,通…

JavaScript DOM对象和JQuery对象相互转换

1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="…

JavaScript DOM编程艺术第一章：JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap…

javascript dom追加内容的例子

javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"…

《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { //需要判断…

javascript DOM对象转jquery对象

首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处理,但是再js文件中,这个this传递的是一个javascript DOM对象,不是一个jquery对象,所以不能使用jquery的方法,进而就不能兼顾到浏览器的兼容性了,因此要使用一定的手段把dom select对象转换成jquery对象,其实很简单,dynamic_change函数中,用'$'符…