[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

* {
    margin: 0;
    padding: 0;
}
ul,li {
    list-style-type:none;
}
div,p {
    padding: 10px;
    margin: 10px;
    border: 1px solid #ccc;
}
a {
    text-decoration: none;
}

加载库文件与css文件（ 请根据实际情况调整路径加载）:

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

下面列举部分常见的用法:

1、基本选择器( id, class, 元素 )

html代码：

    <div id="box">test is a test</div>    
    <div class="box">this is a test</div>
    <div class="box">this is a test</div>
    <div>this is a test</div>

javascript代码:

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

2、后代，子代选择器

html代码

<div id="box">
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
    </div>
    <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
    <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>

javascript代码

<script>
        G(function(){
            G("body p").css( "border", "2px solid #09f" );
            // G("body > p").css( "border", "2px solid #09f" );
        });
    </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代码

<script>
        G(function(){
            // G( "[id]" ).css( "border", "1px solid #09f" );
            // G( "[id][class]" ).css( "border", "1px solid #09f" );
            // G( "[data-target]" ).css( "border", "1px solid #09f" );
            // G( "[class*=desc]" ).css( "border", "1px solid #09f" );
            // G( "[class^=desc]" ).css( "border", "1px solid #09f" );
            G( "[class$=desc]" ).css( "border", "1px solid #09f" );
        });
    </script>

4、过滤选择器

javascript代码

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

html代码

<p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
    <div>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
    </div>    
    <div>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
    </div>    
    <div>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
        <p>gdom是一个dom处理和字符串处理的框架，作者:ghostwu</p>
    </div>