- 博客(64)
- 收藏
- 关注
RSS订阅转载 第7章 利用 YUI 库遍历和操作 DOM (一)
本章内容简介：遍历 DOM 以及查找元素操作内容处理 CSS 和页面样式7.1 遍历 DOM 以及查找元素在遍历 DOM 时可以找到如下的元素。7.1.1 get 方法可以将其视为 getElementById 方法，但是功能更强大。DOM方法 getElementById 工作得很好，但是它欠缺一些灵活性。顾名思义，getElementById 方法只附带一个参数，也
2012-03-24 17:16:33
1155
转载 第二部分 YUI 库
整个雅虎用户界面库 (Yahoo!User Interface Library, YUI) 解压缩之后接近 50MB，包括素材、示例、测试、文档和包含主库的3种类型的文件。可以在 http://developer.yahoo.com/yui/ 中找到 YUI 库。YUI 库划分为如下4个主要的组：YUI 核心实用工具控件/窗口部件CSS工具每个组又划分为个别组件，可以根据需要使
2012-03-24 16:00:48
1279
转载 第9章 bug 和 bug 修复
在本章中，你将学习：如何跟踪 bug 。神秘的 hasLayout 属性。最常见的浏览器 bug 及其修复方法。9.1 bug 捕捉2.空白边叠加的问题空白边叠加 (见第2章) 是另一个如果误解就会导致许多麻烦的 CSS 特性。请考虑 div 元素内嵌段落的简单示例：This paragraph has a 20px margin.div 框设置了
2012-03-20 18:05:48
503
转载 第8章 招数和过滤器
在理想的环境中，编写正确的 CSS 会在支持 CSS 的每个浏览器中正常工作。不幸的是，我们并不是生活在理想的世界中，浏览器有不少 bug 和不一致的地方。为了创建能够在各种浏览器上显示相同样式的页面，CSS 开发人员需要发挥创造性。通过利用 bug 和未实现的 CSS ，开发人员能够选择性地对不同浏览器应用不同的规则。招数和过滤器是CSS开发人员的强大工具。但是，正因为功能强大，使用时更应该谨慎
2012-03-20 18:05:04
404
转载 第7章 布局(二)
7.3 固定宽度、流体和弹性布局到目前为止，所有示例都使用以像素为单位定义的宽度。这种布局类型称为固定宽度的布局，由于它是刚性的，有时候也称为 "冰布局"。固定宽度的布局非常常见，因为它们使开发人员对布局和定位有更大的控制能力。如果将设计的宽度设置为 720 像素，它就总是 720像素宽。这样的话，如果想让一个品牌图像横跨设计的顶部，那么你知道这个图像需要宽 720 像素。知道每个元素的精确宽
2012-03-19 23:27:38
317
转载 第7章 布局(一)
CSS 的主要好处之一是，它能够控制页面布局而不需要使用表现性标签。但是，CSS布局被误认为是难以理解的，在初学者中，这种想法尤其普遍。这在一定程度上是由于浏览器的不一致造成的，但主要原因是 Web 上不同布局技术的数量激增所致。似乎每个 CSS 作者都用自己的技术创建多列的布局，而且新的 CSS 开发人员常常使用一种技术却不真正了解它的工作原理。这种进行 CSS 布局的 "黑盒" 方法可能会迅速
2012-03-19 21:00:57
693
转载 第三章 背景图像和图像替换
在本章中，你将学习：固定宽度和可变宽度的圆角框。滑动门技术。山顶角。CSS阴影。用于 IE5.x 和更高版本的 PNG 透明度支持。图像替换。3.1 背景图像基础平铺图像在某些情况下很有用。但是，在大多数情况下，希望在页面上添加不进行平铺的图像。例如，假设希望在网页的开头显示一个大的品牌图像，那么只需将图像直接添加到页面上，在许多情况下这样做就够了。但是，如果图像不包含信息，是
2012-03-18 13:48:41
736
转载 第二章 可视化格式模型
要掌握的三个最重要的CSS概念是浮动、定位和框模型。这些概念控制在页面上安排和显示元素的方式，形成CSS的基本布局。如果你习惯于用表格控制布局，那么这些概念初看上去可能有点儿奇怪。实际上，大多数人只有在使用CSS开发站点一段时间之后，才能完全掌握框模型的复杂性、绝对定位和相对定位之间的差异以及浮动和清理的实际工作方式。在切实掌握这些概念之后，使用CSS开发站点就会变得容易多了。在本章中，你将学
2012-03-17 00:09:27
544
转载 第一章 基础知识
1.1 设计代码的结构1.1.2 文档类型、DOCTYPE切换和浏览器模式DTD (文档类型定义) 是一组机器可读的规则，它们定义XML或 (X)HTML的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD，因此知道要使用 (X)HTML 的哪个版本。DOCTYPE
2012-03-16 23:48:18
403
转载 第20章 最佳实践 (四)
20.4 部署20.4.1 构建过程你写的代码不应该原封不动地放入浏览器中，理由如下所示。知识产权问题 -- 如果把带有完整注释的代码放到线上，那别人就更容易知道你的意图，对它再利用，并且可能找到安全漏洞。文件大小 -- 书写代码要保证容易阅读，才能更好地维护，但是对于性能是不利的。浏览器并不能从额外的空白字符或者是冗长的函数名和变量名中获得什么好处。代码组织 -- 组织代码要
2012-03-16 23:42:02
659
转载 第20章 最佳实践 (三)
20.3 性能因为 JavaScript 是一个解释型语言，执行速度要比编译型语言慢得多。除此之外，只有有限的资源 (基于浏览器设置) 分配给 Web 应用，也就是说 JavaScript 相比较桌面应用只能访问较少的内存和 CPU 周期。虽然从 2005 年开始，浏览器在 JavaScript 执行性能方面在大踏步前进，但它还是比其他语言慢很多。不过，还是有一些方式可以改进代码的整体性能
2012-03-16 23:35:36
516
转载 第20章 最佳实践 (二)
20.2 松散耦合只要应用的某个部分过分依赖于另一部分，代码就是耦合过紧，难于维护。典型的问题如： 对象直接引用另一个对象，并且当修改其中一个的同时需要修改另外一个。紧密耦合的软件难于维护并且需要经常重写。因为 Web 应用所涉及的技术，有多种情况会使它变得耦合过紧。必须小心这些情况，并尽可能维护弱耦合的代码。1.解耦 HTML/JavaScript 一种最常见的耦合类型是 HTM
2012-03-16 23:34:15
543
转载 第20章 最佳实践 (一)
自从2000以来，Web开发方面的种种规范、条例正在高速发展。过去曾是荒芜地带，里面东西还都凑合，而现在已经演化成了完整的研究规范，并建立了种种最佳实践。随着简单的网站成长为更加复杂的 web 应用，同时 web 爱好者成为了有收入的专业人士，web 开发的世界充满了各种关于最新技术和开发方法的信息。尤其是 JavaScript ，它从大量的研究和推断中获益。JavaScript 的最佳实践分成若
2012-03-16 23:33:08
540
转载 第19章 客户端存储
随着 Web 应用程序的出现，也产生了对于能够直接在客户端上存储用户信息能力的要求。想法很合乎逻辑，属于某个特定用户的信息应该存在该用户的机器上。无论是登录信息、偏好设定或其他数据，web应用提供者发现他们在找各种方式将数据存在客户端上。这个问题的第一个方案是以 cookie 的形式出现的，cookie 是过去 Netscape Communications 公司创造的，并在一个标题为 "持久客户
2012-03-16 23:30:19
681
转载 第18章 高级技巧 (四)
18.4 拖放拖放是一种非常流行的用户界面模式。它的概念很简单：点击某个对象，并按住鼠标按钮不放，将鼠标移动到另一个区域，然后释放鼠标按钮将对象 "放" 在这里。拖放功能也流行到了 Web 上，成为了一些更传统的配置界面的一种候选方案。拖放的基本概念很简单：创建一个绝对定位的元素，使其可以用鼠标移动。这个技术源自一种叫做 "鼠标拖尾" 的经典网页技巧。鼠标拖尾是一个或者多个图片在页面上跟着
2012-03-16 23:22:31
560
转载 第18章 高级技巧 (三)
18.3 自定义事件在本书前面，你已经学到事件是 JavaScript 与浏览器交互的主要途径。事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。对象可以发布事件，用来表示在该对象生命周期中某个有趣的时候到了。然后其他对象可以观察该对象，等待这些有趣的时刻到来并通过运行代码来响应。观察者模式由两类对象组成：主体和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体
2012-03-16 23:13:44
452
转载 第18章 高级技巧 (二)
18.2 高级定时器使用 setTimeout() 和 setInterval() 创建的定时器可以用于实现有趣且有用的功能。虽然人们对 JavaScript 的定时器存在普遍的误解，认为它们是线程，其实 JavaScript 是运行于单线程的环境中的，而定时器仅仅只是计划代码在未来的某个时间执行。执行时机是不能保证的，因为在页面的生命周期中，不同时间可能有其他代码在控制 JavaScript
2012-03-16 23:08:09
736
转载 第18章 高级技巧 (一)
JavaScript 是一种极具弹性的语言，可用于多种样式。一般来说，编写 JavaScript 要么使用过程方式，要么使用面向对象方式。然而，由于它天生的动态属性，这种语音还能使用更为复杂和有趣的模式。这些技巧要利用 ECMAScript 的语言特点、BOM 扩展和 DOM 功能来获得强大的效果。18.1 高级函数函数是 JavaScript 中最有趣的部分之一。它们本质上是十分简单和程
2012-03-16 22:35:36
516
转载 第17章 Ajax 与 JSON (三)
17.3 JSON虽然 XML 在 Ajax 运动中具有举足轻重的地位，但 JavaScript 开发人员很快就对它失去了兴趣。第15章曾经讨论过，在 JavaScript 中操作 XML 存在严重的跨浏览器问题，而且从 XML 结果中提取数据也要涉及遍历 DOM 文档，而这些操作都需要编写大量的代码。Douglas Crockford 发明了一种名叫 JSON (JavaScript O
2012-03-16 22:19:51
574
转载 第17章 Ajax 与 JSON (二)
17.2 跨域请求通过 XHR 实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。实现跨域请求的解决方案可能会有所差异，但它们的目标是类似的。首先，就是要确保不会在请求和响应中携带 cookie，因为 cookie 被窃
2012-03-16 22:10:30
658
转载 第17章 Ajax 与 JSON (一)
2005年，Jesse James Garrett 发表了一篇在线文章，题为 "Ajax: A new Approach to Web Applications"。他在这篇文章里介绍了一种技术，用他的话说，就叫Ajax， 是对 Asynchronous JavaScript + XML 的简写。这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。Garrett 还解释了怎样使用
2012-03-16 22:08:23
683
转载 第14章 错误处理与调试 (三)
14.4 调试技术14.4.1 将消息记录到控制台IE8、Firefox、Opera、Chrome 和 Safari 都有 JavaScript 控制台，可以用来查看 JavaScript 错误。而且，在这些浏览器中，都可以通过代码向控制台输出消息。对 Firefox 而言，需要安装 Firebug ，因为 Firefox 要使用 Firebug 的控制台。对IE8、Firefox、Chr
2012-03-16 22:01:22
739
转载 第14章 错误处理与调试 (二)
14.3 错误处理策略过去，所谓 Web 应用程序的错误处理策略仅限于服务器端。在谈到错误与错误处理时，通常要考虑很多方面，涉及一些工具，例如记录和监控系统。这些工具的用途在于分析错误模式，追查错误原因，同时帮助确定错误会影响到多少用户。在 Web 应用程序的 JavaScript 这一端，错误处理策略也同样重要。由于任何 JavaScript 错误都可能导致网页无法使用，因此搞清楚何时以
2012-03-16 21:54:24
498
转载 第14章 错误处理与调试 (一)
14.1 浏览器错误报告14.1.1 Internet Explorer如果错误发生在位于外部文件的脚本中，行号通常会与错误所在的行号差 1 。如果是嵌入在页面中的脚本发生错误，则行号就是错误所在的行号。14.2 错误处理14.2.1 try-catch 语句ECMA-262 第3版引入了 try-catch 语句，作为 JavaScript 中处理异常的一种标准方式。基本的
2012-03-16 21:52:37
779
转载 第13章 表单脚本 (四)
13.4 表单序列化随着 Ajax 的出现，表单序列化已经成为一种常见需求。在 JavaScript 中，可以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。在编写代码之前，必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。对表单字段的名称和值进行 URL 编码，使用和号 (&) 分隔。不发送禁用的表单字段。只发送勾选的复选框
2012-03-16 21:51:22
386
转载 第13章 表单脚本 (三)
13.3 选择框脚本选择框是通过 和 元素创建的。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，HTMLSelectElement 类型还提供了下列属性和方法。add(newOption, relOption): 向控件中插入新 元素，其位置在指定项 (relOption) 之前。multiple: 布尔值，表示是否允许多项选择；等价于 HTML 中的 mult
2012-03-16 21:48:59
500
转载 第13章 表单脚本 (二)
13.2 文本框脚本在 HTML 中，有两种方式来表现文本框：一种是使用 元素的单行文本框，另一种是使用 的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍然存在一些重要的区别。要表现文本框，必须将 元素的 type 特性设置为 "text" 。而通过设置 size 特性，可以指定文本框中能够显示的字符数。通过 value 特性，可以设置文本框的初始值，而
2012-03-16 21:46:57
553
转载 第13章 表单脚本 (一)
13.1 表单在HTML中，表单是由 元素来表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement，因而与其他 HTML 元素具有相同的默认属性。不过，HTMLFormElement 也有它自己独有的属性和方法。acceptCharset: 服务器能够处理的字符集；等价于 HTM
2012-03-16 21:43:40
616
转载 第12章 事件 (七)
12.5 内存和性能由于事件处理程序可以为现代 Web 应用程序提供交互能力，因此许多开发人员会不分青红皂白地向页面中添加大量的处理程序。在创建 GUI 的语言 (如 C#) 中，为 GUI 中的每个按钮添加一个 onclick 事件处理程序是司空见惯的事，而且这样做也不会导致什么问题。可是在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题
2012-03-15 14:58:31
499
转载 第12章 事件 (六)
12.4.5 专有事件DOM规范没有涵盖所有浏览器支持的所有事件。很多浏览器出于不同的目的 -- 满足用户需求或解决特殊问题，还实现了一些自定义的事件。虽然这些事件不一定会被所有浏览器支持，但仍然有必要在此介绍一下它们的用途。1.上下文菜单 (contextmenu) 事件Windows 95 在 PC 中引入了上下文菜单的概念，即通过单击鼠标右键可以调出上下文菜单。不久，这个概念也
2012-03-15 14:56:28
488
转载 第12章 事件 (五)
12.4.3 键盘事件用户在使用键盘时会触发键盘事件。“DOM2级事件” 最初规定了键盘事件，但在最终定稿之前又删除了相应的内容。结果，对键盘事件的支持主要遵循的是 DOM0 级。“DOM3级事件” 为键盘事件制定了规范，但到 2008 年还没有哪个浏览器实现该规范。有3个键盘事件，简述如下。keydown: 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事
2012-03-15 14:52:30
537
转载 第12章 事件 (四)
12.4 事件类型Web浏览器中可能发生的事件有很多类型。如前所述，不同的事件类型具有不同的信息，而 "DOM2级事件" 规定了下列 5 种事件：UI (User Interface，用户界面) 事件，在用户与页面上的元素交互时触发；鼠标事件，当用户通过鼠标在页面上执行操作时触发；键盘事件，当用户通过键盘在页面上执行操作时触发；HTML 事件，当浏览器窗口发生变化或发生特定的客户端
2012-03-15 14:50:39
550
转载 第12章 事件 (三)
12.3 事件对象在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型，以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持 event 对象，但支持方式不同。12.3.1 DOM 中的事件对象兼容
2012-03-15 14:45:59
443
转载 第12章 事件 (二)
12.2 事件处理程序 (或事件侦听器)事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头，因此 click 事件的事件处理程序就是 onclick，load 事件的事件处理程序就是 onload。为事件指定处理程序的方式有好几种。12.2
2012-03-15 14:42:16
553
转载 第12章 事件 (一)
JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为(JavaScript 代码) 与页面的外观 (HTML 和 CSS 代码)之间的松散耦合。事件最早是在IE3和Netscape Navigator3
2012-03-15 14:39:07
544
转载 第11章 DOM2 和 DOM3 (二)
11.2 样式在 HTML 中定义样式的方式有3种：通过 元素包含外部样式表文件、使用 元素定义嵌入式样式，以及使用 style 特性定义针对特定元素的样式。"DOM2 级样式“模块围绕这3种应用样式的机制提供了一套 API 。要确定浏览器是否支持 DOM2 级定义的 CSS 能力，可以使用下列代码：var supportsDOM2CSS = document.implementati
2012-03-15 14:16:37
936
转载 第11章 DOM2 和 DOM3 (一)
DOM1级主要定义的是 HTML 和 XML 文档的底层结构。DOM2 和 DOM3 级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的 XML 特性。为此，DOM2 和 DOM3 级分为许多模块 (模块之间具有某种关联)，分别描述了 DOM 的某个非常具体的子集。这些模块如下：DOM2级核心 (DOM Level 2 Core): 在1级核心基础上构建，为节点添加了更多方法
2012-03-15 14:09:33
1590
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人