在线客服与您一对一交流
当前位置: 主页 > 行业新闻 > 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 );

  }

相关文章:

  • 懒加载插件 new AnimOnScroll(document.getElementById(grid), { minDuration: 0.4, maxDuration: 0.7, viewportFactor: 0.2 }); /*AnimOnScroll.js*/ /** * animOnScroll.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.op...

  • breakpoints.js 版本:0.4.2 官网:https://github.com/amazingSurge/breakpoints.js/ 许可:GPL 依赖:jQuerys DataAPI:无 功能:用于响应式布局设置断点 Breakpoints();...

  • 用来兼容jquery1.7 版本, jquery版本之间有一些方法可能不同或废弃,会有报错, 可以引入一个 jquery-migrate.min.js 来兼容。 比如1.9版本对于 live(),die(),toggle(),sub(),$.browser 等等都已经不支持了...

  • 1.breakpoints.js是什么? breakpoints.js是一个jQuery插件。定义响应性设计的断点,Breakpoints.js 将在浏览器进入和/或者退出断点时消除自定义事件。 breakpoints下载文件夹中readme.txt文件中有这么一句话...

  • 免费网站建站,免费建站,免费做网站,有人需要免费建站,有人能提供免费建站。截止至2018年6月,据统计,中国的网民数量已经达到了8.02亿之巨。巨量的网民催生出的网站需求可想而知,而...

  • 明确企业网站建设之主题,要沟通、商讨、理解企业为什么要建立这个网站,需要这个网站实现怎么样的一个功能或价值,比如:宣传企业形象、推广企业产品、运营平台、服务客户型网站,...

  • %{QUERY_STRING} 服务器变量%{QUERY_STRING}可以获取查询字符串内容。也就是链接问号后面的内容 %{HTTP_HOST}获取域名,是一个服务器变量,可以获取访问的域名 ^(.*)$获取URL除去协议、域名和查询字符...

  • 术有专攻,对于网络外的我们,专业去打造或做网站,非常困难,那么怎样去专业的制作网站呢,其实步骤非常,只要耐心学习,都会成为专业的小能手。那么怎么专业的去制作网站呢? 西安...

  • 如何找到合适的网络公司建站? 面对市场上五发八门、乱象丛生的网站建设公司,我们创业者究竟该如何选择呢?因为中国任何一个行业都竞争很大,都有人在做,那么最起码的正规网络公司...

  • 从企业建站角度讲,最便捷、最适合企业的建站系统莫过于自助建站系统,市场上可供选择的自助建站平台也是一搜一大把。这些自助建站平台采用傻瓜式建站风格,容易上手,操作简单方便...

  • 公司:西安蟠龙网络科技有限公司
  • 联系人:张经理
  • 手机/微信:187 2951 9978
  • Q Q: 136 8888 63 点击这里给我发消息
  • 地址:西安市雁塔区唐延南路11号逸翠园i都会
  • 懒加载插件 animOnScroll.js

    懒加载插件 new AnimOnScroll(document.getElementById(grid), { minDuration: 0.4, maxDuration: 0.7, viewportFactor: 0.2 }); /*AnimOnScroll.js*/ /** * animOnScroll.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.op...

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

    为什么要用classie.js classie是一个 awesome,lightweight script。 用来添加,移除,toggleDom元素的类。那为什么不用jquery呢, 因为jquery相对于这几个简单的功能太冗余了(just too bloated for your needs)。 clas...

  • breakpoints.js的作用 用于响应式布局设置断点

    breakpoints.js 版本:0.4.2 官网:https://github.com/amazingSurge/breakpoints.js/ 许可:GPL 依赖:jQuerys DataAPI:无 功能:用于响应式布局设置断点 Breakpoints();...

  • jquery-migrate.js的作用

    用来兼容jquery1.7 版本, jquery版本之间有一些方法可能不同或废弃,会有报错, 可以引入一个 jquery-migrate.min.js 来兼容。 比如1.9版本对于 live(),die(),toggle(),sub(),$.browser 等等都已经不支持了...

  • breakpoints,触发响应设计断点的jQuery事件

    1.breakpoints.js是什么? breakpoints.js是一个jQuery插件。定义响应性设计的断点,Breakpoints.js 将在浏览器进入和/或者退出断点时消除自定义事件。 breakpoints下载文件夹中readme.txt文件中有这么一句话...

  • 学会以下几招 免费网站制作你也可以

    免费网站建站,免费建站,免费做网站,有人需要免费建站,有人能提供免费建站。截止至2018年6月,据统计,中国的网民数量已经达到了8.02亿之巨。巨量的网民催生出的网站需求可想而知,而...网站企业网站