00:00
下面我们来做一个常见的小功能啊,看一下这个功能叫多table点击切换,这种效果大家应该能够见过,对吧?OK,当你点击不同的table项,这叫这这每一个都叫一个table项。啊,下面的内容是不是切换成对应的内容啊,啊就这样的一个效果,那我们现在想这个东西该怎么做呀?啊,我怎么根据它来去研究一下这个东西,它到底它是怎么实现的呀。是不是得看我操作过程中,内部的那些动物元素是不是发生了什么样的改变呢?啊,先看一下它的结构啊,它的这个结构首先是一个ul里面有三个什么,是不是三个ii啊,而这三个ii肯定加了点击监听吧,啊必然的,好,我先回到初始状态啊。好,这是那个table。
01:04
那三个table下好,下面下面这些东西是什么,我们看一下啊。这都啥呀?大家看一下,那也就是说实际上这个下面是不是有三个第位啊。有三个D,但是当前显示了几个?一个在某一个时间点就显示一个。那现在是不是显示的是第一个传导,也就这个内容看到了吧,内容当我点击它的时候呢。显示第几个内容,第二个。你看。能不能看到,而且显示隐藏是通过什么样的方式显示隐藏的,是不是这display它的值来控制的。看到吧,啊看到嗯,当我在点击的时候,你看他们是不是在做切换的做改变,就这模式。
02:08
那现在呢啊,我们也要做出这个效果来。这个叫多退保,点击切换看一下我们当前的,现在我点有反应吗。没有。对吧,没有反应啊,但现在是不是当前显示的还是第一个内容部分。啊,我们来看一下,首先呢,是最上上面一点,是不是有一个UI有三个代表那三个table。啊,接着呢,在这一个下面这个div里面三个子div代表下面的三个内容,但是一上来的时候,第二个和第三个是什么隐藏的,只有第一个才显示。好,现在我们要用这块去实现刚才的效果,先做什么事情?
03:06
是不是引入啊,引jary接着写我们的代码。好,写吧。那写的话,我们首先想到肯定要给他们加监听。是不是,哎,给三个ii加监听。咋加呀,看一下首先找到他们这三个呗,括号怎么找到这三个了。别直接写ii,那样效率太低,我刚刚跟他说过了,先要通过ID找到他附近的,最好是。能不能懂,你得先找到ul,但你别别写ul,你写这个看懂吧。接着是他下面说的什么。
04:02
这是不是就找到了?好,那接着呢,接什么?可这一点其实非常牛逼的,怎么牛,你说老师怎么牛逼吧,因为我现在一下子匹配了三个ii,我就这样的话给每个I都加上监听。都加上了监听,能不能看到啊,OK,大家可以看一下,我我先随便打个乐一下大家就知道。有没有有。是不是都有,嗯,这个东西叫什么呢?叫影视变异。它内部你想想看,我们现在都有了监听,它内部做了个什么事啊,是不是便利每一个匹配的元素,给他们每一个都加监听呢,这叫隐私便利。
05:01
啊,前面我跟大家强强调过这块的两个特点,面试调用以及读写合一是吧,还有一个非常重要的概念叫影视便利啊。好,那下面我该做什么事情去了,大家想啊,下面我是不是要去将我当前点击的这一个所对应的什么。Div给它显示出来,还要将以前显示的这个div给他什么隐藏起来,这怎么做呢?我有两种做法,一种我管他三七二十一,把这所有的div都先隐藏。先都都先打开哈,我只要打开一个,我是不是要先把所有的隐藏,再找到我对应的那个给它显示。能不懂啊,那我是不是先找到所有div再说啊,找到所有DIV1上来就可以找到吧。
06:02
也是什么意思,看着啊,我过一个多乐福看。怎么写?先是这一个,这个里面有一个什么ID,接着呢,找它下面所有的什么div元素。对吧,我简单的做法是不是先把他们所有都隐藏。对不对,先是隐藏。啊。隐藏所有内容部分啊,所有内容好,怎么隐藏呢?他。是不是要给它加样式,加样式用什么方法CSS接着呢。它什么样是零呢?Display吧,值是多少呢?那么。
07:01
对吧,对的,但是呢,你要这么整的话,那一个都看不见了。你看,我们现在来试一试。走。是吧,关键是我要显示什么对应的内容。能不能懂这意思吧?好,那关键是我怎么知道哪个是我对应的呀。是不是你想啊,我们的顺序大家看啊,这里的三个和这里三个是不是那个顺序是一一对应的。我,你说我该怎么办?怎么找到对应关系啊,下标啊。是不是什么意思,你想想看,譬如说我点击的是它,它的下标是几一,那我是不是找到一所对应的下标就是可以。
08:02
能不能懂好先,我怎么知道我点的是哪一个下标呢,是吧,也就是说我要知道我点击了当前这个ii的下标吧,来。我要先想办法干嘛呢,得到当前点击啊,点击的ii在兄弟中的什么。下标。那当前点击ii的下标,因为我好像记得有一个方法,就是刚好用来判断在兄弟中的下标的,有一个方法叫什么index,还记不记得,我还说后面有用的。是不是,那关键是我怎么样得到当前的这一个div,这我点击的这I这块对象呢,我要得到这块对象才能去看用index。
09:01
我怎么样去得到当前点击的ii的这块对象,它才有这个index方法。对不,那我当前我能不能这么写。认识是谁当前点击的,我给他一包。它就变成什么几块对象了,再index是不是就得到它的下标了,是还是不是是那有这个下标以后我做什么呢。我是不是要找到对应的div内容,Div是吧,这个好找吧,这不是所有div吗。是不是,怎么找。你有下标了,你还找不到这个元素啊,中括号index,只是现在找到的是什么类型的对象,是切块对象还是动元素?
10:03
是动物元素。那找到这个动元素,我是不是要调用多姆的方法才能让它的这个第十倍等于什么block吧?我要叫他写是吗?对不对?好,你说我该怎么写啊,操作style怎么办点呀,是吧,超过它的什么样呢?第是play等于什么值block。人说老师我不想操作原生的,我要问大家的,你说是原生的效率高还是这块的效率高,我告诉大家是原生的。就这种操作,就单一的操作,单一的操作是原生的效率高,为什么?因为你用你用这块的方法,它本质上还是用的你这个代码。
11:07
但他是不是要内部要多执行一些代码。能懂吧,哎,那我有人说老师我不用这个原生的,我该怎么写呀。是吧,那你说不用原先的,我该怎么写。也就是说这一个得出来的是一个什么懂,我要把它包装,为什么。不要包住一起块吗?怎么包啊,放到这个里面去嘛。是不是,那下面呢,点CSS的括号,接着跟上面的写法是什么一样的,呃,第play是吧?值是什么?Block也就是我这么写的,本质上它也会这么做的。能不能理解,那你的那上面这写法肯定效率要高一些。
12:01
有人说老师是不是下面的话不能用。不是有人说效率相差多少,你根本就看不出来。啊,就这点东西相差很大的话,那还不完蛋了,只是说我们作为一个追求极致的程序员。啊,你要去想这种事情啊。好,这两个实际上是都可以啊,那也就是说下面应该是什么完成了吧,看一下。走走可不可以就可以没有问题啊,松松的。好,这是一种方式啊,其实还有另外一种方式,还有一种方式啊,什么意思呢?其实这种方式的效率呢,嗯,我还能提高一点点,就在这里。有必要所有都隐藏吗?你想啊,我我一共有三个对不对,我只有某一个是是显示的吧。
13:05
我假设我点了第三个,那是不是它需要它需要显示,而只有它是不是需要隐藏。也就是说需要隐藏的是不是就一个,对不对,需要隐藏,当前需要隐藏的就一个,而我们这里面是不是做的所有的都去隐藏。是吧,你是不是每个都操作了,每个都操作了,其实你这个第二个和第三个本身就是什么,就隐藏的。但是你是不是又把他们操作了一遍,没必要吧。啊,没有太大必要,那如果我们要追求极致,我们应该怎么做了,来。啊,我再来一个啊,再来一个我们这里面呢,这里面我先把它注意一下啊,先把这个整体的注意一下,好,如果你追求极致,那你是不得知道我当前显示的第几个。
14:03
对不对,就我当前显示的那个那个看探它的下标是多少吧,也就说我要知道当前显示的下标是多少,我才能有机会直接去把它隐藏起来。那你说一上来谁是显示的。也就是说啊,这里面我们来一个current index,它才是等于几等于几零,这个标识是什么?当前显示的内容div的什么下标。这个下标是不是在兄弟中的下标啊,它开始危险为零,好啦,那有了它以后,我现在是隐藏所有的吗?需要是不是要隐藏什么,当前显已是已经显示了吧,对不对啊,隐藏当前已经显示的。
15:06
6EV,那我怎么怎么找他呢?隐藏当前已经显示了,大家想我是不是有这个下标网。那我是不是有所有的,那你说我该怎么做,非常简单嘛,来一个current什么index,再来一个这个。我就不包了啊。是吧,只是职,为什么。那。对不对。接着我是不是要显示对应的当前需要显示的。那要显示的,我该怎么办呢?这边的搞法是什么一样的,这边的搞法是一样的,好啦,我做完以后够了吗?够不够不够,那不够,最后一步我要做什么事情去更新下标对不对,那怎么更新卡等于。
16:06
Index吗?因为我这一整的话,显示的是不是就是这个index所对应的div了,那你不得更新一下吗。那如果我不更新那个看以老为家啊,以老为零啊,这不对了。能不能看出来来好了,来看一下我们这种搞法对不对,可不可以。是不是也可以?是吧,啊也可以没有问题。你说老师,我感觉第二种好像写起来麻烦一点,那确实写起来稍微麻烦一点。但这种思想大家应该有。这种思维大家应该有,这种适合于什么呢?如果里面的元素比较多。你就想嘛,我这个里面呢,这个月这个div假设1000个。
17:00
那就不一样了,能不能懂要1000个的话,那你前一种做法是不是要去操作1000个元素。是不是啊是,而我这个是不是只需要操作某一个。那还是不太一样。啊,下面这个稍微编码麻烦一点。但这种思维大家一定要具备啊,因为后面我们会用这种思想去写东西。啊,就记住我当前的下标是多少,就简单就一句话啊。好了,这样的话,我们就实现了一个这样的一个简单的table切换。他说来也不来啊,但是呢,也要写点代码吧。
我来说两句