项目作者: qqee

项目描述 :
兼容IE6+,支持JSON、选择器、AJAX、COOKIE的jquery精简版替代品
高级语言: JavaScript
项目地址: git://github.com/qqee/jlite.git
创建时间: 2016-04-25T09:06:49Z
项目社区:https://github.com/qqee/jlite

开源协议:MIT License

下载


JLite

http://www.qq.ee

jquery太大了怎么替代?你可能并不需要jquery


如果你使用jquery只用到很少几个功能如选择器、取值赋值、遍历等,可以试试[JLite],兼容jquery语法却只有4KB(gzip压缩后1.5KB),你不需要引用额外js文件,复制原生代码到自己的js文件中即可替换jquery。

JLite是原生javascript编写的超薄封装
支持 onclick、window.onscroll 事件队列
兼容 IE6+

CDN with http&https

//dn-cdncdn.qbox.me/jlite.min.last.js
//dn-cdncdn.qbox.me/jlite.min.0.0.6.js

  1. //onload
  2. $( function(){alert("ok")} );
  3. //选择器,返回 Element 或 Element数组
  4. //仅支持无空格字符串,不支持多条件/子孙选择如: $("DIV #MYID") 或 $("#MYID.CLAST")
  5. $("#MYID") //返回单个对象
  6. $(".MYCLASS") //返回数组
  7. $("div") //返回数组
  8. //可选参数2指定父亲元素,用于选择子孙元素。留空时父亲为 document.body
  9. $( ".item", $("#IDx") )
  10. //例:所有 .onetab 元素被单击时,弹出触发元素中第3个 .lit 的内容
  11. $(".onetab").click(function(){
  12. alert( $(".lit",this)[2].html() );
  13. });
  14. //选择器的方法、Element对象的方法
  15. var a=$("#MYID");alert(a.html());
  16. $(".CLAS").html("V") //v参数忽略时为取值,否则为赋值
  17. $(".CLAS").text("V") //v参数忽略时为取值,否则为赋值
  18. $(".CLAS").attr("DATA","v") //v参数忽略时为取值,否则为赋值
  19. $(".CLAS").val("v") //v参数忽略时为取value值,否则为赋值
  20. $(".CLAS").next() //取弟元素
  21. $(".CLAS").prev() //取兄元素
  22. $(".CLAS").parent() //取父元素
  23. $(".CLAS").remove()
  24. $(".CLAS").empty()
  25. $(".CLAS").before('<a href="#">QQEE</a>') //头部添加兄弟对象
  26. $(".CLAS").after('<a href="#">QQEE</a>') //尾部添加兄弟对象
  27. $(".CLAS").append('<a href="#">QQEE</a>') //尾部添加子对象
  28. $(".CLAS").prepend('<a href="#">QQEE</a>') //头部添加子对象
  29. $(".CLAS").addClass("ABC")
  30. $(".CLAS").removeClass("ABC")
  31. $(".CLAS").toggleClass("ABC")
  32. $(".CLAS").each( function(k,v){...} ) //选择器返回数组时内置遍历方法
  33. //css
  34. $("#MYID").css("text-align") //取值
  35. $(".CLAS").css("text-align","center") //赋值
  36. $(".CLAS").css( {"text-align":"center", "font-size":"14px", "background-color":"#d0d0d0"} ) //连续赋值
  37. //事件队列支持,可以为单个/多个元素绑定函数,多次绑定会在触发时按绑定顺序执行
  38. //window.onscroll
  39. //参数2可忽略,当参数2非空时清空队列中其他函数
  40. $.onscroll(function(){
  41. console.log(document.body.scrollTop); //滚动时显示顶部坐标
  42. },1); //参数2为1,将清除旧绑定,此时队列中只有当前函数
  43. $.onscroll(function(){
  44. console.log(new Date().getTime()); //滚动时显示时间
  45. }); //参数2被忽略,此时队列中有2个函数,窗口滚动时将依次执行上述2个函数
  46. //onclick
  47. //参数2可忽略,当参数2非空时清空队列中其他函数
  48. $(".MYCLASS").click(function(){ //为全部 .MYCLASS 元素绑定 click 事件
  49. alert(this.html());
  50. },1); //参数2为1,将清除旧绑定,此时队列中只有当前函数
  51. $(".MYCLASS").click(function(){
  52. console.log(this.text());
  53. }); //参数2被忽略,此时队列中有2个函数,click触发时将依次执行上述2个函数
  54. //遍历
  55. //遍历函数返回1时停止遍历
  56. $.each($(".MYCLASS"),function(k,v){...}) //通过外部函数遍历
  57. //$.each可遍历数组和对象
  58. var a=[1,2,3];
  59. var a={a:1,b:2,c:3};
  60. $.each(a,function(k,v){
  61. alert(k+"===>"+v);
  62. return 1; //此处返回1时停止遍历
  63. });
  64. //返回数组或对象的长度,返回整数0~n
  65. $.len(a)
  66. //浏览器是否为ie,布尔值,非函数
  67. $.ie
  68. //网站是否采用https,布尔值,非函数
  69. $.https
  70. //返回10位长度时间戳(毫秒)
  71. $.ms()
  72. //返回13位长度时间戳(微秒)
  73. $.us()
  74. //返回时间字符如2015-01-10 01:24:55
  75. //a参为10位长度时间戳,忽略则取当前时间
  76. $.now(a)
  77. //判断字符是否为数字(整数或浮点数),返回布尔值
  78. $.isnumber(s)
  79. //json操作
  80. //a参为字符返回解析后的对象
  81. //a参为对象返回编码的json字符
  82. var a={9999:"中文.a?",x:10,y:15,z:{z1:1,z2:222},arr:[{"a":1,"b":2},{"c":3,"d":4}]};
  83. var b=$.json(a)
  84. alert(b)
  85. var a='{"9999":"\u6d93\ue15f\u6783\u002e\u005ca\u003f","x":10,"y":15,"z":{"z1":1,"z2":222},"arr":{"0":{"a":1,"b":2},"1":{"c":3,"d":4}}}';
  86. var b=$.json(a)
  87. alert(b.z.z2)
  88. //cookie操作
  89. //写入cookie,[键,值,参数(若忽略则过期时间为会话结束,path为/,secure)]
  90. //expires的单位是天
  91. $.cookie() ////取回全部cookie如[a=1;b=2;c=3]
  92. $.cookie("k") ////取回对应键的值,不存在时返回空字符""
  93. $.cookie("www.qq.ee",$.now()); //set cookie use default config:[7 days, /]
  94. $.cookie("www.qq.ee",$.now(),{"expires":300,"path":"/","secure":1}); //set cookies
  95. $.cookie("") //delete all cookie
  96. $.cookie("k","") //delete "k" cookie
  97. //ajax操作
  98. $.ajax({
  99. type:"GET",
  100. url:"/test.json",
  101. async:1,//异步,默认为1==true
  102. dataType:"json",//json或空
  103. timeout:5000,//毫秒
  104. headers:{//HTTP额外头部
  105. "Content-type":"application/x-www-form-urlencoded",
  106. A:"AAA",
  107. B:"BBB"
  108. },
  109. //data:"a=1&b=2",//仅POST时有效
  110. error:function(){
  111. alert("Error!");
  112. },
  113. success:function(s){
  114. alert("Ok:\n"+s);
  115. $.each(s,function(k,v){
  116. alert(k+"===>"+v);
  117. });
  118. }
  119. });
  120. //----------------------------------------------------------------
  121. //其他用法请直接使用原生javascript方法,举例如下:
  122. //原生取value
  123. $("#MYID").value.length
  124. //原生事件绑定:
  125. $("#MYID").onclick=function(){}
  126. obj.onfocus=function(){}
  127. obj.onchange=function(){}
  128. obj.onblur=function(){}
  129. window.onscroll=function(){}
  130. document.onkeydown=function(ev){
  131. var e=ev||window.event||arguments.callee.caller.arguments[0];
  132. console.log("["+e.keyCode+"]");
  133. };
  134. //原生修改css/style:
  135. $("#MYID").style.width="100px";
  136. obj.style.display="inline-block";
  137. obj.style.position='absolute';
  138. obj.style.opacity=1;
  139. //到顶部:
  140. document.body.scrollTop=0;
  141. //到网页底部:
  142. document.body.scrollTop=$("#bot").offsetTop;
  143. document.body.scrollTop=document.body.scrollHeight;
  144. //原生修改src属性:
  145. obj.src="/test.html?t="+$.ms();
  146. //原生插入对象/代码:
  147. var u=document.createElement("style");
  148. u.innerHTML="div{color:red}";
  149. document.head.appendChild(u);
  150. //修改网页标题:
  151. document.title="www.qq.ee";
  152. //timer
  153. setInterval(function(){...},1000);
  154. setTimeout(function(){...},1000);