00:00
好,那从今天开始,我们要花五天的时间去学一门新的技术。啊,把这个关了啊。这门新的技术呢,对于前端人员来是一个,现在来说已经是一个比较基本的一个要求了。啊,这是一个库,JS的库啊,名字呢叫j query。啊,把它打开啊。嗯。啊,它呢是我们在嗯前端里面最最流行的最早啊,其实在前端没有的时候啊,就已经有节拍了,也就是说包括后端的开发人员都需要会结块人。好,我们来看一下这这个,首先你这个单这个单词它是合成的单词吧,怎么认识啊,你理解一下它GS query吧,GS就是GS呗,对吧,GS是不是说明他的这个库包装的是GS啊,那query什么意思?
01:08
就查询这单词要认识啊,Carry查询的意思,那翻译过来就叫什么JS查询,也就是说它的最最核心的功能是干嘛查询。但是呢,说这之前我们在想啊,我们最终学这么多各种学最终是要干啥去。最终,我们首先得把页面画出来。页面画出来无非就两个技术,HTML和什么CSS,这个实际上是没有多大难度的,跟大家说这个是没有多大难度的,你说老师我感觉现在画页面都比较困难,那后面马上要学了啊,大家不用担心啊。OK,画页面不会成为大家工作的难题,也就是说你进了公司感觉画页面好费劲,我干不下去了,这个不可能只是快和什么慢的问题,因为他是固定是个死东西,你他让你,他让你摆在这个中间,他要摆在这个位置,是不是我不小心我摆在正啊,我是不是要慢慢调调调调调调到下面来,可不可以可以这个东西可以慢慢调。
02:19
啊,但是如果说啊,也就是说,除了我现在我把页面画掉了,下一步做什么。界面造出了是不是做交互啊,这个交互这个就有变化莫测了,你懂吧,就变化很多各种各样的效果是吧,各种各样动态的效果,就就静态效果是很好做的,麻烦的是什么动态效果,而动态效果是不是要交互的呀。而要想做动态效果,要想做交互,你必须用什么语语法呀,是不是用GS啊。能懂吧,用GS,那GS它又分为基本的GS,也就核心的GSGS基础。
03:05
啊,其实就等于ES知道ES是什么,Ecmascript。就是怎么样定一个变量,怎么样定一个函数是吧,还包括它里面呢,怎么样创建一个字符串,怎么样创建一个日期对象,这些最最基本的语法,那光有这些基本语法够吗?不够大想我是不是有可能用户一操作,我就要去更新我界面上的某一个元素对象,假设我一点击就把这个P标签内容给他分析一下,可不可能。可能吧,那也就是说你光有基本的GS语法懂,你能做到吗?做不到你还要用什么技术?还有什么技术啊,我知道吗?你要操作页面,你需要什么技术你不懂啊。多呀。啊,其实有两个,一个BOM,一个什么多,重点是多BOM没有几个于API对吧,重点是多能不懂也,但是大家学过了以后就发现这个波母和do的语法。
04:13
太麻烦了。能理解,不操作起来特别费劲啊,我要去根据ID找到个元素,用什么get I by ID,我的个天啊,我我这还好,我跟你说找一个元素,我创建一个元素,要要往里面插入一个标签,那可费脑劲了。啊,也就是说DOM和boom的API其实是非常非常low的,说实话就大家受不了的API,那怎么办?那自然就有有些人会去去帮我们去解决这个问题,解决问题就是对这个报姆和姆进行一个包装,让他的API更什么,更简单易用。
05:00
啊,譬如说举个例子,在这块里面,他要去,他要去根据ID,根据ID假设ID等于ID等于等于等于T吧,那ID值等于T,那它可以这么写。他可以这么写,就得到,就找到了那个标签,那明显就比get element by ID要简单一些。能不懂啊OK,但是我们操作界面啊,操作界面的,操作界面上是很多数据,我就对数据的操作有哪些操作到底其实就是一个概念叫c rud,我不知道大家接触过这个概念没有。有接触这个概念吗?啊,翻译过来就叫增删改查啊,OK,这个C呢叫create create什么意思啊,框建那可不可以说是增加呀,可以R了read读。
06:01
U呢,Update更新,Delete删除。真三改查里面大家觉得哪个最麻烦?查找最麻烦?而且你还要知道,删除和更新是在查处的查找的技术上进行的。你说我要删除一个东西,那你不得先找到他吗?为什么查那么麻烦呢?因为我们的页面很复杂,它是不是很多标签组成啊,是不是还有很多不同类型的一个嵌套啊,那你就想我要准确的找到页面里面某一个标签,那还是挺麻烦的,尤其是用原生的动物,它的一层一层的找,是吧,比如说老师用ID。那你不能咔嚓全部都写上ID吧,能不能理解,你不可能所有每一个标签都写上ID,对不对,那这个时候啊,查询是最复杂,所以我们的j query它最最核心的一个功能是什么茶啊,为什么叫就能体现它的重心,它的最最核心的一个功能。
07:20
就是查询,那他只有查询的功能嘛,那不可能嘛,你要只有查询功能怎么用啊,你查到以后你不能干别的了,那也没用啊。大概能理解吧。啊,还有一个这个地方下面有几有有四个单词,大家读一读,叫什么right周末怎么翻译了,写的更少,做的更多,谁写的更少,程序员,程序员写的更章,谁做的更多,就是程序实现的功能更多呀,说白了就是说我要实现的功能用原先的JSS,我要写100行代码,用可能写十行代码。
08:08
你说有这么牛逼吗?这不得夸张一点吗?好,这里面呢,我们我分了这么六个部分方面去说,我们一个一看,先来看第一个方面啊,第一个方面啊,认识一下,这里面呢,我分为了三个方向,一个叫what,一个叫Y,一个叫how,其实大家学习任何一个大一点的技术,都要问一下这三个问题。啊,因为你只有这三个问题,什么意思,它是个什么东西,能不懂,它到底是个什么,你得了解它吧,再一个是什么,为什么用它,为什么用它,就问用它有什么好处,是不是how,什么意思,怎么用,那怎么用,就是要我们就认识它里面的语法怎么用,对不对。
09:04
能理解不?你学任何一个重要的东西都应该从这三个方面去看啊,那首先呢,我们要了解这两个东西再去看好是吧?嗯,行,来,我们来先来看第一个,What。啊,这个是它的一个官方的一个。地址,其实大家百度是不是也能百度出来,能不能啊。可以啊,一样可以。啊,其实你也可以点这个啊一样的是吧。都收集好。嗯,有点慢啊。等它跑一会我们继续往下说一下啊,OK啊,这块呢,我们说它是一个优秀的JS函数库,就封装了很多函数,这个函数其实也是函数,不仅仅只是指方,一般的方形啊,也可以是对象里面的方法吧,可不可以可以。
10:09
封装啊,一个优秀的孩子们封装谁的?指封装的苞谷和洞,其实非常简单,能不能理解,尤其是洞。主要就动,其实boom没什么东西嘛。是主要是主体是被动的封装啊。好,下面这是在说什么意思?啊,使用这块网站超过90%什么意思,有十个网站里面就有九个用了J块。有人说像像百度啊,像阿里他们这些公司用不用这块人那备用,那怎么可能不用,你以为你以为他们有多牛逼啊。啊,他们也不可能说冲的一下创建出来,就是他们自己整出一个比块更牛逼的一个库啊,你不要以为就怎么着啊,这个这块他应该已经基本上已经十多年了,一直都很流行,只是现在稍微稍微要弱势一点了,因为现在现在再出来的一些GS库跟它的跟它的结构,跟它的思想是不太一样了,现在的风向有点改变啊,但是并没有改变,说我我是不是不用学这个块了,我就学后面的什么view啊,学什么react啊这些框架就可以了,那不是现在这query已经变成一个最最基本的要求。
11:33
能理解,不就是你去面试的时候,我都不不太去强调你会不会解拍,你是必然要会的。啊,你要连接派都不会,你说我会我会react不行。就好像你说,就好像现在已经把它可以看成一个基本的GS的一个要求了,能理解吗?你说我不会GS,我会,这不扯淡吗?
12:00
不懂啊,OK,好。啊一嗯,在我们现在这些啊,View和react的这些框架出啊出来之前,那确实一旦用到中大型的开发一个中大型的外部项目必然会用,但是呢,现在已经有了别的选择了啊,很多项目新开动的话,都会去选择这样一些新的一些框架,至于这些框架怎么弄呢,后面会慢慢给大家说啊。大家一定要记住他的一个口号啊,如果说问你这块你的口号你不知道是很low的一件事情啊。OK,还有一个事情啊,也是以前一个同学去面试的时候碰到了一个问题。嗯,当去面试的时候,咱不会在简历里面会写你,你会哪些记住吗?他写了我会接carry,但他把这个Q呢,把这个接字写成大写。
13:00
最后就因为这一个没要他。它真正的写法,大家看着他的这个这个图标是这么写的,JS小写Q是什么大写。比如说这你他也看那保不齐。有些程序员是有洁癖的。咋的?有洁癖怎么了?我生活上没洁癖,但是我代码上有洁癖,这不很好吗?啊啊,有人说老师我生活上也有洁癖,那也行,那也没问题啊。好,我们来看一下,打开一下,诶,还有一部分没加载出来,在左侧应该有那个有它的图标,我现在截下的这个图标,就是你看到这个图标就是从从它官网上面截下来的,能懂吧,因为这个网速的问题,所以导致它一直没加载出来,嗯,这就是他的一个官网啊,啊里面还有很多的一些下载这什么。文档这个博客也就是一些写关于这块的一些文章呗,对吧,这个什么他给你插件,诶咱就碰到一个新的概念,也就首先你得还是得说刚刚刚才跟大家说的一个技术,你首先得理解它是什么东西,对吧,如果它是什么你都不知道,你就去学怎么用。
14:26
那肯定套路不对是吧?你首先得知道它是什么。再一个你还要知道它为什么用,它是不是这个插件呢,其实很简单,我们说相当于j query,是不是包装呢,是原先的GS,原先的洞对吧,那在这块之上啊,又有人写G这块的库,新的库。而这些库呢,它不是依赖于JS,它是依赖于谁j query,我们就把这些新的库称为谁的插件,接query的插件,相当于接query是谁的插件,是原生GS原声多的插件,对不对,对的吧,但我们一般不会这么说,这个我们一般不会这么直接去说这是一个插件啊。
15:15
这里的插件明显是指依依赖于这块的一些库。OK,最后这个说什么浏览器支持什么意思啊,这浏览器兼容器,我因为它有很多版本,大家看到是V3.2.1,这是最新版本是吧,那不同的版本呢,金融到浏器的版本也不太一样啊,大家也知道原生的多,是不是浏览器金融的问题是吧?啊OK,好。这里面就会解释啊,什么是j query啊,大家有兴趣可以看一看,好,那我们先简单这些东西啊,知道一下就行,我们先简单看了以后,下面我们看另外一个叫Y,为什么用它呢?那肯定是它有一些什么好处,这你列出来都是它的一些特性,以及它的一些功能。
16:12
啊,我一个大概给他说一说,什么HTM元素选择什么意思,选取或者选择,其实就是查询。我查找元素这里面用到一个非常重要的概念,叫什么呢?选择器,诶这个大家应该懂吧。哪个里面有选择器啊CSS,那CS的选择器用来干嘛的啊?是不是用来去定位某一个标签元素的,大家想啊,我有一个div,有一个P标签,我要给有给P标签去加样式,首先我是不是找到P,怎么找到P,通过什么找到选择器,那选择器是不是各种各样的选择器啊。哎,J query就扩展了CSS选择器这样一个技能,来帮助我们快速的找到某一个标签,我们说嘛,它叫query。
17:14
好找到以后的下一步做什么,是不是也操作真山改调整嘛,可能是不是操作它的元素的一些内容,也有可能操作它的什么一样是因为我们经常是在改变界面的显示啊,啊下面事件处理要不要。因为为什么要有事助理。什么叫?事先处理不就是一些响应用户操作的吗?因为我要跟用户交互吧,要不要事先处理啊,要在一些动画效果好,下面有两个,我单独给它们标成红色。啊,这两个是大家必须给他死死的记住了,一个叫面试调用啊,一个叫读写合一,什么叫面试调用呢?A括号点B括号点CE括号。
18:12
它支持这样的调用方式。这就叫面试调用啊,后面我们再详细的讲啊,先大概了解一下对吧?啊,如果你如果你说你完全没没有完全听懂,没关系,或者老师我需不需要现在你讲我就记住不需要我说你听就行。下面读写合一,什么叫读写合一,我一个P标签是不是有标签体内容啊,有没有,那我是不是有可能去读这个P标签内容,有没有可能,我也有可能是什么去更新这个内容吗?那他用的是同一个方法。因为说白了就一个方法啊,用一个方法,假设我随便搞一个方法,用一个方法,如果我不穿参就是赌。
19:01
能不能理解我要谈谈呢,就写。这样是不是能减少那API的数量,你是不是记忆的负担就要少一点呢?能不能理解先理解这个概念啊,理解这个概念什么叫读写会议啊,还有一个浏览器兼容,也就是说你用这块链基本上不用考虑你写的代码会不兼容浏览器。啊,那有人说我那个我那个六啊五,那么什么IE5啊,IE6是不是也兼容了,那得看他的这个版本最低兼容到什么版本,能理解吧,它不那个这块不有它有1.x的版本,2.x的版本,3.x的版本,那不同版本呢,它能兼容的最低版本是不太一样的啊,譬如说它假设1DX兼容到七,那也就是说从七开始,从IE7开始,你写的代码还用考考虑金融期吗?不用,那你说我要用IE6了,那你就得考虑了,那这个是没办法了,能理解吧,但现在基本上都IE8以上了,对吧。
20:09
再一个易扩展插件,这是它非常厉害的一个功能。啊,现在这块的插件成千上万啊,真是成千上万,只是说有的好,有的不大。后面我们会写啊,再一个公章,这个我们还没讲,先大概知道一下,我这里重点给大家强调两个东西,一个叫面试调用,一个叫读写合一。先对他们有一个了解,下面我们再去说怎么用它是吧,啊先停一下。
我来说两句