js----数组处理之splice（有js原始addClass方法哦）

最新推荐文章于 2024-04-23 15:57:32 发布

你所有承诺

最新推荐文章于 2024-04-23 15:57:32 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js addclass js splice js 数组处理 js 数组元素删除 js 数组元素插入

本文链接：https://blog.youkuaiyun.com/stronglyh/article/details/46860199

js 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了如何使用传统JavaScript实现DOM类的增加、删除和检查操作，包括使用传统方法替代jQuery中的addClass、removeClass和hasClass方法，并通过实例演示了传统方法的使用方式和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上次写了一个轮播的方法：http://blog.youkuaiyun.com/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比较方便啊。