137.尚硅谷_JS基础_类的操作

字符说完了呢，接下来我们再说一点东西啊，说一点东西来什么呢？呃，零二，我们说一些叫做一个类的一个操作啊类的操作什么叫类的操作呢？类我们叫什么呀？Class对吧？来class，那这里边我来整一个div div给他来一个井号，叫做一个BOX1，那div呢，我再给他来一个这个点，咱们就叫这个box来一个叫一个B啊这么一，然后呢，在上边我这来一个button button button给他来个ID，叫做一个B，天零一我要做这么一个工作叫什么呢？叫点击按钮以后我要干嘛呢？我要修改这个box，呃，Box的这个样式啊样式，那我们这儿呢，先给它写改样式，直接来一个style，我这来什么呢？点一个第一啊，通过class来给它设置样式，来一个这个两叫做一个100个像素呢，也来一个100个像素，然后color来什么呢？来一个这个。

嗯，CTRL1运行，诶是不是这么一个效果呀，红色的一个div上边一个按钮，那呢，这块我要给它加俩换行，一保存一刷新，诶那这功能一看你就明白了，我希望干嘛呀，我一点这按钮这样式是不是就它就变了呀，你可以变宽一点，或者变高一点，或者颜色变成一个黄色都叫变这个样式，这东西其实我们以前已经做了很多遍了，来做了很多遍了，那来看这功能我们怎么做呀，来先写一个script的标签，来一个这个window，点一个unload，等于function，等于function呢，这里边我来写一个，那既然要操作这两个了，那首先毫无疑问我先获取我们这个B天零一，直接挖一个B天零一，等于一个document的点一个GET100IDB天零一，那既然要操作那个box，我们也是来获取我们这个box，直接挂一个box，等于一个document，点一个guide by ID来一个这个box，诶，Box也有了B天一。

也有了，那接下来呢，哎，为我们B天零一来绑定我们这个单击想要函数B天01.1个on click等于一个function，等于一个function呢，然后我们就来，诶那在这里边我要修改我们这个box的样式吧，诶box样式那怎么改呀？哎，比如说我要修改什么呢？诶修改它的这个大小宽度，诶直接改吧，修改宽度怎么改啊，直接就是box.style.y比如说等于一个这个200个像素，诶那我是不是把宽变成200了，诶我这一保存咱们来看一刷新我这一点是不是快变成200了，再来看来什么呢？来一个box，我还想修改一个高度style，点一个he等于一个200，高度是不是也变成200了呀？一保存可以刷新一点，是不是都变了，诶我还想干嘛呢？改变一个背景颜色，直接来个box点一。

自带点一个back ground color等于什么呢？等于一个这个YELLOW1保存咱们再看一刷新，这不就全变了呀，哎，变成红色了，变成黄色了，然后是一个200乘以200这一个正方形，那像这种东西我们已经很熟悉了，这种top已经很熟练的就能给他完成了，但是我们来看看这种操作它他有没有什么问题呢？有没有什么问题呢。诶注意了，我们要说一下我们这里什么呢？通过我们这个style属性来修改元素的这个样式，我们什么呢？我们每修改一个样式，我们的什么呢？浏览器就需要重新渲染一次页面啊，每修改一个样式浏览就需要重新渲染一次页面，那现在我们这修改几个三个样式，我们览器就需要干嘛呀，重新渲染三次页面啊三次页面，所以这边我们来说，那这样的什么呢？这样的执行的这个性能是诶是比较。

比较差的啊，要修改这个三个，而且还有什么呢？而且还有一个问题，那现在你看啊，我现在就是想修改三个样式，我如果想修改30个样式呢。我是不是还有一行一行写呀，咱们不考虑性能问题，我们写的是不是也比较麻烦呀？哎，而且什么呢？而且这种形式，哎，当我们要修改这个多个样式时干嘛呢？它也不太不太方便啊，也不太方便，诶你要修改30个，我就要写30个，你要写300个，修改300个是不是要写300个呀，那咱们这个需求是夸张的，但是你可能会遇到这种需求，就是实在是太麻烦了，而且还有一个问题，现在我们这一块是用来干嘛的呀，我是在用GS去直接修改这个CSS样式吧，那我们叫什么呀？诶，这个GS是我们这个行为是吧，CSS是我们这个表现，那我们这么一改，我这个CSS和我GS，也就是我这个行为和表现是不是又耦合了呀？哎，又合了，我要改的时候是不是就比较麻烦了，哎，我想改GS，我想改CSS，我还得上GS里边去找东西，我是不是去改呀这种的。

