易截截图软件、单文件、免安装、纯绿色、仅160KB

javascript 包裹节点

模仿jQuey,创建几个包裹节点的方法,发现jQuery的方法很低效啊,下一次他又可以说这几个方法可以提升了多少多少了。原理基本是这样,如果传入的是字符串,那么让它们变成一个元素节点,不过这元素节点也可以有许多层,在最内层把要包裹的元素放进。把字符串变成元素节点的方法有如下几个。1,createElement,IE可以连元素属性也一起创建,但只能创建一层。2,innerHTML,不过需要对原来的字符串进行处理,IE与FF都有许多意想不到的默认行为,可以为你多加一点东西或少加一点东西。3,createContextualFragment,由于Opera的行为有点怪异,需要选中修改元素的位置。经日本人的测试,它转换字符串成节点的效率比innerHTML高多了,也安全多了,真是强者愈强,弱者愈弱。如果是传入元素节点,需要克隆一下,要不都变成wrapAll。如果是函数,把当前元素传进去,利用它的某些属性创建一个包裹元素。
最初的实验品(这里的wrapOuter相当于jQuery的wrap):
var parseHTML = function(str) {
if(document.createRange){
var range = document.createRange()
range.setStartAfter(document.body)
return range.createContextualFragment(str)
}else{
return document.createElement(str)
}
}
var wrapOuter = function(target,html){
var wrap = parseHTML(html) ;
target.parentNode.insertBefore(wrap,target);
target.previousSibling.appendChild(target)
}

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<style type="text/css">
.wrapper {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
background-color:#dfe8f6;
border: 1px solid magenta;
}
.inner{
margin:1em;
height:20px;
background:#a9ea00
}
.border{
border:2px solid red;
}
</style>
<title>包裹节点 by 司徒正美</title>
<script type="text/javascript">
window.onload = func


相关文档:

JavaScript基本数据结构 [2]

JavaScript提供脚本语言的编程与C++非常相似,它只是去掉了C语言中有关指针等容易产生的错
误,并提供了功能强大的类库。对于已经具备C++或C语言的人来说,学习JavaScript脚本语言是一件非常轻松愉快的事。
一、JavaScript代码的加入
  JavaScript的脚本包括在HTML中,它成为HTML文档的一部分。与HTML标识相结合, ......

基于对象的JavaScript语言 [4]

JavaScript语言是基于对象的(Object-Based),而不是面向对象的(object-
oriented)。之所以说它是一门基于对象的语言,主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复
杂对象统一起来,从而形成一个非常强大的对象系统。
    虽然JavaScript语言是一门基于对象 ......

用JavaScript实现更复杂的交互 [9]

一、什么是框架
  框架Frames最主要功用是"分割"视窗,使每个"小视窗"能
显示不同的HTM
L文件,不同框架之间可以互动(interact),这就是说不同框架之间可以交换讯息与资料。例如:假设您开了两个frames,第一个frame可显
示书的目录,第二个frame则显示章节的具体内容。
  框架可以将屏幕分割 ......

Javascript常用屏蔽

1 >屏蔽功能类
1.1 屏蔽键盘所有键
<script. language="javascript">
<!--
function document.onkeydown(){
  event.keyCode = 0;
  event.returnvalue = false;
}
-->
</script>
1.2 屏蔽鼠标右键
在body标签里加上oncontextmenu=self.event.returnvalue=false
或者
<scri ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号