[经验总结]近期JavaScript编程总结

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;
  }
==========================================================================

语法
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异常处理(trycatchfinally 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值