[js高手之路] 我的开源javascript框架gdom
来源:互联网 发布:昆山宏观数据库 编辑:程序博客网 时间:2024/06/12 02:38
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>
阅读全文
0 0
- [js高手之路] 我的开源javascript框架gdom
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- [js高手之路]学生问的一道javascript面试题[来自腾讯]
- [javascript高手之路]最通俗易懂的javascript变量提升
- 我的JavaScript框架
- javascript编程高手之路
- Android 之我的开源框架
- 我的js之路
- 我的javascript之路之循环
- 我的javascript之路之递归
- 我的javascript之路之对象
- [javascript高手之路] es6系列教程
- [javascript高手之路] es6系列教程
- [javascript高手之路] es6系列教程
- 我的JS框架 meeko框架
- [js高手之路] vue系列教程
- [js高手之路] vue系列教程
- [js高手之路] vue系列教程
- 树莓派 Samba共享文件
- expect
- 九度[1012]-畅通工程
- 新的开始
- Cloud Native Java-OReilly 2017 读书笔记
- [js高手之路] 我的开源javascript框架gdom
- 简单介绍Java ClassLoader
- tensorflow官网无法访问
- 高二&高一模拟赛12 总结
- 《嵌入式开发探秘》之第二章 开发环境搭建(1)
- python实现自编码器autoencode
- C#中的Builder模式
- 老毛桃啊老毛桃
- Android开发 之 OpenGL ES系列(2--基本概念)