封装1个 addClass

2024-09-04

封装addClass 、 removeClass

封装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 ) } }

读《JavaScript DOM编程艺术》

国庆假期花了三四天看了这本书,书很薄,因为是入门书,干货也不是很多. 4. childNodes nodeType nodeValue firstChild lastChild childNodes返回所有直接子节点,元素节点为1,属性节点为2,文本节点为3,甚至还包括换行和空格也作为节点来看(和children的区别) p 的第一个firstChild是其中的文本,难道不应该可以是属性节点??------知乎. 注意JavaScript中的firstChild属性和CSS的first-Chil

为DOM节点添加或者删除class

项目中如果应用了常用的javascript类库,多数情况下,这些已经封装好的类库,都会封装一个类似于addClass和removeClass的方法,以便于我们对DOM节点的class进行操作. 以jQuery为例: $(dom).addClass("a").removeClass("b"); 由于是封装好的方法,我们甚至都不需要检查需要操作的class在DOM中是否存在,用起来的感觉真的是不要太爽. 那么如果项目中没有使用任何类库呢,完全原生JavaScript,如

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

封装一些常用的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

封装1个 addClass

热门专题