JavaScript&DHtml使用心得

最新推荐文章于 2023-03-22 11:00:06 发布

sfeig

最新推荐文章于 2023-03-22 11:00:06 发布

阅读量1.6k

点赞数

分类专栏： Dhtml/JavaScript 文章标签： javascript function input button wrapper div

本文链接：https://blog.csdn.net/sfeig/article/details/2241640

版权

Dhtml/JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. Dhtml标签元素自定义属性扩展

如：<span id=holder personId=” 323” >some innerText</span>，通过文档对象模型得到该对象如：mySpan,则可以通过mySpan.personId来访问personId的值；

2. 函数传入值字符串含有’或者”的解决办法

我们生成页面的html代码时，常常将某一元素的事件函数参数直接帮定到该函数中，但是如果帮定值中含有’或者”，页面将会报错，因为这样会导致函数签名不匹配，如会生成如下错误的代码：<img src=”1.gif” οnclick=alert(“dfdf”fdfd”)>等；解决办法是将要传入的值放入一个标签元素内，最好的标签选择是<span>，如弹出窗口的返回值之包含有上述字符的解决办法如下：<span id=”windowReturnValueHolder”>some return value including ‘ or “</span><script>window.returnValue=document.getElementById(“windowReturnValueHolder”).innerText;</script>；就可以了。

3. 访问浏览器中页面中的各对象元素

访问一些网站时，一些重要网页的制作者常常采用一些办法是的浏览者不能查看它的源代码，利用这种技巧我们可以巧妙破解，对于已经生成的页面，我们可以通过浏览器的地址栏来访问该页面在内存中的各元素的值，例如如下代码我们可以得到网页在内存中的源码：在地址栏输入：javascript:document.documentElement.innerHTML，这时候就会新出一个页面，就可以通过“查看源”来破解网页了，利用这种方法我们也可以查看某元素的属性如：javascript:alert(document.getElementById(“showButton”).type)；

4. 文档对象元素在javascript中的访问

我们可以直接在javascript中利用文档对象元素的id直接访问该对象，也就是说，元素的id就是javascript中的一个变量，我们可以编写如下这样的代码：

<span id="holder">one two three</span><script>alert(holder.innerText);</script>

<input id="one" value="imput value"><script>alert(one.value)</script>

<img id="two" alt="a image"><script>alert(two.alt);</script>

该代码能够正确地执行，但如果这段代码放在了form表单中，其中的input和img将不可使用，提示说one,two未定义，这时候我们只能通过document.getElementById或者form的对象来获取对应的对象。如下：

<html>

<body>

<span id="holder">one two three</span><script>alert(holder.innerText);</script>

<input id="one" value="imput value"><script>alert(myForm.one.value)</script>

<img id="two" alt="a image"><script>alert(document.forms[0].two.alt);</script>

</form>

</body>

</html>

5. 常用的函数方法

parseInt：从一个字符串中获取一个整数，如：parseInt(object.style.textIndex)，textIndex实际上是一个包含有单位的字符串，利用该函数可以直接提取出数值的大小。但是对于parseInt(“234ab 23” )返回的是234，不包括后面的23；parseFloat可以获取一个小数。

6. 如何取消事件冒泡

Dhtml的模型默认的是允许事件冒泡，也就是说，如果我们分别为控件及其子控件提供了同一事件的处理程序，当触发子控件的该事件时，接着就会触发父控件同一事件的处理程序，但是在一些情况下，我们可能禁止事件冒泡，这是我们可以在子控件的事件处理程序中加入如下代码:

event.cancelBubble = true;

7. event.returnValue

设置事件的返回值，来决定该事件后的其他事件是否进行处理，如：

test</a></div>

如文本输入框中单击某一案件之后，将会依次触发onkeydown、onkeypress、onkeyup事件，并调用它们相应的处理程序，但是如果我们设定了onkeydown的event.returnValue = false，那么将不会触发onkeypress事件，但onkeyup事件依然会触发，即使你设置了event.cancelBubble = true，也是同样，后者的设置只能屏蔽对当前元素父元素以上元素的onkeydown的事件冒泡。

8. 同一文档中不同<script>块中的全局变量分析

在同一个Html文档中，往往包含有多个<script>块，包括通过<script src=”..”></script>引用的外部javascript脚本，在其中任何一个块中声明的全局变量可以被另一个块中的函数访问，如果在不同的块中声明了相同的全局变量，那么最后一个<script>块中的变量将会覆盖前面的变量。

