00:01
我们上午的时候呢,我们讲的是这个蛋零五这个库存列表啊,这么一个界面,然后呢,紧接着呢,我们介绍了一点点javascript的一些语法是吧。下面呢,我们在这个页面上,我们来添加一些javascript的一些特效,咱们一起来看一看啊。所以我把这页面复制了一份零七。呃,我们的JS文件呢,呃,JS的代码呢,我就不在这边写了,我可以通过外部文件的方式啊,把它引入进来,好,我们这边写个type text。然后呢,我们写的是javascript。OK。好,那么我在这里面我需要一个src属性是吧,同学们。好,我想在这边写一个叫JS杠,比如说零七.js。哎,对的,我写的是JS。啊,这个有问题是吧,JS好。那当然这文件还不存在的是吧?同学们啊,咱们得需要把它引入进来啊,也就是说我们的JS文件如果你也放在这个HT文件里面,那就太多了啊,所以这个加速的代码咱们就也和这个CS一样啊,独立的一个文件来进行存放。
01:06
那行吧,所以呢,我在这边新建一个。啊,我新建个JS。然后呢,我在这里面,我去新建一个记事本文件啊demo07.gs好。OK,再来。呃,我把它打开啊,我把它打开。那行。然后在这里面去引用它没有问题的好。同学们,下面一个我想做的一个是什么功能呢?来,我用浏览器在这边打开啊。下面我想做的第一个功能是。当我们鼠标悬浮在。苹果。啊,西瓜呀等等这些行上面的时候,这一行它会变背景颜色。这一行会变背景颜色。那这个时候就需要用到一个我们没有学过的知识点了,我们称之为叫事件。咱们一起来看一看。
02:03
我先找到找到我们的,比如说苹果。啊,这是一个,这是一个,这是一行。然后我在这个行上面,我来写一个on。On表示当什么什么时候。Mo Mo表示鼠标。Over over表示悬浮。当鼠标悬浮的时候,我去调用一个时间叫修BG康。哎,我就调用一下这个方法。叫秀BG,就是background。那这个方法咱们还没写呢,所以呢,下面呢,我要来写这个方法。我们来看一下啊。下面我们来写一下这个方法,CTRLC。回到我们的JS文件里面去,我让他写一个function,把它放在这。按照我们上午学的一点点语法,这应该是咱们的一个函数的定义吧。啊,就是这样的。
03:06
当鼠标悬浮时,显示背景颜色。就是这样。来,再来。那么这个方法里面我应该怎么去做呢?当鼠标悬浮的时候,我调用了这个方法。我想让这一行有背景颜色。我需要给大家,我需要给大家讲一个,呃,讲一个对象,这个对象叫。Event。啊,这个对象叫event。Event表示当前发生的事件。我们称之为叫event。指的是当前发生的事件。事件源是什么?事件源就是事件发生在哪一个节点上面。哦,我这边写了一个almost over,那我们事件就可以发生在TR这个节点上面。
04:02
这叫世界缘。Inventor。点。Element。Element叫施件员。他指的是施件员。好了。我们一起来把这个对象怎么来alert,把它打印出来看一下alert。我们看一下它是不是一个对象。然后呢,我们再去alert什么呢?好再看好了alert一下它的一个叫tagname。Tag tag指的是标签的意思,标签、标志、标签名。那你说如果是这个标签,它的标签名是不是就T2。如果是这个标签,它的标签名是不是TD啊,哎,就是这样的。我们可以把这两者打印出来看一下。
05:00
好,我们来试一下。好,我把鼠标放在苹果这个这一行上面。你看它是不是出现一个object呀。我们点一下确定。但是第二个tag我们打印出来发现是什么呢?发现是TD。那么TD和TR是什么关系啊?TD是不是在TR的里面啊,TD是不是属于叫TR的叫子节点啊。或者叫紫元素也可以。那你说老师不对啊,我这个事件明明我写的T2上面的。这个我们称之叫事件传递。你想一想啊,同学们,你鼠标放在这个TR上面的时候,其实你的鼠标不也是在TB上面吗。诶,是不是这个事件传递进去了,所以它获取到是内部的这个叫TD。那么通过这个分析,我差不多下面我要开始写代码了。这个地方我们得到的发现是TB。
06:03
If event存在。并且inventor。点sca的存在。并且invent.sc。Element EE element.tna等于等于TD,咱们刚才分析得到的。哦,如果是这样的情况下,就表示我当前这个事件啊,没有问题,VRTD等于invent.src。Element。这样我就能拿到这个TD了。那么我们刚刚分析的TD和TR之间是不是父子关系啊?TD的父元素是不是T2啊?所以我在这个地方我就可以写一下Td.parent element。好,这样我就能得到T2。那么我得到这个TR之后,我就有办法了。好,稍等一下啊,我把它写一下。基地点,Parent element。
07:02
表示获取TD的负元素。啊,那负元素肯定得到了,就那就能得到TR标签。那么T2.style。点background color。哎,给他附个背景颜色,好,这边我要写一下。T2.style。啊。如果想要设置某节点的样式。啊,如果想要通过GS。代码设置某节点的样式,某节点的样式。则需要。啊,需要需要加上。点style。行吗?某某某节点的点style能听懂我意思吧,然后再去点出样式属性。那你说老师你怎么知道有的样式属性的呢?
08:02
来,我们帮助文档里面有。我们大家一起来看一下啊,不是这个帮助文档,稍等我一下啊,我把另外一个帮助文档也打开。我们在资料里面,我们这边叫网页制作手册。比如说同学们,我们刚才看的不是T2吗?那行呗,那就看T2呗。T2这边有个专门有个叫样式,能看到吗?样式其中有一个叫background,注意这个叫样式叫标签属性。后面一个叫样式属性,前面一个对应的是我们的CSS。后面这个对应的是GS。就是说我们在CS代码里面中间加个斜杠,Background color。那么javascript里面属性是什么呢?哦,那就是background,这个C是大写的,没有杠,点进去你看一下某某某对象,点点background能看到不?啊,它的语法是这样的。所以呀。
09:02
所以。我们找个颜色吧,比如说当我鼠标选中的时候,我给他一个颜色,比如说给他一个海,这个叫海军蓝是吧。就这个吧,给这个颜色好。然后呢,咱们再回到代码。所以给他设置一下。把它变成这个颜色。好了。那我们一起来看一下,看看行不行。刷新一下,稍等一下啊,我们这个应该已经没有了,刷新一下。你看啊,我把鼠标放到苹果这一行。可以了吧。他就立即立即就有这个背景颜色了。光有这个背景字不行啊。这个里面的文字颜色不太好。我们最好背景是比较深的颜色的时候呢,我们最好里面的文字最好是亮一点的,比如说白色。好,所以呢,我现在。我这个地方,我把某一行的背景颜色我设置了一下。
10:04
然后呢,紧接着我再来。我需要把这一行里面每一个单元格里面的字体颜色,我也要把它设置一下。所以T2。点。Sales,我要写一下。TR点表示获取这个TR中的所有的单元格。表示获取这个TR中的所有的单元格,叫sales。好,TDS。然后负循环。诶,还能写负循环的,当然可以啊,I小于TDS.les I加加,所以你说这个TDS是个啥呀?应该是个数组吧。取出其中一个。然后某一个Td.style点字体颜色是不是就直接是color了呀,那行吧,咱们写个white。啊,把自己的颜色变成白色。
11:01
就是这样的。那咱们来试一下。回到这,我们刷新一下。好,把鼠标放上去,你看文字是不是变成白色了。啊。那下面所有的行也是一样的。其他的行,我也需要这么去调用CTRLC。感觉。Could you?根据V好。就这样子。再来刷新一下。所以苹果,西瓜,菠萝,榴莲都可以吧,都是没有问题的。啊。哦,还在变回来是吧,是的,这还没讲呢啊,下面我们就开始来,当我们鼠标离开的时候嘛,你得把这个再再恢复过去。嗯,鼠标悬浮叫over。鼠标离开。哎,鼠标离开我们叫out,对吧?好,On mouse out,当鼠标离开的时候,我们写一个叫clear BG count。我们写一下这个方法叫clear BG康。
12:01
好,所以再来。把这个删掉啊。好,我们再写一个。当鼠标离开的时候。当鼠标离开的时候,离开时。啊,恢复。恢复原始样式。Function b对不对?那么我就照写了啊,我就不写那么多注释了。If invent存在并且invent.sc存在并且invent。点sc element.t。等于等于TD是不是固定写法?表示我当前事件确实是在某一个单元格上发生的吧。那么我取到这个单元格invent.sc element。取到这个单元格,取到这个单元格之后,我就可以取到TRTd.parent element没问题吧,取到TR之后那就好办了,tr.style.background。
13:06
他有背景是吗?以前我们有设置过TR的背景颜色吗?好像没有设置过。我们是没有设置过的。所以我就写个叫transparent。啊叫transparent,叫透明色。然后TR里面的每一个字体,我也得把它换换一下。VRTDS等于tr.sales拿到所有的单元格负循环VR2.0I小于TDS.i加加。好,TDS。中括爱点style.com。好,给他个颜色,我们之前的颜色是什么来着?反正我记得,反正不是黑色。我看一下啊。我们找到CSS呗。应该是在CSS在这里面应该是代码零五里面的是吧。
14:00
嗯。是是哪个颜色。看了呢?是这个吗?是吧,应该是这颜色,那行CTRLC咱们拷贝一下啊。拷贝一下。这个颜色呢,其实这个颜色我可以把这虫子片拿出来剪切。我们可以直接在上面写一个星。嗯,就是所有的节点里面的这个字体颜色都是这个颜色,当然我们实际开发的时候,这个芯一般我们禁用掉啊,不允许你用这个,因为这个有有些问题啊。那这个地方呢,我就直接把它拷过来了,所以呢,我就把它颜色把它恢复一下,CTRLC跑到这边来,CTRLV是吧,把颜色再恢复回去。好,这个是当鼠标离开的时候。那你这个地方改掉之后,那这边也得改,这边也得改是吧,同学们这边也得改。
15:01
OK。那行,我们再来刷新一下。可以了吧。这样就没有问题了。好,这是我们第一步要做的。那么下一步我要做的事情是什么呢?下一步我想做的是,当我们鼠标放在单价这个单元格的时候,现在我们这个鼠标的形状大家能不能看到?他是个箭头。我想把它变成一个手的形状。变成手的形状,就意味着。你可以点击。啊,那也就意味着你可以编辑。那行吧,我把它变成手的形状。好,代码零七。那也就是我们的单价这个单元格,也就是这个单元格。我们在这边写一个on mouse over。是不是当鼠标悬浮啊?当鼠标悬浮的时候,我写个叫修hand。啊,显示手势好,那我得补一个这个方法。
16:00
回到我们的JS文件。回到这边来。当鼠标悬浮在单价单元格时。显示手势啊。Function。啊,虚汗的,那以此类推,我们照照样写啊,Event存在,并且invent.src。的存在,并且invent.src。Element tag。等于等于不能写一个等号啊,写两个等号。一个等号是负值是吧,俩等号在来判断啊。这样就表示拿到这个TD了。TD。TD等于。或者VR啊。TD等于event.sc。Td.style它有个叫。这个单词的意思叫光标。我把它设置为hand就可以了。这个单词的意思叫光标。
17:00
啊,把光标变成手的形状。我们来试一下。刷新一下。把鼠标放在这边,这边成手的形状来,就这样子,那我们得回到谷歌浏览器看一下。是代码零七吗?你看这是不是也是手的形状?哎,怎么只有一个。啊,我只写了一个吗?哦,对,我只写了一个,下面还没复制呢,是吧,那行,咱们得复制一下。Could you see。到这边来就。Could you,喂?Can you wait。好,就这样子。那现在我们再来试一下。好,你看它就有树的形状,你跑到其他格子里面就没有是吧,就这个格子里面它是有的。那其实同学们我这边复制来复制去,我觉得你看啊,大家大家帮我看一下啊,我说了当前这是一个HTM页面。我们有一个想法是什么呢?我们有个比较美美好的一个目标,一个想法,你这是HTM文件,HTM文件里面就只出现HTM代码。
18:04
CSS文件就只出现样式表代码,JS文件就只出现javascript代码。这三个是独立的,你不要在这个HTP里面又嵌入这么多方法调用啊。那这个其实看起来挺让人纠结的。啊,这个H代码里面参杂到太多的事件绑定了。但是咱们刚刚是初学啊,初学的时候咱们还是这种用法要能够掌握,你先能够掌握这种用法。下面呢,我快速的给大家做一下优化,我说了HTP页面里面就不要出现这种GS的代码了。你看我怎么来优化,我把代码零七把它关掉啊,稍等一下我复制一个。这样大家好复习啊。我把它复制一个CTRLC复制个零八出来。然后呢,这个JS文件呢,我也附这个零八出来行吧,同学们。
19:01
好。然后呢,我在这个代码零八.html当中,我来引入的时候,这边就不一样了吧。da08.js是吧,同学们好,看我的操作。现在呢,这些我把它全部删掉,我再恢复成原始的样子。这个也把它去掉。好,这是不是就是变了一个普通的一行啊。这边也是一样的。把它去掉。OK。这边也把它去掉。好,这个地方把它去掉。好了,就这样吧。那你现在去,去完之后肯定就没有效果了嘛,是吧,肯定就没有了,下面我怎么做呢,同学们来。一起来看一下啊。找到JS文件,找到它。我们来看一下啊,这个方法我放在这边不动啊,放在这边不动。
20:02
我们的GS当中有一个对象,有一个系统给我们提供的对象叫window。Window代表的是当前窗口。当前窗口,它指的就是,这叫window。就像我们浏览器。这是浏览器整个的这个浏览器就叫window浏览器当中显示的这部内容,我们称之为叫文档,称之为叫document。然后呢,浏览器上面这边呢,导航栏我们称之为叫location。然后呢,咱们还有一些访问的历史信息,我们称之为叫history等等等等。但是不管怎么说,当前整个的这个窗口我们称之为叫window,行吧,同学们,这叫window,好,那我们拿到window想干嘛呢?Window我们可以给他绑定一个事件。window.onload。window.onload表示,当我当前的页面加载完成的时候,我可以去调用一个匿名的函数。就这样的叫window点。
21:00
好,这个把它保存一下啊,它显示红颜色,好叫window点这个window怎么还显示红颜色。好,不管他了啊。当窗口加载的时候,我要去执行这个叫匿名函数,你看这个方形后面本来应该有一个方法名的嘛。咱们现在没有方法名,它是个匿名函数,那行吧,咱们先简单alert一下,看它会不会调用。Hellowood,我们试试呗。这是HTML,我们运行一下。好点,它允许。你看是不是会弹出hello呀,它是会弹出来的。啊,那说明这个是生效的好。下面我要在这里面做什么事情呢?同学们,我要做,当我们页面加载完成之后,我就需要做绑定事件的这么一个操作。当页面加载完成,我们需要绑定各种事件。比如说我们在TR上面需要进行绑定。所以呢,TR是在哪里面的,TR是在我们的table当中的。我们这边是一个table。
22:00
天魔这边有个ID。所以所以呢,我们要获取这个table。这个table的ID啊,ID叫t BL float,好,我们怎么获取一个table呢?我刚刚说了,Window当中有一个子对象叫document。好,我把帮助文档打开给大家看一眼啊。看一眼就好。来,我们来找一下window对象,Window对象我们一起来看一下它的属性。好,它的属性里面呢,稍等一下啊。我们找一下这个对象啊,找对象啊。不是属性找对象,Window下面有哪些对象呢?第一个叫document。代表给定浏览器窗口当中的HTML文档,看到没有?哎,这叫document,再来invite,其实我们window点是可以省略的。啊,Window点,你看我刚才用那个弹出的方法叫alert嘛,人家完整的写法叫window.alert它是一个方法,你看一下。
23:00
看到了吗?A是一个方法。好。那么我们这边有个文档叫document。那么。我们用这个document想干嘛呢?完整的写法是window。Window window.document好吧,同学们,那这个window点可以省略,直接写document,哎,这个document它里面有个方法。我点进去。看一下它的方法,它里面一个方法叫get element by ID。ID,诶,刚才不正好一个ID吗。Get获取element元素BY通过什么什么方式?根据ID,通过ID获取某一个元素,是这意思吧。行。Document get。Element by ID来,我们把这个。Table把它拿过来,这样我就能得到这个float t BL了。这不是TB啊,这是TBL。
24:02
所以大家写的时候不能光抄我的代码啊,这叫体表,一定要理解。这样我就能获取到这个。表格了。根据ID。获取。根据ID获取到flu这个表格。获取了表格,想干嘛呢?Float t表点。Rules。这个叫获取表格中的,表格中的所有的行。叫点roses。我们来查一下,回到这边来。我们找一下table。Table当中有个集合集合集合集合。你看这边是不是叫褥子啊?获取来自于table对象的TR对象的集合,看到吧,获取所有的行。这样我就能获取了所有的行了,获取了所有行负循环。VR2.0I小于Rose点弄爱加加。
25:04
然后获取到某一行入子中国I,这是不是某一行啊,给他绑定事件。绑定鼠标悬浮。啊。背景叫悬浮,设置背景颜色世界。T2.onmouseover是不是,刚才是不是有on mouse over啊好。等于,等于什么呢?秀BG看,注意。此处没有小括号。如果把小括号加上去,就表示当场调用这个方法,把这个方法的返回值付给他了。你不能说你的错,我们有很多的这个JS框架,它底层在写通用代码的时候就这么写的。啊,那样写的话,这个比较灵活啊,但是代码不是很容易理解,咱们现在这个不带小括号,指的是当我鼠标悬浮的时候,我就绑定上这个事件,并不是执行的事件啊。
26:01
哦,我给他的鼠标悬浮绑定了一下这个事件。OK,绑定鼠标悬浮设置背景颜色,这个事件绑定一下。再来。我们在。价格这个单元格的时候,是不是也绑定了一个时间啊。所以我们得找到价格那个单元格T下点是不是Excel啊。哎,刚才已经看过了吧,是吧,C等于它某一行的所有的单元格。获取。T2这一行的所有单元格。好,然后呢,我们只对单价这个单元格感兴趣。Price TD。Sales,我记得他应该是中国号一,咱们从零开始吗?第一列是名称,第二列是个单价,我就拿到price t好,所以第二步。绑定鼠标悬浮在单价单元格。单元格变手势的事件。
27:04
好,所以price td.on mouse over,当鼠标悬浮的时候修hand。是不是不能带小括号呀,就这样的。修B康的啊,修hand,我就把它写好了,还有一个叫clear clear clear是在什么时候呢?是不是也是在这边绑定的CTRLCCTRLVT2点on mouse。Out是吧,离开的时候嘛,利用一下颗粒。啊,Clear BG看没问题啊,对的。就这样的。绑定鼠标悬浮以及离开。离开时设置背景颜色。世界。那我就写完了。所以现在大家再回过头来再看一下这个HTML,是不是里面就不会参杂着这个JS代码了?啊,这个是还是比较清爽的,要不然那么多事件全掺在里面,那太麻烦了。看起来不舒服,那行吧,咱们来看一下这个页面。
28:07
是不是一样的有效果,效果和刚才是一样的,那就说明没有问题。
我来说两句