/**
* 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. Centos下抓包

    刚才遇到一个问题,微信配置时token总是失败. 于是抓一下服务器的包.看看是否是数据传输出了问题. 先安装工具 [Shell] 纯文本查看 复制代码 ? 1 yum install -y wires ...

  2. tensorflow入门教程

    人工智能感觉很神秘,作为google公司力推的人工智能框架tensorflow也受到很多人的关注.本文用一个最简单的例子,带领大家看看tensorflow是如何工作的.如果你对人工智能的原理不了解可以 ...

  3. jQuery noConflict() 方法----与其他javaScript插件冲突时

    1,全名代替----jQuery: $.noConflict(); jQuery(document).ready(function(){ jQuery("button").clic ...

  4. Java数据结构和算法(八)——递归

    记得小时候经常讲的一个故事:从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和尚讲了一个故事,故事内容是“从前有座山,山上有座庙,庙里有一个老和尚和一个小和尚,一天,老和尚给小和 ...

  5. Codeforces 821E Okabe and El Psy Kongroo

    题意:我们现在位于(0,0)处,目标是走到(K,0)处.每一次我们都可以从(x,y)走到(x+1,y-1)或者(x+1,y)或者(x+1,y+1)三个位子之一.现在一共有N段线段,每条线段都是平行于X ...

  6. java学习笔记之日期日历类

    java学习笔记之日期日历 Date日期类概述: 表示特定的瞬间,精确到毫秒 Date类的构造方法: 1.空参数构造方法 Date date = new Date(); 获取到当前操作系统中的时间和日 ...

  7. 为PHP摇旗呐喊!

    如今市场上的电子商务软件基本上可归结为两大阵营.即PHP阵营和Java阵营.但对接触电子商务不久的用户来说.看到的往往仅仅是它们的表相,仅仅是明显的价格差异.却非常难看出它们之间的实际差异.事实上,P ...

  8. Activiti源代码分析

    ExecutionEntity内部含有parent,是一个运行树或运行路径.应该是一个流程实例的运行过程,一个实例相应一个ExecutionEntity,通过getActivity得到的是当前正在运行 ...

  9. IIS 服务或万维网公布服务,或者依赖这 服务可能在启动期间错误发生或者已禁用

    作者:jiankunking 出处:http://blog.csdn.net/jiankunking 详细错误信息例如以下: 解决方式: 在服务中禁用下面3个服务自己主动启动: Net.Msmq Li ...

  10. 【日常学习】【线性DP】codevs1044 拦截导弹题解

    题目描写叙述 Description 某国为了防御敌国的导弹突击,发展出一种导弹拦截系统.可是这样的导弹拦截系统有一个缺陷:尽管它的第一发炮弹可以到达随意的高度,可是以后每一发炮弹都不能高于前一发的高 ...