原生模仿jQuery的addClass添加类名方法出错

你写的addClass是独立的函数，不是dom的方法，dom没有方法你调用肯定出错的，把addClass写成dom的方法即可

windowHTMLElementprototypeaddClass = function(clas){

    if (thisclassNameindexOf(clas) < 0) {//先判断，以防重复加同样的类名

        return thisclassName += "" + clas;

    }

}

EMCAScript6（ES6）是最新的Javascript，它包含了一些很棒的新特性。这些特性拥有不同程度的复杂性，对于简单的脚本和复杂的应用程序都非常的有用。\x0d\\x0d\增加的新特性：\x0d\\x0d\1箭头 *** 作符\x0d\ 如果你会C#或者Java，你肯定知道lambda表达式，ES6中新增的箭头 *** 作符=>便有异曲同工之妙。它简化了函数的书写。 *** 作符左边为输入的参数，而右边则是进行的 *** 作以及返回的值Inputs=>outputs。\x0d\ 我们知道在JS中回调是经常的事，而一般回调又以匿名函数的形式出现，每次都需要写一个function，甚是繁琐。当引入箭头 *** 作符后可以方便地写回调了。\x0d\\x0d\2类的支持\x0d\ ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。\x0d\\x0d\3增强的对象字面量\x0d\ 对象字面量被增强了，写法更加简洁与灵活，同时在定义对象的时候能够做的事情更多了。具体表现在：\x0d\(1)可以在对象字面量里面定义原型\x0d\(2)定义方法可以不用function关键字\x0d\(3)直接调用父类方法\x0d\\x0d\4字符串模板\x0d\ 字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。\x0d\\x0d\5解构\x0d\ 自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。\x0d\\x0d\6参数默认值，不定参数，拓展参数\x0d\(1)默认参数值\x0d\ 现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或 *** 作符来达到目的了。\x0d\(2)不定参数\x0d\ 不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖，在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，x代表了所有传入add函数的参数\x0d\(3)拓展参数\x0d\ 拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply。\x0d\\x0d\6let与const 关键字\x0d\ 可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。\x0d\\x0d\7for of 值遍历\x0d\ 我们都知道for in 循环用于遍历数组，类数组或对象，ES6中新引入的for of循环功能相似，不同的是每次循环它提供的不是序号而是值。\x0d\8模块\x0d\ 在ES6标准中，JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的，比如CommonJS和AMD模式。\x0d\\x0d\9Map，Set 和 WeakMap，WeakSet\x0d\ 这些是新加的集合类型，提供了更加方便的获取属性值的方法，不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时，在进行属性值添加与获取时有专门的get，set方法。\x0d\\x0d\10Proxies\x0d\ Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的 *** 作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。\x0d\\x0d\11Symbols\x0d\ 我们知道对象其实是键值对的集合，而键通常来说是字符串。而现在除了字符串外，我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型，像数字，字符串还有布尔一样，它不是一个对象。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。\x0d\\x0d\12Math，Number，String，Object 的新API\x0d\ 对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features，对这些新API进行了简单展示。\x0d\\x0d\13Promises\x0d\ Promises是处理异步 *** 作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了when(), done()等事件处理程序时，其实就是在应用promise模式。

<nav>

<div id="nav">

<ul id="MainNav">

<li class="" onmouseover="one(1);"><a href="A">A</a></li>

<li class="" onmouseover="one(2);"><a href="B">B</a></li>

</ul>

</div>

<ul id="SunNav">

<li class="" > <a href="a">a</a></li>

<li class=""> <a href="b">b</a></li>

</ul>

<!-- 在页面中直接调用，注意id和class为字符串 -->

<input type="button" value="更改" onClick="one('MainNav',1,'123')"/>

</nav>

<script type="text/javascript">

/

通过数字，改变class名称

idName 需要修改的li的父级id

num 需要修改的li的位置（1代表第一个，2代表第二个，数量不得大于指定的id下的li的总数）

className 改变后的class名

/

function one(idName, num, className) {

var _li = documentgetElementById(idName)getElementsByTagName("li");

_li[num-1]setAttribute("class",className);

}

// 函数中调用

one("SunNav",2,"456");

</script>

以上就是关于原生模仿jQuery的addClass添加类名方法出错全部的内容，包括:原生模仿jQuery的addClass添加类名方法出错、javascript最新的版本是什么引入了一些什么新的特性、如何用原生js改变某id下的li的class等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！