程序员人生 网站导航

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

栏目:jscript时间:2013-11-13 17:40:00

在.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标准,应该注意。
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