这种情况在Htc文档中具有同样行为。

//var newVar = "sfeig";

function show()

{

alert(newVar);

}

</script>

//var newVar = "geshaofei";

</script>

js.js

var newVar = "outer js";

9. 关于Vs.net自动添加的代码带来的问题

在vs.net中添加新的页面的时候，会自动在html代码中添加下面的语句：

<!DOCTYPE html PUBLIC "-//W 3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但是由于这个语句的存在，肯能会导致一些css样式表无法正常显示，所以在添加新的页面时候，要注意删除此句。

10. 页面解析时祖父对象元素的锁定

这是一个困扰我已经很久的错误了，一直找不出其原因所在，无法从上图得到更为具体的错误提示，今天终于发现了原因所在：

原因是当浏览器在解析页面的时候，将会锁定当前执行脚本所在<script>元素块的祖父元素对象（包括祖父对象及其更上层的元素对象），所以如果在当前执行的脚本中存在有修改祖父对象结构的方法（如：insertAdjacentElement（”beforeEnd”,newObj），appendChild(newObj)，innerText=”newText”，innerHTML=”newHTML”等）时，由于其祖父对象是锁定的状态，当前的脚本无法执行，就会抛出如上图所示的错误。

这种错误仅仅发生在浏览器解析页面的时候，也就是页面刚刚被加载，正在被生成可视界面的时候发生。如果这些代码放在了函数中，并且在页面解析时没有调用这个函数就不会发生上面的错误。

具体的尝试代码如下：（其中包括了外部引用的js脚本和页面脚本块的测试，两者具有相同的行为。）

<head>

<title>js refrence study</title>

</head>

<body>

</form>

<span>sdfds</span>

<div>

<span onclick="addNew()">this is the after.

function addNew()

{

var wrapper = document.createElement('div');

// document.body.insertAdjacentElement('afterbegin',wrapper);

// document.body.insertAdjacentElement('beforeEnd',wrapper);

// document.body.appendChild(wrapper);

// container.appendChild(wrapper);

// container.innerHTML = "New";

container.innerText = "New";

// alert(container.id);

}

</script>

</span>

</div>

some</div>

</body>

</html>

js.js代码如下：

function abc()

{

var wrapper = document.createElement('div');

// document.body.insertAdjacentElement('afterbegin',wrapper);

// document.body.insertAdjacentElement('beforeEnd',wrapper);

// document.body.appendChild(wrapper);

container.appendChild(wrapper);

}

var a = new abc();

11. 如何设定Ellipsis&Title

Ellipsis&Title：指的是容器内超长内容省略号显示，而用该容器的title提示实际内容;

11.1. 只需要设定第一行的某列的宽度，就能正确地显示。

如果你设定了以下各行或者每一行的宽度，则每一行都不能正确地显示，并且显示各行的时候将会按照最窄宽度进行显示。代码如下：

<table cellspacing="0" rules="all" border="1" id="Table1" style="width: 366px; border-collapse: collapse;

table-layout: fixed;">

<tr>

<td>

name</td>

address</td>

</tr>

<tr>

<td>

sfeig</td>

<td title="北京市建国门南大街乙dfdfdfffdf" nowrap="true" style="overflow: hidden; text-overflow: ellipsis;

word-break: break-all; width: 50px">

北京市建国门南大街乙dfdfdfffdf</td>

</tr>

<tr>

<td>

sfeig</td>

<td title="北京市建国门南大街乙yyyyy" nowrap="true" style="overflow: hidden; text-overflow: ellipsis;

word-break: break-all;">

北京市建国门南大街乙yyyyy</td>

</tr>

<tr>

<td>

sfeig</td>

<td title="北京市建国门南大街乙号" nowrap="true" style="overflow: hidden; text-overflow: ellipsis;

word-break: break-all; width: 30px">

北京市建国门南大街乙号</td>

</tr>

</table>

11.2. 如果设定了其他行某列的具体宽度，则该单元格不能正确的显示。

上面的代码中，如果去掉其他各行第二列的宽度设定，而保留第一行的，能够正确地显示，但是如果设定了其他行第二列等宽度后，将会不能正确地显示。

11.3. 如果设定多行某一列的不同宽度，将会按照最小宽度来显示。

