很簡單的,沒多少代碼,應該還有很多BUG,先做個標記在這里。
我的目標就是
Make you easy use。
主要就是模仿Jquery的使用,肯定沒有jquery強大,但是肯定也要簡單許多。
1. 能使用jVaga.extend進行對象擴展(prototype.js)。
2. 能進行簡單的瀏覽器類型判斷,jVaga.B,如果是IE則會返回IE版本號,如果是其它瀏覽器只會是布爾值。
3. 能使用jVaga()或者$,進行元素選擇,你也可以使用jVaga.util.setNamespace自定義選擇器標志符。
選擇器返回的是包裝后的JS對象,你可以直接調用它提供的各種便利的方法。
選擇器用法:
1 <!DOCTYPE html>
2 <html lang="cn">
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript" src="jvaga-0.3.0.js"></script>
6 <script type="text/javascript">
7 /* window.onload = function(){
8 var dd = document.getElementById("track");
9 alert(dd.getAttribute);
10 }
11 */
12 $(function(){
13
14 // test1 : 命名空間設置
15 // jVaga.util.setNamespace("$_$");
16 // alert($_$("#track"));
17 // test : id
18 // alert($("#track"));
19 /*$(".logo").each(function(e){
20 alert(e.hasClass("logo1"));
21 });
22 */
23 // class 選擇,class檢測, find二次選擇,屬性值獲取,tagName選擇
24 //alert($(".logo")[0].hasClass("logo"));
25 //alert($(".logo")[0].find("img")[0].attr('src'));
26 //alert($("a")[0].text());
27 // 鏈式使用
28 //alert($(".logo")[0].find("img")[0].attr('src','xxxx.gif').attr('src'));
29 // $("#ddd") $("[name='sds']:first > ") $("input")
30 // 瀏覽器測試
31 //alert($.B.IE);
32 //alert($.B.OP);
33 //alert($.B.WK);
34 //alert($.B.GK);
35 //alert($.B.MS);
36
37 });
38 </script>
39 </head>
40 <body>
41
42 <div class="header">
43 <div class="logo"><img src="images/logo.png" /></div>
44 <div id="track">
45 <a href="#">首頁</a>
46 <span class="arrow">>></span>
47 繪圖優化
48 </div>
49 </div>
50 <div id="main">
51 <div class="blocks">
52
53 <div id="leaveBlank">
54 想象力的留白
55 </div>
56
57 <div class="block">
58 <div id="userInfo">
59 <h3>個人信息</h3>
60 <img src="images/userhead.jpg">
61 </div>
62 </div>
63 <div class="article">
64 <div class="title">
65 <div class="title_cont">
66 我的文章標題
67 </div>
68 <div class="tag">
69 標簽1 標簽2
70 </div>
71 </div>
72 </div>
115
116 </body>
117 </html>
4. jVaga.util下面有各種的工具函數,如:
toArray函數將參數轉換成數組;
addClass2TagNext給指定的標簽的元素的下一個元素節點運用class; loadScript函數動態加載JS包;getEvent函數,兼容瀏覽器的Event對象的獲取。
5. 給數組類型加入了each函數,能方便的遍歷每個元素;給String加入了trim函數。
6. 提供了便利的Ajax支持,(為提供效率,使用了HttpRequest對象連接池,不知道是不是好的實踐呢?)jVaga.Post對應post方式的AJax請求,jVaga.get就是get方式的了。
7. 。。。。
你可以自由的使用該工具,但是本人不保證其效率及功能的完整性,如果能有任何的反饋,我會很樂意的修改,如果你能將該工具用于任何的項目中,我也十分的榮幸,不過請保留本人的名字。--------------------------------------蛋疼的分割線---------------------------------
一不小心就0.3.1版本了,主要做了如下修改:
# 這個版本主要對于節點選擇器內部實現的改進
# 簡單來說,因為IE8+及Chrome、Safari、Firefox比較新的版本中
# 都實現了比較好的選擇器querySelector及querySelectorAll,這些選擇器
# 比我用Javascript實現的選擇器,效率不知高多少倍,所以我在內部需要
# 適配使用該接口實現。
+ 只是針對Css ClassName的選擇的時候,應用了querySelectorAll,其它的情況下
也是無法應用該接口而用法還是如上面,所示:
新版本的代碼在
這里下載