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:;
padding:;
}
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>

[js高手之路] 我的开源javascript框架gdom - 选择器用法的更多相关文章

  1. [js高手之路]打造通用的匀速运动框架

    本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...

  2. [js高手之路]从零开始打造一个javascript开源框架gdom与插件开发免费视频教程连载中

    百度网盘下载地址:https://pan.baidu.com/s/1kULNXOF 优酷土豆观看地址:http://v.youku.com/v_show/id_XMzAwNTY2MTE0MA==.ht ...

  3. [js高手之路]一步步图解javascript的原型(prototype)对象,原型链

    我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...

  4. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

  5. [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的h ...

  6. [js高手之路]从原型链开始图解继承到组合继承的产生

    基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...

  7. [js高手之路]原型对象(prototype)与原型链相关属性与方法详解

    一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...

  8. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  9. [js高手之路]面向对象版本匀速运动框架

    这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...

随机推荐

  1. 【luogu P1396】营救

    https://www.luogu.org/problem/show?pid=1396 弱化版的货车运输,用并查集维护连通块,将边按权值升序排序后依次插入直到两点连通,最后插入的边的权值就是最小的拥挤 ...

  2. NIO相关基础篇二

    转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...

  3. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第8章节--配送SP2013Apps

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第8章节--配送SP2013Apps         本章节你将学到: 通过SP商店配送Apps: 在商店授予证书并管理A ...

  4. linux shell 推断文件或目录是否真的存在

    #推断文件或目录是否存在 filepath=/data/test.txt folderpath=/data/qtech #推断文件是否存在 if [ -f "$file" ] th ...

  5. Java集合源代码剖析(二)【HashMap、Hashtable】

    HashMap源代码剖析 ; // 最大容量(必须是2的幂且小于2的30次方.传入容量过大将被这个值替换) static final int MAXIMUM_CAPACITY = 1 << ...

  6. 掀起Azure AD的盖头来——深入理解Microsoft Graph应用程序和服务权限声明

    作者:陈希章 发表于 2017年7月12日 引子 这是一篇计划外的文章.我们都知道要进行Microsoft Graph的开发的话,需要进行应用程序注册.这个在此前我已经有专门的文章写过了.但这里存在一 ...

  7. Java中File的使用

    File 代表文件或者目录的类 构造函数 File(File parent,String child)---代表了指定父目录下的指定的子文件或者子目录 File(String pathname)--- ...

  8. 【转】JAVA处理线程超时

    在实际业务中,由其是多线程并开业务中,经常会遇到某个线程执行超时.而程序如果不捕获这类情况,就会导致程序一直处于等待状态,从而影响后续线程的运行.比如说网络通迅.单任务下的复杂数据库查询等,通常处理这 ...

  9. 前后端分离ueditor富文本编辑器的使用-Java版本

    最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

  10. 54、js初识

    今天这篇将介绍javascript,学完javascript就可以使你的网页动起来. 一.JavaScript概述  1.JavaScript的历史 1992年Nombas开发出C-minus-min ...