所以如果需要正确的显示，仅需要设定第一行的某列的宽度就行了。如果用的是GridView控件，只需要设定的<headStyle width=”..”/>就行了，而不用管它的<itemStyle width=”?”/>了。设定的宽度可以为百分值，也可以是具体的度量单位值。

12. document.createElement的传入参数

在页面中动态创建元素时，常常使用这种方式，传入的参数应该为所要创建元素的标签，其中可以传入”<”,”>”，也可以不传入，但如果想使刚创建的的元素具有某些属性，则应该传入标准的html标签结构，如下：

function create()

{

// var newone = document.createElement("span");

// newone.innerText = "new span without < and >";

// document.body.appendChild(newone);

// var newone = document.createElement("<span>");

// newone.innerText = "new span with < and >";

// document.body.appendChild(newone);

var newone = document.createElement("<span title='this is a new span' οnclick=alert(this.innerText)>");

newone.innerText = "new span with onclick attribute handler";

document.body.appendChild(newone);

}

</script>

13. 快速删除select元素选项的方法

在实现ajax项目的时候，客户端可能又重构某一个select元素的所有选项，所有要清除原来所有的选项，有两种方法可以采用：

13.1. 利用options.remove方法

示例代码如下：

while(field.options.length > 0)

field.options.remove(0);

13.2. 重设options.length的值

如下：

field.options.length = 0;

很明显，第二种方法是更为便捷的方式，但第一种方法能够删除任何一个元素，第二种方法只是重新设定了options的长度，如果设定的长度小于当前的长度，将会自动删除该长度以后的各项；相反，如果设定的长度大于当前的长度，将会自动补充对应数量的value和text都为空的option元素。

测试代码如下：

<option>three</option>

</select>

<input type="button" value="clear1" onclick='while(test.options.length>0) test.options.remove(0);' />

14. expression、setExpression等的使用

利用expression和setExpression我们可以实现对象各种属性值的实时绑定，能够产生非常好的用户体验。

14.1. expression

主要用在样式表的设定中，如：

<img id='loadingProcessBarImg' src="../htc/images/jingdu.gif" style='position: absolute;

top: expression(document.body.clientHeight/2-30); left: expression(document.body.clientWidth/2-161);'>

在其中的表达式中，采用的是脚本语句或者函数调用，如上面的也可以写成下面：

<img id='loadingProcessBarImg' src="progress.gif" style='position: absolute; top: expression(getTop());

left: expression(document.body.clientWidth/2-161);'>

function getTop()

{

return document.body.clientHeight/2-30;

}

</script>

14.2. setExpression

这种方式主要是通过对象来直接调用，被绑定的可以是对象的属性，也可以是对象样式的某个值，表达式为字符串不带有引号或者分号的脚本声明，字符串的内容也可以包含到页面对象的引用，也可以是函数名称。如：

var src = loadingProcessBarImg.src;

loadingProcessBarImg.style.setExpression("top","getTop()");

loadingProcessBarImg.style.setExpression("left","document.body.clientWidth/2-161");

loadingProcessBarImg.setExpression("title","getTitle('"+src+"')");

function getTop()

{

return document.body.clientHeight/2-30;

}

function getTitle(mySrc)

{

return "curSeconds:/t"+new Date().getSeconds()+"/ncurSrc:/t"+mySrc;

}

</script>

注意上面的绑定中，关于函数参数的传递，如果参数是字符串，需要构造成字符串，如果是对象，仅需要传递对象的引用。

14.3. getExpression和removeExpression

利用他们可以分别获取和移除对象某个属性的表达式，如：

<head>

<title>expression study</title>

</head>

<body>

<span>The sum of the values in these two textboxes determines the width</span>

<br />

<input type="text" id="oBox2" value="40" /><span>of the blue text box below.</span>

<br />

<br />

<br />

<hr />

<span>Right-click anywhere on this page to view the source code.</span>

var s;

var b;

oBox3.style.setExpression("width","eval(oBox1.value) + eval(oBox2.value)","jscript");

function getexp()

{

s=oBox3.style.getExpression("width");

alert("Expression for the width of the blue box is /n/n" + s +"/n/nThe width property has a value of " + oBox3.style.width);

}

function remexp()

{

b = oBox3.style.removeExpression("width");

alert("Expression removed successfully? /n" + b);

}

</script>

</body>

</html>

15. onkeydown、onkeyup、onkeypress对按键代码解析差异

