/**
* 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. H5页面项目的思路整理

    这是H5项目完成后的一些整理,有些理解不能非常准确,希望大家能帮忙指出. 移动端的适配 一些名词解释 visual viewport 可视视图 layout viewport 布局视图 vm 可视视图 ...

  2. Scala入门系列(八):面向对象之trait

    基础知识 1 将trait作为接口使用 此时Trait就与Java中的接口非常类似,不过注意,在Scala中无论继承还是trait,统一都是extends关键字. Scala跟Java 8前一样不支持 ...

  3. AspNet Core 程序写入配置信息并再次读取配置信息

    1.首先创见Core控制台应用程序  并且引入  AspNetCore.All 首先我们写入配置信息:直接代码如下 //配置信息的根对象 public static IConfigurationRoo ...

  4. linux下分析Java程序内存汇总

    使用pmap查看进程内存 执行命令 使用pmap能够查看某一个进程(非java的也能够)的内存使用使用情况, 命令格式: pmap 进程id 演示样例说明 比如执行: pmap 12358 显示结果例 ...

  5. C#中StreamReader读取中文时出现乱码问题总结

    之前有一篇文章" C#读取及写入配置文件教程"(http://blog.csdn.net/lisenyang/article/details/47291083)当中有一个问题就是在 ...

  6. 利用 Docker 备份、迁移数据库

    原文地址:https://zeeko.1503.run/Article/17 最近在把腾讯云的国内主机迁移到香港主机,因为之前使用的 MySql 跟 MongoDb 都是基于 Docker 部署的,所 ...

  7. Office Add-in 设计规范与最佳实践

    作者:陈希章 发表于 2017年8月6日 引子 离上一篇Office Add-in的文章已经过去了一段时间,期间有去年Office 365 Asia Devday & Hackathon的二等 ...

  8. 关于MySql中使用IFNULL()函数失效的问题。

    今天在学习时,碰到一个问题:在联表查询取得结果后,如果取得的结果是空值,则给一个默认值,如果不是空值,则返回这个值. 下面我们来看看业务场景: 在menu表中: 存储的是前端页面的菜单配置,注意成员权 ...

  9. nginx+redis实现session的共享

    上一篇我们介绍了nginx实现的负载均衡和动静分离,可看这边. 我们在文章的末尾说到,负载均衡需要面临的一个问题是内存数据的同步.例如:我有A,B两台服务器做了负载均衡,当我在A服务器上执行了登录并且 ...

  10. 自学Zabbix3.5.7-监控项item-Applications

    Applications应用程序用于对逻辑组中的项目进行分组.例如我们要监控MySQL,我们可以将所有和MySQL相关的item放到这个应用程序中.例如MySQL的availability of My ...