仿JQ插件
<!DOCTYPE html>
<html><head> <title></title> <style type="text/css"> * { padding:0; margin:0;} li { list-style:none; width:200px; height:200px; float:left; text-align:center; line-height:200px; color:White; font-size:80px; } </style> <script language="javascript" type="text/javascript"> /*这里是库*/ (function (window, undefined) { window.$ = function (id) { return new Init(id); } function Init(id) { if (typeof id == "string") { this[0] = document.getElementById(id); } else if (typeof id == "object") { this[0] = id; } } Init.prototype.on = function (attr, fn, select) { this[0]["on" + attr] = function (ev) { var oEvent = ev || event; var _this = oEvent.srcElement || oEvent.target; if (_this.tagName.toUpperCase() === select.toUpperCase()) { if (fn) fn.call(_this, oEvent); } } return this; //不断返回new出来的那个对象 实现Jquery的连缀 $("").on(function(){}).on(funciton(){})...... } Init.prototype.css = function (json) { for (var i in json) { this[0].style[i] = json[i]; } return this; //不断返回new出来的那个对象 实现Jquery的连缀 $("").on(function(){}).on(funciton(){})...... } })(window); /*这里是库*/ window.onload = function () { $("ul1").on("click", function () { $(this).css({ background: "green", height: "400px" }).css({ fontSize: "100px" }).on("mouseover", function () { $(this).css({ height: "200px" }); }, "li"); }, "li"); } </script></head><body><ul id="ul1"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></body></html>
