00:05
对吧,嗯。呃。这个信息啊,三页下一页下一页下一页啊,下一页第一页最后一页是吧,都有啊行了,那咱们这边接下来就继续吧,那继续了啊,那这边呢,接下来该做什么了呢。这个吧,修改。修改,但是呢,我们。做修改之前啊,咱们需要先做一下这个两个图片的联动效果。啊,两个图片的联动,大家会发现这个图片和这个图片的颜色不一样,这个颜色是是是灰色,这个颜色的话是一个绿色吧,嗯,应该是这个是可以用的,对吧,如果是这个灰色的话,就表示这个按钮不能用呗,啊就是这个意思啊,所以所以你看这个东西它。
01:02
在这儿呢,要控制一下啊,比如说吧,啊,我们把这个勾打上去了。是吧,打上这个勾之后呢,那你想一想,我现在选中了几个呀,一个,我要是选中一个的话,你想一想这个修改跟删除这俩。是不是都应该能用啊,能修改也能删除,但是我要打俩勾呢。我要打俩勾呢,我选中两个,那肯定修改就不能用了啊,删除应该是可以用了吧,那比如说我再把这俩勾去掉,去掉之后那俩这俩应该都不能用了,所以这块我们得做一下两个图片的联动啊,一起来看一看图片联动怎么做啊好。行吧,那这样的话,咱们这个关掉来,咱们把这个项目复制一下。复制啊,咱们贴过来,然后呢,给它改成010吧,十个了啊行了OK了啊。
02:02
呃,这个零九呢,咱们这个路径还是拿一下。来关了。点它给它部署一下啊添加。一起分析一下啊。那这种呢,在我们应用中也是比较常用的啊。就是这个关于这个删除呃,图片和修改图片的联动效果啊,联动效果。行吧,这这这个这个版本,我我就做这这一个吧,啊删除图片和修改图片联动。行就做它啊呃,那这边呢,咱们来看一看入手点啊,先把服务器挤一下,然后呢,再把。
03:07
咱们的这个浏览器打开啊,再访问。来,我再点登录。来登录来这边的啊这个。然后呢,我就肯定是干什么呀,点这个吧,我只要点住这个框或者是这个框啊。那就应该干什么呀。比如说点中它。是不是应该把这三个框都过滤到?对吧,获取到之后呢,是不是开始判断呀,判断如统计一下吧,有几个被选中吧。如果有一个被选中。那就应该是什么呀,修改删除都能用啊,修改删除都能用,那想必这应该是有两个图片吧,应该有一个灰色的图片,也应该有一个什么绿色的吧,所以我们给它换一换路径是不是就行了,这个图片的路径是不是能修改呀?
04:01
那比如说我我我我我我如果选中是两个呢,两个那就判断呗,是吧,如果一个都没选中是零呢,那再判断呗,所以这个比较容易啊,不是很难,所以入手点的话,你看见了,当你点这个勾的时候,这个会发生联动效果,那肯定是在这加事件加那个叫什么事间句柄。Uncle吧,那这的行吧,那咱们就写吧,啊,这个框你能找到吗?所以入手点啊,关键是同学们能不能找到这个框。这个框是循环里边的。是吧,这不这不循环吗?这不第一行吗?啊,这不第二行吗?这所以呢,肯定是在这个序号前面吧,找吧啊搜吧啊打开这个这个那定位啊呃,咱们找到U点点JSP啊,然后咱们一起来看一看这个u.JSP里边啊。还有一个这个for循环,For循环你看第一个是一个check box,哪个是check box。
05:05
这个吧。这个想必就是那个叫什么框啊,复选框啊,行了,那咱们在哪加事件呀。加时间句顶的话就在这个里面加呗,你就加个on click吧,啊on click alert啊,你先测一下。行了,接着看看一下啊,来,我们在这呢,刷新一下好了点住。是吧,你只要一点,你只要你不管是选中还是取消,你只要是点一下子它,它是不是就判断呀,你点一下它的判断啊,你点这个它是不是也判断呀,你点这个那不也直行吗?那都直行啊,都直行,这个也是直行。所以现在这是个循环嘛。这个input里边是不是。会有好几个呀,这一个TR是不是再来一个TR啊,这name来改一改,咱们叫啊,这个name起名叫U。
06:12
类型是拆帽,Value咱们不用啊,Value现在删掉。到时候value我会讲这边呢,我先给他来再来测一下刷新啊,以免出问题啊,行了,就这样没问题吧,好就这样了啊呃,那如果是这样的话,我就可以把这个干什么呀,删了吧。嗯。那我就写了啊,叫control吧啊control。控制谁呢?就是这个delete and update对吧,函数啊,咱们写一下。它是来控制我们的一个删除图片和这个叫什么。修改图片的啊,所以这个时候我就写个函数吧啊,就是删除和修改图片的联动效果,所以这个时候呢,方程吧啊啊写上好了这个函数你再测一下啊,以免到时候呢有问题不能执行啊,所以这个时候呢,你就写上来。
07:21
这边写上啊,跟刚才最好不一样。行吧,这个呢。你得注意一下,嗯,行吧,没问题啊,好了,写一步测一步,一般的有时就是遇到一个很大的问题,就是加完所数这些东西出现问题之后怎么调,其实后期呢,你们会用这个FF啊FF呢是firefox firefox里边有一个插件,这个插件想呢已经见过了,叫firefox。但是bug的插件呢,可以很好的支持我们GS的调试,所以将来你会接触这个东西,现在咱们主要是IE浏览器啊。行吧,所以呢,这边呢,出问题啊是很正常的,你看啊是这样。
08:08
呃。ABC。这样吧,ABC点。嗯,随便写一个啊Y6。这个是不是会出问题啊。会吧,这个变量是不是不存在啊,行,我试试啊刷一下。然后我点点,嗯,看见了吗。嗯,那我再来啊,刷一下刷新一下,你看没有吧,那我点了啊一点看有了吧,这只要是出现叹号,那你放心啊,在IE浏览器里边这100%的就是什么呀,就是错了啊,你的Java足了就有问题了,你双击把它打开之后呢,你看一看这有个显示详细信息。这个显示详细信息呢,这个行数到底是说的什么行呢。
09:03
我说一下啊,说的是你在这个地方点右键啊,说的行号。97行。明白我意思吧,这个说的行号,它不是这个加JSP里边的啊。你看这是多少行。113吧啊。所以这个你还得会啊,所以这个出现问题啊,点右键你在这呢。你把这个打开啊,你看一看,他说第97行,第97点右键查看原文件啊,第97你从这儿找,听明白了吧,所以这边呢,也算是我讲的一个新的知识点吧,大家都不会调,我今天把这个事儿说一说啊,正好也说一下,就这样吧,嗯,一般的调呢,我我个人有一个习惯啊,比如说你在这啊写了一大堆程序,我一般给你调的时候,你看见了,我怎么给你调,你在写了很多很多很多程序,怎么点这个函数呢,里边都看不出来怎么办,这么多怎么办呀。
10:01
我一般都这么调,我要是给你调的话,我就这么做。我把你写在代码呢,干什么呀,粘到一个临时的文件中,接下来呢,我这个程序就开始把这个东西全删掉,只留一个函数,我写一个alert,我先看一看你这个函数执行没执行。明白吧,那比如说你这个函数执行了怎么办呀?行,我知道了,来把你第一行。粘过来放到这。下面再写个A。我看这个的执行不执行。明白吧,我一般给你调程序,我就只能这么调,因为有的时候它出现这个行号呢,是有问题,它也不也也不太正确,实在找找不出来怎么办,我觉得啊,大家呢,为了提高效率,其实可以采用叫以前所学的类似于什么二分查找的方式,其实你没必要一行一行粘过来,对不对,怎么办?占一半行吧,嗯,占一半过来。占一半,过来之后你想一想,如果这个时候A能执行,那你就假了,运气好是吧,运气好这上面都没问题。
11:10
是这意思吧,那行了。行,那我这再再来吧,剩下这这个东西我再粘一半行不行,我剩下这个东西再粘一半啊,粘一半发现这个东西也能执行,行了,逐次逐次筛选,最后筛选了,你不要这傻了吧唧的啊,就是一行一行一行课那样不行。那样不行啊。这样测的话就效率太低。所以推荐啊,还是一半半的测比较快一些。还有一个问题啊,就是。这个有的时候这样的啊,再说一下这个不准。有的时候不准啊,所以呢,这个会出这个问题呢,所以啊呃,还是有个工具好是吧,这么测的话,其实我们有的时候开发这么测效率太低啊,所以呢,咱们以后会用这个。
12:04
对。这个。这都用过了是吧。这是ay元素控制台,重复一下CSS脚本。这边的话咱们访问一下啊,这个好像有兼容啊,嗯,要3w.com。等会我就看这是吧,兼容啊在这呢。往这里边儿呢。是吧,你看。它是有兼容啊。这边现在有错吗?没有。
13:02
行,就是这个啊,这个地方,那这有什么控制台啊是吧,有什么错误报告啊,脚本啊都有。对吧,对象的创建。这个以后再看吧啊,现在先不看了,把它关了啊。这个呢,咱们要知道这是第97行啊。行了,咱们这边来看一看刚才说的这个调试的问题啊,下一周呢,注意一下怎么写这个代码。你在这点的这个复选框吧,你是不是会执行那个函数啊啊,这个函数的任务是为了什么,这个函数的任务主要是为了统计。被选中的数量对吧,所以这个时候大家想想,要把所有的复选框都获取到,但是你要记住啊,这个复选框不获取,你获取的是这三个。你怎么去获取这三个复选框,咱们GS里有一个程序啊,不知道大家有没有印象。
14:08
什么函数啊?我找一下啊呃,打开。Document。啊,你用的最多的是这个吧,是不是还有个方法呀。叫by name,这by ID的话只能过去几个,一个这个by name的话,是不是过去多个呀,这数种啊,返回带有指定名称的对象集合,所以咱们就用它吧,啊来怎么写。document.guide elements name name不能随便写,你这个负二循环的input标签的name叫什么user code啊,所以呢,我给它拿过来放在这。
15:03
4360网上弹性搜索快捷键冲了啊,这个是吧,那这样的话反过来是什么呀。是不是所有的扣的呀。是吧,来干什么呀,接下来循环呗,循环统计什么统计被选中的什么个数吧,统计就行啊,双循环怎么写一律性哎。等于零啊。写写着写写懵了啊,有点扣点这什么呀,还是Le子吧,还加一加啊,那你们循环一次的话,你肯定会肯定会取出这个数组下标为I的元素啊。那你想你把所有的框都拿到了,现在你取出其中一个框。
16:01
取出这个框之后,它就是个什么对象啊。他是个什么对象?他是个t box?所以这个时候你打开了啊,还是这个还是需要打开这个叫什么老猫的理想是吧,打开。你看这个check box这个对象有的,它里边呢有一个东西叫check,这是什么属性啊,不是方法check的这个属性呢,它是设置或返回check box是否应被选中。就有两个作用过吗?或前面是怎么设置。括后边是什么呀,返回,所以这个时候呢,我来试一试啊来啊这是谁呀,它点什么拆了吧?嗯,行了,测一下吧,啊测一下吧,来我刷一下啊刷新啊点第一个了啊,我点完第一个,它是不是会执行这个函数啊,这个函数是不是过去所有的复选框循环,这个循环会循环几次啊。
17:00
是不是三次啊。没你们忙。我看有就皱眉头了,有疑问。这所有的负选框循环吗?循环三次是个几个框啊,三个框啊,你就循环几次来点怎么样,数入吧,三个字几啊数吧,这个这是数啊来再来我点完这个确定它是不是会执行这个呀。因为循环会往下继续执行吗?Alert吗?来行了点确定你看什么。Fourth吧,再来是不是放?所以只要被打上勾的全是数。没打勾的是false,是这意思吧,行了啊,这就判断出来了,那就if吧。如果被选中,那就统计呗,那统计啊叫check count0行吧,啊,如果成立了,那就拆给他看着干啥,加下。
18:02
这个负循环结束之后,这个抗是不是就有值啊,啊根据什么?根据选中的数量叫删除图片和修改图片联动。那比如说。选中零个,选中一个,选中一加个它不一样吧。选中零的话是啥意思啊,是删除和修改都不能用啊,选中一个呢,删除和修改都能用吧,那这个呢。修改不能用了啊,不能用啊,删除能用了,是这么一个区别吗?
19:06
行了,呃,能用不能用的,咱们其实只要是控制这两个图片的路径就行啊,这个图片是不是在新新增的新增的后边啊,所以可以研究一下啊,新增是这个吗。新增后边有一个update,有一个delete吧,是不是image吗?那这个时候可以加个ID吧,你为了通控制这个图片,你想一想你是不是通过ID来获取这个image之后修改这个src属性啊,这个时候你就在这写上啊,这是一个什么D啊,Update image吧,行吧,下面也来个ID啊,ID是什么?Delete应该是吧,行吧,高了啊嗯,就这样吧,那行一起研究一下这个图片啊。呃,图片是image的,Image里边你看一看有没有一个ID属性,你看还有什么src属性吗?SP2C吗?设置或返回图像的URL了吗?
20:02
是吧,嗯,就是行了,咱咱们就用它了啊,怎么写啊。嗯。Delete image update是吧,先拿到吧,怎么拿document.get element by ID吗?ID是叫什么?其实还是别写了啊,一会写错了来,写错了,咱们这给你调了这边呢啊。这个是吧,这是更新啊,更新是在这的啊,你看你写着写,写歪了,把这个放到上面,有可能来再来这个delete吧,看准了啊,这个是delete啊行这个行了啊拿出来之后呢,你就开始了,你就delete,什么叫delete image,它里边有一个什么src吧,啊改一改就行了,来你是不是还有呀,Update啊,点什么src,你改一改就行了。
21:04
S2C呢,这个路径怎么写,你看这个路径怎么写的。这是更新吧,所以你把这个路径复制一下啊更新。关键是这个吧,行了继续啊。删除是这个啊,把删除的拿过来也放到这,那么大家看一下啊。删除和修改都不能用,那应该是有一个Dis的对吧。所以这个时候呢,如果我把这个复制一下对吧,放到这,那这样的话,大家看一看都能用的话,应该是把这个去掉对吧,那这只是一个文件的名字吧,就是你只要把它去了,是不是这个文件文件就变了。所以说你得确保一下有这个图片吧,来打开。是吧,行了,就就这么着了,这个不看了啊,来咱们把这个复制一下啊。
22:09
修改不能用。删除能用吗?不能用,是这个吧。所以这个时候得判断一下啊,哎,如果什么。这个吧,要是等于等于零,有的人说老师他有可能等于零吗。啊,只要你勾选上,你要再去掉。是不是就零了,你在去掉的时候,你点不点啊。想一想啊。来等于几啊一吧。这个呢?
23:07
改一个先试试啊,不行咱们再改。啊,怎么着,我先试一下啊,行不行,来点右键我刷新一下,行了,点这个。啊,都能用吗?我再点一个,这怎不能不能用,这个能用吗?是吧,我再点三个也是一样的,所以我去掉一个啊,是不是还是这样啊,我再去掉一个,你看这俩我再去掉一个没不行了。这就成功了,这就你就控制住了。这就是DOM编程嘛,是吧,叫DOM编程。使用JS代码。把网页中的某一个元素操作一下。的当边长。核心对象是哪个呀?叫document啊,点get是吧,Get取出来之后呢,操作这个元素,我经常一般的把这个对象叫造对象。
24:09
明白吧,这个你见过啊,行,那么咱们一起研究一下,这个肯定不行啊,一起看一下,为什么说不行呢。不能用,是不是就应该不能点。对吧,你看啊,这不能用吧,应该还能点。是吧,你说你整半天你不能用啊,你就是个摆设是吧,你这用户该点还得点,用户一点过去了,所以既然是灰的就应该不能点,对吧,怎么去让他不能点呢。或者是点了没起,或者是点下去不起作用呢,我们一起研究一下啊好了,这个呢,我给你单独讲一个新的知识点,讲完之后呢,咱们大家再一起用一下来。在这啊,07DOCUMENT点右键新建一个,咱们是零五。
25:10
Disabled。啊。失效。这个啊,大家看。这边呢。我看一下啊,有一个头我加一下吧,啊加一下来讲一讲这个东西。Title title啊,然后这边呢,我说一下关于HTL标签的叫disable的属性啊这个东西。好了,接下来呢,加一个body body好了,这边呢,我看一下写一个into type类型是text text,然后后面的咱们加一个叫什么name吧,改一改啊,换成button合适,Button,然后这个name呢,咱们。
26:20
你先别点那个,直接给个value点击按钮,那么这边呢,我先把它打开啊,大家看看是这样的,直接点右键啊打开。是这样的吧,那点点点能点吧,那这边我这样啊,加一个什么呀,On click啊,我加一个什么呢?Alert吧,测一下行不行,来加上去test就这高了,你看点那是管用的啊,来刷一下,然后呢,接下来你就在这点点是吧,你看能执行吗?比如这个按钮它有效还是无效啊,是不是有效啊,比如这个时候我再来一个啊,我把这个复制一下。
27:05
我在这换个行贴过来啊,贴过来之后呢,我在这个按钮上加了一个东西叫disabled。你就这么写了一个单词叫disabled,完事之后呢,我再刷新一下,你看一下。那这个跟这个有什么区别呀。这个你看点不了吧,哎,我点了啊点点点点没反应,这个这个这个没反应啊,这个是吧,这是disable的吗?嗯,Disabled那这个点行吧,来我再来看一看。再加一个图片,呃,再加一个按钮吧,啊t part这个按钮呢,点击我啊,可以让第一个按钮变成。或者是让第一个按钮失效了,行吧,点击我可以让第一个按钮失效,啥意思啊。
28:05
我只要点这个这个失效行吧。能做吗?无非就是给这个按钮加一个什么。Disable的吧,你看你看它带着disable的吧,它是不是就不能用啊,那这个不带的话,我是不是能点这个执行一个函数,让这个函数给这个加一个吧,行,可以的来加一下啊,叫on click,嗯,对吧,叫。乘以八。行了,就这个得了,随便写一个得了啊,来在这写,写一个什么script,来script啊,写上在这写个函数吧,Function啊,就是它得了啊,来大家想一想,这个函数怎么写呢?这肯定是要ID吧,ID啊,叫my button吧,My button那怎么写啊?Document点啊,Get element BYD啊,你控制它的话,那这个吧,啊,Button。
29:09
好了,那这样的话,咱们拿到这个买button拿到之后呢,咱们来设置一下怎么设置得得得得看这个了。来一起看一看属性。D开始的是吧。ABCDD是able的。嗯,醋和是吧,那这时候咱们用一下这个吧,啊,这样的话咱们my garden等点叫disabled。我们先写个数行吗?对吧,来我们试一下刷新我们点一下啊。是吧,那这样的话咱们能写个放。这个当然是。当然它本身就是能用的啊,没事是吧,能用吧。好,写个处给它失效吧,嗯。
30:09
我还可以再给他改回来吗?能改回来吗?点击我可以让第一个按钮可用吧,那这样的话这个二吧行吧,那这样的话这个函数是不是得再写一遍啊,接过来吧,啊,我这写的什么放吧,好刷新一下啊,我先点第一个。函数重名了啊,来点对吧,点点。是吧,你点不能用你就不能点,那点这个能用你就能点吗?是这意思吧?行,那既然是这样的话,大家想一想,我现在把这个例子给你讲完了啊,以这个独立的例子给你讲了啊,讲完之后呢,你好好理解一下,接下来你这个怎么控制啊。
31:04
啊,你既然上来是disable的,那所以这个不是加不加那个disable的呀。Disabled加上吧,你后边这个是不是也得加上disable的呀,那上面这俩是不是都不能用啊,不能用就不能点,那接下来我就打开了啊,打开之后呢,我访问一下这两用呢,都不能用了,来点点啊点,然后呢,我点了啊点一个。点了吧,不行了。啊,点了点不行啊。我点修改不能走了啊,但是大家看这回是不是也不能走了。是走不了了,为什么走不了了,因为disable了呀,是吧,所以这个时候你得研究一下啊。这边的话删除修改都不能用的话,应该怎么办?它的disabled等于数。
32:04
它的disabled是不是也是等于出你把这个直接拿到这都能用的话,写成什么错吧错这边呢。删除能用,删除能用,这个是放吧。好,接下来这个再来看一看,点右键我们刷新,然后接下来点这个啊点修改那能用吗?嗯,但是如果你点取消了,那你就点点点不了啊,你看是吧,我点点不动不管用。这个时候。这就行了啊,选中它能能用就过去了啊。取消不能过去了啊,不能过去,所以呢,这个叫什么修改和删除图片的联动效果呢,就做完了。
33:09
这个没什么疑问吧,就这个函数啊掉就行了,下一周的一步步写吧啊。行吧。
我来说两句