JavaScript
转自: http://www.disandu.com/?p=603
============================================================================
1 处理XSLT 调用带参数的XSLT模板的方法 详见 23条
<html>
<body>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>
==========================================================================
2 处理XML
一.读入XML文件
<script language="Javascript">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
</script>
二.生成保存XML文件
<script language="javascript">
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加载文档
//doc.load("b.xml");
//创建文件头
var p = doc.createProcessingInstruction("xml","version=’’1.0’’ encoding=’’gb2312’’");
//添加文件头
doc.appendChild(p);
//用于直接加载时获得根接点
//var root = doc.documentElement;
//两种方式创建根接点
//var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//创建子接点
var n = doc.createNode(1,"ttyp","");
//指定子接点文本
//n.text = " this is a test";
//创建孙接点
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//创建属性
var r = doc.createAttribute("id");
r.value="test";
//添加属性
n.setAttribute Node(r);
//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加属性
n.setAttributeNode(r1);
//删除第二个属性
n.removeAttribute("class");
//添加孙接点
n.appendChild(o);
//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));
//添加注释
n.appendChild(doc.createComment("this is a comment/n"));
//添加子接点
root.appendChild(n);
//复制接点
var m = n.cloneNode(true);
root.appendChild(m);
//删除接点
root.removeChild(root.childNodes(0));
//创建数据段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);
//添加根接点
doc.appendChild(root);
//查找接点
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//显示改接点的属性
for(var i= 0;i<a.length;i++){
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++){
alert(a[i].attributes[j].name);
}
}
//XML保存(需要在服务端,客户端用FSO)
//doc.save();
//查看根接点XML
if(n){
alert(n.ownerDocument.xml);
}
</script>
==========================================================================
3 JavaScript写文件:
var fs=new ActiveXObject("Scripting.FileSystemObject");
var file=fs.CreateTextFile("c://test.txt",true);
file.WriteLine("This is test text.");
file.Close();
==========================================================================
4 工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法
function id(x) {
if (typeof x == "string") return document.getElementById(x);
return x;
}
==========================================================================
5
语法
document.getElementsByName(name)
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
==========================================================================
6
语法
document.getElementById(id)
说明
HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。
不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
==========================================================================
7
语法
document.getElementsByTagName(tagname)
说明
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。
提示和注释
注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
{
// do something with each paragraph
}
==========================================================================
8 Root 根节点
有两种特殊的文档属性可用来访问根节点:
document.documentElement
document.body
第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。
==========================================================================
9 节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName (节点名称)
nodeValue(节点值)
nodeType (节点类型)
==========================================================================
10 nodeName
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释:nodeName 所包含的 XML 元素的标签名称永远是大写的
==========================================================================
11 获得元素的文本值 两种方法
//IE不支持下面这行,Chrome与Firefox通过。
var x = document.getElementById("frame1").contentDocument;
alert(x.getElementById("exam_time").childNodes[0].nodeValue);
alert(x.getElementById("exam_time").innerHTML);
==========================================================================
12 iframe
创建: <iframe src="http://www.baidu.com" id="frame1" name="frame1" frameborder="0" height="200" width="200" framespace="0" marginheight="0" marginwidth="0" scrolling="no" ></iframe>
1> 滑动边框
2>
==========================================================================
13 String对象
http://www.w3school.com.cn/js/jsref_obj_string.asp
==========================================================================
14 分析URL中的参数
var param = new Object();
var url = document.URL;
var strData;
var strStyle;
alert(url);
var bNonePaper = true;
if (url != "")
{
idx = url.indexOf("?");
if (idx != -1)
{
var str = url.substr(idx+1); //去掉?号
alert(str);
strs = str.split("&");
for (var i = 0; i < strs.length; i++)
{
param[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
strData = param["totalNum"];
strStyle = param["rightNum"]
alert(strData);
}
==========================================================================
15 播放Flash
---------------------------------------
1.5版本用法:
// swfobject 1.5 注意不能用swfobject 2.0+
// http://www.adobe.com/devnet/flashplayer/articles/swfobject.html
var so = new SWFObject("bye.swf", "sotester", "100%", "100%", "8", "#FF6600");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.addParam("scale", "noscale");
so.write("flash");
---------------------------------------
中文文档
1.5版 http://www.awflasher.com/flash/articles/swfobj.htm
官方文档 http://code.google.com/p/swfobject/wiki/documentation
----------------
2.2 版本用法示例:
<script type="text/javascript">
// file: mp3文件 divName: 待写入div的id
function playAudio(file, divName) {
try {
arg1 = "res/singlemp3player.swf?file="+file;
// swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0", "singlemp3player.swf");
var flashvars = true;
var params = {
menu: "true",
wmode: "Transparent",
};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};
swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0","expressInstall.swf", flashvars, params, attributes);
alert("haha1");
}
catch(error) {
alert(error.name);
alert(error.description);
}
}
playAudio("1.mp3", "myContent");
alert("haha");
</script>
----------------
==========================================================================
16 弹出窗口
/*
* 打开新窗口
* f:链接地址
* n:窗口的名称
* width:窗口的宽度
* height:窗口的高度
* s:窗口是否有滚动条,1:有滚动条;0:没有滚动条
*/
function openWin(f,n,width,height,s){
sb = s == "1" ? "1" : "0";
l = (screen.width - width)/2;
t = (screen.height - height)/2;
sFeatures = "left="+ l +",top="+ t +",height="+ height +",width="+ width
+ ",center=1,scrollbars=" + sb + ",status=0,directories=0,channelmode=0";
openwin = window.open(f , n , sFeatures );
if (!openwin.opener)
openwin.opener = self;
openwin.focus();
return openwin;
}
==========================================================================
17 出错处理
1》 异常
try
{
alert(parent.document);
}
catch(error) {
errMsg = error.name + ": " + error.message;
alert(errMsg);
// alert(error.name);
// alert(error.message);
}
-------------------------------------
2》错误处理
// Display error messages in a dialog box, but never more than 3
window.onerror = function(msg, url, line) {
if (onerror.num++ < onerror.max) {
alert("ERROR: " + msg + "/n" + url + ":" + line);
return true;
}
}
==========================================================================
18 请教如何改变网页背景音乐的曲目
function playmusicfile(musicfile)
{
var objMusic = document.getElementById("bgmusic");
var parEle = objMusic.parentNode;
parEle.removeChild(objMusic);
// objMusic.src= musicfile;
var newEle = document.createElement("embed");
newEle.setAttribute("id","bgmusic");
newEle.src=musicfile;
newEle.setAttribute("hidden","true");
newEle.setAttribute("autostart","true");
parEle.appendChild(newEle);
}
这样可以解决。
==========================================================================
19 正则表达式 替换时 注意判空, 不然会造成 IE8中未知错误。
//正则表达式匹配样式
function rexCSS()
{
var objs = document.getElementsByTagName("P");
if(!objs)
{
return;
}
for(i=0; i<objs.length; i++)
{
if(objs[i].innerHTML.indexOf("<img") == -1 &&
objs[i].innerHTML.indexOf("<IMG") == -1)
{
var str = objs[i].innerHTML;
try {
if (str.length != 0)
objs[i].innerHTML = str.replace(/[/u4E00-/u9FA5]+/g, "<span class = 'CNStyle'>$&</span>");
}
catch(eee)
{
alert(eee.message);
alert(objs[i].innerHTML);
}
}
}
}
==========================================================================
20 jQuery Mp3播放器
/*********************************************************************
* jMP3 v0.2.1 - 10.10.2006 (w/Eolas fix & jQuery object replacement)
* an MP3 Player jQuery Plugin (http://www.sean-o.com/jquery/jmp3)
* by Sean O
* Download by http://www.jb51.net
* An easy way make any MP3 playable directly on most any web site (to those using Flash & JS),
* using the sleek Flash Single MP3 Player & the fantabulous jQuery.
*********************************************************************/
************************************************************************
应用代码:
// file: mp3文件 divName: 待写入div的id
function playAudio(file, divName) {
try {
arg1 = "res/singlemp3player.swf?file="+file;
// swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0", "singlemp3player.swf");
var flashvars = true;
var params = {
menu: "true",
wmode: "Transparent",
};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};
swfobject.embedSWF(arg1, divName, "300", "18", "9.0.0","expressInstall.swf", flashvars, params, attributes);
alert("haha1");
}
catch(error) {
alert(error.name);
alert(error.description);
}
}
playAudio("1.mp3", "myContent");
************************************************************************
http://www.sean-o.com/jquery/jmp3/
==========================================================================
21 下面这种情况会导致div写两次
<div id="1">
<script type="text/javascript">
playAudio("1.mp3", "1");
</script>
</div>
==================================================================
22 JS处理 XML
一.读入XML文件
<script language="Javascript">
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("note.xml")
</script>
二.生成保存XML文件
<script language="javascript">
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加载文档
//doc.load("b.xml");
//创建文件头
var p = doc.createProcessingInstruction("xml","version=’’1.0’’ encoding=’’gb2312’’");
//添加文件头
doc.appendChild(p);
//用于直接加载时获得根接点
//var root = doc.documentElement;
//两种方式创建根接点
//var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//创建子接点
var n = doc.createNode(1,"ttyp","");
//指定子接点文本
//n.text = " this is a test";
//创建孙接点
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//创建属性
var r = doc.createAttribute("id");
r.value="test";
//添加属性
n.setAttributeNode(r);
//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加属性
n.setAttributeNode(r1);
//删除第二个属性
n.removeAttribute("class");
//添加孙接点
n.appendChild(o);
//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));
//添加注释
n.appendChild(doc.createComment("this is a comment/n"));
//添加子接点
root.appendChild(n);
//复制接点
var m = n.cloneNode(true);
root.appendChild(m);
//删除接点
root.removeChild(root.childNodes(0));
//创建数据段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);
//添加根接点
doc.appendChild(root);
//查找接点
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//显示改接点的属性
for(var i= 0;i<a.length;i++){
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++){
alert(a[i].attributes[j].name);
}
}
//XML保存(需要在服务端,客户端用FSO)
//doc.save();
//查看根接点XML
if(n){
alert(n.ownerDocument.xml);
}
</script>
=========================================================================
23 XML操作 xmlHelper.js
http://www.google.cn/codesearch/p?hl=zh-CN#5zTQZzprFTc/trunk/static/media/javascript/xmlHelper.js&q=transformNode%20XsltArg%20lang:javascript&sa=N&cd=1&ct=rc&l=134
function parseXML(text)
{
var xmlDoc = null;
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try // Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
//return;
}
}
return xmlDoc;
}
function loadXMLFile(fname)
{
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("MSXML2.FreeThreadedDomDocument");
//xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot load xml files.');
}
xmlDoc.async = false;
xmlDoc.load(fname);
return xmlDoc;
}
function transformXml(xmlDoc, xlstDoc, outputDivID)
{
//xml=loadXMLDoc("cdcatalog.xml");
//xsl=loadXMLDoc("cdcatalog.xsl");
//var returnText;
// code for IE
if (window.ActiveXObject)
{
var ex = xmlDoc.transformNode(xlstDoc);
outputDiv.innerHTML=ex;
//alert(ex);
//returnText = ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
var xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xlstDoc);
var resultDocument = xsltProcessor.transformToFragment(xmlDoc,document);
//returnText = resultDocument;
var outputDiv = document.getElementById(outputDivID);
// Clear current results and add new results
while(outputDiv.childNodes.length >= 1) {
outputDiv.removeChild(outputDiv.firstChild);
}
outputDiv.appendChild(resultDocument);
}
//return returnText;
}
// Params:
// - xsltArgs: an array of objects with obj.name and obj.value properties
function transformXmlWithArgs(xmlDoc, xsltDoc, xsltArgs, outputDiv)
{
//xml=loadXMLDoc("cdcatalog.xml");
//xsl=loadXMLDoc("cdcatalog.xsl");
//var returnText;
// code for IE
if (window.ActiveXObject)
{
var template = new ActiveXObject("MSXML2.XSLTemplate");
template.stylesheet = xsltDoc;
var proc = template.createProcessor();
proc.input = xmlDoc;
if (xsltArgs != null) {
for (var i=0;i<xsltArgs.length;i++) {
var param = xsltArgs[i];
proc.addParameter(param.name,param.value,"");
}
}
proc.transform();
var ex = proc.output;
//var ex = xmlDoc.transformNode(xsltDoc);
outputDiv.innerHTML=ex;
//alert(ex);
//returnText = ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation
&& document.implementation.createDocument)
{
var xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xsltDoc);
if (xsltArgs != null) {
for (var i=0;i<xsltArgs.length;i++) {
var param = xsltArgs[i];
xsltProcessor.setParameter("", param.name, param.value);
}
}
/*
for(xsltArg in xsltArgs)
{
xsltProcessor.setParameter("", xsltArg.name, xsltArg.value);
//xsltProcessor.setParameter("", xsltArg, xsltArgs[xsltArg]);
}*/
resultDocument = xsltProcessor.transformToFragment(xmlDoc,document);
//returnText = resultDocument;
//alert(resultDocument);
outputDiv.appendChild(resultDocument);
}
//return returnText;
}
=========================================================================
24 全面介绍javascript异常处理(try…catch…finally window.onerror)
http://snap.oncoding.cn/javascript/base/article200907/216.html
=========================================================================
25 对象 与 数组
var xsltParam = new Object();
xsltParam.name = "propertyFile";
xsltParam.value = "Property.XML";
var argArray = new Array();
argArray[0] = xsltParam;
=========================================================================
26 一些莫名其妙的脚本错误是文本编码造成的,最好将编码统一改成utf-8