00:00
二节课内容呢,现在我们就结束了,不讲雅克斯了,下面呢,我们要讲的是另一个内容了,也就是第二大章讲的是j query啊讲j query在讲价之前呢。我们呢,来给大家复习一个问题啊,复习一个问题。这个内容呢,是跟我们的JS有关系的,之前呢,我们在学阿贾克的时候呢,我们要更新盗对象的时候,我们用到的是do的对象,根据ID来获取这个对象,然后来处理它的value属性值。那我们来看盗墓对象,盗对象点它有很多方法,我们看到这有一个叫做get hand by ID,根据ID来获取到对象,还有一个是get elements by class name,这是根据样式来获取倒对象。还有get elements by tag name,这里根据你的标签名称来获取一组盗墓对象。
01:10
那我们现在用JS啊,传统的纯的GS,也就是javascript,用它里边的语法来获取到对象的话,我们用的是这些常用的一些方法。我们会发现这些方法名都是非常的,是不是长了非常的长啊,而且不好记,大小写区别的,而且每一个都非常的长。你看这个带elements by name,这是by class name,你看这还是带S的,而上面这个呢,是不带S的,它的区分而且名称都特别的长,在写的时候特别容易出错,而且也会造成你的代码量非常的大。写代码呢,非常啰嗦,所以这是JS中它对DOM的处理呢,不方便的一个地方,这只是一个地方啊,发明又长又臭的,这么长多难用啊,谁能记住这么长的名字呀?
02:08
所以说。在JS中超do的话非常的繁琐不方便,既然繁琐,既然不方便,那么就有人呢想把这种不繁琐就是这种繁琐啊,变成不繁琐。不繁琐,也就是说我们把这种原先的又臭又长代码。把它变得简短一点,变得方便一些,这就是我们j query它出现的一个初衷,也就是在没有j que之前,我们操作DOM就只能用JS,用最传统的JS代码来操作DOM。他操作又臭又长嘛,哎,人们非常讨厌他,所以呢,有一些牛人呢,他们呢,就把这个JS中操作DOM的方式给进行一个升级,让它变得简短又方便,这就是j query。
03:03
JA query它是用来呢帮助我们去操作DOM的,它呢封装了javascript中的一些方法,让我们去操作do更加的方便,更加的容易。j query它实际上内部也是。JS代码,只不过它把这个JS呢封装成了多个的函数function,让我们去操作DOM呢更加的方便。啊,这是这块人,它就是一个JS的一个库,这个库里边呢,有好多好多方法让我们操作这个倒对象呢,更加的容易,更加的方便。好,这是这一个简短的介绍,在说这块之前呢,我们给大家呢,要复习的这个知识点呢,是这样的一个内容啊,这个idea呢,就不用了,我把它关掉了啊,不用了关掉。大家之前呢,在前半阶段呢,学习过GS,学习过HTML,学习过样式表CSS。
04:08
在做这些内容时呢,大家应该用一个工具呢,叫做h builder。那现在呢,我们讲这个j query呢,它实际上呢,也是一个JS的内容,所以这块呢,我们依然呢,用h builder呢,给大家来学习这块的用法,H builder h builder。那我在这呢,有一个工具叫build X,用它来做,要用它来做。好,我不更新,那我这儿呢,准备呢,先新建一个项目吧,这个项目呢,我们就叫做j query j query project。好,我们就放在了D盘这个目录之下就行了。目录名呢,我就叫做这块project。那我把这个去掉,看行不行啊,创建一下。
05:01
好。创建一下呢,我看一下我的目录中啊,它是一个什么样的目录内容。嗯,我看看我把这个目录放到哪里去了。放到。在这呢,在这呢,这是我们的j query project啊,在这呢,好了。就在这来写就行了,J query。在它下面呢,首先我们来创建一个网页文件。新建一个。网页啊,这是我们的开始的啊代。啊。在这个页面中呢,我们准备这么做,在这个页面里边呢,比如说现在我有一个文本块,Type是text。啊是T的,然后ID呢,我叫做T。
06:00
啊,为了说我是TX1。后面这块呢,我们加一个换行啊。把代码呢拷贝一份。我再来一个,这个叫做T2,我是用ID呢来做标识的,最下面呢,我们来增加一个按钮。按钮呢,是一个八的类型,好V,那我们说单机说单击按钮给它呢,一个绑定事件on click,我们叫做fun。一吧这样一个函数,现在我们来使用这个函数。我想呢,当你大鸟的时候获取呢?T1它所对应这个微流值。就想干这么一件事情。那指定脚本script。
07:04
好,然后类型呢,PA Java script,我想做的事情呢,是单击按钮,然后获取呢文本框。啊,我锰矿的这个V流直。这样干这么一件事情,首先我们的函数发3FUN1。那在这里呢,我们要破九锰块,我们可以通过。好,我们可以呢,通过这个JS中的ID来获取倒模对象。我就到我们对象,咱们使用document的对象,它的get I by ID参数呢,应该是T。你看ID。
08:00
那它应该是一个对象吧,OBJ,然后alert o BJ。对象点为零,属性好,这样就完成了。那现在呢,我来运行一下这个start,而且买完了我看一下我们的工具啊。视图我们看一下,应该是显示内置浏览器就行了。好,那现在呢,我在问话一中呢,再打一个A单加鸟a lot a没问题,那此时呢,我能显示我们括号一的这个数据。那接着我想显示的是文化二的数据,怎么办呢?比方说这个是大鸟吧,再来一个。换下。这是FUN2。就是单击按钮二,那我们把上面这个代码呢,复制一份。
09:05
FUN2,那现在获取是文框二它的值,那么ID是TR吗?那我这块应该是get n by ID ch2就OK了。刷新点击单价钮二显示我是T2。这写个BB。好,获取它是二,那你会发现我们现在呢,通过传统的JS来获取do对象,用的是do对象的get的方法,这方法很长,那我想啊,能不能简短一点,让我们获取对象稍微容易点,不用写这么多字,因为你每写一个字都会导致你的这个开发的时间变长嘛,因为毕竟你要写的更多,时间耗费的更久。能不能简短一点,让我们获取对象更加容易一些呢?既然我们获取对象代码中这都是重复的内容,只有这个ID值是不同的,那我就这么做。
10:04
我准备呢,自定义方法。我们用这个自定义方法呢,来获取我们的对象。嗯,文浩,稍等一会啊。好,那么自定义方法干什么呢?我们要获取JS中的倒墓对象八个身啊,那我们fu,诶,我叫做FOBJ。嗯,Get do o BJ。那我要获取的是某个ID对应的倒对象,那参数这块呢,我们叫做do的ID里边怎么写呢?我就把这个代码啊拿过来复制一份,我把这个固定值我换成一个倒ID。
11:00
我但是我一看OBJ,那此时大家很明确了,这个OBJ一定是这个ID所对应的对象吧,那我上面这样的这个代码,我就不用这么做了,那我就va啊BJ等于呢带到。哦,我叫他。叫这个。那我的输入法呢,稍微改变一下OB这点get。OBJ传一个参数T1。这不就完事了吗?我把上面这行注释了。那你看对比而言,这个方法调用总比这么长的调用要简单的多吧,看看我们效果啊。刷新。哎呀呀,点加钮,哎,你家钮里没有数据啊。没有数据的话,那我们看看可能是哪儿有问题呢。
12:02
我们去找一下我们的调试窗口。这是开找工具。我们看看这个调试啊,哪会有问题呢,控制台。说不能读get do OJ。不能读,说它没有定义,发。我这个函数的定义有什么问题吗?放在这定义。Get do OB BJ哦,是我写的,这这写成OBBJ了,直接调这个函数就完成了,在这里普通函数吗?Get do OB BJ啊。刷新一下AA,点下鸟没问题,得到AA好大写个AA,再点击好没问题AA,这不就完事了吗?那现在我就可以用这个短一点的方法来代替了,是不是这么长的这个调用啊,哎,这么长多麻烦呢,短一点这很方便。那下面这个对象的调用,那当然也可以换成这样的方式了来注释了,VOBJ等于get do o BJ参数是TH2啊,相比而言,你调这个方法总比调用这个方法是不是要快一的多呀?
13:19
代码保存,CTRL加S。刷新好一遍。三级没问题,获取了可以,那现在我就更愿意用这个短的函数调用来获取到当对象呗,这么写怎么说也比写这个长的要方便吧,但我觉得呢,还不甘心。写这个方法get到OBJ报名还挺长的,能不能再短一点?这是自定义发明吗?我短一点,我叫A行不行?没问题吧?在理论上,在语法上都是正确的,那就变成A了。下面这个也就是A了呗,没问题,那么A是一个函数的名字。
14:02
保存代码,CTRL加S,刷新浏览器AAA,然后bbb。单价纽一,我们看是AA,单价纽B们看二啊,你看是不是也是BB,没问题吧,说明A现在是一个函数的名称。然后这个函数的名称啊,括号这个参数呢,是对象的ID。
我来说两句