(function(window) {
window._ = {
/********************获取节点***********************/
, e : function(exp) {
//去字符串前后空格
var reg = /^\s*|\s*$/g;
exp = exp.replace(reg , "");
//多个空格替换成一个空格
reg = /\s+/g;
exp = exp.replace(reg , " ");
//分割
var tabs = exp.split(" ");
//正整数
reg = /^[1-9]\d*$/;
//开始
var index = 1;
var result = this.re({tab : tabs[0]});
//遍历
for(;index < tabs.length ; index++) {
if(tabs[index] == "child") {
//所有子节点
result = result.children;
} else if(tabs[index] == "first") {
//第一个节点
result = result[0];
} else if(tabs[index] == "last") {
//最后一个节点
result = result[result.length - 1];
} else if(reg.test(tabs[index])) {
//第N个节点
result = result[parseInt(tabs[index]) - 1];
} else {
//获取新节点
result = this.re({tab : tabs[index] , ele : result});
}
}
//返回结果
return result;
} ,
re : function(config) {
//获取字符串第一个字符
var s = config.tab.substr(0 , 1);
//获取name
var name = config.tab.substr(1 , config.tab.length - 1);
//根据id获取节点
if(s == "#") {
return document.getElementById(name);
}
//根据class获取节点
if(s == ".") {
if(config.ele == undefined) {
return document.getElementsByClassName(name);
}
return config.ele.getElementsByClassName(name);
}
//根据标签名获取节点
if(config.ele == undefined) {
return document.getElementsByTagName(config.tab);
}
return config.ele.getElementsByTagName(config.tab);
}
/********************获取节点************************/
}
})(window);
//节点获取测试
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--登陆与注册-->
<section class="lr">
<!--头部-->
<div class="lr-header">
<i class="current">登陆</i>
<i>注册</i>
</div>
<!--内容-->
<div class="lr-content">
<!--登陆-->
<div id="login">
<!--取form中的值，根据元素类型取input元素-->
<form>
<div>
<span>账号</span>
<input type="text" name="username" placeholder="请输入您的登陆账号，账号为用户名、手机号或者邮箱" />
</div>
<div>
<span>密码</span>
<input type="password" name="password" placeholder="请输入您的登陆密码，密码区分大小写" />
</div>
<div>
<span>验证码</span>
<input type="text" name="verifycode" class="verifycode" placeholder="请输入验证码" />
<img src="images/verifycode.jpeg" />
</div>
<div class="remember">
<input type="checkbox" name="remember"/>
<span>记住密码</span>
</div>
</form>
<input type="button" value="登 陆" />
<div class="bottom">
<a href="javascript:;">找回密码</a>
<span>|</span>
<span>还没有注册账号？</span>
<a href="javascript:;" id="imm">立即注册</a>
</div>
</div>
<!--注册-->
<div id="register">
<form>
<div>
<div>
<span>账号</span>
<span class="tips">账号已存在，或输入有错误</span>
</div>
<input type="text" name="username" placeholder="作为登陆账号，可以是手机号码、邮箱或者用户名" />
</div>
<div>
<div>
<span>密码</span>
<span class="tips">密码输入有错误</span>
</div>
<input type="password" name="password" placeholder="字母、数字、符号均可做为密码，最短8位，最长30位，区分大小写" />
</div>
<div>
<div>
<span>再次输入密码</span>
<span class="tips">两次密码输入不一致</span>
</div>
<input type="password" placeholder="请再次输入密码，以确定登陆密码的准确性" />
</div>
<div>
<span>验证码</span>
<input type="text" name="verifycode" class="verifycode" placeholder="请输入验证码" />
<img src="images/verifycode.jpeg" />
</div>
</form>
<input type="button" value="注 册"/>
</div>
</div>
</section>
<script src="_.js"></script>
<script>
window.onload = function() {
//"div 2 div first form first input last"表示获取文档中第2个div中的第一个div中的第一个form中的最后一个input节点
//id获取同jQuery使用_.e("#id")，class获取_.e(".class")，标签获取_.e("tag")，因class与tag获取得到是节点数组，所以其后所跟随的数字表示取第几个节点，而其后跟随的不是数字与first、last那么将会得到上一个节点的后代节点，例如：_.e("form 1 input")将会得到文档中第一个form中的input节点数组，而_.e("form 1 input 2")将会得到文档中第一个form中的第二个input节点
console.log(_.e("div 2 div first form first input last"));
}
</script>
</body>
</html>
类似JQuery对元素节点获取的一些封装
最新推荐文章于 2020-12-24 11:39:16 发布
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