比较麻烦，所以在开发中呢，我们不，诶我们不建议大量的使用这种东西去修改这个样式，不建议这么用，那怎么办呢？你不让这么用怎么办呢？诶我希望什么呢？我希望一行代码，诶一行代码可以什么呢？可以同时修改。多个样式啊，一行代码可以同时修改多个样式，这个东西怎么玩呢？来，那现在来看，现在我这个box之所以是100乘以100的一个红色的一个方块，因为它有一个class叫B吧，诶它的所有样式我们是不是通过B一来设置的呀？好，那这样啊，我再来一个class，来什么呢？第二一个第外来一个为什么呢？200个像素派来什么呢？200个像素color来什么呢？来一个yellow啊来一个yellow，我又创建了一个class为B2，那现在我问你，如果我将这个什么呢？将这个box的class修改为B2，那它将会应用到谁的样式？

是是第二的，还会不会用B1的了，不会了吧，哎，来我们再来看看来干嘛呢？修改我们这个box的class属性，怎么修改呀，Box点一个class name class name等于什么呢？等于我们这个B2，这是就OK了，诶来咱们看效果啊，这样诶看啊那现在我一点这个按钮，它还是不是改样式了。不是了吧，是改class属性吧，哎，Class属性来我这一保存咱们来看啊，咱这一点走你。

是不是也变了呀？诶咱们再看清楚一点啊，来我一刷新一下，咱们看这现在选中box box class是B对吧？好，那现在我这一点走，你变成什么了，变成B2了，变成B2同时干嘛了，是不是它也应用上我们B2这个class所对应的那些样式，哎，样式啊，所以这块注意我们可以干嘛呢？诶我们可以通过修改我们这个元素的什么呢？Class属性来干嘛呢？来间接的这个修改什么呀？样式你注意了，我有没有直接改样式没有，我只是改的什么呀？Class，当我修改class的同时，这个类所对应的样式是不是也会应用到我们这个元素上啊，诶我这个是间接的，所以注意啊，我们修改class并不是目的，我们是干嘛呀，我们是要通过修改class来影响这个样式啊，来影样式，那这样有什么好？

处啊，那你看我几行代码啊，一行代码，但是我去修改了几个样式，是不是三个呀，现在我这写了三个，那我要写30个是不是也行啊，哎也行，那这样的好是什么呀？这样的好处我们只需要干嘛呀？哎这样一来，哎我们只需要修改一次即可，什么呢？即可同时修改什么呀，多个样式啊即可同时修改这个多个样式，那然后呢，诶即可同时修改多个样式，那我们说什么呢？此时浏览器只需什么呀，只需要重新渲染页面一次，诶重新渲染页面一次干啥了？诶性能比较比较高啊，性能比较好啊性能比较好，并且什么呢？并且它，哎这种方式可以什么呢？可以使我们。

这个叫什么呀，叫做。诶叫做表现和我们这个什么呀，行为干嘛呢？哎，进一步的什么呀，分离，也就是说我不再通过我们的什么呀，通过我们这个GS来控制具体的样子，我们只控制什么呀，Plus有一天可能你那个CSS他希望什么呀，我不希望你这块宽度是200了，害的是200了，我想是250，都是250，那怎么办呢？我还用不用动GS呀。不用，我是不是直接把这改成二百五就行了呀，或者咱们改成300直接改这我用不用读GSGS压根就不用改啊，不用改一保存一点是不是就变了呀，哎，就变了啊，所以注意这是将我们这两种这个语言进一步给它分离啊，通过这个修改class的一个方式啊，修改class一个方式，好，那这个呢，是我们说的一个这个class，这个name啊，修改这个class，那现在我们就来看一个问题啊，哎，假设咱们现在呢。

