/**
* 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. Windows Intellij环境下Gradle的 “Could not determine Java version from ‘9.0.1’”的解决方式

    当我导入Gradle项目初试Java spring的时候,遇到下面报错: Gradle complete project refresh failed Error:Could not determin ...

  2. HDU 1216 Assistance Required 埃拉托色尼色筛法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1216 思路:色筛法 代码(1): #include<iostream>//-------- ...

  3. php 可逆加密方法

    可以逆转的加密类,没有密钥很难破解 [PHP]代码 <? class encryptCalss { var $key=12; function encode($txt){ for($i=0;$i ...

  4. PHP 算法

    1.首先来画个菱形玩玩,很多人学C时在书上都画过,咱们用PHP画下,画了一半. 思路:多少行for一次,然后在里面空格和星号for一次. ? 1 2 3 4 5 6 <?php for($i=0 ...

  5. PHP开发b2c商城价格

    电商的快速发展不断地挤压传统企业的生存空间,渠道越来越窄,所以现在很多企业开始往线上发展,搭建自己的B2C商城,直接面向消费者进行销售.那开发b2c商城价格怎么样?很多企业都是比较关心到商城价格这个问 ...

  6. EntityFrameworkCore v1.1.1 问题汇总

    随着宇宙第一IDE的最新版本发布[2017/3/7],AspNetCore 和EntityFrameworkCore(团队)都发布了最新的代码. 不过在我看来,这些到还不是最重要的.最重要的是dotn ...

  7. 基于Accord.Audio和百度语言识别

    ---恢复内容开始--- 目标需求 使用录音形式,模拟微信语音聊天.按住录音,松开发送语音,并完成语音识别. ps:百度的语言识别有60秒长度限制,需要自己做好控制. 实现方案 采用C# winfor ...

  8. javaweb学习总结(七)——HttpServletResponse对象(一)(转)

    转载自 http://www.cnblogs.com/xdp-gacl/p/3789624.html Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对 ...

  9. 掌握sklearn系列——1 学会加载数据

    我们直接看代码: from sklearn import datasets #读取三组数据,前两个用于分类,第三个用于回归 iris = datasets.load_iris() digits = d ...

  10. UML总结复习指南

    用例图 1. 參与者(Actor) 表示与您的应用程序或系统进行交互的用户.组织或外部系统.用一个小人表示.   2. 用例(Use Case)   用例就是外部可见的系统功能,对系统提供的服务进行描 ...