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脚本语言的基本构成是由控制语句、函数、对象、方法、属性等,来实现编程的。
一、
程序控制流
在任何一种语言中,程序控制流是必须的,它能使得整个程序减小混乱,使之顺利按其一定的方式执行。下面是
JavaScript常用的程序控制流结构及语句:
1、if条件语句
基本
格式
if(表述式)
语句段1;
......
/***************************by
garcon1986********************************/
感谢CSDN的shan1119 帮我解决Javascript部分的错误。
<mce:script language="JavaScript"><!--
function toggle(id,id2,id3) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
......
事件源对象
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 窗体 ......
//校验是否全由数字组成
function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}
//校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
function isRegisterUserName(s)
{
v ......
JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来。
编写了一个JavaScript的类来实现读取一个XML文件中的数据,实现代码如下所示:
<mce:script type="text/javascript"><!--
/**
* @author Shirdrn
*/
function XMLDoc(){}; // 定义一个XM ......