addclass 封装

2024-09-07

js 动态添加class封装(es6语法)

export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') return reg.test(el.className) } export function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.className.split(' ')

封装insertAfter、addClass、格式化时间

insertAfter,在JS节点操作中,并没有insertAfter方法,因此需要重新封装 function insertAfter(newEle,targetNode) { var oParent=targetNode.parentNode; if(oParent.lastChild==targetNode){ oParent.appendChild(newEle) }else{ oParent.insertBefore(newEle,targetNode.nextSibling ) } }

JS封装addClass、removeClass

addClass封装:1.先把原有的类名和需要添加的类名用“”切割.拼接. 2.查重,把所有类名遍历,重复的去掉. 3.“”拼接. function addClass(ele , cName) { var arr = ele.className.split(" ").concat(cName.split(" ")); for (var i = 0; i < arr.length; i++)for (var j = arr.length-1; j &g

封装addClass 、 removeClass

封装一些常用的js工具函数-不定时更新（希望大家积极留言，反馈bug^_^）

/*华丽----------------------------------------------------------------------------------------------------------------------------------分割线*///获取元素样式// 获取的是计算机计算后的样式// 单一样式不能拿来判断// 复合样式的获取有兼容性问题// 可以使用如backgroundColor的属性// 不要有空格// 不要获取为设置的样式:不兼容// func

JS组件系列——分享自己封装的Bootstrap树形组件：jqTree

前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣.看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第一个Jquery Tree,只是用简单样式和js去实现了效果,没有给出一个系统的封装,这篇博主就来试试在此样式的基础上封装一个稍微完整点的树形组件. 一.组件效果预览其实效果和之前的那个差不多,博主只是在之前的基础上加了一个选中的背景色. 全部收起展开全部展开二.代码示例其实效果很简单,重

对bootstrap中confirm alert进行封装

HTML:  <div id="ycf-alert" class="modal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type

最近自己封装了个JS脚本，用来创建和操作Table

基于JQuery封装的Table操作脚本 /** 依赖JQuery **/ (function () { var Table = window.Table = function (rowCount, columnCount, width, height, rowHeight) { this.rowCount = rowCount; this.columnCount = columnCount; this.width = width; this.height = height; this.rowH

仿照jquery封装一个自己的js库（一）

所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括面向对象,jquery,绑定,脚本化css等. 一. jquery的美元符意味什么? 先思考alert(typeof $)的结果中的$,它是一个对象,也是一个函数. 所以美元符字面上是jQuery,其实就是一个jq对象,里面可以接受函数,字符串(#xxx,.xxx,xxx...),还有一种是对象(比如thi

我自己的Javascript 库，封装了一些常用函数 Kingwell.js

我自己的Javascript 库,封装了一些常用函数 Kingwell.js 博客分类: Javascript javascript 库javascript库现在Javascript库海量,流行的也多,比如jQuery,YUI等,虽然功能强大,但也是不万能的,功能不可能涉及方方面面,自己写一个的JS库是对这些的补充,很多也比较实用,把应用到项目中中去也比较方面,这也是对工作的一些积累,也加深对知识的理解. 2012-6-20更新,添加设置Cookie,获取Cookie,删除Cookie方法.

jQuery组件系列：封装标签页（Tabs）

我自己封装的组件,你也行,静态链接地址 http://www.cnblogs.com/leee/p/5190489.html 声明.最好,先把代码拷过去运行一下,其实特别丑~再往下看我没优化,因为我木时间,上班呢.这篇文章是证明我能写组件的能力的. 需要明白的的知识点 $.data缓存读写 prop()js对象属性和attr() DOM属性区别 this作用域(谁调用,this指向谁) call改变作用域this,木用apply,数组麻烦原型啥东东 <!DOCTYPE> <html

javascript笔记——jqGrid再次封装

xingrunzhao js插件再次封装 demo 'use strict'; /** * commerce grid框架 * 依赖jqgrid */ (function ($_self, jQuery) { //jQuery.ajaxSetup({cache: false}); var _this = $_self; /** * 底层核心列表 * @param grid_selector gird选择器 * @param pager_selector 分页器选择器 * @param loadU

jquery封装的选项卡

ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; overflow:hidden;} .tab_t{ background:#F93; overflow:hidden; width:450px;} .tab_t li{ float:left; width:150px; color:#fff; text-align:center; cursor:poi

模拟jquery封装选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

左右推拽显示对比图 - jQyery封装 - 附源文件

闲来无事,做了一个模块效果左右拖拽显示对比图,是用jq封装的利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值再配合背景图fixed属性,来制作视觉差效果代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>左右推拽显示对比图</title> <style> body {overflow:hidden;

自己做jQuery插件：将audio5js封装成jQuery语音播放插件

日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够帮助你解决类似这样的浏览器兼容性问题的js类库,轻量级并且能够很优雅的使用flash向前兼容老版本的浏览器. 其主要特性: 拥有完整API来控制“加载”,“播放”,“暂停”,“音量”和“查找” 并且可以得到播放内容的具体相关信息不依赖任何类库兼容版本浏览器,包括:IE8, IE9, Chrome

关于js封装框架类库之样式操作

在js中,对样式的操作我们并不感到陌生,在很多框架中都是用极少的代码,实现更强大的功能,在这做出一些的总结.存在不足还望指出! 1.封装一个添加css的方法(这篇引用了前面的框架结构) 在 js 中获得样式, 默认只能获得行内样式, 类样式与外部样式无法获得, 可以使用计算样式来获得第一次的结果window.getComputedStyle 获得style对象建议第一次用注意: 如果是低版本的 IE 浏览器, 需要使用 currentStyle YY.fn.extend({ css:

jQuery焦点图切换特效插件封装

网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频道首页版面,因为是通过图片的形式,所以有一定的吸引性.视觉吸引性.容易引起访问者的点击,据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字,转化率高于文字标题5倍.由此看来焦点图的能让游客对企业的第一印象大大提升,下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图.如下图所示: 可

js框架封装，模拟jQuery封装

模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获取dom元素:其后设置入口函数jQuery,返回一个F的实例:然后对jQuery.prototype进行设置:其后修改F的原型指向jQuery的原型,最后暴露出去两个接口$和jQuery:二:jQuery.fn.extend = jQuery.extend = function(){}通过向jQue

谈CSS模块化【封装-继承-多态】

第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上,当时我还想,“哈,CSS也有模块化,我没听错吧?”事实上,我没听错,你也没看错,早就有CSS模块化这个概念了.之所以我把这个拿出来讨论,是因为一个算是比较大的项目出现了一些重构上的危机,因此引发了我们对页面重构中的CSS进行模块化的思考. 首先,什么是CSS模块化?在谈CSS模块化之前我们先看一下百度百科对模块化的解释: “模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程.每个模块完成一个特定的

jQuery对象插件封装步骤

jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题.甚至很多css兼容性问题,用jQuery写都能解决. 这里是对象插件的封装.当然,封装插件很多,这里是最简单的一种:1.打两个括号 ()()2.在第二个括号里面加入"jQuery" ()(jQuery) 3.在第一个括号里面写一个匿名函数,传参是一个$ (function($){})(jQuery) 4.在function($){}写:$.fn.插件名,如$.fn.tabs,这里的f

addclass 封装

热门专题