00:03
呃,下面我们来看一下如何来去使用啊,要使用那就涉及到要编码了是吧。呃,进入我们的将我们的这个工程。看见谁?给它copy到我们的pace里面来。啊,还是以前那个结构啊。好,现在呢,我要去切换一下工程,怎么切换啊,这个也要会啊fair open是吧,走你啊,刚才好像他没有动是吧,没有动就。是没有识别到啊,没有识别到,再来一次。识别到了吗?是这个,嗯。
01:00
点一下this window。打开行,这个呢是已经写好了,大家有时候可以参照一下下面这个。嗯,这里面我们分为三个部分,一个叫测试。就是去测试一下这块里面的一些语法啊嗯,一个是练习,就我们后面呢,会做一些小的练习和最后一个综合的练习。啊,最后呢,我们还要去讲它的一些常用的几个插件的基本使用怎么用,那就先看它呗。是吧,啊,这里面都写了一些空页面啊。准备的一些工艺品。好,下面我们来看一下,好吧,我们就以这个页面来作为我们第一个测试,嗯,这里面呢,我们有个功能,其实非常简单,输入用户名,点击按钮呢,提示输入的文本。
02:00
这里面有两个按钮啊,一个是用原生的JS去实现,一个是用什么这块实现,那也就是说我们应该这个的功能应该是可以已经可以实现了。而且非常简单,大家用脑子一想就想到了,对吧?好,现在我们来去做一下它,看看怎么做啊,先用原生的写写再说。啊,那我们的GS代码到底写在哪里呢?啊,无非有两个地方,一个地方呢是写在那个玻璃的上面,其实可以写在这里啊,一个呢是写在这里。对吧,那谁的效率更高一点,下面但写在上面行不行也行,我们先写在上面啊,应该我们要通过写在上面呢,来去展现它的一些语法,所以我先写在上面。那这里要写个什么标签script对吧?啊script这样吧,行,那我们需要在这里面去干嘛呢?功能刚才也说过了,点击这个确定按钮。
03:10
提示输入的文本。那一个来,首先我是不是要给这一个button加什么。叫点接听,但是我能找到这个办法吗?现在能不能在这直接找到?不能,应该先写什么代码?对,这个大家都知道,window.no等于一个function。啊,现在我们用的是原使用原生动对吧。OK好,在这个里面我干嘛去,是不是得到那个button特,是不是等于是吧,是不是大家啊,现在大家用这个吗?点也行是吧,我就不再写了,这个大家都会写好传什么BTN1接着干嘛去,BT一点昂克等于一个方,你要想啊,不然我问你时候你想不想。
04:22
好在这个里面干嘛去。是不是要获取这个输入框的值,那先我是不是得得到输入框怎么得是不是ID呀,还是什么点得到它以后呢,点value流属性嘛,那这个时候我得到的值就是一个什么值,是不是就是user。是不是下面干嘛alot这个大家都会啊。来,我们来看一看啊,先输入一个塔硅谷。
05:04
找你可不可以可以,那也就是说我们用原生的语法是一点问题都没有的。这个不需要我写什么注释吧,啊,这都懂啊好,就是代码的注释,我觉得适当的注释还是可以的,关键位置写注释啊对行,那下面我们就要说的是啊,下一个按钮是你要实现相同的功能,但使用的是什么呢?啊使用几块。好,我们说j query是不是一个包装GS的一个函数库啊。那你说我怎么样使用它呢?首先我们得知道j query它是有一个需要去下载一个对应的JS文件的。能不能理解啊,我这个接S文件,我就不在这上面啊,因为速度有限啊,来在这个这块里面,我们有一个feels啊,有一个什么这块库。
06:10
啊,我这里面给大家去下载了啊,1.x版本,2.x版本,以及什么3.x版本。有人说这个东西有区别没有呢?那肯定是有的,对吧,这个区别大家适当的有个了解就行。就区别这块的不同版本,大家看到我把这个都弄的是灰色的。嗯,这个1.x现在是用的最多的,为什么它用的最多,因为它能兼容到A的一些比较低的版本。而2.x和3.x啊,就只能是进入到I1的八还是九啊,挺高的。啊,所以用的其实并不算特别多,除非说有些项目他就不管那个地板嘛,这也有可能啊,我做这些项目,我的我的用户群体就就是一些比较高的人是吧?OK,好,下面把他们打开来都。
07:11
啊啊2X啊,部分IE支持,部分IE8以及下浮支持,说白了就是2.x,你完全支持的是IE9及其IE9以上。能不能理解啊,OK,而我们这个1DX,它应该是能进入到A7的。但是它的文件呢,就稍微大一些,我们说过了,它不是个库文件嘛,说白了就是接S文件啊阿DS3DS就稍微稳定了,什么小一些,自己效率要高,高一些就做吧,做了一些优化啊。啊,3.x是完全不支持IE8的啊,就彻底不支持IE8,而2.x还部分支持IE8,你部分支持也也没什么太大意义。啊,做了一些扩展,提供了一些新的API啊,这个里面呢,是提供了不包含的版本,这个了解一下就行啊,不用管它,我们用的是什么呢,1.x版本啊,其实对我们学的人来说,其实没有什么太大的区别。
08:15
我们要学的是它一些最最核心最最基本的一些语法啊,大家稍微知道一下,有不同的版本,而且它们是有区别的。能不懂啊看好,那他就有可能问你说,你说阿里X跟EDX有什么区别,到底有什么区别。那你怎么回答?你区别不出来,你该怎么回答?我们公司的项目就用1.x版本,我哪有用过,二点我根本没用过,我哪知道。这很正常的呀,我们公司就用1.s的版本,我还花时间去研究2.s干嘛呢?
09:00
或者说他他知道不一定,他们公司用他可能就提前准备了一下,他要没准备之前你问他他也不知道。能不能理解这是啊,当别人问你问题的时候,你不知道,你就别觉得自己很惭愧啊,就觉得有点受不了啊,感觉我就想这问题都回答不上,我还是走了吧。不是那回事啊,你谁能什么东西都会啊?OK,好,这是这。那下面呢,我们啊就知道了这一个版本有区别,下面还会发现他们是不是有点GS和有点面点GS,那这又是什么区别呢?啊,大家看大小,一个是278,一个91。啊,我把这个91的给大家打开,这就是啊,JS压缩以后的,我把那个未未压缩的版本给它打开一下,一看大家就明白,这东西没什么太好说的。
10:05
看到这个东西了吗?这是个,这是一个什么呀?这是个括号是啥呀?啊,我们我把它拖到最下面。是不是匿名函数调用啊,是不是是它整体就是个匿名函数调用,那不就定义了一个模块吗。我们在定义GS模块的时候,不就用过它相同的语法吗?还记得吧,而且我们还记得第一个模块最终是不是要通过window点来向外暴露一些什么东西啊,诶,你看它暴露没有了。我们把下面打开。诶,就这有一句话。是window点击carry是不是window添加一个属性,它是window点多了后,是不是又添加了一个属性,等于一个它。是吧,那也就是说我们引入这个JS文件以后,多了几个属性。
11:07
几个这还不知道吗?两个呀,而且这两个属性的值相同吗?相同都是不是等于它呀。那我们后面要研究的就是它到底是个什么就行了,对不对,是不是啊OK啊,看到上面呢。啊,那个后面有个一,诶这里你说这块是个什么,是不是个函数啊,看得懂吧?啊看得懂,那你说这个函数执行返回的是什么类型的数据。这个函数执行的话,返回什么数据什么数据,你我问你,你怎么不能回答了,这不是个六吗?你管它后面是什么六的,六的结果是什么实力对象啊,这意思吧啊。
12:07
这几个我问的,这刚刚问的几个问题啊,很关键啊,非常非常关键啊,只是做一个铺垫而已。好,那下面我们需要去用j query去实现啊,去实现我们的功能,首先要做的第一步干嘛?引入及快库,引入这个库,这个库是个什么东西,是不是GS文件?那好了,我们刚刚说过了,是用1.x方的,那我们用1.x最新的版本,这个没关系啊,没有什么太大区别,那我到底是用上面的未压缩的还是用压缩的no啊,测试时用这个开发的阶段用未压缩的。因为这样的话,他有些打印出据出了一些问题,能找到更清楚一点,能理解吧啊,而压缩的版本什么时候用上线的时候,也就是我真正项目写出来以后,最终是不是发布出去,当用户访问的时候,那个时候就应该用压缩到了,为什么小小的话用户返还是不是就快呀。
13:13
能不能懂啊,这个地方就有两个版本。啊,两个版本,OK,一个叫什么呢?开发版,有时候也叫什么测试版,也就是未压缩的版本。懂不懂另外一个叫什么呢?生产版啊,生成版实际上就是那个什么压缩的版本,也就点面点GS。其实最终执行的代码都一样,懂吗?它压缩完呢,干了个什么事哦,它的压缩是压了什么东西,有几个,第一个这些首先看的第一个就是外形,外形看起来是不是那些,呃,空行啊,换行啊,注释啊,什么都没了,还有一个东西很重要,你看了你还能看懂是吗?就那些局部变量都变成了abcd之类的名,简单名称。
14:10
你就说你拿到这个压缩版本,你能直接读懂吗?是不是读起来很费劲呢。能理解吧,读起来是非常费劲的。也不能说完全读不懂,至少很费劲,对吧?行,那我们现在就去做呗,第一步引入JS文件来,我就引他吧,好吧。好,把它在我这个测试文件夹下面去建一个专门的文件夹减S。放我的这一个文件copy不来。放进来就好了嘛。下一步是不是要引用,引用必须在我使用之前吧,啊,引用必须在我使用,那我这样啊。我这样,我再往下面想。
15:03
Script引用写什么?JS下面的尽量提示按键别自己写。记住了啊,像这种东西,比如说老师,我就想看一下我的我的能力到底有多强,这有什么好看的。OK,好,下面我引入以后,我在上面使用行不行,行还是不行不行,因为引擎在就是浏览器在解析的时候,从上往下解析。你要用这块的必须引入什么,是不是之后啊,能不能理解啊,啊要能理解啊,诶不是这个什么一。是不是好啊,这个时候我们去干嘛呢?使用啊接query实现啊,实现来实现。
16:03
上面呢,我们使用的是什么原生的段五实线对吧,怎么对应着写好一点好,那我下面怎么写的是吧,下面怎么写啊这些呢,大家就不太懂,所以我就自己写写代码好吧,首先大家也知道我们刚才说过了,现在我们可以访问到哪些变量。看看有两个变量可以访问,一个是j que这个变量,还有一个什么多了福,那你说你更愿意访问谁明显多了福嘛,那但是对应着写,首先第一步是不是要去设计一个文档加载完成的监听,对不对,你对应着写啊。绑定什么文档,加载完成的什么监听,那它就非常简单。好,先我们从语法上怎么理解它。
17:04
整体在干个什么事?执行一个函数传了一个什么东西,传了一个函数,而这个函数就是回调函数。能不懂啊,我们刚才说过了,你文档监听监听是不是要指定回调函数,只是它指定的方式跟上面一样吗?不一样,好,下面接着要干嘛,是不是我这一次要找到谁。是BT2啊好,我找到它看呢,就查找呗。执行这个函数传入,这这是一个什么,这是不是选择器,我们叫它什么选择器,ID选择器,好了,接着我是不是要加点击进去调用connect方法,那说明返回的是个什么,这一个。函数之行返回的是什么对象?
18:01
我告诉大家,我反复跟他强调,你先要知道数据类型,才可能知道明白他为什么能这么写。也就是说,首先第一步你要把数据类型搞清楚。啊好可立可我加点一听要直接什么。要指定什么?加点距离要指定什么呢?这不知道吗?这里要能回答,你不能回答就说明前面的问题你不太懂啊,回调函数啊,加监听不就是绑定回调函数吗?对不对,好了,那在里面做什么事情去,这就是绑定,大家看到给谁绑定B天to绑定什么点击什么先听呗,是吧。下面干嘛呢?下面我是不是要找到这一个input,并且取出它里面的值,也就是说此时我要去得到那个什么user,首先我得去找到什么。
19:12
那个音部的好,现在你来根据我前面写的,你来推测一下我应该怎么写多了佛括号执行这函数传什么多福name好,这后面就不知道了。点V l.value value的简写这个设计这个库的人还是有一个思想,就是难啊。一个是。啊,Menu懒得写V啊,其实写value肯定没问题对吧?啊,但他就是想简洁一点好,接着什么A。能看懂吧,啊,其实他的语法并不太多啊,暂时大家看到语法并不太多,来我们来看一下,看看我们的这个是不是可以了,对吧,刷一下接着呃,我来改一下名字,点一下走,你可不可以可以一点问题都没有。
20:14
OK了吧,OK。那这样我们就用这块行了,有人可能就说老师这两个看起来好像差不多啊,你不是说100行变成十行吗?啊,只有真正难的时候才能看出优势,也就是说我们现在做的事情太简单了。你想,譬如说我做阴时用原用两步。你难道你能简化成一步都不标吗?就简单了以后你之间的区别就没那么明显,能理解吧,但是你至少能看的出来,你少写了很多字符。对不对,你看嘛,我们去加文档完成的接听是不是比这个上面简单,简不简单,我们去根据ID去找到某一个元素,比它简不简单,明显简单嘛,我这样就找到那个八兔了,而上面是不是这么长才找到啊。
21:12
看懂啊,要看懂才行啊。这是这样一个事情啊,这里面啊,我们再回过头来看一下,我们需要去使用,首先第一步干嘛叫引入结块库,简单吧,啊简单,但引入接块库,除了这种引入,我们称为本地引入。啊,有两种引入的方式,一个叫本服务器本地引入,说白了就是我先把那个库文件是不是拷贝到我的项目里面来。能理解不,我不是先考不到我的项目里来,考到这里来了吗?这叫本地引入啊,另外一种方式呢,叫CDN远程引入,这个CDN是网上的一个共啊共享资源,我们来看一下啊。
22:12
远程引入真正上线的时候,我们很多时候一些项目要追求效率的话,会用一些网上提供的一些CDN来去,或者甚至于收费的CDN来去,引用我们的库来看一下,访问一下,大家知道了,呃,有一个我这里面就跟大家讲了一个CDN。叫boot c dn大以后呢,会学一个CSS的框架叫什么呢?Boot估计有的同学都学过啊,是一个CSS样式一个。它它里面呢,就提供了一些免费的,你看稳定快速免费的前端开源的CDN的加速服务,什么加速服务,就是你访问它的比快啊来这些我都用,我都不用说了,这说明是一些什么。
23:02
非常非常常用的啊,这些基本上我们都会学啊,这个是reactor。啊,这一个是这一个是安,这一个是leave啊,这些是我们都会学的一些东西,好来这个是good啊来我们来看一下它,我就点它得了吧,搜可以搜不可以啊,可以收看它自动搜索的,就是你输的过程中它也搜啊,点开它吧。点开它这里面是不是有看到各种各样链接有版本,你可以去选我们最终用什么1.x嘛,那就放到1.x呗。哎。我就用最新的吧,好,这里面有一个这块点结石,有一个接块点面点结石,我们用哪一个,是不是第一个,那第一个我们是不是把路径拷贝下来,它这里面呢,有复制链接,有复制scripts,你说我用哪一个,这个可不可以也可以啊,用它更直接。
24:03
点一下。接着干嘛呢?能不能懂?但是这种娱乐方式在测试时必须要求你的电脑是有网的。这不能懂啊,你要没网你怎么去加载这个文件呢?你首先你得去通过网络是不是请求加载到本地。是吧,所以我们测试一般用什么。是不是本地的,但可不可以啦,我这现在不有网吗?试一下是吧。啊,随便点可不可以,是不是也可以啊,但是由于你们可能没网,那你们就用什么。是不是用第一种,但是你得知道有这种方式能不能理解啊,OK,这种我们称它为什么服务器本地引入。
25:07
呃,下面这个就称为远程引入呗,可以不?哎,你说这种有什么好处啊?就减轻你的服务器的压力,减轻你的服务器压力,大家想啊,如果我是本地引入本,这个本地是指服务器本地浏览器是不是请求你的服务器才能得到你的解块,那如果是远程引路,大家想啊,CD远程引路有什么好处,它还需要请求你的服务器才能得到这这块吗?需不需要不需要了,因为请求是别人的服务器啊,有人说那你这这样很多人都用它的话,那不就废了吗?收费的你可以搞收费的,我现在椅子是免费的,你说你也搞个收费的。要钱呐。OK,你有免费的用,为啥不用呢,对不对?嗯,好啊,明白这个道理就可以了。
26:07
啊,引入以后下面一步啊,我给大家写了一句话来看啊。第二步叫什么使用j query,那使用j query其实分为两个部分,分为两个部分,一个叫使用j query核心函数。哪里在使用极块的核心函数?第一,我写的第一话是不是就要使用解块核心函数指谁啊?解块函核心函数是谁?是不是多了符,那我能不能不用多乐福啊,可不可以,那你说老师我不用多乐福用什么呢?几块,我们来试一下。啊,这个有几块可以吧,但是我能把Q写成小写吗?能不能不能,这个是一个函数名啊,你怎么能随便瞎写的。
27:03
好,来刷一下。轴里可以可以,那除了用这,我们就把它称为这块核心函数啊,除了用它还用到一个东西。我们叫它什么呢?J query核心对象。那铁块和一定要指谁了?是吧,OK,我把它写在这里。其实这个大家一说就懂啊,只是大家开始没说之前大家不懂而已啊,开始一个呢,叫使用这块核心函数啊,核心函数这个就不要了。那这个块核心函数指的就是我的这个多了福,或者我的这个什么j query好了,第二个我们要去使用j query核心对象,那j query核心对象又是谁呢谁呀。
28:03
好来,我把它改一改啊,把它改一改啊,这一个执行是不是找到我这个button,但它是不是有了一个恒定的方法,你说它是一个动物元素吗?这一个返回的是动物元素吗?肯定不是,为什么动物元素有这个方法吗?没有,其实他返回的我们就它称之为什么呢?接块对象。我可以这么写啊,为了能够去标明出来这一个是一个极快对象,我们的极快对象都会取名字的时候都会加一个特别的前缀。叫什么多乐福。那我就问大家了,你说这块对象是谁了?是谁执行什么,他返回到对象。也就是说我们用来用去是不是就用这两个语法,一个是用它的核心函数,你看吧,第一个我们是用的核心函数法,这里面我们是不是又用了核心函数。
29:10
用没有用了,那此时这应该是在用核心函数的语法吗?不是再用什么这块对象啊,有时候这核心就懒得说了,你不说起来太长了,麻烦吗?一个叫几块函数,一个叫什么这块对象。那你说这个时候我们在用什么语法?是用的是接块函数还是接块对象是不是还有是不是很明显的事吗?什么函数嘛,你们的执行函数嘛,当我去调用这个y.Y的时候,这个时候左边的就是一个什么这块对项啊,能了没有啊,这个要搞清楚啊。人寿老师,你这个里面要加do吗?要不要不用,现在已经根据这快递项得到它里面包含的值了,对不对啊,就不用了,至于为什么能够啊,到时候就看它的API了。
30:12
没问题吧,啊没问题,那下面的时间就是大家自己啊,圆形的不用写了,直接干这块的就行,好吧,快速的给它写出来啊,给大家十分钟时间。
我来说两句