[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:;
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 - 选择器用法的更多相关文章
- [js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...
- [js高手之路]从零开始打造一个javascript开源框架gdom与插件开发免费视频教程连载中
百度网盘下载地址:https://pan.baidu.com/s/1kULNXOF 优酷土豆观看地址:http://v.youku.com/v_show/id_XMzAwNTY2MTE0MA==.ht ...
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的h ...
- [js高手之路]从原型链开始图解继承到组合继承的产生
基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- [js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...
随机推荐
- 【luogu P1396】营救
https://www.luogu.org/problem/show?pid=1396 弱化版的货车运输,用并查集维护连通块,将边按权值升序排序后依次插入直到两点连通,最后插入的边的权值就是最小的拥挤 ...
- NIO相关基础篇二
转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第8章节--配送SP2013Apps
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第8章节--配送SP2013Apps 本章节你将学到: 通过SP商店配送Apps: 在商店授予证书并管理A ...
- linux shell 推断文件或目录是否真的存在
#推断文件或目录是否存在 filepath=/data/test.txt folderpath=/data/qtech #推断文件是否存在 if [ -f "$file" ] th ...
- Java集合源代码剖析(二)【HashMap、Hashtable】
HashMap源代码剖析 ; // 最大容量(必须是2的幂且小于2的30次方.传入容量过大将被这个值替换) static final int MAXIMUM_CAPACITY = 1 << ...
- 掀起Azure AD的盖头来——深入理解Microsoft Graph应用程序和服务权限声明
作者:陈希章 发表于 2017年7月12日 引子 这是一篇计划外的文章.我们都知道要进行Microsoft Graph的开发的话,需要进行应用程序注册.这个在此前我已经有专门的文章写过了.但这里存在一 ...
- Java中File的使用
File 代表文件或者目录的类 构造函数 File(File parent,String child)---代表了指定父目录下的指定的子文件或者子目录 File(String pathname)--- ...
- 【转】JAVA处理线程超时
在实际业务中,由其是多线程并开业务中,经常会遇到某个线程执行超时.而程序如果不捕获这类情况,就会导致程序一直处于等待状态,从而影响后续线程的运行.比如说网络通迅.单任务下的复杂数据库查询等,通常处理这 ...
- 前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- 54、js初识
今天这篇将介绍javascript,学完javascript就可以使你的网页动起来. 一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-min ...