/**
* Created by wang on 2016/3/23.
*/ //绑定操作
function bindEvent(obj,events,fn){
if (obj.addEventListener){//主流浏览器
obj.addEventListener(events,fn,false)
}else {
obj.attachEvent('on'+events,fn);//针对ie
}
}
//获取class 封装个方法
function getByClass(oParent,sClass){
var arr = [];
var elems = oParent.getElementsByTagName('*');
for(var i=0;i<elems.length;i++){
if(elems[i].className==sClass){
arr.push( elems[i] );
}
}
return arr;
}
//转数组方法
function toArray(elems){
var arr=[];
for(var i=0;i<elems.length;i++){
arr.push(elems[i]);
}
return arr;
}
//获取样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//ie
}
else{
return getComputedStyle(obj,false)[attr];//标准
}
}
//创建构造函数
function equery(varg){
this.elements = []; //选择元素的一个集合
//判断传过来参数的类型
switch (typeof varg){
case 'function':
//window.onload=varg;
bindEvent(window,'load',varg);//选择绑定事件的形式,防止js中后者替换前者
break;//jq中的所有的事件操作都是绑定的形式(操作不会覆盖)
case 'string':
switch (varg.charAt(0)){
case '#'://id
this.elements.push(document.getElementById(varg.substring(1)));
break;
case '.'://calss
this.elements = getByClass(document,varg.substring(1));
break;
default://标签
this.elements = toArray(document.getElementsByTagName(varg));//类数组 要转成真正的数组
break;
}
break;
case 'object':
if(varg.constructor = Array){
this.elements=varg;
}else {
this.elements.push(varg);
}
break;
}
};
//对象的方法,写到构造函数的原型下面
//css方法
equery.prototype.css= function (attr,value) { if(arguments.length==2){//设置样式
for(var i=0;i<this.elements.length;i++){
this.elements[i].style[attr]=value;
}
}else if(arguments.length==1){//获取样式//只能获取到行间样式需要在封一个方法 getStyle
if(typeof attr =='object'){//json的形式 设置样式
for(var j in attr){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style[j] = attr[j];
}
}
}else {
return getStyle(this.elements[0],attr);
}
}
};
//html方法
equery.prototype.html= function (str) {
if(str){//设置
for(var i=0;i<this.elements.length;i++){
this.elements[i].innerHTML=str;
}
}else {//获取
return this.elements[0].innerHTML;
}
return this;
};
//click方法
equery.prototype.click = function(fn){
//for(var i=0;i<this.elements.length;i++){
// bindEvent(this.elements[i],'click',fn)
//}
this.on('click',fn);
return this;
}
//mouseover方法
equery.prototype.mouseover = function(fn){
//for(var i=0;i<this.elements.length;i++){
// bindEvent(this.elements[i],'mouseover',fn)
//}
this.on('mouseover',fn);
return this;
}
//on方法
equery.prototype.on = function(events,fn){
for(var i=0;i<this.elements.length;i++){
bindEvent(this.elements[i],events,fn)
}
return this;
}
//hide方法
equery.prototype.hide=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='none'
}
return this;
}
//show方法
equery.prototype.show=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='block'
}
return this;
}
//hover方法
equery.prototype.hover=function(fnOver,fnOut){
this.on('mouseover',fnOver);
this.on('mouseout',fnOut);
return this;
}
//attr方法 与样式方法差不多
equery.prototype.attr = function(attr,value){ //setAttribute
//getAttribute if(arguments.length == 2){ //设置
for(var i=0;i<this.elements.length;i++){
//this.elements[i][attr] = value;
this.elements[i].setAttribute(attr,value);
}
}
else if(arguments.length == 1){ //获取
return this.elements[0].getAttribute(attr);
}
return this;
};
//eq方法
equery.prototype.eq = function(num){
return $(this.elements[num]);
};
//index方法
equery.prototype.index = function () {
var elems = this.elements[0].parentNode.children;
for(var i=0;i<elems.length;i++){
if (elems[i]=this.elements[0]){
return i;
}
}
return this;
};
//find 方法
equery.prototype.find = function(sel){ var arr = []; if( sel.charAt(0) == '.' ){ //class for(var i=0;i<this.elements.length;i++){ arr = arr.concat(getByClass( this.elements[i] , sel.substring(1) ));
} }
else{ //tag
for(var i=0;i<this.elements.length;i++){ arr = arr.concat(toArray(this.elements[i].getElementsByTagName(sel)));
} } return $(arr); }; //创建对象
function $(varg){
return new equery(varg);
};

