总结AJAX相关JS代码片段和浏览器模型。

原创 2006年06月20日 14:27:00


在.net开发中,充分利用免费控件是好事情,但是如果不能修改控件达到自己的需求,就要动用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  

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

总结AJAX相关JS代码片段和浏览器模型

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

总结几个实用的js/jq代码片段

前言:众所周知,前端页面的动画效果的实现一般都是由js/jq实现的(现在css3也可以实现很多很酷炫的页面特效,但是由于浏览器的兼容性问题,运用还不算太广泛,这里先不说css3对于实现页面特效的便利。...

Ajax发送json格式数据到Asp.net MVC服务端的一些代码片段

最近一直做些asp.net mvc的页面,每次前端与后端交互,都要baidu查下代码怎么写,也不去思考为什么这么写,导致每每写这代码,都需要下search下代码。 正好现在有点空闲时间,我就把我写的代...

view 相关内容代码片段笔记

在activity中获取fragment中的控件  getFragmentManager().findFragmentById(id).getView().findViewById(id) ...
  • yudajun
  • yudajun
  • 2017年03月11日 11:58
  • 183

分享一些前端开发中最常用的JS代码片段

HTML5 DOM 选择器// querySelector() 返回匹配到的第一个元素 var item = document.querySelector('.item'); console.log(...

JS/jQuery常用代码片段

取属性值: $(“#id”).attr(“attr”); 设置属性值: $(“#id”).attr(“attr”, “value”); 删除属性值: $(“#id”).removeAttr(“at...

汇总前端最最常用的JS代码片段-你值得收藏

原始出处,可拷贝:http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html 摘自:http://www.l...

前端开发中最常用的JS代码片段

前端开发中最常用的JS代码片段

分享一些前端开发中最常用的JS代码片段~ 干货~

HTML5 DOM 选择器 // querySelector() 返回匹配到的第一个元素 var item = document.querySelector('.item'); console.lo...

js代码片段【数制转换】【判断回文】

数制之间的相互转换(适用于以2~9为基数的情况) 可以利用栈将一个数字从一种数制转换成另一种转换算法如下: 1.最高位为n%b,将此位压入栈; 2.使用n/b代替n; 3.重复步骤1和2,直到...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:总结AJAX相关JS代码片段和浏览器模型。
举报原因:
原因补充:

(最多只允许输入30个字)