00:07
嗯。啊,就是一个京东详情页面的一些简单,也说白了其实也是一些简单的一些一些笑话啊,你说多了也不至于,但真的写出来了也要花一点时间啊,OK,也是基于就拍的代码呢,就这么多,一共也就。200来行啊,200多行代码。功能点呢,一共有11个小的功能点,那这三这些11个小的功能,我们就一个一个写就行啊。嗯。来,那也就是说我们现在看到我们这个页面,我们这个页面啊,页面也有是吧,但是啊,OK,这里面的是我是不是已经写好了呀。
01:19
嗯,我把这个给提交一下啊,这里面呢,有一个文件已经被删除了,有一个文件修改了啊。给他删除吧,等会我再啊,现在先提交一下。好。那。呃,下面呢,我们要去做我们这个项目,它是基于这块的,那首先呢,我们要想办法把这块导到我们的这个项目里面,其实这是相当于是一个项目。只是我这个项目是嵌在整个大的项目里面的。啊,需要把这块导到我的项目里面,接着去在我的页面里面呢,去给他引入这个,我们前面写练习的,其实一样的,没什么太大不一样。
02:09
好,有一这里面的GS代码比较多,你在写在页面里面就不太合适了,那可能我们会去单独再去写一个。啊,JS文件,我们称它为什么呢?ap.js那所以我们需要在这个JS下面去创建一个JS文件啊,就取名叫什么PP。嗯,大家看呢,这个里面颜色有两有三种颜色,一种是黑色的,一种是绿色的,一个是。蓝色的,这说明什么呢?这个绿色的就说明是已经提交过了,没有修改,能不能懂那蓝色说明什么?是不是本地修改了,但提交了吗?没有绿色说明什么呢?新增的。
03:04
N吧,啊,新增的一个文件。好,来。下面呢,我们就把所有的代码呢,都写在这里面,那写在这里面,首先我们是不是可以写个他呀。是吧,所有的时间是不是都写在这个函数里面吧?啊,这个没什么问题。没有问题,后来我把这里面的所有的需功能需求呢,我就都拿过来吧,我们一个看吧吧,其实功能点都比较简单。好,我把我的这个页面呢也打开。嗯,刚才打过了是吧?啊这个页面呢,实际上是功能都有的啊,没什么啊,这个页面呢,是没有功能的,只有一个静态的页面啊,所有功能都没有。来,首先我们来看第一个部分的功能,就这些。啊,这个里面呢,这几个功能都是其实是一个功能,一个相同功能,就是鼠标移路和什么移出显示隐藏的功能。
04:10
能不能啊,OK,包含包括这个这个也是一样啊,也是一样,OK,所以我们现在呢,需要去做我们的第一个功能。就是鼠标移路移出一路显示移出什么隐藏它的目标有一共有好几个,大家看看一共有几个啊。京手机京东一个两个三个四个五个,还有最后一个六个啊,这里面有这么六个。我们来看一下。我们先来看一下这六个里面,它有一些什么特点呢?这一个这个时候啊,我们就要去能够去根据已有的效果去看他是怎么做的,我们看,嗯。
05:01
看到变化了吗?能看到,也就是说它那个改变的是不是这一个div的一个style display对不对啊,那四件加在谁身上了,大家看啊。我的世界的加入水山了。我是不是放在下面,是不是也是显示的,你说世界世界是加在手机京东这个上面的吗?是加在这个上面的吗?是在这个LA上吗?是还是不是。不是,为什么不是啊,大家想如果是的话,我一出来是不是移出了,我得加哪个上面呢?是不是加在这上面。对不对?能懂吗?你要找得到我的世界,应该加在哪个标签上面比较合适?好,这是这一个手机弄,那也就是说加在这个ii上面呗,对吧。
06:01
下面我们看下一个啊,另外一个也是一样的,其实。这个。看懂了吗?能不能看懂啊,操作了也是一样,那也是一样,大家想啊,现在我的事件是不是仍然要加在这个ii上面,对吧?事件呢,目标是谁呢?目标是这个U,就操作的目标是这个ul,事件是加在ii上面。啊,OK,那下一个类似的没什么好说的是吧,下一个也是一样的,这三个是不是他们是相当于是三个兄弟啊,也就是这三个好,除了这个不还他们吗,他们。再看看他们。这是一个A,看看这一次不是ul了,不是L了,他们是什么,是不是div啊啊,那现在我操作的目标是谁啊,是不是这个div,看着这里面,这是不第杯浪吗。
07:04
能看懂,那世界加载X呢?肯定不知道他是什么,是加在这个上面是吗?是吗?是是不是啊,大家能看出来吗?能不能,也就是说我现在问的是事件是加在这,加在这个上面,就你大家能不能看出来,你要不能看出你就说啊,你别人都不说话,我不知道大家现在什么情况。啊,你大家现在在想我放上去,我移到这里是不是也是显示啊,说明我没有移出去。是不是,那说明我在这个上面的时候和在下面的时候都是在我的那个容器之内,是不是,那说明我的这个事件应该定义在这里。应该是它们两个的范围,对不对啊,应该在这个范围之内,而我操作的目标是他。
08:04
是吧,操作的目标是这个div。啊,前面我们刚才抄的都是什么,我们是不是目标世界的目标是不是都是I,哎呀,这一次又是什么div了,这好像找不到什么太多规律啊。大家看看这个,这个也是,其实他们应该是有规律的。大家看到他们的name都是一样的,他们的标签名不一样,但是内目属性一样,都叫什么show下划线,对,是我开始设计好的,也就是说我希望通过啊找到他们共同的规律,我通过一个函数就能搞定。啊,我通过一个操作就能搞定,因为你同时我我希望的是什么呢?我写一个函数就能把这些都能实现了。
09:02
这不这样的话不能减少代码吗?对不对,但是这个有个前提。他们得有规律。能懂不规律是什么?其实也很简单,跟标签里有关系吗?没有,跟谁没关系,它的内务属性。能理解吧,好,那我们就以一个为例来去看他们应该怎么去操作啊,看看我就以一个为例,我这一次呢,我来打开两个工具,首先第一个画图的。第二个工具呢,是这个截图的工具。好,现在呢,我去截个图。好,我就接这个。就这个七。来接这个以后呢,我把我的这个放到这里来。
10:01
我们要研究,我们要去实现这个效果,要研究什么呢?要研究就是我们要看他。第一步对个或者是什么呢?哪些元素。绑定监听。这第二第一个第一个问题啊,我们要关注几个问题。第二个问题啊,绑定什么监听。第三个对哪些元素。或者哪个吧,也有可能是哪个,也有可能哪些进行啊,我们修改。啊,OK,我们只要知道了这些,那我们就知道怎么样写代码,那也就是说我们在分析的过程中,一定要把这几个问题给它解决掉。
11:10
懂不懂?好,来,那我们就沿着这几个问题来去找。啊。首先第一个啊,我来去想,我们对哪一个或者哪些元素进行保密监听。是不是所有这一个name为它的标签?对吧,那下一个事情就是我们绑定什么什么监听。啊,一个一路一个什么移出,那应该是猫,什么enter与猫,但是我们可以简化成什么moo。对吧,在那就一个o ho就行,是不是这个ho就可以了,一个ho它有两个阶梯,一个移入,一个什么移出这样呢,更简单,因为这个这个其实用的挺多的,因为它用起来比较舒服。
12:13
比较简洁。能不能懂,好,下面我换一个颜色,我们要说明的是啊,我们对哪些元素进行多么修改呢?是不是针对于下面这一个div,那下面这一个div怎么找呢?IID是固定的一个词吗?大家看到这里面特别有意思,ID是固定的一个值吗?来看着这个ID叫AP下半JD-items来看下一个。要吗?是不是一样的,不是一样的,但是呢,我们也要从中想办法找出规律来。
13:05
找出一个相同的规律。哎,这个地方其实这个规律好找,首先我找到发生事件的这一个元素的ID能够看到,接着在它里面去找子元素。它的子元素呢,有一个他的ID,他的ID是在啊,那个发生事件的元素ID上面加上一个下划线。来看一下是不是这个,首先它service,它叫什么?Service下滑items。你们看下面这个是不是这个规律是你说怎么刚好就是这个规律呢,设计好的。
14:00
你说为什么不设成相同的ID啊?能设计成相同ID吗?不能,你不能说多个元素ID一样,对吧?但是呢,我们可以设计出相同的规律吧,规律是可以现成相同的。能不能懂啊,OK,好,我们找到这个元素以后,对哪些元素进行动修改,做一个什么样的修改呢。是不是抄到这个。看不看懂,嗯,好,有了这个分析以后,我们就。好做了是吧,啊就能做了,那下面呢,我们就根据我们这个分析来去写。我们现在做的是这个。每一个功能都是一个函数啊,我先把这个函数定义一下。啊,叫什么名字呢?
15:01
啊,就叫秀黑的行吗?可以吧,啊大概这个样子好了,我在上面对它进行什么,是不是调用啊,里面再写实间呗,可以吧,可以刚才我们已经分析过了啊,我们要去写功能,其实就关注几个事情。第一步,我们先要干嘛,确定哪些东西。对啊,哪些或者哪个元素好吗?加监听是吧。就哪些吧,好吧,嗯,哪个获得哪些元素加啊绑定什么监听对吧?啊,这是两一个方面,第二个方面对哪个。或者是哪些啊元素进行。
16:04
什么样的动操作。啊,其实综合起来就这两个方面,我们先来看第一个,刚刚说过了,要对哪些元素进行加监听,就找一个元素呗,是根据什么找的,Name等于数下滑什么,嗨,那我怎么写?属性选择器嘛,接什么中括号接着内等于秀下划线。失败好,接着呢,说什么经来着。Home是不是就可以了,少了一个啊,哪一个移路的,哪一个什么移出的,移入的时候我是不是要去显示。
17:05
啊,要做的是显示对不对啊,整体要做的是显示和下面移出要做的是什么,隐藏来下面第二个问题,第一个问题和第二个问题对哪些元素进行动操作,那我们得怎么找了。看看,首先我要找到当前事件发生元素的ID,这个怎么找,这个ID怎么找,怎么写。认识两行不行啊。行不行呢?我们来看一下行不行,同下就知道了,各位。是呀。So。这是我的吗?不是吧,这个才是我的吧。
18:05
那现在现在怎么回事,可以呀。先刷一下,刷一下以后就是在说什么呀,说AP点。没有引入,是我引入的路障一定要能点过来啊,刚才就没注意,就没看这个事。有没搞错啊,来打开它看一下啊,重点看一下这现在是什么,我它再看一下有没有报错啊,一定要盯,盯着一下我们开始了。有没有有吧,大家看啊,OK,是不同的值啊,不同的值可以取到吧,有人说老师要不能取到我怎么办。要直接不能取到,我是不是可以把它包装,为什么就快递下去取啊好,那我取到这个ID以后,下一步做什么呢。
19:07
来看一下,我取到这个ID,我们来看这个啊,按这个说下面我是不是最终不想要这个ID。是不是而想要下面这个子元素的ID啊,那子元素ID跟它有什么关系呢?加上一个下划线it是这是我要操作的这个目标的ID吧,对不对?好,我有了它,我怎么样去找到这个元素呢?它是不是ID值啊,也就说它是一个ID啊,是不是我要根据它的值,这个ID是不是找到它,那我应该怎么写,是不写什么,我在前面必须加个什么井号。找到没有,是不是找到了能看到不来,那下面有了它以后,我要对它进行一个操作,什么操作显示要显示非常简单,直接调用什么秀。
20:17
你说老师你不是抄作样式去的吗?你不是抄到这个display样式吗?但是我能不能用这个更简单的方式,也就是说我通过CSS能不能写,可以写,但是这个数不更简单吗?是不是好,那我要隐藏套路就是什么一样的,只是我要调的是什么。看没看到。啊来说了这么多,就写了这一段代码,那是不是就好了了,刷一下。
21:02
看着走。那我在里面放的时候是不是没问题啊,但我一移出三收住了。现在带动画吗?带不带不带啊,我看了一下京东的,他们也没带啊,咱们没有必要带动画了。是不是都可以,还包括这里各位以哎,你看这不轻而易举吗。啊,其实这里面更难的是什么?更难的事情其实做了就是去设计那个关系,怎么样设计那个规律,大家看我开始是不是给他们都设计了一个统一的内务值对不对啊,就是这个设计导致于我用的时候,我是不是通过这样的方式就能找到所有匹配的元素,对吧?还有一个关系就是这ID之间的关系。嗯。你说难吧,真的是不难,说实话,做代码一看就能懂。
22:04
啊,大家先也不要求太高,你先把现有的做出来就行,对吧?OK,别的就没有什么啊,这个图能看懂吧,大家看着这个图啊,我把这个图给大家保存一下。啊,就1.gb吧,嗯,好,现在我要做一件事情,我要做一件事情做什么呢?啊,我我不实现了一个功能嘛,是吧,那我是不是可以做一个提交。可不可以可以来提交,早提交了,其实非常简单,就是在这里面,你可以在这,你可以在这点,你也可以在这里点,是不是都可以,而且它是不是标识出来有一些改变,能懂吧,嗯,那我做一个什么提交,实现什么功能啊,实现显示隐藏功能,好吧,就简单写一下。
23:18
走,你。诶,我应该把那个把那个截图吧,啊也放在里面。那样的话我也懒得发了。这什么意思啊,就是这个地方我来去我来去创建一个文件夹,就叫截图吧,可以吧,可以接下来我到时候我直接啊,我这一次我去拷贝一下啊,这一次我拷贝一下,下一次我就直接保存在这个里面了。这样的话呢,当然能够直接。就看到这个截图了。这样的吧,好,那我现在做什么,是不是再一次提交啊,啊再一次提交啊,这个时候呢,就是截图执行了。
24:08
好,后面我就把所有把截图都放到这里面,好,大家现在要做的事情就是去把代码呢给它切开好了,出来来,我把这个地址给大家发一发。嗯,这个啊,不是搞错了啊,你看它是吧。嗯,我把这个例子给大家发一发,大家需要去做一个切号的操作,你们用的用户名是A啊,密码是一。你们只读。192.168.10.165。
25:12
那个还有同学可能那个SN不太好,那我就把那我就把我这个文件夹共享一下啊,因为有的同学确实是有问题。这。嗯,做一个贡献。添加目录。
26:25
大家切号了一下,看看报错报错了,你们是不是用户名密码写的不对啊,你们把用户密码清一下。有成功了吗?我看一下我的那个账号啊,对我的账号好像不叫不叫音,看是不是叫,估计有可能叫test啊,估计我记错了,我看一下我再看一下啊。我估计叫T啊,不叫A,不叫一叫TEST3TEST3。
27:06
我们不是一直在用A1B2开始三吗?用户名T的密码删。那你们现在应该是用户密码不对。收到。请给我。确实也是。把用码一下设置。
28:11
什么?你都操作一下。四个月,他们睡了,迅速下来。嗯。
29:09
往往在后面。不会操作的赶紧问一下旁边的同学问一下。右键除密码在这里面。右键右键。置密码问同学或者。
30:28
不用浏览器访问,浏览访问有啥意义啊,浏览器访问结果结果不通的。
31:53
他。
35:00
好了吗?没好一问一下,或者我问一下我啊,你你要不问的话,你就那里。好了好了。其实干任何事情第一步都很难,你别看着简单,我操作起来都没什么操作是吧,你一操作你就知道,你一不小心就操作错了。
我来说两句