封装简单的equery的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. 2016/11/17 周四 <javascript的封装简单示例>

    这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...

  3. PHP基础封装简单的MysqliHelper类

    MysqliHelper.class.php 1: <?php 2:  3: /** 4: * MysqliHelper 5: * [面向对象的MysqliHelper的简单封装] 6: */ ...

  4. iOS菜鸟之FMDB的二次封装简单易用

    闲来无事写点东西,希望大家多多指正! 大家先去git下载FMDB,然后将其中source文件夹中的fmdb文件夹拖入自己的项目中.最后就可以引用下面的代码对fmdb进行一次简单的封装. 这样可以更直观 ...

  5. C++基础——类封装简单示例

    一.前言 在IC前端设计/验证领域,只会HDL远远不够.目前大多数项目使用已开发好的系统架构和IP Core,因此设计部分的工作量慢慢向系统集成和验证方向转移.而在集成和验证过程中,往往以各种脚本和面 ...

  6. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  7. 封装简单的API——微信小程序

    前几天自己琢磨微信小程序的基本开发,里边用到的技术包括WebAPI,也就是方法的封装. 当然也可以用ASP.NET MVC WCF来写接口.更简单应该就是 WinForm 简单易部署. 这里用的是 2 ...

  8. vue3 封装简单的 tabs 切换组件

    背景:公司项目要求全部换成 vue3 ,而且也没有应用像 element-ui 一类的UI组件,用到的公共组件都是根据项目需求封装的,下面是使用vue3实现简单的tabs组件,我只是把代码分享出来,实 ...

  9. ajax的三次封装简单概况

    原生ajax:                readyState         准备状态                status             页面状态               ...

随机推荐

  1. 关于C++编译链接和模板函数

    一,关于编译链接编译指的的把编译单元生成目标文件的过程链接是把目标文件链接到一起的过程编译单元:可以认为是一个.c或者.cpp文件.每个编译单元经过预处理会得到一个临时的编译单元.预处理会间接包含其他 ...

  2. OI大佬博客集

    郭家宝:byvoid  早年大牛,题解更新到2014年,其博客内容非常丰富,不止题解 hzwer:hzwer 从OI到ACM,一直在更新 陈立杰:WJMZBMR 无需解释,不过貌似只更到2015 顾森 ...

  3. BFS+数据处理 Under the Trees UVa

    题意:将多叉树转化为括号表示法,每个非叶结点的正下方都有一个'|'然后下方是一排'-'和字符,恰好覆盖所有子结点的正上方,单独的一行'#'为数据的结束标志 解题思路:用gets将字符数组输入,本题不用 ...

  4. Spring Cloud 自定义ConfigServer

    公司需要将系统配置信息中的敏感信息独立存放. 现有系统采用Spring Cloud Config提供配置信息,其中敏感信息主要是Db配置,分解本次需求: (1)数据库配置信息分离(主要是Db信息). ...

  5. 是否是有效的dom节点--轮子代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  6. 我这样减少了26.5M Java内存!

    WeTest 导读 历时五天的内存优化已经结束,这里总结一下这几天都做了什么,有哪些收获.优化了,或可以优化的地方都有哪些.(因为很多事还没做,有些结论需要一定样本量才能断定,所以叫一期)一期优化减少 ...

  7. SQL多表关联查询

        在创建关系型数据表时,根据数据库范式的要求,为了降低数据的冗余,提供数据维护的灵活性 将数据分成多个表进行存储,实际工作当中,需要多个表的信息,需要将多个表合并显示   --内连接 selec ...

  8. hdu1181 变形课(vector容器+dfs)

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) Total Submi ...

  9. Best time to buy and sell stocks IV

    题目 https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iv/ Say you have an array for which ...

  10. 看看android基础知识,谁帮我作答

    无论怎么着,了解一点android的基本知识还是有必要的,就当开阔一些自己的眼界吧. .. . android的四大功能组件是_activity_,_service_,_BroadcastReceiv ...