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. LintCode-买卖股票的最佳时机

    如果有一个数组,它的第i个元素是一支给定的股票在第i天的价格.如果你最多仅仅同意完毕一次交易(比如,一次买卖股票),设计一个算法来找出最大利润. 您在真实的面试中是否遇到过这个题? Yes 例子 给出 ...

  2. 《Pro Android Graphics》读书笔记之第六节

    Android UI Layouts: Graphics Design Using the ViewGroup Class Android ViewGroup Superclass: A Founda ...

  3. Android4.0-4.4 加入支持状态栏显示耳机图标方法(支持带不带MIC的两种耳机自己主动识别)

    效果如图: 一. 在frameworks/base/packages/SystemUI/res/values/strings.xml 里加入 <string name="headset ...

  4. 入门vue----(vue的安装)

    1.安装node.js 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –registry=https://registry.npm ...

  5. 如何处理使用js兼容所有浏览器的问题

    首先:如何处理兼容问题 1.如果两个都是属性,用逻辑||做兼容 2.如果有一个是方法,用三元做兼容 3.如果是多个属性或方法,封装函数做兼容 分享两个小知识点: 1.取消拖拽的默认行为: docume ...

  6. python自动化--字符串和整数的转换,while的循环体

    字符串(str)和整数(int)类型变量的结合 *遵循只有同一类型的变量才可以结合. *不同类型的变量之间的转换 实例:实现打印出"192.168.100"和1的结合出" ...

  7. 分布式:2PC,3PC,Paxos,Raft,ISR [转]

    本文主要讲述2PC及3PC,以及Paxos以及Raft协议. 两类一致性(操作原子性与副本一致性) 2PC协议用于保证属于多个数据分片上的操作的原子性.这些数据分片可能分布在不同的服务器上,2PC协议 ...

  8. NPOI:处理xls文件中的合并行

    /// <summary> /// NPOI根据路径获取文件转换成DataTable /// </summary> /// <param name="FileP ...

  9. 自定义控件详解(七):drawText()

    比较基础的一个方法.即绘制文本 使用如下: Paint paint = new Paint(); paint.setColor(Color.RED); // 红色字体 paint.setStyle(P ...

  10. iOS 常用到的宏#define

    //AppDelegate #define APPDELEGATE [(AppDelegate*)[UIApplication sharedApplication] delegate] //----- ...