[js高手之路] 我的開源javascript框架gdom - 選擇器用法

gdom框架是我開發的一款dom和字元串處理框架，目前版本是1.0.0. 使用方法跟jquery是差不多的, 會用jquery就會用gdom，目前 1.0.0版本的選擇器完全支持CSS3選擇器.沒有做IE的低版本相容。

gdom下載地址：https://github.com/ghostwu/gdom

gdom選擇器有兩種寫法： G( 選擇器 ) 和 $( 選擇器 )

gdom的載入： G( function(){} )    $( function() {} );

公用css文件: common.css

 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 ul,li {
 6     list-style-type:none;
 7 }
 8 div,p {
 9     padding: 10px;
10     margin: 10px;
11     border: 1px solid #ccc;
12 }
13 a {
14     text-decoration: none;
15 }

載入庫文件與css文件（ 請根據實際情況調整路徑載入）:

1     <script src="../lib/gdom1.0.0.js"></script>
2     <link rel="stylesheet" href="../css/common.css">

下麵列舉部分常見的用法:

1、基本選擇器( id, class, 元素 )

html代碼：

1     <div id="box">test is a test</div>    
2     <div class="box">this is a test</div>
3     <div class="box">this is a test</div>
4     <div>this is a test</div>

javascript代碼:

1 <script>
2         G(function(){
3             // $("#box").css( "border", "1px solid #09f" );
4             // $(".box").css( "border", "1px solid #09f" );
5             G("div").css( "border", "1px solid #09f" );
6         });
7 </script>

2、後代，子代選擇器

html代碼

1 <div id="box">
2         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
3         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
4         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
5     </div>
6     <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
7     <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>

javascript代碼

1 <script>
2         G(function(){
3             G("body p").css( "border", "2px solid #09f" );
4             // G("body > p").css( "border", "2px solid #09f" );
5         });
6     </script>

3、屬性選擇器

html代碼

<div id="box">gdom是一個dom處理和字元串處理的框架，作者:ghostwu</div>
    <div id="box2" class="desc">gdom是一個dom處理和字元串處理的框架，作者:ghostwu</div>
    <div id="box2" class="desc" data-target="abc">gdom是一個dom處理和字元串處理的框架，作者:ghostwu</div>
    <div id="box2" class="desc1 desc2 desc3" data-target="abc">gdom是一個dom處理和字元串處理的框架，作者:ghostwu</div>

javascript代碼

 1 <script>
 2         G(function(){
 3             // G( "[id]" ).css( "border", "1px solid #09f" );
 4             // G( "[id][class]" ).css( "border", "1px solid #09f" );
 5             // G( "[data-target]" ).css( "border", "1px solid #09f" );
 6             // G( "[class*=desc]" ).css( "border", "1px solid #09f" );
 7             // G( "[class^=desc]" ).css( "border", "1px solid #09f" );
 8             G( "[class$=desc]" ).css( "border", "1px solid #09f" );
 9         });
10     </script>

4、過濾選擇器

javascript代碼

1 <script>
2         G(function(){
3             // G( "div:nth-child(1)").css( "border", "1px solid #09f" );
4             // G( "div:nth-of-type(1)").css( "border", "1px solid #09f" );
5             G( "div p:nth-of-type(1)" ).css( "border", "1px solid #09f" );
6         });
7     </script>

html代碼

 1 <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
 2     <div>
 3         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
 4         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
 5     </div>    
 6     <div>
 7         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
 8         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
 9     </div>    
10     <div>
11         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
12         <p>gdom是一個dom處理和字元串處理的框架，作者:ghostwu</p>
13     </div>