在线客服与您一对一交流
当前位置: 主页 > 行业新闻 > IT技术 >

classie.js有什么作用?让添加、删除和检查类class更容易

  为什么要用classie.js

  classie是一个 awesome,lightweight script。 用来添加,移除,toggleDom元素的类。那为什么不用jquery呢, 因为jquery相对于这几个简单的功能太冗余了(just too bloated for your needs)。 classie.js 只有简单的81行,去掉注释,仅有51行, 我们现在就来分析源码。

  怎么用

  classie只有4个方法,分别是:

  hasClass

  addClass

  removeClass

  toggleClass

  顾名思义。 使用classie只需要在js代码中,直接使用classie.hasClass等方法即可。方法中只需要传递两个参数,第一个是Element元素,第二个是需要操作的class名称。
 

  Classie.js是一个功能强大并且非常轻量级的脚本,它可以让你添加、删除、切换以及检查DOM中的类变的非常容易。

  很多JavaScript严重的核心是围绕着类的添加与删除,今天,CSS3 transitions, transforms, 以及animations开始流行,很多非常酷的特效可以通过简单的添加一个类到一个元素上创立。比如通过触摸如何将图片过渡到视图区?仅仅是给图片添加几个transition属性,关联触摸类拥有transform属性,通过JavaScript触摸事件添加给图片添加类,这样就完成了一个流畅的、漂亮的CSS3 transition.

  强大的Classie.js

  如果没有一个像jQuery这样的库的话那么想要添加、删除类将不是一件轻松的事,但是很多时候JS库对你的需求来说往往太过臃肿。我在很多自己需要使用库的项目里,我发现仅仅是需要用到类的切换/检查的功能。进入 classie.js, 一个可强大的超级轻量级脚本, 它允许您很容易添加、删除、切换,和检查DOM中的类。 Classie.js 带给我们奇妙的和简单的实用性, 不会让我们的脚本变得臃肿。毕竟它仅仅只有82行代码, 1.872 kb大小。下面是一个简单的classie.js实例 :

  在上面的例子中, el代表的是我们要查询的元素。我们检查是否它有一个类sweet。如果有, 则删除它。 如果没有, 就添加它。在一个臃肿的库的世界里这样的小脚本现在绝对正确的方式。

  源码分析

  首先介绍一下classList属性, classList是HTML5为javascipt的class操作新增的API。之前在操作类名时,需要通过className属性,className属性是一个字符串,使用className操作类名会涉及到很多字符串处理,很麻烦。新增的classList属性简化了这些操作。下面的代码就是使用classList属性进行了class的操作。

  if ( 'classList' in document.documentElement ) {

  hasClass = function( elem, c ) {

  return elem.classList.contains( c );

  };

  addClass = function( elem, c ) {

  elem.classList.add( c );

  };

  removeClass = function( elem, c ) {

  elem.classList.remove( c );

  };

  }

  支持className属性的浏览器有Firefox3.6+和Chrome。所以在低版本中使用了另外一种写法。

  else {

  hasClass = function( elem, c ) {

  return classReg( c ).test( elem.className );

  };

  addClass = function( elem, c ) {

  if ( !hasClass( elem, c ) ) {

  elem.className = elem.className + ' ' + c;

  }

  };

  removeClass = function( elem, c ) {

  elem.className = elem.className.replace( classReg( c ), ' ' );

  };

  }

  其中classReg使用如下方法找到class :

  function classReg( className ) {

  return new RegExp("(^|\s+)" + className + "(\s+|$)");

  }

  这里使用的是对className属性进行字符串处理。

  最后加上toggleClass。

  function toggleClass( elem, c ) {

  var fn = hasClass( elem, c ) ? removeClass : addClass;

  fn( elem, c );

  }

相关文章:

  • 帝国CMS是什么程序 帝国CMS是一套开源的静态页面程序,凭借超高的扩展性,很多知名的新闻站点、行业站点都是应用的帝国CMS后端。因为帝国CMS和dedecms一样都是生成静态页面的,所以非常利于...

  • 域名解析DNS分为显性URL和隐形URL,显性URL和隐形URL有什么区别?隐形URL和显性URL哪个更有利于SEO?显性URL相当于域名了302重定向,隐形URL使用iframe框架技术隐藏真实目标地址,显性URL更有利于...

  • 在常见的CMS系统中,我对dedecms算是比较熟悉的,自己网站用的也是这个系统。系统功能强大使用灵活,相信这也是它受到大多数中小站长青睐的原因。 再好的系统也有照顾不周的地方,很多站...

  • 这篇文章主要为大家详细介绍了dedecms后台增加php导出excel功能实现办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。 不少朋友希望织梦的后台...

  • 第一次使用的插件是 pdfobject.js 百度网盘下载地址:http://pan.baidu.com/s/1kUPhYdT 加载 script src=/style/js/pdfobject.js /script script type=text/javascript window.onload = function (){ var success = new PDFObject({ url: pdf文件地...

  • 网上有一种方法是copy+unlink来移动文件,但是遇到大文件时会消耗大量时间,对性能不怎么友好,可以使用rename()来移动文件,速度非常快 关于rename()函数 bool rename ( string $oldname , string $newname...

  • 基于我们公司可选的几种推广方式: 一、关键词优化排名推广(推荐) 指定关键词推广,按天付费,推广我们业务中最重要的一些关键词,达到百度首页才收费,大概一个关键词10元/天左右。...

  • 插件介绍 wordpress程序网站在发布文章时可以给每一片文章添加与之相关的TAG标签,对于TAG标签可以生成很多页面,增加搜索引擎对内容的抓取量。 WP Auto Keywords插件就是一款能自动给文章添加...

  • 5.7 生成列表页 改动 include/arc.listview.class.php 1.先设置 关闭副栏目(在系统----系统基本参数性能选项里) 2.一般网站不需要 栏目交叉 交叉 所以 找到94行注释掉: //获得交叉栏目ID /*if($this-Type...

  • 使用preg_replace将删除所有空白(包括制表符等) $string = user na me $string = preg_replace(/\s+/, , $string); echo $string; // username preg_replace(/\s/u, ,$string) u (PCRE8) 此修正符打开一个与perl不兼容的附加功能. 模式...

  • 公司:绵阳蟠龙网络科技有限公司
  • 联系人:张经理
  • 手机/微信18681637328:
  • Q Q: 点击这里给我发消息
  • 地址:绵阳市雁塔区唐延南路11号逸翠园i都会