[js高手之路] 我的开源javascript框架gdom - 选择器用法
2017-09-02 16:17
260 查看
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
加载库文件与css文件( 请根据实际情况调整路径加载):
html代码:
javascript代码:
2、后代,子代选择器
html代码
javascript代码
3、属性选择器
html代码
javascript代码
4、过滤选择器
javascript代码
html代码
gdom下载地址:https://github.com/ghostwu/gdom
gdom选择器有两种写法: G( 选择器 ) 和 $( 选择器 )
gdom的加载: G( function(){} ) $( function() {} );
公用css文件: common.css
* { margin: 0; padding: 0; } 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高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路]使用原型对象(prototype)需要注意的地方
- [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
- [js高手之路] es6系列教程 - 对象功能扩展详解
- [js高手之路] 设计模式系列课程 - jQuery的extend插件机制
- [js高手之路] es6系列教程 - 新的类语法实战选项卡
- [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
- [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
- [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果
- [js高手之路]打造通用的匀速运动框架
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车