查看: 217|回复: 0

[JavaScript/JQuery] 轻量级的DOM操作库 -- zBase 库 使用介绍

发表于 2016-12-24 08:00:21

zBase是我个人写的一个轻量级的 DOM 操作库,里面封装了一些对元素节点的简单操作, 如节点的查询获取,className的添加移除,样式的添加移除, 节点的添加和移除,事件的封装,动画的封装等等...

如果你只是想简单的操作 dom ,但又不想 写繁琐的 js 原生代码,也不希望加载像 jquery 这么功能齐全的库,那么 zBase适合你 !!!

当然只是做了简单的封装,减少 原生 js 操作dom 的麻烦,整个类库也是利用 $ 操作符,如果在使用的过程中和一些 大型的类库 如 jquery 冲突可以下载 zBase 源码,将 $ 改成任意字符即可。

库的简单使用:

一、节点的查找

1、一般查找:

语法 概述
$('div_id') id = 'div_id' 的元素
$('p') 所有 p 标签的元素
$('.className') 所有 class = 'className' 的元素
$(this) 当前 HTML 元素

2、组合查找

在此前提下,你还可以任意组合,得到你所需要的节点,如:

语法 概述
$('div_id p') id = 'div_id' 节点下的 所有 p 元素(注意中间空格)
$('.name1 .name2') 所有class = 'name1 ' 下的所有 class = 'name1 '元素
$('p a') 所有 p 标签下的 a 标签元素

3、find查找

利用 find() 方法来查找:

语法 概述
$('p').find('a') 所有 p 标签下的 a 标签元素
$('.name1').find('.name2') 所有class = 'name1 ' 下的所有 class = 'name1 '元素
$('#div_1').find('div_2') 注意这样也是行的,但没什么意义,最后得到的是 id= 'div_2' 的元素,与 id= 'div_1'没关系
二 、操作节点

由于 $() 及几乎所有库的方法都返回当前对象,所以支持链式操作

1、.addClass()

  1. //给 所有 p 标签 添加 一个'name_1' 的className
  2. $('p').addClass('name_1')
复制代码
  1. //添加多个 className
  2. $('p').addClass('name_1 name_2')
复制代码

2、.removeClass()

  1. //给 所有 p 标签 移除 一个'name_1' 的className
  2. $('p').removeClass('name_1')
复制代码
  1. //移除多个 removeClass
  2. $('p').removeClass('name_1 name_2')
复制代码

3、获取第几个节点 .getE()
注意,.getE() 返回的是 dom元素,所以后面不能再执行链式操作

  1. //得到 ul 里面的 第 3 个 li节点
  2. $('ul li').getE(2)
复制代码

4、获取第几个节点 .getElement()
与第 3 条不同的是 .getElement() 返回的是 当前对象,所以后面可以再执行链式操作

  1. //得到 ul 里面的 第 3 个 li节点
  2. $('ul li').getElement(2) .css('color','red');
复制代码

5、操作样式 .css()

  1. // 给所有 p 标签 添加 color :red ;样式
  2. $('p').css('color','red');
复制代码
  1. // 给所有 p 标签 添加多组样式,参数是一个 obj
  2. $('p').css({
  3. "color":"red",
  4. "background":"blue"
  5. });
复制代码

说明

  1. // 当 参数为 string 时 ,是 获取 p 标签下的 color 样式,返回一个 rgb(x, x, x)值
  2. $('p').css('color');
复制代码

6、获取 或 设置 某一节点的属性 .arrt()

  1. // 给所有 p 标签 添加 age 属性
  2. $('p').arrt("age","233");
  3. // 当参数只有一个时 , 获得 p 标签下的属性
  4. $('p').arrt("age");
复制代码

7、获取或设置 .html()

  1. // 给所有 p 标签 设置 html
  2. $('p').html("我的天,我的地,先赚一个亿!!!!");
  3. // 得到 html 值
  4. $('p').html("age");
复制代码
三、事件操作

1、隐藏标签 .show 和 .hide

  1. $('p').show();
  2. $('p').hide();
复制代码

2、鼠标的移入移出事件 .hover();

  1. // hover传递两个函数,分别 用于处理 鼠标移入事件 和 鼠标移出 事件
  2. $('span').hover(function () {
  3. $('span').css("color","red");
  4. },function () {
  5. $('span') .css("color","blue");
  6. });
复制代码

3、添加事件 addEvent(ele,type,fun);
这里做了兼容 IE6、7、8
参数:ele:添加事件的元素节点 , type:事件类型(click,movie等),fun:执行事件函数
注意:第一个参数为元素节点,可用上面提到的 getE() 来获得

  1. addEvent($('#div_id').getE(0),'click',function () {
  2. alert(" 啊 ,我被点击啦~~~ ");
  3. });
复制代码

