00:00
下面呢,我们来看关于节点的替换,叫replace,它把一个给定附件里边的一个节点替换为另外一个节点,什么意思啊?这是一个负节点,它把旧的节点换为新的节点,注意哈,新的在前边,旧的在后边,返回的是一个已被替换那个子节点的指针,就是什么那个旧的指针,这个方法呢,除了替换以外,还有移动的功能,该方法只能够单向替换,不能够双向替换,双向替换的话呢,我们可以自己来写一个函数,这个我们再说,先看这个倒八。几点的提款?好了,测试。
01:02
叫replace方法,节点的替换。好,那我们先不说需求啊,我们先说这个替换,我获取一个什么节点呢?我获取一个这个来北京,再获取一个红警来wall北京节点等于document.element BYD。北,最后有一个忘ill not等于document.at艾特的D谁呢?2L。啊,两个节点有了,我完成一个节点的替换功能,那我写一个负节点吧,比方说我写一个no。点等于government.by。
02:05
ID你看着啊。地铁怎么办呢?我想进行替换。Child可以new啊,Newl新的旧的北京啥意思啊?我想把北京这个替换为RL,看一下效果。是不是换了呀?看不着哈,这么看能停一下。这个很放心,这是北京红警,这是以前的吧,我说要把北京QQ红警,你看红警上去了吧,说我这个节点替换啊,除了替换以外的话,还有一个移动的功能,这就是节点的替换,诶它除了可以替换以外的话呢,还有一个移动的功能,就是刚才这个效果呗。
03:16
换完了,换完之后的话,我们觉得这么换其实不咋好,我怎么办呢?我能够实现这种节点的互换吗?注意哈,我想实现节点的互换,我们这个方法就测试完了,这个方法本身还是挺简单的。嗯,具体需求的话,我这块都有具体这个使用方式是吧。在这如何替换的话呢,这块我们都写清楚了,那现在的话呢,我们想有这样的一个需求,是说我想实现这两个节点的互换啊实现实现谁呢,北京。节点和RL。
04:01
节点的互换就是跟把含量换了啊,是互换,互换这个事儿应该怎么办呢?要是。互换的话,你就像两个变量,两个字符串是吧,那个值互换一下,你怎么互换。得有一个这有一个这有一个中间量吧,否则不行,就是A是比方说A那个字符串是abcb,那个字符串是DEFDEF想互换的话,我还需要一个中间的,这个道理是一样的,我们先来写如何互换,互换的话呢,应该是这样是吧,我把这个呃,北京换为。RL,同时L是不是也要换回北京啊?所以说我还需要获取一下这个game节点,写一下吧,这先不要了啊,过来过一个game no等于document.get element by ID。
05:00
嗯,写完好了,那我无论是先换哪个的话,我先换的时候,比方说我以前以前啊,我把这个刷新一下,我把这个什么呢,北京换为红景,这红景里不能没吧,因为红景我一会儿还要换成北京呢,所以说再换的时候的话呢,我们应该有一个克隆的节点。看克隆啊,北节点或北京node to等于北京node点克隆,克隆这个家伙有一个。米叫D。Deep什么意思啊?深度是吧,怎么克隆这地方啥意思呢?看API吧。这里边找到接SE那点克隆看着啊。
06:04
克隆not deep啥意思啊,如果要是真的话,它可以克隆什么呀?它可以克隆这个子节点吧,所以说这个的话呢,如果是真的话,可以克隆子节点,那当然我们要写触了是吧?说啊这个克隆no有一个什么呢?有一个did wrong。Keep为处则可以克隆子节点好克隆了,克隆好之后的话呢,我要使北京。哦,不是北京了是吧?我要使这个红警变为北京红警变为北京game not,点点。北京,然后是哎,我这么一写的话,大家是什么情况。
07:15
二看样子呢。原始呢?坏了,没换上。哦,这应该是什么呀?Game新的放前边,这个是新的,这个是旧的,写错了是吧,应该写谁呀?L弄的吧,是吧是吧,你应该谁呀,你应该是把I换为北京嘛,再来收北京的好了,然后的话呢,北京然后的话怎么样,我还要是以前那个北京换为。换为谁以前的北京,换为那个红景来北京我们看哈,应该city no.child新的应该是game,旧的是北京。
08:16
再看。刷新一把坏了,又又整错了,这应该写谁呀?好,写错了啊,现在应该是K弄的,是I弄的吧。一北京红警对吧,看一北京红警没问题啊,这就是什么,这就是互换这样的一个效果,那互换这个的话呢,在我们的这个呃,规范里边没有这样的一个函数,我们可以来写一个关于互换的函数来自定义。
09:07
互换。两个节点的函数写个吧。Function replace a和B呗,AB好了,怎么互换,大家数呀,第一步应该先获取AB和P啊。负节点吧,你看我这块的话呢,我为了换这个北京和红景,我是不是先搞乱这个city note跟game note,那负节点看一下怎么获取呢?Get有没有什么负负节点应该parent吧。有个这个属性叫是使用什么呢使用。
10:06
二文章豆子属性二怎么办?克隆A节点或B节点三什么呢?是不是两次互换呢,分别要用。这个AB节点的负节点和节点的负节点的与replace的方法实现节点的互换,可以就这么写,于是我们来写一个啊或A的。
11:03
等于a no.current not或b current等于B节点的current,好了啊,那前提是呢,我得A和B都存在负节点,我再进行。操作,如果要没有的话就算了哈,AB而且好,这个时候克隆克隆谁呢?任何都任何都都可以来word一个a node to等于a node,点克隆。减个处好,分好之后怎么办呢?分好之后分别调用进行互换,怎么互换?A啊,我换的是这个,先换B哈,B给谁呢?写a no吧。
12:04
换一下,换成换的是,然后在a.replace写replace replace,对replace is twelve,他问谁呢?A应该换换为B吧,换的是A节点本身写完写完之后的话,我们我们干什么呀,我们看它好不好用啊,那怎么看它好不好用呢,后边我都不知道。One。于是把这个写上。地址,北京节点红警节点好看效果过来刷新北京红景。
13:06
坏了没好使是吧,没好使是不是有问题啊,这两个是没问题的,这个方法的话呢,我也写了,这也没问题,看看吧,A节点B节点parent no没问题,A parent b parent。A节点to a克隆。克隆no吧,是吧,克隆no,我应该这么讲啊。这边再看。巴西北京红警互换了,哎,这就是我们自己写的这个啊,节点互换的方法好,那这个方法的话呢,大家就可以对吧,拿过来自己进行使用。看一下刚才呢,我们讲了一个知识,叫节点的互换,大家需要会用这个函数干什么,它是调用,调用什么,调用O的节点,负节点的方法,把这O换为新节点,返回值是那个O的节点的指针,那除了这个删除之外呢,除了这个替换的话呢,还有移动的功能,所以说要是想实现节点互换的话,我们需要有一个克隆的操作,否否则这个效果出不来,好我们还可以自己来写一个这个双向替换的一个函数,这是我们写的啊。
14:37
行,有了这个以后的话呢,我们可以来做下一个练习看一下。练习。四。这个练习我们前面已经讲过了是吧?啊,我点击的话呢,怎么样它可以实现对应节点的互换,这个我们在这个排班的时候,比方说我们排排一个值班表,然后的话呢,有两个人需要换值班,比方哎,我是周三也是周五晚上值班换一下,这个时候我们可以通过这样的方式来做Ajax,就是我这样一点页面上换了,然后的话呢,在后台把这个数据传到服务端,服务端的这个数据也换了,就是这样一个操作,大家可以思考一下,像这样的一个练习应该如何来进行完成呢?这个需求非常简单哈,就是实现。
15:29
节点的。但是按这个练习的话,做起来会很爽。四看没需求。需求实现什么会?
16:00
所有的Li节点添加on click响应函数实现什么呀?实现子节点和game子节点对应位置啊。袁术的互换。大家想想我这个基本步骤应该是怎么样的?第一步应该是获取所有的Li截屏,二步为每一个Li节点。添加on click响应函数。干什么呀?点击吧,是吧,啊点击什么说找到和当前节点对应的那个Li节点。
17:10
四互换啊,就这么几个步骤。互换的话呢,我们前面我们写了一个replace each那样的一个函数,我们在这里边的话呢,我们重新把这个过程再写一遍,一会的话呢,我们再给它抽出去。那我们看哪块是难点啊?第一个获取Li这步应该很容易,No等于document.at element I。下一步。为每一个Li click重写。或循环吧,循环或等于0I小于Li no点。写吧,I加加好了,然后Li know。
18:07
I的方click等于。方式好,加上这个比较麻烦,我如何找到我对应的那个Li节点。如何来找呢?那我们可以写一下,说我得知道当前的是哪个节点,然后我好去找对应那个吧。我再说一遍哈,我得找到当前的,然后完了我去找,我去找那个对应的吧,那我们看一下目前这个样子。打开。打开大家看当前的,比方说我要是点上海的话,对应的这个是实况吧,是吧,那我怎么知道它是跟我对应的。想啊,我怎么知道,比方说我要是首尔的话,应该是魔兽吧,那我怎么知道这个我我怎么知道跟首尔对应这个是魔兽呢,反过来跟魔兽对应这个是首尔呢,我们得用角标吧,是吧,但是现在的话呢,我们知道这样一件事,我这里边的角标啊,不靠谱。
19:16
整折什么都是八呀,他讲过这个事吧,为什么都不发呀?在我赋值的时候,它的确曾经是01234567,的确是这样,但是当我点这个试价的时候,这个时候这个I是不是已经变成八了呀,能理解吧,当我点它的时候,因为我这个复制已经复完了嘛,我点的时候这个I已经是八了,所以说我们这样写一个,你看他。哎,在GS里边没有局部变量,这个全局变量这么一说,反正你这块说明了我这块我可以用,于是你看怎么还没点那吧,是不是就是八了呀,那你点的话当然也是八,所以说这个时候你靠这个什么,你靠这个I的话呢,就不行了,因为这个I的话找不着当前的缩引,当然你也找不到。
20:10
目标的水怎么办呢?怎么办,我得在在啊,在每一个lii便利过程中写一步一步,以前没讲过啊说啊人工手动吧,手动为每个Li节点添加一个index属性,加一个我写个Li nose。I index等于I。好了,这个时候的话呢,这个I啊就被存到了这个属性里面,然后的话呢,我来打印它。CCV,再看刷新。啊对当前的吗?他是不存在的啊。
21:06
再看。零七这个有了吧,好了,那我可以利用这个index找到那个目标的index怎么写,或它给它index等于零,那如果当前的index它是不是刚好是八个呀?如果当前的index X小于四的话,那目标的引X这是几啊,等于。四加上。这点index能理解吧,比方说当前的是零,目标的是四,当前的是三,目标的是P对吧,那反过来如果要是比这个,嗯,三要大大于等于四呢,它index等于。
22:07
八减还四减。几减,你看当前这个要是七的话,这应该是几啊,这要是七的话,这应该是三吧,所以说应该是s.in text减减40吗?好了,反应一下alert和了谁呢?Li know。他index。First child.no我们看看这个对不对,我翻一下前面,这肯定是对的,红警。魔兽好了,极品飞车对吧?哎,这就什么呀,我就确定了这个目标的这个节点是什么?好了,下边的话呢,我要实现互换,那实现互换这个的话呢,我实际上以前写过,我们这里边的话呢,我们把这个过程啊,我们再写一遍实现互换,实现互换的话呢。
23:20
我先拿过来吧,这里边互换的方法。Open with HTML act好了,我们写了一个方法,在这呢实现互换呢,我先给它复制过来放这儿。OK replace replace。这写的啊,一个是this,一个是他给的Li know Li know,他给他index,那看效果能实现互换吗?
24:09
不止这个。这个是。是不是换了呀,看见了吧,再刷这个是不是换了呀?好,换完之后下一个问题我还能再换回来吗?是不是没有啊,是不好用啊,我一次换好使,你看这个换行好了,我再点它,或者我再点它都换不回去,我们希望它能够持续的进行互换,但是初步这个互换已经成功了,那为什么不能够在接着互换呢?因为我们在进行互换的过程中,我们有一个什么呀,我们那个安click事件并没有互换,我只是简单的换了这两个。节点。再说一遍哈,我只是简单的换了节点,于是的话呢,我们加一个吧,说换什么呢,来。
25:03
换。这个交换吧,是吧,交换on click是这样,这个我也要换。这个我要换,然后的话呢,还有一个交换,就是隐带的属性再交换。Index属性index性我们再说,我们一个一个看,第一个说换on click on click事件,那首先的话呢,我们看换没换啊,一会我加上一个aler,先写上一个叫嗯,可以保存。刷新这个好用的好了,回来之后的话点这个还有大家看见了吗?红警啊,点一次之后也没有了,北京也没有好了。刷回来再看一遍北京是有的啊好,我点红警这个有这点就没有了,我点北京,北京压根就没有好了,我们来换的时候的话呢,我们这个什么呀,我们这on click呀,貌似有一次,然后。
26:10
貌似可以换一次是吧,然后有的时候就不能换了,那我于是我们看吧,我克隆这个呀,我得让克隆的这个节点a nose。A not put on click,它只换节点而不换事件,等于,而谁呢?等于a no,啊,On click。哎,这个时候怎么样克隆,应该说克隆节点的同时,然后的话呢,把这个安可支件加上克隆。A节点的。同时。把方。Click试驾。啊,也复制。
27:01
好,我们看到这看到这块以后的话,我们再看啊,会有不一样吗?我点一下这个有反应啊,这第二次有看见北京是不是也有啊,但你这点不好使,这点还好使么?他不换。他不换,那这个我们昂可立克我们都已经加完了,好了,那下一个的话为什么不换呢?因为我在换完之后啊,我们来打他。来打他来打引X。加谁呢?x.index我们看这个index值是几,我一下值是零没问题,红警大家红警这个值是不是还是四啊好了,北京这个是没定义。就是说我在复制的过程中,我还要保证index属性也进行复制,哎,CTRLCCTRLV写吧,A no a no good inex等于A节点的index好写上,再回来再刷看精灵。
28:15
红警四这个是零没问题,没问题,但这个时候问题是这个时候我这个所引这个位置是不是已经变了呀,这个时候这个应该是零,这个应该是400是吧,你否则的话,我这个我找不到,我这个我要再换的话,我就给我就给自个儿换了,懂这意思吧,因为这个时候我这个数组已经发生变化了,这个时候数组下标是四的那个是它。那你换就换不了呗,那于是的话呢,我还需要在这个,嗯。这个换的过程中,我得把那个index,把index进行交换过来。交换什么呀,Index属性那得交换一下,你不交换就是我应该是重新那个index排序。
29:09
Index重新交换一下,怎么交换呢?咋交换呢?Index等于Li no。Target index啊,Index或time方index等于index,然后呢,Li。他给index index等于单方index。是吧,零四来看是不零了,这个时候怎么样就可以永久进行互换了,把这个我先给拿掉效果。
30:01
好了,进而的话呢,这个练习就起来了。好了,我们看一下哈,看一下这里边有一些点是需要我们重新来进行审视的,呃,大体上这个架子的话呢,是没问题,细节细节,我们第一个细节就是如果我在这里边去打印这个I的话,是不靠谱的,知道吧,因为I在我翻完值之后,这个I的值就已经是八了,你要是打印的时候那个I也是八,那怎么样把这个缩音保存起来呢?诶同学再加一个属性,然后的话呢,这里面这个属性我还还可以给它读出来一个点。一个点好了,然后的话呢,我们在进行节点克隆的时候,我们发现。我们不能够克隆属性,具体哪些属性呢?比方说on click跟index都不能进行克隆,那我就手工给它加上第二个点,第三个点,当我两个节点互换以后,那这个时候这个数组的这个圆柱的水眼也应该进行互换,所以说的话呢,我互换inex属性,整个这个。
31:20
练习就写完了,发给大家,大家看一下。
我来说两句