00:00
好,我们开始上课。现在呢,来开始上课啊。啊,大家看一下我们现在的环境应该没问题了吧。大家听我们的声音呢,还有这个视频内容应该不卡顿了。现在呢,我们来开始上课。把这窗口呢,稍微小一点。稍微小一点。嗯。好,现在呢,我们来看一下事件的一个处理机制,绑定事件。这块呢,它是支持事件的,我们来看事件的语法规则,该怎么来给到对象呢,去指定事件。这query中呢,指定事件呢,有两种方式,第一种先说第一种方式啊,第一种方式呢,是这样选择器。点监听事件名称、事件的处理函数。通过这种方式呢,我们可以给指定的对象去绑定一个世界。
01:03
在程序的执行期间绑定事件。好,往下来我们这呢,加上一个内容吧。我们叫做实啊事件。给carry中给盗墓对象绑定事件啊,绑定时间,那么第一种方式呢?语法规则是这样的,Dollar,然后是选择器。选择器点事件名称,事件的名称,然后括号事件的处理函数,处理函数,那前面这一部分选择器呢,就不用多说了。是用来定位盗墓对象的。的选择器,它是用来呢定位do对象,那这个do对象呢,是可以有多个的啊,这些盗墓对象都绑定事件了。
02:18
高仿定事件了。周装选择器,如果你选择是一个对象,那么这一个对象有时间,如果你选择器选择十个倒对象,这十个盗墓对象全都绑定上了世界。但是说世界名称。这个事件名称呢,它就是就是。JS中事件去掉on的部分。你的事件去掉的部分。
03:00
On的部分,那例如呢,你的JS中单机事件是叫做on click on click。那这里这query中,它的世界名称就是click都是小写的啊,都是click,就是click都是小写的。好,这个世界名称,所以呢,你不用单独记,就是JS中的那个世界,去掉on的部分。就这一部分呗。这就是我们现在这一块中用到的事件名称。啊,这是件名称,括号里边这块是一个函数,啊,这是函数,事件的处理函数,它就是一个发生,当事件发生时。
04:02
为执行这个函数的内容。啊内容,那例如你要给这个按钮绑定事件,给ID是BTN的按钮绑定一个单击事件,那你这么用就行了,首先选择器ID吗?那应该是减号。BTN,点什么事件click,单击事件,事件的处理函数呢,直接定义就行了,定一个function,然后这里边呢,我们来做一个a lott,我们说BTN按钮单击了。这就完事了,这样呢就可以动态的绑定事件。是在我们的程序执行期间呢,给按钮呢,去指定不同事件的。
05:01
这么做呢,你就不用在这儿就指定了,原先都在这指定,这指定一个安click是fun,这样的话呢。就是说你在定义按钮时,固定一个事件,这个不够灵活,这块呢可以灵活,在我们的代码执行过程中,你可以给你的按钮呢做不同的事件处理。好,那我们来试验一下吧,给这个B t1呢去绑定一个事件,那我绑定事件这个代码怎么写呢?看着我来写啊。把上面这些呢去掉。我们用这块的时候,这块中有一个函数叫ready,以前我们这么写的是document they'ready。加ready,然后我说这是一个函数。
06:02
啊,这是一个函数啊。啊,这是一个函数。然后我们说呢,这个re函数什么时候执行呢?我们是说当页面中的倒目对象加载成功后,会执行这个ready会进行它会就那个ready,它呢相当于是这个onload事件是这个onload啊onload,那现在我们程序中要绑定事件。在哪绑定事件呢?那你想啊,你是不是浏览器中。得把这个按钮已经放到内存中之后,有了按钮它才可以去绑定事件。或者是说只有按钮存在的情况下才能绑定实现呢?所以我们需要在哪去做这个事情呢?
07:06
在这个ready的里边去做,因为这个ready它的执行呢。变成函数啊。函数这个ready。是在你的倒对象加载后。照加载了,也就对象创建了呗,所以呢时机呢应该是这么做,DOLLAR8个身在这儿是说当你的页面倒对象加载后。给对象绑定事件,因为此时你的花对象已经在内存中创建好了,你才能使用。
08:04
所以说你的时机是在你的入口中开始执行,当到对象加载后,才能够给对象绑定事件,所以一定呢在这里边做绑定。看着我的绑定到,然后是井号BTN事件点click事件处理函数,我直接定义函数发个声。啊,然后函数体a lot。内容呢是按钮单击好这个就定义完成了,试验一下。刷新一下点压钮,我们看弹窗出现说明按钮,单击事件响应了。下面我们来写代码部分啊。
09:00
做的操作是获取第一个div。那我们用的是过滤器。过滤器啊,首先你得先定位到对象呢,定位的是div。这是标签选择器冒号first。这就是所有div中的第一个。那VAR,那我们定义成一个对象OBJ。那我们干脆呢,还是设一下颜色吧,OB这点CSS设一个背景色,背景色呢,我们设成一个红色,这样能看出变化吗?现在测试一下刷新,点击获取第一个div,我们注意看这是红色了吧,那说明呢,我们这些div。
10:00
Div Dollar div是获取所有的这些div,然后第一个first把它设成了。红色的背景色。这是获取第一个。再往下来,我们把其他的过滤器呢都练习一下,我们再来一个,这个叫做BTN2,我们获取最后一个div。最后一个div啊。那事件的绑定方式跟上面这个应该是类似的呀。ID叫做BT2绑定事件,再来绑定事件到,然后是井号B7N2,点CLICK8个指定它的事件出两函数。Va都比J等于Dollar div所有的标签,然后冒号过滤器last,最后设背景色OBj.CSS background,背景色是一个绿色的吧。
11:21
好,然后呢,我们在这刷新一下,点击按钮。啊,这能看清吧,是绿色的DIV5啊,变成绿色的了,好,这是按钮二,然后我们再来,我们把这个按钮的定义语法规则呢拷贝一份。这是BTN3,那我们要获取的是。下标等于三的电力。下边等于三。绑定世界。接下来绑定D7N3的事件。
12:07
到了井号。BTN3点事件,然后事件的处理函数。多了一个括号啊,删掉。等于三的VO比Z等于Dollar div,然后是冒号EQ,小括号下标值三。改变背景色background逗号蓝色保存代码啊,这块呢,冒号后边这一部分是过滤器啊,EQ是等于的意思,下边等于三。前面这块呢是数组,数组下标等于三的。
13:03
刷新看一下。蓝色的。从上往下所有标签DIV0123,下边是三的啊,是蓝色。好,再往下来看。BTN44呢,我们来演示呢,这个是下标小于三。就下标小于三的div。B4。绑定世界BTN4井号啊,因为是ID的方式。CLI8克。指定VOBJ等于Dollar div,冒号LT,小括号下标三,Oj.CSS bike orange。
14:12
Or好,小于三呢?我们刚才看到的三是这个,那么小于三呢,应该是012。杨佳牛,我们看零,一,二这三个小于三个div全部,它是一个数组,数组中的每个成员都应用这个CSS方法的调用设置,三个成员背景色都是我们的橙色。最后一个我们来看大于三的呗。化解下标呢是大于三的BT5。再来绑定一个世界到了井号DTN5和一个世界八个身VBJ等于div,然后是过滤器大于是GT的意思大于三个设置背景色background。
15:23
背景色设一个yellow。好,看一下最后一个按钮啊,单击大于三的,那应该是这个四和五呗,就这两个。大于三的四和五呢,是成了黄色,好,这就是我们的过滤器的一个基本使用。通过过滤器呢,我们可以定位呢,这个数组中的某一个成员或某一些成员。冒号后面这一部分都是过滤器,First last。EQLT小于,GT大于,这是我们的基本过滤器的使用。
我来说两句