4、移除事件 removeEvent(ele,type,fun)

  1. //添加事件
  2. addEvent($('#div_id').getE(0),'click',f_click);
  3. // 移除事件
  4. removeEvent($('#div_id').getE(0),'click',f_click);
  5. function f_click() {
  6. alert(" 啊 ,我被点击啦~~~ ");
  7. }
复制代码

5、绑定事件 bind();

其实这个方法是有上面的添加事件封装的,只不过这个方法可以多个元素同时绑定。

  1. // 给所有的 span 标签 绑定点击事件
  2. $('span').bind('click',function () {
  3. console.log("........"+this); // ....[object HTMLSpanElement]
  4. });
复制代码
四、动画

动画做的不多,就一个 animate() ,其实现在的css3的动画效果已经很强大和简便了,这里 做了一个动画的简单封装,有兴趣可以查看源码,看一下思路。

animate(obj);
参数为一个 对象

  1. /
  2. * @param attr 样式 ,一般是 left 或 top
  3. * @param start 开始的位置
  4. * @param step 移动的距离
  5. * @param target 移动的终点
  6. * @param t 每次移动的毫秒
  7. /
  8. $('#div_id').animate({
  9. 'attr':'x',
  10. 'start':100,
  11. 't':500,
  12. 'step':10,
  13. 'alter':550
  14. });
复制代码
五、一些工具方法

1、设置元素处在 视口中间位置 .centerInWindow()

传递的两个参数分别是 元素自身的 的 宽 和 高;

  1. // 传递的两个参数分别是 元素自身的 的 宽 和 高;
  2. $('#div_id').centerInWindow(100,100);
复制代码

2、获取当前视口的大小 getInner();
返回 obj ,兼容 IE

  1. console.log("...width....."+ getInner().width);
  2. console.log("...height....."+ getInner().height);
复制代码

3、获取 浏览器滚动条的距离 getScroll()

  1. console.log("...top....."+ getScroll().top);
  2. console.log("...top....."+ getScroll().left);
复制代码

4、图片预加载 preprocessorImage(obj)
一般呢,我们往 而图片 预加载 则是 先在后台请求数据加载完图片,然后再让图片一下显示出来,效果是不同的!
参数 obj :一个对象,里面是 图片的 链接数组 和 回调函数,如下例子:
加载完图片,再将

  1. preprocessorImage({
  2. img_array:['http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1209/10/c1/13764273_1347270360314_800x600.jpg',
  3. 'https://cloud.githubusercontent.com/assets/15622519/18378764/61d0b4be-76a1-11e6-9571-36d785a35e56.png'],
  4. callback:function (img_src) {
  5. $('#img-div').html( '<img class="bg-img" src="'+ img_src +'" alt="">');
  6. }
  7. });
复制代码
六、添加插件

在 zBase库中还支持扩展插件:
比如有个 js 插件

  1. // 加载在 zBase.js 的后面
  2. <script type="text/javascript" src="../js/zBase_drag.js"></script>
复制代码

那么这个js插件需要 用 $().extend('name',fun) 来扩展
参数:第一个参数为 插件的名称,第二个参数是 插件的实现函数

  1. $().extend("drag",function () {
  2. // 开始编程...
  3. }
复制代码

那怎么调用写好的插件呢? 比如我上面写了是一个 盒子拖拽的插件,那么我直接调用

  1. $('#div_id').drag();
复制代码

此时,id = div_id 的元素就有了拖拽的功能了(前提这个 div 必须 position: absolute;)
关于 zBase_drag.js 插件源码可以查看的到。

有了插件扩展是不是很方便呢,可以为 zBase 库 扩展跟多自己实用的功能。

七、ajax封装

导入 js

  1. <script type="text/javascript" src="../js/zBase-ajax.js"></script>
复制代码

ajax(obj);
参数 obj 里面的属性说明:

  1. method : 请求方式 -- get 或 post
  2. url : 请求路径
  3. async :true 为异步请求 , false 为同步请求
  4. data : 请求数据 ,为 一个 对象
  5. success :请求成功回调函数
  6. error :请求失败回调函数
复制代码
  1. addEvent(document,'click',function () {
  2. ajax({
  3. method:'get',
  4. url:'https://api.github.com/users/ZengTianShengZ',
  5. async:true,
  6. data:{
  7. 'name':'zeng',
  8. 'age': 24
  9. },
  10. success:function (text) {
  11. alert(text);
  12. },
  13. error : function(error_status,error_statusText){
  14. alert(error_status + '.........' + error_statusText);
  15. }
  16. });
复制代码

没错,就是怎么使用,是不是很方便,具体可查看源码

项目有不足的地方欢迎大家 issues ,本类库适合做一些小项目时使用,主要避免了原生js操作dom的麻烦,但是远不及jquery,zepto那么强大 的功能。
项目地址 github .................... 欢迎 star



回复

使用道具 举报