00:00
下面呢,我们来看一个小练习,这练习大家以前用原生的GS也做过,我们用几块来写一下。我们来看一下这个玩意。做过吧,做过也非常简单啊。啊,因为大家做过,所以大家为为什么要不找新的,是因为大家做过,需要去比较一下,你可以感受一下用G和用原生的它到底区别大不大它。来下面呢,我们要用结还是一样,先一定要知道基本的套路怎么做啊,首先第一步要是不是找把结块也搞进来,搞一个几块过来。好搞过来以后呢,引入到我的页面里面。
01:00
接着写我们的JS。当然我们是不是也可以把我们的JS定义成一个单独的文件,可不可以也可以啊,也是可以的,没什么太大问题。我们的功能呢,其实重点就两个功能,第一个呢,就是往里面去添加一个记录。啊,把这个先关了啊,啊,譬如说A啊,我这里面我就随便写啊,也没什么,也没没什么要求。是不是一添加就显示在这里,其实最好添加以后吧,就把这个什么是不是清除啊。能懂吧,啊再一个功能是什么删除对吧?啊点这个删除呢,它是提示你要删除谁的信息,是不是某个人的信息啊啊对取消删吗。
02:01
不删,那得确认就会把它什么删除,就这么两个功能来做一做啊做一做。呃,首先我们要想到我们要给谁去加事件监听。是不是就是这里面先我们来去做添加的功能,好吧,一共不两个功能吧。第一个是添加,第二个什么删除是吧,好我们先来做添加的功能,添加的功能监听加在我的这个把手上面。那我怎么办?不有ID吗?干嘛肯定上线,是不是在里面干活?那做什么事情呢?
03:00
就最终要根据我输入的这个信息,是不是生成一个什么标签结构,这是个什么标签结构TR,并且把它。塞到我们这个table里面去吧,对不对对的好,那首先我们第一步想办法干嘛呢?收集输入的数据,第二步生成对应的TR标签结构,对吧。最后病干嘛?插入到到哪去看一下。是不是杀布入到这个table里面去,应该是准确的,应该提玻璃里面去,是不是啊,虽然说插在这个table里面可不可以可以,但是它默认是不是生成一个提玻璃啊啊插入到这个啊。
04:14
明白了吧,好来,我们来做一下要收集数据啊,那其实还有一点,后面我们还要做一件事情呢,搞完了以后是不是还要清除输入数据。清除输入,扔了吧,好,那我要收集数据来,这不有三个输入框吗?他们是不是都有ID啊?来吧,来,为了能够后面要方便操作,我这里面先去声明这一个。讲快对象。看到吧,为什么我不直接去外你啊?因为后面我清除输入要用的能不能理解好,那是不是还有两个,一个叫。
05:05
Email。哎,这个不对,接下来少了一个多乐福,还一个叫salary。好了吧,但现在我得到的数据了吗?没有没有啊,记住了,我下一步的工作就是把这一个怎么得到多了福他点。Val是不是?算吧,嗯,来。哎。把这个给忍一忍啊,Salary。可以了吧,第一步搞定了吧,听完了第二步,我要生成一个对应的TR标签结构,并插入到我的这个T玻璃里面去,好了,那我现在内存里面是不是生成结构,这个结构应该什么样子,我们找一个模板过来看着做。
06:08
得找一个模板看得住啊。把这个推一下格,看着写咋写啊,首先你是不是可以创建一个空的TR。是不是接着干嘛呀,是不是不断的往里面添加TD呀。来,因为比较多,我这里面叫什么。往现有的里面添加,是不是碰的,能不能懂,那整一个它行吗?不行你来干嘛。我们下面要做个什么操作,要拼串啊,这个概念应该要有啊。
07:05
懂不懂啊,我们要拼算,也就这个值是不是动态值。写什么?EP是吧?好,下面的是不是有几个跟这个差不多啊。先写两个再说来,接着整谁去?这是不是那个什么,下一个是不是email。是吧,有听力吗?下一个。Celery。下一个是什么,又来一个,这个是不是,这个是不是跟上面不太一样啊,不太一样,那我再来一个啊,再来一个,那这个时候呢,是他。好了,那其实这个值是不是应该按出来说应该一定要动态的值。
08:05
对,不是应该是个动态的值,这个值呢,我们假设我想随机产生一个值。因为我有可能不断添加吗?你最好是不一样能理解吧,我想生成一个随机值,你说我看用什么方式就能随机生成呢。我想生成一个随机值是吧,怎么生成?你用什么方法就能生成一个,能保证你的值是随机的,这值是多少不管,反正我要就要一个,每次都不要重复。咋办?不要重复啊,OK,怎么样产生我我我先后去产生两个数,怎么保证他们俩不重复。日期呀。我去取当前日期他的宠物吗?不能,能不能懂。
09:02
你说老师你要点的太快了,你再快也没用啊,你不会好歹也要输入吧。你即使你不输入,你点两次它也要空格时间嘛,对不对,能懂不好,那我就用一下那个时间好了,那我怎么插距呢。拼串啊,ID等于好来,这个时候我要动态往里面塞一个动态值怎么。先用单引号给它们什么分格,这么分格接着呢。看到吧,看到他。暂时就这样的啊,那现在你说我们现在创建的这个结构在页面里面没有没有吧,没有在页面里,我该怎么办呢?是不是得加到页面中去,那我此时要塞到某一个里面去,我应该用什么方法呢?
10:03
你是先得说是内部插入还是外部插入。也就是说我当前的这个结构是放在哪个里面去,还是放到某一个上面下面啊,我刚才不在说吗?你看这里面的这个说明,你并插入到这个明显的插入到。这不白说了吗?是插入到里面去。对不对,就是说我们现在用什么方法插到里面去呢。是有的还是two,就两个选择。用什么?而pen不是将当前要指定内容塞到我当前这个里面来吗?我现在是要将当前内容塞到别的位置去,用什么a panda to。找到那个位置。
11:00
找到这个容器,哪个容器。这一个是他吗?不是它下面的什么玻璃对不对。没问题吧,没问题,好,我们最后一步看完了。清除这咋清除啊,我们来看一下,把这个里面代码拿过来。是吧?OK。这写什么?可以了吧,各位可以没问题,其实我这里面我我要要做的好一点,是不是还要去判断你用户有没有输入啊,就你要没输入,我是不让你填,能不能懂啊,这个事我就我这一次我就不做了啊,我们来看一下,看行不行刷一下。
12:03
啊,我这里面随便写啊,来个A来个B来个来个B啊走你行不行诶。没信了,信了吗?没有啊,你看。是没有啊,我这好像也掉了呀,这它点V等于空转是吧,来看一下有没有报错。有发错吗?没有,但他就是没有什么没有清除啊。嗯,OK,好来。啊。看下我们代码里有没有代这个代码,这打的谁呀,这都不是我们的,我们的页面看到这里,这是原生的什么。啥都原生GS嘛。掩耳盗铃。那就是。
13:02
啊,来试一下啊。可不可以可以吧,啊可以没有没有太大问题啊,没有太大问题可以是吧?嗯,这是第一步,我们要添加保利,那下一步我们要干嘛删除,删除的话是不是给这里面所有的A标签都要加上点击滴。是吧,来做吧,删除。添加搞定了,再来一个删除怎么做,你找到所有的A标签没,这里面所有的大家看啊,这个这实际上每一个是不是都是个链接啊。看到吧,那其实很简单,我这里面是不是找到下面呢?呃,先找到他吧,再找它下面所有的什么A是不是就可以怎么找,先找到他们,接着找他下面的A是这么写的吗?是不是不是是他的后代。
14:03
对不对接干嘛去。看呗,哪一个发过去下面呢。我首先做的第一个事情,我是不是要提示一下你删除的是谁呀。是不是要做这个提示,要想能够提示,先要找到。这个名字对不对,那怎么样找到这个名字,大家看啊,我现在点的是这个A。是吧,我想找到这个值吧,那你想找到这个值,你是不是得先得找到个TD。这咋找啊?我先通过A找他,我的什么父亲,各位再找我的父亲行不行?其实好多种办法,办法挺多的,比如说我找到我的父亲,再找我的父亲,接着再找我的第一个孩子,替替孩子可不可以,可以,你说我先找到我的父亲,再找到我前面的兄弟,能不能找我?
15:12
能不能找到我前面所有的兄弟,不能吗?看一下查找。这有没有有没有,但是我可以说只要什么第一个可以。可以的吧,这有啥不可以嘞。其实啊,这个是很很灵活的,说白了。来试一下啊。那我要找到父亲怎么找,当前我是不是我点击那个A标签,我怎么样找到父亲,意思点认识点行不行不行,因为现在我是要利用这块对象的强大方法,所以我应该把它包装,为什么这快捷项现在再点什么parent好了,Parent现在对应的是哪个标签?
16:17
这个是TR标签,现在是因为现在我的这个意思是A标签TDTRTRTD啊应该TD是吧,接着我去找我前面所有的什么兄弟,并且过滤出是吧,第一个各位可以,那我该怎么写了。其实挺多方法的啊,有吗?有,但我要求是什么?第一个信好,接着我想得到的可不是他。是吧,我想得到它的是它的什么,是最终我想得到的是看一下,看它那个看那个结构,我想得到它是里面的文本对不对,还有一个事情啊,这个不好了,我最终要干个什么事,我最终是要把这个TR给它删除啊。
17:14
是不是啊,那我得确定时是不是把这个TR删除,所以我最好能先得到一个什么T,不然的话怎么又要得,是不?你要同时做嘛,你等会还你,我们现在这做法是可以,但是等会又要取一遍,太麻烦了,我们可以先这么做。啊,不,不像这么做了,虽然说这样可以找到啊,但是我们还是这么做吧,再调用一下什么parent,这样做能一举两得,现在相当于得到的是谁TR对吧?那现在我要想得到那个name怎么得,是不是要得到他第一个孩子,那我来个什么children冒号first。
18:06
点什么HTM,是不是得到那个文本啊,下面干嘛。确认一下呗,你不要确认吗?看吗?确定删除这一个什么,那再来一个啊是吧,OK好,那下面如果他点的确定我该怎么做。是不是将T删除啊?这不轻而易举吗,干嘛?他他是要把自己删除用还是remove remove,因为把自己都干掉。能懂吗?其实这个啊,搞法就比我们用原生的要简洁很多。
19:02
你回过头来看一下我们原生的。老费劲了。OK,好,我们来来看看啊,行不行啊,行不行啊,还有问题啊,等会我们来看一下轴。取消。什么意思,是不是要取消他的默认行为,对不对,怎么样阻止他默认行为呢?啊,我们开始最先我们是不是有一个概念叫是吧,我也看一下这个行不行为是不是能不能懂啊试试,不是不知道。取消没错吧,好,下面哪一个点确定。咖啡三,可以吧,可以好了,那是不是万事大吉了,说no。
20:06
看我点它有反应吗?有没有没有,为什么,因为我们是不是在初始化的时候,是不是加的所有的监听,是不是删除的监听,但是我后来添加的A标签有加吗?没有加监听。对吧,那也就是说,哎,我们不用代理该怎么做啊,先还是不用代理了啊,我们现在看看怎么做打开啊,那也就是说我们在添加这个A标签的同时,是不是也要给这些A标签加上,点击鉴定是不是啊,那请问呢,那现在我怎么样去找到这一个A来加上呢?你看啊看这里,现在我问大家啊,你说我现在这个结构,我的里面,我的这块对线里面是谁。
21:07
也就说我这在这此时就此时,这是不是也还是一个结块递象,我们说任何这块对象是不是包含的是一个或者多个多米元素啊,我请问现在。包含了动物元素是谁TR?对吧,是TR,那关键还一个是啊,那现在现在有个问题,你说我加到他上面去以后。那这现在是谁呢?是不也就说提玻璃啊,说实话我也不能确定,那怎么办。我不能确定怎么办,不能确定一个变量呗,确定一下呀,这个我也不知道,所以来个叉叉叉好吧,接着我干他妈。
22:03
打印输出它的第几了,第一个看一下嘛,是吧,无非就两种情况,一种是TR,一种是什么T玻璃啊,我们来看一下是TR还是T玻璃啊。呃,我应该怎么做啊,是不是要去我们现在整的是不是点击添加呀,好试一下啊,随便写一个拉倒走,你是什么tr OK,但是这个TR里面有没有我们新加的呢?诶。这个TRTD这个TR这这个TR是不是就我们新加的这个TR是吧,那好了,那我我现在是不是要给A加点心力,你说我该怎么办。我在最后,我是不是依然可以去找到其中的A?
23:01
是吗?那请问我怎么找?点什么方法?是不是查找啊,查找的话大家想有两个啊,一个叫children,一个叫find,有区别吗?有children是找什么子元素而翻译的呢?后代元素,那也就是说我被找的这一个标签跟我当前这个TR是什么关系,后代,那所以说我应该用什么方法翻译,这就非常关键了,这就是大家啊,一定要把这东西看懂。你要看不清楚,那你根本就找不到什么方法去写什么。是吧,接着干嘛,现在你说我的这块递项包含的是什么元素?那必然呢,那肯定是A了,我都找位置啊。没问题吧,你说我现在下一步干嘛点等于等于啥,是不是又等于它呀。
24:11
是不是,是不是就等于它,那我应该给他干嘛呀。是不是给它定义成一个函数叫啊delete,呃,Delete吧,好吧。看着吧。啊,哎,不用这么写啊,写错了定义个变量不就得了吗?在这里面写一个是吧。可以吧,好,那这一个是这一个是什么函数。是不是删除的什么,点击删除的回调函数,我要把这个函数给它干嘛。
25:07
是不是传进去看看呢,接着我在这里面传什么。哈,给他传进去拉倒呗。能不能懂啊,这个是给所有,呃那个删除链接,删除链接谁呀绑定。是不是点击呢,对吧,嗯。好,我们来看一下,看看我们现在这种搞法行不行呢?来先主要重点是加的行不行。就这个呗。走取消有动静吗?没有确定,今天行啊。那现在呢,我们就把这个添加和删除都给大家做了一下啊。
26:08
大家再去啊,再你回头,你要有心思,你也可以把以前的原生的JS也写一遍啊,感受一下,那个时候你才能知道,哇,这个东西真好用啊。而且他的语法,他的API其实很贱民之意啊,特别好懂啊。好。
我来说两句