上次写了一个轮播的方法：http://blog.csdn.net/stronglyh/article/details/46833499

由于别人问我的时候，给了我html。于是乎我就看到了页面中引用了jquery，所以就用jquery写了，今天细想了下jquery中有一个addClass方法。不知道传统的js能否够使用搞定呢。

<html>

<style>

.font_class {

color:#FF0000;

font-weight:bold;

}

</style>

<script language="javascript">

function addClass(cc) {

var obj = document.getElementById('span_1');

var c_class = obj.className;

if(c_class == "") {

obj.className = cc;

} else {

// var reg = /^(.*?)font_1(.*?)$/i;

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

var reg = new RegExp("(^|.*?)" + cc + "(.*?)");

if(c_class.match(reg)) {

return;

} else {

c_class += ' ' + cc;

obj.className = c_class;

}

}

}

function removeClass(cc) {

	var obj = document.getElementById('span_1');

	var c_class = obj.className;

	if(c_class == "") {

		return;

	} else {

		var has_c = false;

		var a = c_class.split(" ");

		var l = a.length;

		for(var i=0;i<l;i++) {

	 	  if(a[i] == cc) {

			has_c = true;

			break;

	  	 }

		}

		if(has_c) {

			a.splice(i,1);

			obj.className = a.join(" ");

		}

	}

}

function hasClass(cc) {

var obj = document.getElementById('span_1');

var c_class = obj.className;

var reg = new RegExp("(^|.*?)" + cc + "(.*?)");

if(c_class.match(reg)) {

alert('此class已经存在啦，^_^');

} else {

alert('此class还不存在哦，^_^');

}

}

</script>

<span id="span_1" class="kaishi">o(∩_∩)o...哈哈</span><br />

<input type="button" onclick="addClass('font_class');" value="点我添加class">

<input type="button" onclick="removeClass('font_class');" value="点我删除class">

</html>

当中在删除的时候使用了splice方法

对于这种方法，总共同拥有三个比較经常使用的使用方法，具体解说下：

1.删除-用于删除元素，两个參数，第一个參数（要删除第一项的位置），第二个參数（要删除的项数）

2.插入-向数组指定位置插入随意项元素。三个參数。第一个參数（事实上位置），第二个參数（0），第三个參数（插入的项）

3.替换-向数组指定位置插入随意项元素，同一时候删除随意数量的项，三个參数。第一个參数（起始位置），第二个參数（删除的项数），第三个參数（插入随意数量的项）

var lang = ["php","java","javascript"];

//删除

var removed = lang.splice(1,1);

alert(lang); //php,javascript

alert(removed); //java ,返回删除的项

//插入

var insert = lang.splice(0,0,"asp"); //从第0个位置開始插入

alert(insert); //返回空数组

alert(lang); //asp,php,javascript

//替换

var replace = lang.splice(1,1,"c#","ruby"); //删除一项。插入两项

alert(lang); //asp,c#,ruby

alert(replace); //php,返回删除的项

那么如今大家应该知道怎么使用了吧。突然发现还是jquery比較方便啊。



js----数组处理之splice（有js原始addClass方法哦）的更多相关文章

  1. JS数组slice()和splice()的区别

    以前还是纯小白的时候,总会搞混JS数组的 slice() 和 splice() 方法.因为这2个方法名字太像了,就差一个字母,语法也有类似之处.    现在久了没用,有时候也会忘记,所以做一个总结来区 ...

  2. Js数组的操作push,pop,shift,unshift等方法详细介绍

    js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧.不过不会针对每个方法进行讲解,我只是选择其中的一些来讲. 首 先来讲一下push和pop方法,这两个方法只会对数组从尾 ...

  3. js 数组的深度拷贝 的四种实现方法

    首先声明本人资质尚浅,本文只用于个人总结.如有错误,欢迎指正.共同提高. --------------------------------------------------------------- ...

  4. js数组删除（splice和delete）

    最近一直在写js的数组,然后就发现了很奇怪的问题,后来才发现了规律. 删除数据的一行,一般有两种方法,一个是splice,一个是delete: splice:删除了数组后,数组的长度会自动变化.用法: ...

  5. js中slice、splice、substr、split方法

    1.slice 可用于数组与字符串,返回一个新的数组,原数组不改变,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素. 在string中 slice(start,e ...

  6. JS数组at函数(获取最后一个元素的方法)介绍

    本文介绍js中数组的at函数,属于比较简单的知识普及性文章,难度不大. 0x00 首先,我们可以思考如下一个问题,如果要获取一个数组的最后一个元素(这是很常用的操作),我们应该怎么做? 相信大部分人能 ...

  7. js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip

    push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会依次添加到数组的末尾. 该函数属于Array对象,所有主流浏览器均支持该函数. 语法 array.push( ite ...

  8. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  9. [jQ/PHP]再谈使用JS数组储值的运用（提交PHP处理）

    --------------------------------------------------------------------------------------------------- ...

随机推荐

  1. JavaScript组成（三个组成部分）

    JavaScript主要包括三部分: 1.ECMAScript: JavaScript的核心,仅仅是一个描述,定义了脚本语言的所有属性,方法和对象. 具体地,ECMAscript描述了以下内容: 语法 ...

  2. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...

  3. Maven的pom.xml文件详解------Build Settings

    根据POM 4.0.0 XSD,build元素概念性的划分为两个部分:BaseBuild(包含poject build和profile build的公共部分,见下)和poject buil   < ...

  4. windows中更换Jdk版本不生效

    本机已经安装了jdk1.7,而比较早期的项目需要依赖jdk1.6,于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前,执行java -version得到 C:\Users\liuxi ...

  5. 从事务角度粗窥架构的可扩展性和可维护性：内容整理自java web轻量级开发面试教程

    大家多少了解过架构,也听说过使用架构后,代码和可维护性和重用性能大大提升.这里我们来通过一些关于事务的实例,来感性地体会下架构带来的在可维护性方面的便利.本文来是从 java web轻量级开发面试教程 ...

  6. Python之getopt模块

    1.getopt——C风格命令行解析 http://docs.python.org/2.7/library/getopt.html#module-getopt getopt.getopt(args, ...

  7. [转]oracle系统表v$session、v$sql字段说明

    在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...

  8. SpringBoot之文件读取

    SpringBoot 寻找启动配置文件规则如下: 当前目录下的 config 目录 当前目录 classpath 下的 config 目录 classpath 下的 root 目录(根路径) 上面的优 ...

  9. lua table操作实例详解

    lua_gettable lua_getglobal(L, "mytable") <== push mytable lua_pushnumber(L, 1)        & ...

  10. laravel 表单验证 Exists 规则的基本使用方法

    public function rules(){ return [ 'm_pushing_frequency_level_id' => 'integer|required|exists:m_pu ...