我们常利用上述的三个按键事件处理程序来对用户按键输入进行处理，在事件处理程序中，我们常利用event.keyCode来判断用户单击的是哪一个按键，但是在onkeypress和onkeyup、onkeydown的事件处理程序中，对于同一个按键的event.keyCode所获取的值并不相同，感到奇怪的是两者对键盘顶部的数字按键所获取的keyCode竟然相同，同时也包括一些特殊的键，如空格键、Esc等。

function downHandler()

{

info.innerHTML += "down" + event.keyCode + "<br>";

}

function upHandler()

{

info.innerHTML += "up" + event.keyCode + "<br><br>";

}

function pressHandler()

{

info.innerHTML += "press" + event.keyCode + "<br>";

}

</script>

对于文本框的按键，我们竟然捕获不到一些特殊按键的onkeypress事件，如del、backspace、insert、home、end、page up、page down等。

16. scrollIntoView和doScroll使用

如果容器不能全部显示内容，如果设置了样式的overflow为auto，容器将会显示出滚动条，利用这两个函数，我们可以操纵滚动条和使容器内的某一个元素滚动到可视范围内。示例代码如下：

16.1. obj.scrollIntoView(bAlignToTop)；

bAlignToTop指的是滚动到顶还是滚动到底，true表示滚动到顶。

<tbody>

<td>

Id</td>

<td>

Name</td>

<td>

Code</td>

</tr>

<td>

1</td>

<td>

现金</td>

<td>

101</td>

</tr>

<td>

2</td>

<td>

工行存款</td>

<td>

10201</td>

</tr>

<td>

3</td>

<td>

其他货币资金</td>

<td>

109</td>

</tr>

<td>

4</td>

<td>

银行存款</td>

<td>

102</td>

</tr>

<td>

5</td>

<td>

短期投资</td>

<td>

111</td>

</tr>

<td>

6</td>

<td>

应收票据</td>

<td>

112</td>

</tr>

</tbody>

</table>

<span id="mySpan">this is mySpan at the bottom</span>

</div>

function show()

{

dataTable.rows[3].scrollIntoView(true);

}

function show2()

{

mySpan.scrollIntoView(true);

}

</script>

16.2. obj.doScroll( [sScrollAction])

obj指的是容器对象引用，sScrollAction指的是滚动的选项，如up向上，left向左等。

示例代码如下：

var iTimer;

function timeIt()

{

iTimer = setInterval("scrollIt()", 1000);

}

function scrollIt()

{

oScrollMe.doScroll("down");

}

timeIt();

</script>

17. onkeydown、onkeyup、onkeypress以及onmousedown、onmouseup、onclick触发顺序及其他

先来说按键事件，当我们在一个元素上，如文本输入框中单击某一案件之后，将会依次触发onkeydown、onkeypress、onkeyup事件，并调用它们相应的处理程序，但是如果我们设定了onkeydown的event.returnValue = false，那么将不会触发onkeypress事件，但onkeyup事件依然会触发，即使你设置了event.cancelBubble = true，也是同样，后者的设置只能屏蔽对当前元素父元素以上元素的onkeydown的事件冒泡。

当我们用鼠标单击了一个页面的元素之后，将会依次触发onmousedown、onmouseup、onclick事件，注意是最后才触发onclick事件，并且如果我们设定了onmousedown的event.returnValue = false，也不会取消onclick事件的触发，这与按键事件的触发是有些不同的。

对于这两种事件的处理程序中，我们常会用到event的一些属性值，其中常用的有：

event.returnValue，如果设置成false，当前事件将不会返回值，对于键盘的输入，这时不能够将键盘值输入到文本框中；

event.cancelBubble，这一个用来设定对于当前的事件是否要进行事件的冒泡，如果设定为true，这时如果你用单击了某个按钮，虽然能够触发这个按钮的click事件处理程，但不能触发该元素所有父级别元素的click事件了。

试验代码如下：

function kd()

{

window.status += 'onkeydown ';

// event.cancelBubble = true;

// event.returnValue = false;

}

function ku()

{

window.status += 'onkeyup ';

}

function kp()

{

window.status += 'onkeypress ';

}

function bkd()

{

window.status += "onbodykeydown ";

}

function bkp()

{

window.status += "onbodykeypress ";

}

function md()

{

window.status += "onmousedown ";

// event.cancelBubble = true;

// event.returnValue = false;

}

function mu()

{

window.status += "onmouseup ";

}

function mc()

{

window.status += "onclick ";

}

function bmd()