我现在呀，我不想修改它的这个宽度，我只想修改它的这个高度，还有这个背景颜色，我是不是不要改这宽度了，哎，不改宽度了，那我这么一改呢，我们来看效果啊，我这一刷新我这一点哟，我没改宽度是吧，但是宽度这是不是也。也没了呀，是不是现在变成我们这个副元素100%了呀，为什么是这种情况。我现在我这个B1我是不是给去了呀，B11去，也就是说B1所有对应的样式是不是都没了呀，我们只有这个B2的样式，但是有的时候干嘛呀，我不希望去掉B1，我只向干嘛呀，把B2给它加上吧，哎加上那这块要怎么办呀，那就不能这么写了，因为我这么一写是不是把把所有都给都给覆盖掉了呀，我需要干嘛呀，在它原有值的基础上，我是不是增加一个B2啊，那怎么办呀？诶我这是不是来一个这个加等于啊，哎，加等于那这么写行不行，我一保存咱们来看一点完了。

都没了吧，为啥呀？诶B1B2是不是给你拼拼拼一块了吧，他俩之间差个什么呀？是不是差个空格啊，诶所以注意啊，你这拼的时候，这要给它加一个空格，这样一保存，你一刷新走你是不是就行了呀？诶这样是不是既有B1又有B2了呀？哎，他们两个样式还都可以同时应用，而我们B2和B1相同的就是什么呀，B2呢，把B1就给覆盖掉了啊覆盖掉了这是我们说的叫做一个加啊，给它加等于好，那现在这个东西我们会用的比较多，那这样呢，我在这希望干嘛呢？我希望定一个函数，我们来干嘛呢？定义一个函数用来干嘛呢？用来向一个这个元素中添加我们这个指定的class属性值，那怎么办呀？直接来一个function，我们叫一个A的class叫什么呀？是不是添加一个类啊，哎，A的class，那这里边我们需要传什么参数啊。

诶，首先第一个问题，诶你给谁加吧，第一个是我们这个obj啊obj我们来说一下这个参数，第一个是我们这个obj obj表示什么呢？表示我们这个要添加这个class属性的这个对象，要添加class属性的这个元素，那第二一个呢。那你要添加class属性，你要添加哪个class属性吧，诶所以第二一个我们需要一什么呢？就来一个叫一个N叫什么呀，Class name啊class name来一个CN，这是我们这个要添加的这个，诶class值啊class值，所以现在我就是把这个CN作为这个class，是不是添加到这个OB接里啊，诶那怎么写呢，直接来一个OB接点一个class name啊class name来什么呢？加等于CN这么写行不行。

少一什么呀，哎，是不是还是少一个空格啊，这样是不是就对了呀？哎，来咱们看看行不行，直接来一个艾特class，来一什么呢？来一个box，然后逗号我来一个B2，这不是加进来一保存，咱们来看效果一刷新再一点是不是就进去了，那就进去了啊，所以以后我们再添加就可以使用我们这个I class这个方法这个函数了，但是它有没有啥问题呀。诶，看我现在里边是不是有一个B对吧？哎，我这一点咔是不是加进去了，哎，我再一点咔。咔咔咔咔咔咔，这这玩意儿挺有意思是吧？你发现什么问题了，我每点一次是不是都加一个拉B2啊，点一次都加一次，你点一次加一次，虽然它对我们这个页面不会产生什么太大的影响，但是这玩意儿有没有用啊，这一堆小B2看起来还挺恶心的是吧？诶，那我们说了，如果说你没有像这种情况，你加也就加了对吧，但是现在有没有啊，有了有了你还还加不加了是不加了呀，哎，不加了那怎么办呀。

诶，那我是不是希望有一个方法能判断一下我一个div里是否含有某个class呀，哎，所以呢，我现在需要第二个函数叫一什么呢？叫做一个function，叫一什么呢？叫做一个has class什么意思啊，是不是就有没有啊，哎，有没有，那我们来说它的作用干嘛呢？叫做一个判断一个元素中是否含有什么呀，指定的这个class属性值啊，指定的class属性值，那这块我们来看我怎么去判断呀，还是它这参数参数需要谁呀，是不是还是这俩呀，诶一个是我们这个obj，还有一个是我们这个CN，哎，Obj是什么呀，我们判断这个元素CN是我们这个class属性值吧，换句话说，我是不是就要判断我这个OB阶里边有没有CN呀，哎，有没有CN这个class啊，所以这里边我们需要做的事叫什么呢？判断我们这个OB阶中有没。

