在学习 << Ajax 基础教程 >>后对部分知识的总结和摘录
A 向表中追加行
将tr增加到 tbody 中,而不是直接增加到 table 中,如下
引用
<table>
<tbody>
</tbody>
</table>
向这个表中增加行的正确做法是把行增加到表体,而不是增加到表,如下:
-
var cell =document.createElement(
"td"
).appendChild(document.createTextNode(
"foo"
));
-
var row = document.createElement(
"tr"
).appendChild(cell);
-
document.getElementById(
"myTableBody"
).appendChild(row);
var cell =document.createElement("td").appendChild(document.createTextNode("foo"));
var row = document.createElement("tr").appendChild(cell);
document.getElementById("myTableBody").appendChild(row);
这个方法在所有的浏览器中都支持,而不加到表体中的如 ie 就不可以
B 通过 JavaScript 设置元素的样式
可以通过 JavaScript 使用 setAttribute 方法设置元素的样式,如把 span 元素中的文本修改为红色粗体显示,可以使用 SetAtribute 方法如下
-
var sapnElement = document.getElementById(
"myspan"
);
-
spanElment.setAttribute(
"style"
,
"font-weight:bold;color:red"
);
var sapnElement = document.getElementById("myspan");
spanElment.setAttribute("style", "font-weight:bold;color:red");
这种方法除了 IE 在其他浏览器中都是可以实现的
对 IE 的解决办法是使用元素的 style 对象的 cssText 属性来设置的,得到广泛的支持
如下所示:
-
var spanElement = document.getElementById(
"myspan"
);
-
spanElement.style.cssText =
"font-weight:bold;color:red"
;
var spanElement = document.getElementById("myspan");
spanElement.style.cssText = "font-weight:bold;color:red";
这种办法贼大多数的浏览器上都可以实现除了 opera 以外。为了在所有浏览器中都可以实现,只有两种方法都执行
-
var spanElement = document.getElementById(
"myspan"
);
-
spanElement.style.cssText =
"font-weight:bold;color:red"
;
-
spanElment.setAttribute(
"style"
,
"font-weight:bold;color:red"
);
var spanElement = document.getElementById("myspan");
spanElement.style.cssText ="font-weight:bold;color:red";
spanElment.setAttribute("style", "font-weight:bold;color:red");
C
设置元素的 class 属性(内联样式)
使用 firefox 和 safari 之类的浏览,可以使用元素 setAttribute 方法来设置元素的 class 属性,如下所示
-
var element = document.getElementById(
"myElement"
);
-
element.setAttribute(
"class"
,
"styleClass"
);
var element = document.getElementById("myElement");
element.setAttribute("class", "styleClass");
如果使用 setAttribute 方法,并指定属性名为 class ,IE 不会设置元素的 class 属性。相反,只使用 setAttribute 方法时 IE 会自己识别 className 属性,对于这种情况,完备的解决方法是:使用元素setattribute方法时,将 class 和className都用作属性名,如下所示:
-
var element = document.getElementById(
"myElement"
);
-
element.setAttribute(
"class"
,
"styleClass"
);
-
element.setAttribute(
"className"
,
"styleClass"
);
var element = document.getElementById("myElement");
element.setAttribute("class", "styleClass");
element.setAttribute("className", "styleClass");
D
创建输入元素
Html 本身提供一组有限的输入元素,只是元素的 type 属性的值不同,选择框和文本区又自己特有的标记。通过 JavaScript 动态的创建输入元素(创建单选按钮除外)只要遵循简单的原则就行。
考虑在哪里把新创建的元素增加到父元素中,必须注意 document.createElement和 setAttribute 语句的顺序。在某些浏览器中,只有创建了元素,而且正确的设置 type属性时,才会把新创建的元素增加到其父元素中。如下代码可能产生奇怪行为:
-
document.getElementById(
"formElement"
).appendChild(button);
-
button.setAttribute(
"type"
,
"button"
);
document.getElementById("formElement").appendChild(button);
button.setAttribute("type", "button");
为了避免奇怪的行为,确保创建输入元素后设置其所有属性,特别是 type 属性,然后在把它增加到父元素中,如下:
-
var button = document.createElement(
"input"
);
-
button.setAttribute(
"type"
,
"button"
);
-
document.getElementById(
"formElement"
).appendChild(button);
var button = document.createElement("input");
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);
E
向输入元素增加事件处理程序
向输入元素增加事件处理程序的标准做法是使用元素的 setAttribute 方法,它以事件名作为属性名,并把函数处理程序作为属性值,如下:
var formElement = document.getElementById("formElement");
formElement.setAttribute("onclick", "doFun();");
除了 IE ,上面代码在其他所有的浏览器都可用,如果要在 IE 中使用 JavaScript 设置元素的事件处理程序,必须对元素使用点击法来应用所需的事件处理程序,并把它赋为匿名函数,这个匿名函数要调用所需的事件处理程序。如下:
-
var formElement = document.getElementById(
"formElement"
);
-
formElement.onclick=function(){doFoo();}
var formElement = document.getElementById("formElement");
formElement.onclick=function(){doFoo();}
注意:是如何通过点击法从 formElement 引用 onclick 事件处理程序。onclick 事件处理程序赋为一个匿名函数,这个匿名函数只是调用了所有的事件处理程序,在这个例子中事件处理程序就是doFoo。
幸运的是,这种技术得到 IE 和其他很多浏览器的支持。
F
创建单选按钮
通过 JavaScript 动态创建按选按钮是很费劲的。因为 IE 中创建单选按钮的方法和其他浏览器所有的方法大相径庭。
其他浏览器创建的方法
-
var raidoButton = document.createElement(
"input"
);
-
raidoButton.setAttribute(
"type"
,
"radio"
);
-
radioButton.setAttribute(
"name"
,
"radioButton"
);
-
radioButton.setAttribute(
"value"
,
"checked"
);
var raidoButton = document.createElement("input");
raidoButton.setAttribute("type", "radio");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
这个方法在 ie 中也可以显示但是无法将其显示
IE 中创建方法如下
-
var radiobutton = document.createElement(
"<input type='radio' name='radioButton' value='checked'>"
);
var radiobutton = document.createElement("<input type='radio' name='radioButton' value='checked'>");
IE 创建的单选按钮与其他的浏览器不兼容,方法很简单,使用浏览器的嗅探机制,使得在创建单选按钮时脚本就能知道该使用哪个方法。幸运的是不用检查大量不同的浏览器,假设只使用现代浏览器,脚本只需在 IE 和其他浏览器间进行分区就行了。
IE 能识别出名为 uniqueID 的 document 对象的专用属性。IE 是唯一能识别这个属性的浏览器,所以 uniqueID 很适合用来确定脚本是不是在 IE 中运行。
使用 document.uniqueID 属性来确定脚本在哪个浏览器中运行时,使用 IE 方法或是标准兼容 的方法,代码如下
-
if
(document.uniqueID) {
-
var radiobutton = document.createElement(
"<input type='radio' name='radioButton' value='checked'>"
);
-
}
else
{
-
var raidoButton = document.createElement(
"input"
);
-
raidoButton.setAttribute(
"type"
,
"radio"
);
-
radioButton.setAttribute(
"name"
,
"radioButton"
);
-
radioButton.setAttribute(
"value"
,
"checked"
);
-
}
if(document.uniqueID) {
var radiobutton = document.createElement("<input type='radio' name='radioButton' value='checked'>");
} else {
var raidoButton = document.createElement("input");
raidoButton.setAttribute("type", "radio");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
}
相关推荐
开发跨浏览器JavaScript时要注意的问题开发跨浏览器JavaScript时要注意的问题
开发跨浏览器的JavaScript 1. childNodes在ff中和ie的区别。 ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的,而ie/op不是这样的。 ”box1″><span>content</span></div> 在ff下,box1的...
对于javascript的开发人员来说,多浏览器的支持性,一直是个问题,每次都要经过测试,多个浏览器,才能使用下面一些常见的一些注意事项。
push.js:一个小巧的,跨浏览器的 JavaScript 通知 API 的解决方案
javascript跨浏览器的属性判断方法.docx
jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave ...
• 多浏览器兼容, 包括IE6+, firefox1.5+, opera9+, safari3+ 和 Google Chrome. • 大量的API文档 和示例. • 不断更新的代码片段供程序员参考. • 极为方便的所见即所得的界面编辑器. Web界面使用拖拽轻松搞定,...
javascript 跨浏览器开发之js 事件的兼容性问题,需要的朋友可以参考下。
一个用于为Chrome,Opera和Firefox构建跨浏览器扩展的模板
• 多浏览器兼容, 包括IE6+, firefox1.5+, opera9+, safari3+ 和 Google Chrome. • 大量的API文档 和示例. • 不断更新的代码片段供程序员参考. • 极为方便的所见即所得的界面编辑器. Web界面使用拖拽轻松搞定,...
Klynt Player是一个跨浏览器JavaScript引擎,用于播放富媒体序列,可以使用。 演示和文档 二手图书馆 播放器使用以下库: :SMIL-Timing和SMIL-Timesheets的实现 :具有Flash和Silverlight垫片HTML5 <audio>...
Media Player一个小巧,完全跨浏览器,可访问,完全可定制的媒体播放器
PKI 助推器 Javascript 这是 PKI Booster 的 Javascript 包装器,使您能够开发跨浏览器的 PKI Web 应用程序。
jquery.scrollTo 是jQuery轻量级、跨浏览器和高度可定制的动画滚动
互操作性WebDev 对于Web开发人员而言,如何构建可... 将说明用于互操作性测试的工具,跨浏览器的基础知识以及有关HTML5,CSS,JavaScript开发的提示和技巧。 浏览器检测,UA嗅探,CSS前缀和回退都将在项目中进行检查。
一个jQuery插件,添加跨浏览器鼠标滚轮支持
browser-extension-template:一个用于创建跨浏览器扩展的模板
animate.css 是一个集合酷的,有趣的和跨浏览器的动画。