{

window.status += "onbodymousedown ";

}

</script>

</body>

18. 删除文本输入框的自动完成功能

通常情况下，文本输入框默认提供上次录入历史信息的提示，当我们通过双击空白文本框时，IE就会给出给控件以往的历史信息提示，但在一些情况下，我们可能像关闭这种功能，例如我们自定义的一些自动提示的控件。这是可以采用如下方式关闭当前文本框或者整个录入表单中所有表单控件的历史信息提示：

<form>

请双击文本框

</form>

<form>

请双击文本框

</form>

请双击文本框

</form>

19. 关于表单的提交

提交表单的方式有两种：一种是点击类型为<input type=submit>或者<input type=image>的按钮时，或者是显示调用form对象的submit()方法，但是这两者是有区别的，前者会触发表单对象的onsubmit事件，但后者并不会，所以如果页面中的指定了表单的onsubmit事件处理程序，如果你采用了第二种方式来提交，为了程序能够正确地执行，你需要显式的调用表单对象的fireEvent方法，来触发onsubmit事件，然后再执行submit方法。

20. 关于换行、空格、等Html转义字符

在title提示或者textarea中，会出现一些要求：

换行： 
 其中10为换行的ASCII码

回车：  其中13位回车的ASCII码

空格：  

>： >

<： <

但是在Js脚本中为了达到类似的效果可以用:

换行： /n

回车： /r

Tab键： /t

21. offsetHeight和clientHeight的一些区别

利用这两个属性都可以获取到对象的实际高度，前者包括滚动条和边框的宽度，而后者只是其实际的可使用的区域，如果将对象的display设为none，两者的值都为0，但是如果对象是一个表格，如果在对象隐藏的时候，删除了表格的一些行，这两者的区别就出来了：前者反映的是实际的高度，而后者给出的还是删除之前的旧值，也许算是IE的一个bug吧。

22. 表格td的width属性分析

先看代码：

<tr>

this is a test.

</td>

</tr>

</table>

在这段代码中，我们设定了td的宽度为20个像素点，背景色为红色，在实际执行的时候会换行，但是红色的背景的宽度却是100px，也就是就说表格的宽度为20px，表示其中的内容会被限制在这个宽度内，超出长度将会换行，所以在上面的代码中虽然我们设定了其中的对齐方式为“right”，但实际上确实左对齐，就是由于这个较小的宽度造成的。

23. 链接页面在当前的窗口的Iframe打开设置

其中链接的target为iframe的name，而不是他的id;

24. 关于textarea的大小自适应

可以通过样式表来实现，如：

<textarea style=”width:100%;height:100%”>ge
shaofei</textarea>

25. 关于页面快捷键的使用

25.1. 功能键的使用

对于常见的F1----F12，IE赋予其中大部分各种各样的默认功能，如果按照常规的思路拦截这些事件，你会发现即使取消了事件冒泡和不让该事件返回值，大部分的功能键还是不能被屏蔽，对于这种情况，我们可以利用keyCode的可写属性来更改事件的keyCode，这样就可以解决上面的问题了，如，对于页面的onkeyDown事件，我们屏蔽了F1---F8除F5以外的功能键：

if(event.keyCode == 112 || event.keyCode == 113 || event.keyCode == 114 || event.keyCode == 115 || event.keyCode == 117 || event.keyCode == 118)

{

event.keyCode = 0;

event.returnValue = false;

event.cancelBubble = true;

//做你想做的事情

}

但是对于F1键有点特殊，同时还需要添加如下的代码：

function window.onhelp(){return false;}

25.2. 复合键的使用

我们常常利用shift，Ctrl，Alt结合其他的键构成复合键，来执行一些功能。这时我们需要按照如下的方式使用：

document.onkeydown = keydownHandler;

function keydownHandler()

