仿JQ插件

最新推荐文章于 2022-04-26 20:01:39 发布

weixin_34232363

最新推荐文章于 2022-04-26 20:01:39 发布

阅读量87

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/love-Z/p/4535277.html

版权

<!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 
  > 
 
   js原生可以用 
  http://www.oschina.net/question/54100_25614