[JS Master's Road] my open source JavaScript framework Gdom-Selector usage

The Gdom framework is a DOM and string processing framework I developed, and the current version is 1.0.0. Use the same method as jquery, and use jquery to Gdom, currently 1.0. The 0 version of the selector fully supports the CSS3 selector . Do not do the low version of IE compatible.

Gdom:https://github.com/ghostwu/gdom

The Gdom selector is written in two ways: G (selector) and $ (selector)

Gdom Load: G (function () {}) $ (function () {});

Common CSS files: 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;Ten margin:10px; One Border:1px solid #ccc; A} - a{ - text-decoration:None; the}

Load the library file with the CSS file (please adjust the path load according to the actual situation):

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

Some common uses are listed below:

1. Basic selector (ID, class, Element)

HTML code:

1     <DivID= "box">Test is a test</Div>    2     <Divclass= "box">This is a test</Div>3     <Divclass= "box">This is a test</Div>4     <Div>This is a test</Div>

JavaScript code:

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, descendant, descendant selector

HTML code

1 <DivID= "box">2         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>3         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>4         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>5     </Div>6     <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>7     <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>

JavaScript code

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. Attribute Selector

HTML code

<DivID= "box">Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</Div>    <DivID= "Box2"class= "desc">Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</Div>    <DivID= "Box2"class= "desc"Data-target= "ABC">Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</Div>    <DivID= "Box2"class= "Desc1 desc2 desc3"Data-target= "ABC">Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</Div>

JavaScript code

1<script>2Gfunction(){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");8G ("[Class$=desc]"). CSS ("Border", "1px solid #09f" );9         });Ten</script>

4. Filter Selector

JavaScript code

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 code

1 <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>2     <Div>3         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>4         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>5     </Div>    6     <Div>7         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>8         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P>9     </Div>    Ten     <Div> One         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P> A         <P>Gdom is a framework for DOM processing and string processing, Author: GHOSTWU</P> -     </Div>

[JS Master's Road] my open source JavaScript framework Gdom-Selector usage