{

if(event.ctrlKey && event.keyCode ==78) //Ctrl + N

{

return false;

}

if(event.altKey && event.keyCode == 115) //Alt + F4

{

var closing = confirm("close window?");

if(!closing) window.showModelessDialog("about:blank","","top:-10;left:-10;dialogWidth:1px;dialogheight:1px");

}

if(event.keyCode == 122) //F11

{

event.keyCode=0;

event.returnValue=false;

}

if(event.keyCode == 112) //F1 弹出自定义的帮助页面

{

window.open("demo.htm");

}

window.onhelp = function(){return false;};//F1帮助键

</script>

其中比较特使的事Alt+F4，需要弹出一个模态的窗口才行。

26. window和body的onload事件分析

26.1. 在body标签内指定onload的事件处理程序

如<body οnlοad=”alert()”>

26.2. 在页面的程序体中通过body的onload属性来指定

document.body.onload = show;

这种方式不能够在head标签内的script元素中指定，因为这时候还没有创建document.body对象。所以这种方式只能在body元素中指定，然而这种方式会覆盖第一种指定的onload事件处理程序。

26.3. 通过script脚本块来设定

show2();

</script>

这种方式可以放在head和body中，并且具有最高的执行权，如果定义了上面的两种onload事件处理程序，这种方式会覆盖他们。这种方式看起来是针对window定义的，但是它所影响的结果同上述两个。

上述的三种方式中，只能执行一个，优先顺序是：

script脚本块〉body的onload属性〉body标签内定义onload事件处理程序

26.4. 通过window.attachEvent附加onload事件处理程序

利用这种方式可以将多个onload的事件处理程序的执行，不会出现上述的情况，但是它的执行顺序是在最后，也就是在执行完上述事件处理程序之后，才会一次执行利用这种方式定义的onload事件处理程序。

注意：通过document.body.attachEvent(“onload”,loadHandler)并不能够将事件的处理程序附加成功。

示例代码如下：

<html>

<head>

function show()

{

alert("show");

}

function show2()

{

alert("show2");

}

function showInfo(info)

{

alert(info);

}

window.attachEvent("onload",show);

window.attachEvent("onload",show2);

</script>

alert("script onload");

</script>

</head>

document.body.onload = show;

//window.attachEvent("onload",function(){showInfo('info');});

//window.attachEvent("onload",show2);

document.body.attachEvent("onload",function(){alert("body attachEvent");});//不会执行

</script>

</body>

</html>

27. object.all分析

27.1. 返回当前对象的所有对象数组

该数组包含当前对象的所有子对象，包括深层的对象；可以用索引来访问每一个对象，如：

<div>

</div>

function show(obj)

{

alert(obj.all.length);

for(var i=0;i<obj.all.length;i++)

alert(obj.all[i].outerHTML);

}

</script>

也可以用obj.all(i)来访问每一个对象；

27.2. obj.all(vIndex)

利用这种方式我们可以访问当前对象的所有子元素，vIndex是他们在对象数组中的顺序，第一个元素的vIndex为0；当然也可以采用数组的索引访问方式，即obj.all[vIndex]来访问每一个对象。

27.3. obj.all(nameOrId,iSubIndex)

单独利用obj.all(nameOrId)，我们可以获取当前对象所有Id或者Name为指定值的对象数组，我们可以按照常规的对象数组的访问方式来访问每一个对象，如：

<div>

</div>

function show(obj)

{

var ttArr = obj.all('tt');

alert(ttArr(0).outerHTML);

alert(ttArr[1].outerHTML);

}

</script>

利用obj.all(nameOrId,iSubIndex)我们可以方便的取得当前对象所有Id或者Name为指定值的第iSubIndex个对象。如：

<div>

</div>

function show(obj)

{

alert(obj.all('tt',0).outerHTML);

alert(obj.all('tt',1).outerHTML);

}

</script>

27.4. obj.all.item和obj.all.namedItem

obj.all.item的使用类似于obj.all的方式；

obj.all.namedItem(nameOrId)则返回Id或者name为指定值的对象，如果多于一个，则返回一个数组，其作用类似于上面的obj.all和obj.all.item。示例代码如下：

<div>

</div>

function show(obj)

{

alert(obj.all.item('tt',0).outerHTML);

alert(obj.all.item('tt',1).outerHTML);

alert(obj.all.namedItem('tt')[0].outerHTML);

alert(obj.all.namedItem('tt')[1].outerHTML);

}

</script>

27.5. obj.all.tags

利用这种方式我们可以获取当前对象所有标签为指定字符串的所有对象集合，如：

<div>

</div>

function show(obj)

{

alert(obj.all.tags("input")[0].outerHTML);

alert(obj.all.tags("input")[1].outerHTML);

}

</script>

28. selection分析

利用document.selection我们可以在当前选中的区域中创建一个新的textRange对象，从而可以进行更为高级的操作。例如获取当前文本框中鼠标的位置：

function getCursorPos()

{

allRange = element.createTextRange();

leftRange = ownerDocument.selection.createRange();

leftRange.setEndPoint("StartToStart",allRange);

rightRange = ownerDocument.selection.createRange();

rightRange.setEndPoint("StartToEnd",allRange);

var cursorPos = leftRange.text.length;

return cursorPos;

}

更为详细的示例参见numberTextbox2.htc控件。

29. expando

利用该属性可以控制是否可以对当前元素进行任意属性的扩展，如：

<html>

<head>

//Set the expando property to false.

//document.expando = false;

document.expando = true;

</script>

</head>

<body>

<div>

<span id="oSpan" unselectable="on" onclick="alert(this.unselectable)">This text should

be selectable.</span>

</div>

</body>

</html>

30. checkbox的indeterminate属性

利用该属性我们可以设定checkbox为半选中的状态。

31. Js对象事件的实现

利用类似于.net中的委托机制，我们可以实现js对象的事件：

function button()

{

this.onClick = null;

this.click = function()

{

if(this.onClick)

this.onClick();

}

</script>

function run()

{

var btn = new button();

btn.onClick = clickHandler;

btn.click();

var btn2 = new button();

btn2.click();

}

function clickHandler()

{

alert("new button has clicked");

}

</script>

其中的onClick类似一个方法变量成员，当执行对象的某个方法时，会在对象的该方法执行体中检查当前的onClick成员是否为空，如果不为空，就会触发执行我们在创建对象时定义的onClick成员所指定的方法体。

32. 匿名方法与指向方法的变量

匿名的方法，其实就是一个方法执行入口的地址，当然我们也可以将该地址赋值给一个变量，或者将该地址指定给控件对象满足参数签名的事件上，但是在定义该方法体和调用的地方，要保证参数签名的正确性。

function call()

{

calla("x","Y");

calla2("x","Y");

}

var calla = show;

var calla2 = function(x,y){alert(x+y);};

function show(x,y)

{

alert(x+y);

}

</script>

利用这种思路我们可以定义上述js对象的含参事件的定义：

function button()

{

this.onClick = null;

this.id = Math.random();

var version = "3.20.521";

this.click = function()

{

if(this.onClick)

this.onClick(this,version);

}

</script>

function run()

{

var btn = new button();

btn.onClick = clickHandler;

btn.click();

var btn2 = new button();

btn2.click();

}

function clickHandler(obj,e)

{

alert("id:/t" + obj.id + "/n" + "version:" + e);

}

</script>

33. JavsScript中反射的实现

利用eval，可以实现Javascript中反射，将执行的函数传入eval的参数即可，如eval(“alert(‘hello js’)”)，将会弹出alert确认框，当然我们也可以将页面中的函数及其参数组成一个字符串传入eval，将会执行该函数体，如果我们仅传入该函数的名称，能够得到该函数的执行体字符串。实例代码如下：

function add(x,y)

{

alert(x+y);

}

</script>

因此利用上面的思路，我们就可以实现.net中反射的执行，我们可以将要执行的函数体及其参数组成一个字符串，然后调用eval，即可以实现指定函数的动态执行。

34. 标签事件处理的变量域

看如下的代码：

id1=34;

function show()

{

alert(id1);

}

</script>

如果标签中需要传递参数给调用函数，如果传递标签元素的某个属性，可以忽略this.，而直接将属性名称传递过去。

也就是说运行时会按照“由近到远”的顺序来查考所要访问的变量，如果当前调用对象本身包含有这个属性，则直接从其取值，如果没有，则会到执行环境的全局变量中去寻找。

如果某个方法、属性、集合等，直接引用，而没有指定他的对象体，jshost将会默认该标签元素的某个方法、属性、集合，如果这个元素不存在这些方法、属性、集合，将会直接调用document对象对应的方法、属性、集合，如果还不存在，则将会调用window对象的方法、属性、集合，如果还不存在将会给出错误的提示。但对于事件却不会相同，事件会冒泡，就是说当你触发了子控件元素的时间，不但会触发该控件的事件处理程序，同时还会触发其父控件的该事件的处理程序。

sfeig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript&DHtml使用心得

1. Dhtml标签元素自定义属性扩展如：323”>some innerText，通过文档对象模型得到该对象如：mySpan,则可以通过mySpan.personId来访问personId的值；2. 函数传入值字符串含有’或者”的解决办法我们生成页面的html代码时，常常将某一元素的事件函数参数直接帮定到该函数中，但是如果帮定值中含有’
复制链接

扫一扫