没有这个CN，这个class，诶，那我们来说它。怎么处理啊？是不是应该给我一个返回值啊，哎，返回值我们说什么呢？如果有该class则返回处，没有则返回。False，那我是不是通过你这返回值，我就可以判断你一个类里边是一个元素里边是否含有某个类啊，那这块我要怎么判断呀，那我们先说这么写行不行，我来一个直接re return一个obj，点一个class name来一个等等于CN这么写行不行。

行不行，诶咱们来看看吧，咱们来看看现在我把这艾特class能给住了啊，我直接来一个来什么呢？来一个这个alert alert1什么呢，叫做一个has class，我来一个来什么呢？Box逗号来一个B1，我是不是看看这个box里边有没有be啊，诶来，如果有是应该反问处没有是吧？反force呀，诶我一保存，咱们一刷新，再一点走你诶处。有B好使了是吧，哎，咱们再看啊，我来什么呢？等等于这个来换一个B2，我这一刷新走你我这一点。Force是不是没有边啊？好使了，真好使了吗？来，注意我把B2我给他。加上现在有没有BR啊，有了我这一保存，咱们再看一点，哎哟，还是force，为什么还是force，现在它的class属性是什么呀？是B1空格B2，它和B2相等吗？不相等吧，所以它会返回false，但是注意了，那这里边有没有B2啊，有B2，所以这个判断它是不是不对啊，诶不对，我们要判断什么呀，我们要判断这个class name中含不含有B2，而不是看它是不是和这个B2是不是全等啊，所以这块注意用这个相等那就不合适了，那怎么办呀，那怎么办呀？

是不是应该用我们那个正则表达式啊，哎，正则表达式啊，所以你要检查我们需要干嘛呢？我们需要创建一个这个正则表达式，我怎么创建呀，Y一个reg等于一个这个斜杠斜盖，我们来一个这个假设，我们就B2，我就来写什么呀，B2这不就这么一个正则表式啊，然后我要干嘛呀，我要return的是我们这个reg，点一个test obj点一个class name吧，诶我用的是这个正德雅式去检查我们这个class name，也就是说如果你这里边有B2，我是不是返回数没有，是不返回false，大家注意啊，我这写死了，现在是B2啊，永远是B2，我现在一保存，咱们再看，我一刷新，再一点是不是true啊，哎，True啊来，我把这B2我给他删了，是不是没了呀，再一点。

是不是就false了，哎，用这个正则贝雅式是不是就行了呀，但是真的行了吗？这有没有什么问题啊。有没有什么问题，哎，我可能是什么呀，我可能只有B2也没问题，是不是也没问题啊，哎，只有B2也没问题，但是怕的什么呀，我可能是B2016。对吧？诶B2016你说有没有BR，这里边这没有BR，这哪有BR，它没有B，应该是没有B2吧，但是他会给我们返回什么呀？哎，他会给我们返回处，我这一点是不是处啊？哎，为啥呀？诶我们这个B2这个正则表达式，只要你这里边有B2是不是反应数啊，B2016是不是也是B2啊，而我们不仅要求你得有B2，你这B2还得是一个什么呀，独立的单词吧，哎，你不能和其他的是不是挨着啊，那怎么办呀？哎，我们是不是有一个单词边界呀，来一个杠B前边一个后边一个表示什么呀？你B你得有B2，且你这个B2还得是一个独立的吧？诶独立的我这样一保存，咱们再看一刷新，咱们一点现在有没有边，诶一点是不是就force呀？诶就force啊来，我把这个2016，这个016我给它删了一保存这一刷。

