Prototype使用学习手册指南之base.js JavaScript的术语表

AJAX相关JS代码片段和部分浏览器模型

在.net开发中,充分利用免费控件是好事情,同样的,在php的开放中,能使用ajax的类库是可以,但是如果不能修改控件或者类库达到自己的需求,就要动用JS大法了,前提是研究好浏览器模型 的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身来说要求不高。

1、动态删除Table 里面内容技巧,不需要写太多代码,一行:
tb.removeNode(true)
2、动态增加行,除了CreateElement方法,还可以这样比较短小:
<table id=tb1></table>
<SCRIPT>
function addTable(){
 var row1 = tb1.insertRow();
 var cell1=row1.insertCell();
 var cell2=row1.insertCell();
 cell1.innerText="灰豆宝宝";
 cell2.innerText="超级大笨狼"
}
</SCRIPT>
<INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">
3、在DIV中动态增加Table
<SCRIPT>
function addTable(){
 var tb1 = document.createElement("table";
 tb1.border="1px";
 var row1 = tb1.insertRow();
 var cell1=row1.insertCell();
 var cell2=row1.insertCell();
 mydiv.appendChild(tb1);
 cell1.innerText="wanghr100";
 cell2.innerText="panyuguang962"
}
</SCRIPT>
<BODY>
<div id=mydiv style="width:400;height:300;"></div>
<INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()">
4、在DIV中删除Table,简单只要Div.innerHTML=""就可以。

以上是部分实用相对短小的代码,当然有其他各种办法实现,不过一般都比上面的长,比如组合使用DIV对象的insertAdjacentHTML 方法等,在不同需要下使用不同方法,前提是研究好浏览器模型 的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身来说要求不高。

以下是以Document对象为例,相关方法有:

  • Method Description
  • attachEvent
  • createAttribute
  • createComment
  • createDocumentFragment
  • createElement
  • createEventObject
  • createStyleSheet
  • createTextNode
  • detachEvent
  • getElementById
  • getElementsByName
  • getElementsByTagName
  • mergeAttributes
  • recalc
  • write
  • writeln


以DIV对象为例相关方法有:

  • addBehavior
  • appendChild
  • applyElement
  • attachEvent
  • clearAttributes
  • cloneNode
  • contains
  • detachEvent
  • getAdjacentText
  • getAttribute
  • getAttributeNode
  • getElementsByTagName
  • hasChildNodes
  • insertAdjacentElement
  • insertAdjacentHTML
  • insertAdjacentText
  • insertBefore
  • mergeAttributes
  • normalize
  • removeAttribute
  • removeAttributeNode
  • removeBehavior
  • removeChild
  • removeExpression
  • removeNode
  • replaceAdjacentText
  • replaceChild
  • replaceNode
  • setActive
  • setAttribute
  • setAttributeNode
  • setExpression


其他,比如下拉列表对象,和拖拽操作等我有时间也整理比较一下,实现相同功能,相对比较短的精彩代码是值得收藏的。

  • removeNode(true) 非IE浏览器不支持的,应该用 obj.parentNode.removeChild(obj);
  • insertRow(x) insertCell(y) 这个参数是IE里是可以缺省,但是在非IE浏览器里不可缺省
  • 至于 insertAdjacentElement innerText 这些都是IE的特有方法,而非W3C标准,应该注意。
TAG: ajax 浏览器模型
kimi post in AJAX技术 at 2007-09-08 17:41:42.
永久地址:http://ijavascript.cn/ajax/ajax-jscode-and-browser-model-33.html
在百度中搜索《AJAX相关JS代码片段和部分浏览器模型》。

发表评论

发表评论

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

网友评论仅供网友表达个人看法,并不表明本网同意其观点或证实其描述。