00:00
来,那这个呢,是获取咱们文本框的一个value,那么再往下咱们看看这个这个怎么操作,Div span啊,使用这个inner htm和inner text。来从这呢,点右键啊,咱们新建一个例子,就再往下都是小例子了,各位啊,就不是那些枯燥的语法了,来到什么编程,再往下呢,就是inner HTML和什么呢,叫inner text来操作div和SPA好了,那这块呢,咱们拿过来。什么意思?比如现在有个div啊,Div开始,Div结束,这个div呢。我在这呢,有个按钮button value啊,我叫设置什么div中的什么。内容啊,设置div中的内容。
01:02
这个ID呢,还是把他吧,我来打开一下各位啊。我来告诉大家是什么意思,我要完成什么效果你就知道了。这个div我给个样式吧,要不然很难看出来给个样式啊,Style还记得吧?Type text CSS行不行?Div什么选择器?标签选择器,别标签选择器了,给个得了叫div行不行,那这样的话是井号,什么井号div是吧?然后呢,Background color背景色这块呢,咱们随便给个颜色啊,就给个这个颜色吧,行吧,然后呢,我们宽度呢,我们给一个宽度就给300吧,然后接下来呢,还有一个高度,是不是高度也给300啊,然后接下来除这个之外呢,咱们还可以再给他一个边框borderer。行吧,一像素红色黑色,呃,Solid实现边框宽度,高度,背景侧边框,然后定位position行吧,Position绝对定位行不行?Top离顶部假如是100像素行不行,然后离左边也是多少啊100像素,那这样的话,这个div应该是有了,就是这样,我的意思是我一点这个按钮啊,你把这个内容给我显示到这个div当中,显示一个东西出来。
02:30
就是这这个怎么做。啊,那这个要实现的话,咱们应该怎么怎么去做呀,你点的是这个呗,你点的是这个按钮啊,所以你这个按钮有ID,那就应该怎么写啊,在这写呗,Script开始TT加script写上,然后写上window.onload你看一直都是这样写了,对不对?哎,就算你不懂,你是不是慢慢你就会了。window页面加载完毕之后,执行这个回调函数,回调函数执行我们可以根据这个ID来获取元素document.get element by idd是谁呢?就是我们的这个ID是吧?拿到这个元素之后呢,诶,我们就可以给这个元素on click,因为你鼠标单击,单击的是这个按钮啊,对吧?单击这个按钮,接下来我们执行回调函数,走到这儿先做一个测试,各位啊,如果程序能正常执行,这个应该就能弹出来,所以打开之后呢,我们刷新之后,我们点一下,大家看程序能够执行F12调出来,我的习惯一般就是配合这个F12仪器一起用。
03:33
出错我一眼就能看出来,在这听懂了吧,你们下来之后做这个的时候一定要把它打开啊,不要去那猜啊,因为这个东西呢,调错JS调错向来都是不是很方便的,它不像加va,它可以用idea加断点是不是?哎,它不是那么方便啊,来程序起码保证到这儿是不是可以执行的,接下来我们要干什么呀?我们要设置什么div的内容?首先第一步是获取div对象,我觉得这个大家应该没啥问题吧,获取div div对象等于document.get element BYD是div,这样的话是不是就拿到div这个对象了,Div这个对象拿到之后,这个div开始和div结束,这里的东西怎么设置呢?我们有一个非常重要的属性,就是第二步使用HTMHTML这个属性来设置元素内部的内容。那么怎么设置呢,Di?
04:33
点。好,后边跟内容就行了,内容啊随便写。随便写的好,那么接下来刷新一下,我点一下走。诶能能能看明白吗?诶设置内容,那如果说我这个代码现在怎么着呢?后边这个内容啊,不是这么一个普通灯块,它要是一个HTL代码呢,什么意思,放边开始放纵边结束,然后放纵边开始结束之后呢,Color颜色,字体颜色为红色,然后比如说用户名不能为空,好这个大家能看懂吗?
05:15
那么接下来我们在这再刷新之后,再点一下你看。是这个吗?哎,跟他同级别的还有一个叫做什么。叫做inner text,我们来测一下这个有什么,跟上面这个有什么区别,打开任务们刷新之后我们点一下。这两个有什么区别,两个区别是什么?告诉我如果是HTML,那后面的这个内容就会当做H并执行,执行行出一种效果,但text就算你双引号里边放的是HTML码,但对不起,我也只是会把你当做普通文本来处理,并不会把你后面的这个东西执行展示出一个效果来,大家理解嘛,诶所以说这个呢,就是一个考点了。另外这个呢,以后我们也一直在用H和ner,他们不是方法,记住他们不是方法,是属性,是属性各位。
06:29
是属性啊,是点后面一个属性,没有括号懂吗?这个也没有括号,没这个不是方法,各位,这个整体主要讲的内容呢,我在这里给大家罗列开啊,就inner text和inner HTML属性有什么区别。相同点都是设置元素内部的什么内容对吧?不同点是什么?不同点是拉HTML会把后面的。
07:12
字符串当做什么一段HTL代码解释并什么执行你哪什么。XL会把后面的字符块当做一段HT代码解释并执行inner text呢?即使后面是一段什么HTML代码,也只是将其当做普通的什么字符串来看待。好,这个就过了。那咱们会用到啊。
我来说两句