心走，你是不是就处了呀？哎，所以注意啊，我们这个杠B叫做一个单词边界，还记得吗？诶好啊，那接下来我们再来说，这写完了，他说这不行啊，你这个东西写完了，他是不是永远检查有没有有没有B2啊，而我们要检查谁啊，是不是这个CN啊，那我一想，我这么写吧，改成CN行不行，千万别这么写，这么写就可能大字透透，你还不如那个边上呢啊，还不如边呢，这么写是不对的，一定注意字面量，你这么一写你就写写死了，我们需要去动它，就设置吧，如果CN是B2，我这里边就写B2，如果CN是B1，我是不是写B啊，如果CN是hello，我是不是就写hello啊，但是你用这种方式不行，所以我们这一块必须得通过什么呢？哎，我们那个构造函数Y一个reg等于什么呢？New一个re regular X，然后在这里边我们去传这个什么呀，构造函数，哎，构造函传这个。

整个表达式我直接传什么呢？我传一个这个CN，哎，直接传1CN行不行啊。直接拆C行不行，诶我们来看看alert一个这个reg直接A了它IG啊，我这一保存，咱们来一刷新走你一点，诶是B2是吧，因为我们参数传的是B2，但是差什么了，那杠B是不是没了呀？哎杠B是没了啊，所以这块注意我们在前边还应该再写一个这个什么呀，杠臂那注意怎么写，我是不是得给它拼个串啊，诶拼个串那注意了，看我这么写直接斜杠B行不行，哎注意啊，在这里边得写两个鞋杠鞋杠鞋杠B啊，这块也是鞋杠鞋杠B啊，我这一保存，咱们这回再看一刷新再点是不是这个效果了呀，诶鞋杠B，然后。

哎，我写成啥玩意儿了。刷新一下啊，看看这是一个。哦，我写哪去了，哎哟，我这是这这是特别有意思的一个事是吧，竟然写这了，应该写哪啊，是不是应该写构造函数里边啊，我写到这个乐里了，这要对就新鲜的了是吧？哎，这要对就新鲜的了啊，所以注意啊，写这啊写这把这东西给它删了来。

啊对，这应该是这个CN啊CN，我这个保存咱们这再看啊，一刷新咱们再一点这个是不是就对了呀，诶前边有一个杠币了，那它有什么好处啊，现在你传的是B2，就检查B2，如果你是传的什么呢？你传的是一个hello，它这正大是什么呀？不就hello啊，诶它的好处就是可以去动态的去生成这个正则啊表达式，所以接下来我们这改一个正能表达式有了，那接下来我们是不是就返回这个正能表式去检查这个class内呀，诶这一块就写完了，好，我们在测测好不好用啊，现在我这个has class box hello是不呀，检查我这个box里是否有。Hello，这个class有没有啊，没有吧，是不是就是false呀，哎，就是false啊这么一个效果好，那写完了我们就可以用一下了，那怎么用啊，你这是不是一个艾class呀，艾特之前我先干嘛，哎，我先检查什么呢？我们这个OB接中是否含有C，直接来一个if obj点一个，诶不是OB点啊，直接点一个has class谁呀obj，然后逗号一个CN，我是不是这个意思，就是检查它里边是不是有C这个class呀，如果有，那我们还管不管它了，不管了吧，因为我们是I的，是不是添加呀，如果有我就不管了，那什么时候材管你没有的时候材管吧，所以你没有我才给你加，如果你有我就干嘛呀，不管你了啊，就不管你了，我这一保存，咱们再看还是掉一个这个爱的class，看看行不行，保存这一刷新，现在有没有B2，有吧，有我这一点走你走你走你。

进去吗？诶进不去啊，进不去来，我把这B2给他删掉，现在有没有B2了，没有了我一点走，你是不是加进去了，再点是不是又进不去了，哎，又进不去了啊所以现在我们这个艾特class呢，就更加的完善了，有我才给你加，没有我就给你，诶不是没有我才给你加，有我是不是就不理你啊，哎，有我就不理你啊，就一个at class，还有一个叫做had class，这两个函数，好，那这两个东西写完了，我们说有添加了，还有一个判断它有没有了，那我们还需要一个什么呀？诶可能我觉得还需要这么一个东西叫什么呢？Re Mo叫做remove class，是不是移除删除一个类啊，诶那我们来说一下它的作用叫什么呢？删除一个元素中的这个指定的class属性，那怎么删呀，需要什么参数，是不是还是这俩啊，一个是obj，一个是我们这个class name啊class name那我怎么删呀。

