JS implementation like jquery basic function Simple selector/Event/attribute

Button style definition <style>.btn{display:inline-block;width:100px;height:20px;color: #fff; font-size:12px; Background-color: #0033dd; text-align:center;line-height:20px;text-decoration:none;border:5px #0000ff outset;}. btn-big-test{width:300px;height:85px;line-height:85px;font-size:25px;} </style>

Based on the basic JS, a simple base selector with element selection supported by id/name/class/tag/object is implemented, and the mechanism of event delegation and removal is realized, and the property operation function and continuous invocation mode are realized. Exception capture

Claim button <a href= "javascript:;" class= "Btn-big-test btn" title= ' You ordered a huge button! ' > Huge test button </a><br/><br/><a href= "javascript:;" id= "Removetest" class= "BTN Grey" > Remove test Event </a>&nbsp;<a href= "javascript:;" id= "Addtest" class= "BTN" > Open test Event </a>

/* Declare Function */$_fn=function (selectname) {this.selectname=selectname;this.obj=this.selectelement (); return this;} Prototype method $_fn.prototype={//Basic selector   No subclass   Continuous pattern selector ' selectelement ': function () {if (typeof  this.selectname ==  ' object ') {return this.selectname;} Else if (This.selectName.indexOf ("#")!=-1) {Return document.getelementbyid (' # ') ,‘‘));} Else if (This.selectName.indexOf (".")! =-1) {return document.getelementsbyclassname ("this.selectName.replace ('. ', ')");} Else if (This.selectName.indexOf ("@")!=-1) {Return document.getelementsbyname (This.selectName.replace ( ‘@‘,‘‘));} Else{return document.getelementsbytagname (This.selectname);}}, ' On ': function (event,callback) {try{$_ eventstack[this.obj]=callback;if  (/.* (firefox| safari| Chrome). */.exec (Window.navigator.userAgent))  {if (this.obj.length>0) {for  (var i=0;i< this.obj.length;i++)  {this.obj[i].addeventlistener ("click", Callback,false);};} Else{this.obj.addEventListener ("click", Callback,false);}} Else{if (this.obj.length>0) {for  (var i=0;i<this.obj.length;i++)  {if (This.obj[i]) this.obj[i ].attachevent= ("onclick", callback);}} Else{this.obj.attachevent= ("onclick", callback);}}} catch (E) {console.error (e);} Return this;},detach:function (Event) {try{if  (/.* (firefox| safari| Chrome). */.exec (Window.navigator.userAgent))  {if (this.obj.length>0) {for  (var i=0;i< this.obj.length;i++)  {this.obj[i].removeeventlistener (event,$_eventstack[this.obj],false);};} Else{this.obj.removeeventlistener (Event,$_eventstack[this.obj],false);}} Else{if (this.obj.length>0) {for  (var i=0;i<this.obj.length;i++)  {if (This.obj[i]) this.obj[i ].detachevent ("on" +event,$_eventstack[this.obj]);}} Else{this.obj.detachevent ("on" +event,$_eventstack[this.obj]);}}} catch (E) {console.error (e);} Return this;},attr:function (Propname,value) {if (!value) {return this.obj.getattribute (propName);} Else{this.obj.setattribute (Value); return this;}}}  window.$_ = function (selectname) {RETURN&NBSP;NEW&NBSP;$_FN (selectname);};/ /Get Smart Object  window.$_eventstack={};//Log event delegate relationship

///////////////////////////////

Set Button Events

$_ (". Btn-big-test"). On (' click ', Function (e) {alert ($_ (this). attr ("title"));

$_ ("#removetest"). On ("click", Function () {$_ (". Btn-big-test"). Detach (' click '); alert ("event removed");});

$_ ("#addtest"). On ("click", Function () {//) destroys events in successive invocation mode and delegates new events to avoid multiple calls to $_ (". Btn-big-test"). Detach (' click '). On (' Click ', function (e) {alert (this.classname);}); Alert ("Event has been added"); });

JS implementation like jquery basic function Simple selector/Event/attribute