js库开发--参数传递及方法修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="base.css"/>
<script src="sizzle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="button" id="btn" value="click" />
<div id="ids" >
<span>12</span>
<div class="a">11</div>
<div class="a">12</div>
<div class="a">13</div>
</div>
<div><p class="a">3</p></div>
<p>3</p>
<script>
var Base=function(args){
this.elements=[];
if(typeof args=="string")//string证明附带参数进来
{
for(var i=0;i<Sizzle(args).length;i++)
{
this.elements.push(Sizzle(args)[i]);
}
}
else if(typeof args=="object")
{
if(args!=undefined)
{
this.elements[0]=args;
}
}
}
var myquery=function(args){
return new Base(args);
}
// //id弃用，使用sizzle来获取
// Base.prototype.getid=function(args){
// var thisid=document.getElementById(args);
// return this.elements.push(thisid)
//// return this;
// };
//tag
// Base.prototype.gettags=function(args){
// var tag=document.getElementsByTagName(args);
// for(var i=0;i<tag.length;i++)
// {
// this.elements.push(tag[i])
// }
// return this;
// }
//css
Base.prototype.css=function(attr,value)
{
//console.log(arguments.length)
if(typeof arguments[0]=="object"&&arguments.length==1)//传递的对象
{
for(var i=0;i<this.elements.length;i++)
{
//alert(this.elements)
for(var key in arguments[0]){
this.elements[i].style[key]=arguments[0][key];
}
}
}
else
{
console.log("b")
for(var i=0;i<this.elements.length;i++)
{
if(arguments.length==1)
{
if(typeof window.getComputedStyle!=undefined)
{
//复合属性值无从获取在ie和火狐里面
return document.defaultView.getComputedStyle(this.elements[i],null)[attr];
}
else if(typeof this.elements[i].currentStyle!=undefined)
{
//console.log(this.elements[i].currentStyle[attr])
return this.elements[i].currentStyle[attr];
}
}
else
{
this.elements[i].style[attr]=value;
}
}
}
return this;
}
//html
Base.prototype.html=function(args){
console.log(this.elements.length)
for(var i=0;i<this.elements.length;i++)
{
if(arguments.length==0)
{
return this.elements[i].innerHTML;
}
else
{
this.elements[i].innerHTML=args;
}
}
return this;
}
//class
// Base.prototype.getclass=function(attr,area){
// //Sizzle(".a")[1]
// var param=null;
// if(arguments.length==2)
// {
// for(var i=0;i<Sizzle(area+" ."+attr).length;i++)
// {
// this.elements.push(Sizzle(area+" ."+attr)[i]);
// }
// }
// else
// {
// var classes=document.getElementsByTagName("*");
// for(var i=0;i<classes.length;i++)
// {
// if(classes[i].className==attr)
// {
// //console.log(classes[i])
// this.elements.push(classes[i]);
// }
// }
// }
// return this;
// }
//eq方法
Base.prototype.eq=function(num){
var tempelement=this.elements[num];
this.elements=[];
this.elements[0]=tempelement;
return this;
}
//addclass
Base.prototype.addclass=function(classname){
for(var i=0;i<this.elements.length;i++)
{
//去重
if(!this.elements[i].className.match(new RegExp('(\\s|^)'+classname+'($|\\s)')))
{
this.elements[i].className+=" "+classname
}
}
return this;
}
//removeclass
Base.prototype.removeclass=function(classname){
for(var i=0;i<this.elements.length;i++)
{
//去重
if(this.elements[i].className.match(new RegExp('(\\s|^)'+classname+'($|\\s)')));
{
this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)'+classname+'($|\\s)')," ");
}
}
return this;
}
// //addcss
// Base.prototype.addcss=function(num,selectortxt,csses,ind){
// var sheet=document.styleSheets[num];
// if(typeof sheet.insertRule!=undefined)
// {
// sheet.insertRule(selectortxt+"{"+csses+"}",ind)
// }
// else if(sheet.addRule!=undefined)
// {
// sheet.addRule(selectortxt,csses,ind)
// }
// return this;
// }
// //removecss
// Base.prototype.removecss=function(num,ind){
// var sheet=document.styleSheets[num];
// if(typeof sheet.deleteRule!=undefined)
// {
// sheet.deleteRule(ind)
// }
// else if(sheet.removeRule!=undefined)
// {
// sheet.removeRule(ind)
// }
// return this;
// }
//插件扩展
Base.prototype.extend=function(name,fn){
Base.prototype[name]=fn;
}
// myquery().extend('bbb',function(){
// alert("a")
// })
// myquery().bbb();
//现代事件绑定
Base.prototype.addevent=function(obj,type,fn){
if(typeof obj.addEventListener!='undefined')
{
obj.addEventListener(type,fn,false);
}
else
{
if(!obj.events)
{
obj.events={};
}
if(!obj.events[type])
{
obj.events[type]=[];
if(obj.events["on"+type])//如果没有ontype点击事件，那么我们把fn存放到第一个type的位置
{
obj.events[type][0]=fn;
}
}
else
{
if(Base.prototype.addevent.compare(obj.events[type],fn))
return false;
}
obj.events[type][Base.prototype.addevent.countnum++]=fn;
obj["on"+type]=Base.prototype.addevent.exec;
}
}
Base.prototype.addevent.countnum=1;//ie8一下事件计数器
Base.prototype.addevent.exec=function(e){
var e=event||window.event;
for(var i in this.events[e.type])
{
this.events[e.type][i].call(this,e);
}
}
Base.prototype.addevent.compare=function(type,fn){
for(var i in type)
{
if(type[i]==fn)
{
return true;
}
}
return false;
}
//现代事件删除
Base.prototype.removevent=function(obj,type,fn){
if(typeof obj.removeEventListener!='undefined')
{
obj.removeEventListener(type,fn,false);
}
else
{
for(var i in obj.events[type])
{
if(obj.events[type][i]==fn)
{
delete obj.events[type][i];
}
}
}
}
console.log(myquery("div p").eq(0).css({"color":"red","background":"red"}))
//var objs=document.getElementById("btn");
// myquery().addevent(objs,"click",fn1)
// myquery().addevent(objs,"click",fn1)
// myquery().addevent(objs,"click",fn1)
// myquery().removevent(objs,"click",fn1)
//
// function fn1(){
// alert("a1"+this.value)
// }
// function fn2(){
// alert("a2"+this.value)
// }
// function fn3(){
// alert("a3"+this.value)
// }
//console.log(Sizzle("#ids .a")[2].innerHTML)
</script>
</body>
</html>
js库开发--参数传递及方法修改的更多相关文章
- ArcServer JS API开发离线部署方法
1. 下载ArcGIS API for JavaScript 3.6 Library. (地址:http://support.esrichina.com.cn/uploadfile/Javascr ...
- js库开发
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- js库编写的环境和准备工作
在编写一个js库之前需要准备许多基础知识. 本人在编写之前主要参考了visjs和百度的echarts这两个库的部分内容,这之中提取出几个要点如下: 1.如何整理代码结构,使模块与模块分开又不至于出现调 ...
- 动态嵌套form，使用Stimulus Js库（前后端不分离）
我的git代码:https://github.com/chentianwei411/nested_form-Stimulus- Stimulus: https://www.cnblogs.co ...
- 解决同一页面jQuery多个版本或和其他js库冲突方法
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- ios实例开发精品文章推荐（8.12）11个处理触摸事件和多点触摸的JS库
11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. ...
- 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...
- 解决jQuery多个版本，与其他js库冲突方法
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...
- <WEB>平板_手机开发_13 个处理触摸事件和多点触摸的JS 库
触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的 Web 应用,我们需要借助浏览器的触摸事件来实线. 下图是各种触摸事件说明: 本文我们 ...
随机推荐
- C#使用seleium实现一个自动登录器
1.http://docs.seleniumhq.org/ 下载seleium包 2.新建一个C#项目,比如控制台,引用seleium包中的dll using System; using System ...
- 文摘：威胁建模(STRIDE方法)
文摘,原文地址:https://msdn.microsoft.com/zh-cn/magazine/cc163519.aspx 威胁建模的本质:尽管通常我们无法证明给定的设计是安全的,但我们可以从自己 ...
- 你所不了解的css选择器补充
div p和div>p的区别 1.div p选择 <div> 元素内部的所有 <p> 元素 2.div>p选择父元素为 <div> 元素的所有 < ...
- flex 调用WebService1(基于.net)
以.net平台下C#语言开发的WebService为web服务,使用flex actionscript语句访问webservice接口 Flex: Temp.mxml部分代码 //调用WebSer ...
- ios属性和成员变量写在.h文件和.m文件中 区别？
1 其实是一样的.在.m文件上只能.m文件内部的才能访问的这个变量,如果在.h文件中,其他的文件也可以访问到这个变量. 2 写.h文件里边可以和其他的类进行交互,写.m里边只是在本类中使用! 3 ...
- OpenCV——无法启动此程序，丢失**解决办法
OpenCV程序运行时,有时出现以下错误: 解决方法: 在opencv安装目录下找到这个链接库,将其复制到以下指定目录中 我的链接库目录为:E:\Program files\opencv\build\ ...
- php函数、类和对象以及类的封装、继承、类的静态方法、静态属性
1.函数 php内置函数可以直接使用,如果没有安装php扩展即可 自定义函数 //函数function 函数名 function dump($var = null){ //支出默认参数 ...
- haproxy之配置文件解析
功能--> 提供高可用/负载均衡/基于tcp和http应用的代理;支持虚拟主机,特别适用于负载特大的web站点. 配置文件解析--> #配置文件-->开启/proc/net/ipv4 ...
- Python读写Json文件
一个小例子,使用Json配置文件 # -*- coding: utf-8 -*- import json import time def store(data): with open('data.js ...
- FPGA系统中DRAM,SRAM,SDRAM,FLASH 区别（转）
原文:http://hi.baidu.com/abners/item/a9042ef35d3f005bc8f337f5 一般来说这几种存储器是一个nios系统都具有的,sram的好处是接口简单,速度快 ...