易截截图软件、单文件、免安装、纯绿色、仅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程序构成 [3]

JavaScript脚本语言的基本构成是由控制语句、函数、对象、方法、属性等,来实现编程的。
一、
程序控制流
  在任何一种语言中,程序控制流是必须的,它能使得整个程序减小混乱,使之顺利按其一定的方式执行。下面是
JavaScript常用的程序控制流结构及语句:
1、if条件语句
 基本
格式
if(表述式)
语句段1;
......

Javascript 代码着色工具 SyntaxHighlighter

1.首先下载SyntaxHighlighter.
2.解压到SyntaxHighlighter目录中.
 
3.建立HTML文件:
 
<pre name="code" class="Ruby">
 ...Ruby代码...
</pre>
 
可以应用在pre和textarea两种HTML标签内,name为code,class为要着色的语言,现在支持C, C#, CSS, Delphi, Java, JScript, Php, Pyth ......

javascript笔记

定义变量
var test=10;
使用对象属性
可以使用 . 操作符获得属性,也可以使用数组下标获得,比如
for(var prop in document)
document.write(document[prop]+"<br>");
With 声明对象,之后再用到对象就不必声明了
with(document){
write("Hello World<br>标题: ");
write(title);
}
常用对象 ......

JavaScript 技巧

事件源对象
event.srcElement.tagName
event.srcElement.type 捕获释放
event.srcElement.setCapture();  
event.srcElement.releaseCapture();  事件按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey 事件返回值
event.returnValue 鼠标位置
event.x
event.y 窗体 ......

JavaScript 图片无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charse ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号