我是要删的话，假如说我想把这个B2我给它删了，那我是不是就把这个B2替换成一个空串就行了呀，诶换成一个空串是不是删了呀，所以这块我们要用的是谁呀？是不是我们那个RI类死呀，诶把这个B2给替换成空串，那我们要替换，我是不是还得先去创建这个正大式啊，诶来创建一个这个正则表达式，直接挖一个IG，我就直接呀复制过来了啊直接复制过来了，正左表是有了，那我问你我删的时候我还用不用判断有没有了。

用不用判断了，爱有没有，有我就删，没有我时候就不删呀，让它自动去整去啊，自动去整去，所以呢，接下来我们要删除我们这class，那怎么删呀，直接来一个我们叫做一个OB接点一个class name等于什么呢？等于OB接点一个class name点替换的方法叫什么？哎，Re replace啊，Re replace re replace，我们这传一个第一个参数我们来什么呢？诶，Re replace，第一个参数我们来一个叫做一个什么呀，Reg，第二个参数来一个什么呀，空串吧，哎，空串什么意思呀，我是不是用空串去替换我们这个对应德能大师这个内容啊，都换成空串了，是不是就没了呀？哎，就没了啊来咱们再看效果，叫做一个removeval class，这会给它住了，来什么呢？来一个re move remove class来一个obj，我这逗号来一个这个B2，移除这个B2，我这一保存，咱们来看效果一刷新，现在是不是这个玩意儿啊，诶，然后我这一点走你。

看看有哪写错了啊欧啊应该是box吧，诶应该是box啊，一保存咱们一刷新这一点是不就没了呀？诶你看现在删之前是不是还有这B2的呀，我这一删一点走，你是不是B2就没了呀？诶就剩了一个这个B1啊，我们叫做一个remove class，移除一个啊移除一个类，好，那现在我们这有什么呢？有我们这个a class添加has class呢，有没有remote class呢？移除是吧？诶删除一个类，那还有一个呢，还有一个我们来说一下，还有一个其实呢，诶除我最喜欢的一个方法叫什么呢？Togo Togo class参数呢，还是这个obj和cn Togo什么意思呢？叫做什么呀？切换啊，叫做切换，我们来说一下Togo什么意思，Togo class可以用来干嘛呢？可以用。

再切换一个类，什么叫切换一个类呢？如果元素中具有该类则什么呢？则删除啊，则删除，如果元素中没有该类则什么呀，则添加，那什么意思呀？有我就给你删了，没有我就给你加上啊，没有给你加上所以叫什么呀，To狗叫做切换啊切换一个类，那我们来看我怎么办呀，那我先来第一件事先来干嘛呢？先来判断我们obj中是否含有我们这个CN，直接来一个if，一个has class来一个obj，然后逗号来一个CN，那如果你有我怎么办？哎，有是不是删除啊哎，则删除来什么呢？来一个，我们直接来一个叫做一个诶remove class来一个obj，是不是来一个C。

哎呀，诶再来一个else else什么没有吧？诶没有则添加啊来什么呢？哎，爱的class obj来一个逗号C吧，哎，这叫一个to class啊切换一个类，那这块我们再看什么效果，这里边呢，我们把这个remove给它注掉了啊直接来一个tole total class来什么呢？Box啊，然后来一个B2表示什么呀，对这个BR进行切换操作，那怎么切换呢？我们来看现在有没有变有我这一点咔是不是删了呀，现在有没有没有我一点是不是加上了，再点右删，再点右加，你这一点是不是就在这两个类之间进行这个切换呀？诶切换啊叫做一个Togo class啊to class好，那这也是我们这些这个class相关的方法，那其实最好用的其实还是谁呢？我们这个脱class啊，它的功能是最好用的，它可以干嘛呀，比较智能，可以自动的去给你切换啊。

好，那这些呢，是我们一些class相关的一些操作，那这些操作其实我们也会比较常用，那这里边呢，我们就不妨干嘛呢，把它们一块CTRLC给它粘到我们的这个什么呀，诶这个兔子这里边啊，咱们攒一点这个工具，但是我们用的时候呢，更加的方便一些，Ctrl shift f格式化一下，诶我们这个代码是不是就就齐了呀，哎这些类如果以后再用这个方法，直接引入我们这个工具这个类就行了啊工具类就行了，保存一下，我们来评一下。