文章由网友【福建-前端-低调】分享
// 基础库封装
//解决多个对象
var $ = function(args) {
return new Base(args);
}
function Base(args) {
//创建一个素组，来保存获取的节点和节点数组
this.elements = [];
if (args != undefined) {
if (typeof args == 'string') {
var styargs = args.charAt(0);
switch (styargs) {
case "#":
this.getid(args.substring(1)) break;
case ".":
this.getClass(args.substring(1)) break;
default:
this.getTagName(args.substring(1))
}
} else if (typeof args == 'object') {
this.elements[0] = args;
}
}
}
//获取节点元素
Base.prototype.getTagName = function(tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i++) {
this.elements.push(tags[i]);
}
return this;
}
//获取ID
Base.prototype.getid = function(id) {
this.elements.push(document.getElementById(id)) return this;
}
//获取class类
Base.prototype.getClass = function(className) {
var all = document.getElementsByTagName("*");
for (var i = 0; i < all.length; i++) {
if (all[i].className == className) {
this.elements.push(all[i])
}
}
return this;
}
//获取某个节点
Base.prototype.eq = function(num) {
/*---得到你要获取的节点---*/
var element = this.elements[num]
//将存入素组里面的节点对象都清空
this.elements = [];
//将获取的节点对象赋值给对象数组属性在返回Base对象
this.elements[0] = element;
return this;
}
//设置CSS方法
Base.prototype.css = function(attr, value) {
for (var i = 0; i < this.elements.length; i++) {
if (arguments.length == 1) {
var sty = window.getComputedStyle ? window.getComputedStyle(this.elements[i], null) : null || this.elements[i].currentStyle
return sty[attr];
}
this.elements[i].style[attr] = value;
}
return this;
}
//设置html 获取思路：判断有没有参数没有则表示获取
Base.prototype.html = function(str) {
for (var i = 0; i < this.elements.length; i++) {
if (arguments.length == 0) {
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}
//设置onclick方法
Base.prototype.click = function(objevent) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].onclick = objevent;
}
return this;
}
Base.prototype.hide = function() {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].style.display = 'none';
}
return this;
}
//封装hover方法
Base.prototype.hover = function(over, out) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].onmouseover = over;
this.elements[i].onmouseout = out;
}
return this;
}
Base.prototype.find = function(str) {
var chdarr = [];
/*------思路首先遍历要找元素的父层-------*/
for (var i = 0; i < this.elements.length; i++) {
/*-----得到父层下要找的元素----*/
var tags = this.elements[i].getElementsByTagName(str);
/*------遍历查找到的所有的元素--------*/
for (var j = 0; j < tags.length; j++) {
chdarr.push(tags[j]);
}
}
/*--------将得到的元素重新赋值给最外层的元素---------*/
this.elements = chdarr
return this;
}
/*---获得自身元素之外的其他元素
思路：首先将不要放入的元素存在一个变量中
marr:创建一个筛选过后的数组；
---*/
Base.prototype.siblings = function() {
var m = this.elements[0];
var marr = [];
/*----------获得当前对象父节点的所有孩子---------*/
var chd = m.parentNode.children;
for (var i = 0; i < chd.length; i++) {
if (chd[i] != m) {
marr.push(chd[i])
}
}
this.elements = marr;
return this
}
页面调用如下：
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
$(".div1").click(function(){
$(this).css('color','red').siblings().css('color','yellow')
})
</script>
打包下载
如果您觉得本文的内容对您的学习有所帮助：
关键字：
模拟Jquery库 网友低调