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>