封装简单的equery
/**
* 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的更多相关文章
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 2016/11/17 周四 <javascript的封装简单示例>
这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...
- PHP基础封装简单的MysqliHelper类
MysqliHelper.class.php 1: <?php 2: 3: /** 4: * MysqliHelper 5: * [面向对象的MysqliHelper的简单封装] 6: */ ...
- iOS菜鸟之FMDB的二次封装简单易用
闲来无事写点东西,希望大家多多指正! 大家先去git下载FMDB,然后将其中source文件夹中的fmdb文件夹拖入自己的项目中.最后就可以引用下面的代码对fmdb进行一次简单的封装. 这样可以更直观 ...
- C++基础——类封装简单示例
一.前言 在IC前端设计/验证领域,只会HDL远远不够.目前大多数项目使用已开发好的系统架构和IP Core,因此设计部分的工作量慢慢向系统集成和验证方向转移.而在集成和验证过程中,往往以各种脚本和面 ...
- react封装简单的浏览器顶部加载进度条全局组件
在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...
- 封装简单的API——微信小程序
前几天自己琢磨微信小程序的基本开发,里边用到的技术包括WebAPI,也就是方法的封装. 当然也可以用ASP.NET MVC WCF来写接口.更简单应该就是 WinForm 简单易部署. 这里用的是 2 ...
- vue3 封装简单的 tabs 切换组件
背景:公司项目要求全部换成 vue3 ,而且也没有应用像 element-ui 一类的UI组件,用到的公共组件都是根据项目需求封装的,下面是使用vue3实现简单的tabs组件,我只是把代码分享出来,实 ...
- ajax的三次封装简单概况
原生ajax: readyState 准备状态 status 页面状态 ...
随机推荐
- Windows Intellij环境下Gradle的 “Could not determine Java version from ‘9.0.1’”的解决方式
当我导入Gradle项目初试Java spring的时候,遇到下面报错: Gradle complete project refresh failed Error:Could not determin ...
- ASP.NET Core Web API下事件驱动型架构的实现(一):一个简单的实现
很长一段时间以来,我都在思考如何在ASP.NET Core的框架下,实现一套完整的事件驱动型架构.这个问题看上去有点大,其实主要目标是为了实现一个基于ASP.NET Core的微服务,它能够非常简单地 ...
- Tomcat下载,新建自己的项目,模拟server
一.tomcat下载 下载地址http://tomcat.apache.org/ 打开网页能够看到例如以下内容 在网页左边有Download以下就是能够下载的版本号.如6.0,7.0,8.0: 选择一 ...
- C#中StreamReader读取中文时出现乱码问题总结
之前有一篇文章" C#读取及写入配置文件教程"(http://blog.csdn.net/lisenyang/article/details/47291083)当中有一个问题就是在 ...
- jmeter入门系列文章二 版本号介绍
转载时请标注源自:http://blog.csdn.net/musen518 jmeter版本号公布频率一般为1年,每年会有一个版本号升级 截止2015年底,最新版本号为2.13,最新最全的更新信息一 ...
- 学习vi和vim编辑器(5):越过基础的藩篱
本章将对之前学习的编辑命令如" c "." d "." y "等命令进行总结,并学习一些新的知识:其它进入vi的方法,利用缓冲区来存储拖曳或 ...
- 腾讯Web工程师的前端书单
2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍. JavaScript 入门 <JavaScript权威指 ...
- dubbo服务治理中间件,zookeeper注册中心
对传统项目架构进行拆分: 集群概念: 面向服务分布式架构: 服务层提供被注册的对象需要实现序列化接口Serializable: 配置表现层和服务层: 依赖包: 服务层: <!-- 定义dubbo ...
- 在Windows上运行Spark程序
一.下载Saprk程序 https://d3kbcqa49mib13.cloudfront.net/spark-2.1.1-bin-hadoop2.7.tgz 解压到d:\spark-2.1.1-bi ...
- Python 项目实践二(生成数据)第一篇
上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关,而数据挖掘指的是使用代码来探索数据集的 ...