00:02
啊。呃,上午的时候呢,我们已经把前两个已经弄了,一个是去认识一下RY,另外一个呢,是看一下那个RY里面两把利器大概该怎么用。那下面呢,我们要去花很大的精力去学它啊,使用几块核心函数。我们来看一下。啊,这里面要分为几个方面,一个是选择器啊,涉及到选择器的一个是它的作为工具使用的一个特点,再一个这个呢,是最后采取后面才学啊,因为我们现在还没学服务器端,所以呢,这个应该是在后期的课程里面再去讲这个东西。啊,选择器的这一部分呢,我们来看一下它的文档,其实非常简单,主要知道我们现在讲的是在文档的哪边区域啊,啊我们现在要讲的主要是说啊,它这一部分,那这一部分怎么用,其实非常简单,就是去执行这个这块的核心函数,传我的选择器的什么。
01:14
是不是不串?啊,那现在就要说了,那选择器到底是什么。对吧,OK,选择器本身它其实是一个我们说的一个字符串,对吧。只是这个串呢,它有特定的什么语法规则,它本身是没有什么用的,那也就是说你你写了一个井号,写了写写了一个T,这有用吗?这就是一个字符串而已,你必须把这个串交给谁来去用,才能真正起到效果,是不是就快要核心函数啊,你要把这个串传到这个里面来执行这个函数,那它就会根据你的这一个把它把你这个字符串看成一个选择器来去找对应的元素标签。
02:06
那他有我们刚才说它有特定语法,那它的语法到底是什么语法了。什么规则呢?啊,首先它的基本规则是什么的规则,CSS选择器的规则,但它不仅仅只有CSS选择出来,它还进行了一个什么呢?扩展,也就是他的选择系的规则可能更加强大一些。这个也很自然,就是CS的选择器,可能他觉得是不太不太够对吧,那我们为了能够更快的定位到某一个元素,必须扩展这个规则。而这个里面这一片就这一这一片都是在讲各种各样的选择器,对选择器进行了一个分类。啊,有什么基本选择器,层次选择器啊,这里这里面又来了一个基本,其实这个名字吧,就取得不太好啊,等会儿我再跟大家分一下。
03:03
也就选择器定义完了以后,你只有去调用它,也就执行我们的多了符括号,并将我的选择器字符串作为参数传入以后,才能真正起作用,不然的话起不了作用,那也要最终你要理解这句话是起的什么作用,前面我们说过了是吧?就是根据我的选择器字符串去查找整个文档中匹配的所有标签。组成一个它的一个什么?你想想看,我找N个,那不就是数组吗?但这个数组是最终它是个真的数组吗?不是,是一个尾数组,但是你得知道我们所有的动物元素都在哪个里面。这块对象里面。是这个意思吧,嗯,行,先一定要理解啊,选择器到底是个什么东西,就简单说就是一个有特定规则的一个字符串。
04:03
啊好,下面呢,我们为了能够更好的学习,因为它比较多,所以我们要对它进行什么呢?分类,首先是基本的选择器,而这一些其实就是在CS的显示器是一样的,一模一样。什么ID,这是什么键元素这个啦,内旋系这个匹配所有什么位是不是同位弧啊啊,那这个是什么意思呢。是并集还是交集?是并集这是逗号,能看到吧?那也有可能连着写。这个时候就是什么呢?交集选择器能懂吧,一个求的是并集,并集和交集区别知道吧,啊就知道就好好后面来一个层次选择器,层次选择器用来干嘛的?用来查找某一个元素的子元素,后段元素,或者是什么呢?兄弟元素,其实这个跟CS选择也是一样的。
05:09
这个我们是不是经常用啊。啊,那这两个有区别不?有没有,那这个最终找的是什么后代,而这个找的什么孩子是元素。而加号表示的是后面的next吗?Next不后面的吗?后面的兄弟。啊,这个很少用,说实话我们平常用的多的就是这两个啊,用的多的就这两个啊,不过这样如果有机会可以的话,我会跟大家去测验一下啊,OK。好。下面啊,重点的我就重点讲那个不太重要的,我就提一下就行啊再一个。叫过滤选择器,其实这里面大部分都是过滤选择器,那这地方就要问大家了,什么叫过滤?过滤是个什么意思?一定要理解过滤这个概念。
06:13
就是筛选,那筛选你就描述一下,举个例子,什么叫筛选呢?譬如说我本身找到了十个div。有没有可能啊,六个吧,刚画六个,我找到六个div,我再从这六个div找出其中的一个,两个或者三个。是不是就要过滤了,能不能懂啊?OK,这个地方大家一定要先理解,过滤选择器是干嘛,是在原有的选择器匹配的元素中进一步进行什么呢过滤,那也就是说我过滤完了以后,得到的结果应该是跟以前的结果比是一个什么样的情况,是比跟他差不多或者比较少。
07:00
对吧?是去找孩子吗?不是,是找兄弟吗?那也不是,能不能理解,就以前我找的是那几个div,那十个div,那过滤以后可能就是两个div了,但不可能说是div的孩子,不可能啊,你一定要理解过滤是做过什么事情啊,这里面过滤又分为基本的过滤选择器,内容过滤显示器,可见性和属性,其实这就这里面挺多,大部分都是。啊,这里这这这个元素基本上不太用啊,就这一片都是说的什么过滤显示器,你看这过滤显示器它有个有个什么特点呢。你看了这选择器,它很多都有意思吗?对,冒号开头看到了吗。估计大家看不太清楚是吧,这个大理能不能看懂,是不是那个基本选择器,内容选择器和可见性选择器,它是不是都有冒开头哇,其实你一看见了,你这这什么意思哦。
08:05
漫画first。我找了十个div,现在我要过滤,用冒号复过滤,你说找的是什么?第一个其实一看你就能懂,说实话它的API这些单词都非常简单。啊啊,还有一个特别的过滤显示器,就根据什么来过滤了,属性来过滤。具体的我现在还不讲啊,等会我们一个个测试就行好,后面呢,还有一个叫什么同学表单选择性。大家看呢,这个表达形式,它是也以什么开头,是不是也以冒号开头。对吧,还有什么表单对象属性显示器啊,这名字记不住没关系,你要知道干嘛的,譬如说你说这个加他有什么有什么要求啊。
09:00
其实你看名字你就知道,就是他找了个选中的,能懂吧,你要没选中他能找到吗?找不到。看名字你就大概知道是干嘛的。好,那我们现在呢,就来去对一些选择器了,这里表单就不用说了啊啊,我把它分为了这样的四大类,我们先看基本选择题啊看一下。啊,我们的每一个测试呢,其实非常简单,就是一些有一些需求,你把这些需求呢,都搞定就可以了,啊大家下节课学也是这样的,你就自己根据这需求把这个代码写出来就OK。好,我们来看一下,来,我把我把这些给大家先搞过来呗。把它。等一下。一个在了,来退一个。
10:04
我们先来看第一个啊,我把这个打开啊,把这个页面打开。啊,这一个页面其实非常简单,我们简单简单也看一下啊,这里面呢,有几个div看到吧,这里面没什么样子啊,看着界面都很丑,说实话。这是那个div里面的文本这个。你看文本你就知道它有些什么特点,这一个呢,它的ID叫div class呢,等于box,我故意写了这样的文本,能提示这个div有一个什么样的特点,能看得出来,不来吧,啊,行啊,后面呢有一个SPASPA呢,后面呢有一个UI,有很多ii,好,现在我们来做一件事情来看啊,选择ID为div的元素。那我们应该用什么选择系IE选择系,那我是要执行这个核心函数法,还什么呢?井号DIV1,这个大家都懂,因为大家学过CSS嘛,对吧,好这个就找到了,应该按出来说找到谁。
11:16
是不是这一个点位。那我怎么证明找到的就是它呢?我是不是可以给它加个被颜色,让它能够凸显出来各可以可以,那现在的问题就是是不是要给他加个背景颜色的样式。那我们来看一下,虽然说还没学啊,但我们来看一下这个地方。啊,这里面诶。有些什么呢?譬如说用它是不。不是,我们不是搞class,我们是搞的什么,我们是不是要操作style呀,是不是操作样式,操作样式应该用什么。大太阳是不是CSS?
12:00
嗯,来看一下呗,这边可以传什么,看一下,这个是在干嘛,大家看一下。P标签点CS卡了,你说在干嘛,是读还是写?写什么呢?你不要觉得传的参数就是一定是写。啊,现在是读,为什么读你要写的话,他肯定要指定颜色值啊,是不是啊,那什么时候才是写,因为也就是说,如果你指定了两个参数,譬如说你指定了color了,还指定了一个颜色值。那就不一样,而且它还可以一次指定多个值,那你一次要指定多个值,你必须用什么对象能想出来吧,其实它这个非常非常的动态。来,那也就是说我们现在是不是找到了某一个D,接着调用什么方法CSS,因为现在我们需要指定几个属性一个,那我用什么background看。
13:07
加一个什么red红色可以吧,人说老师那个例子上面不这么写的吗?不这么写的吗?那当然也可以啊,你这么写行不行?行,但刚才的写法不更加简单一点嘛。这种写法不简单一点吗?我现在就一个。对不对,我要多个采用对象嘛。可以吧,可以来试一试,很简单,刷有没有,这不就对了吗?那说明我们的这个选择器这么用是可以的吧,可以,这就是我们要通过测试是干什么,就是去验证这些说法都是对的。好,下一个我们来,你别想着我们要学什么,你想到我们把这些功能都完成就得了。第二个选择所有的什么div元素,你来看一下我们这里面有几个div。
14:08
三个吧,123嘛,这三个div是不是都要红色才行。来看一下,我先把这一片给复制一下,看C接着写什么呢?多少福括号,接着写什么?Div,看见V。这样的吧,好来说不好了吗?可以,就这么简单。比原生的是不是方便操作一点,对不对,嗯,慢慢你就会感觉啊,它确实好用,好下面一个选择所有class属性,为什么box的元素,我们看哪些class为box,好像有第一个上面第二位一,第二位二,诶这个这不是一个失败,还有一个好像这是一共有几个四个,等会我们就来看到下来试一下做一下啊还是这个是吧,谢谢。
15:12
现在写什么点box?试下呗。对的吧,对的,很明显啊,这怎么事啊,说来也很简单啊。好来,我们继续往下看啊,把它隔开一点啊,隔太紧了,有点受不了,下面我们继续往下看啊,先把这个写好再说是吧,接着选择所有div跟失败元素。第二选择是吧,接着写什么逗号,接着还写什么败。
16:00
就可以了,那也就是说现在应该有几个选中啊。应该有四个吧,看一下这里面的应该没有失败的吧,是吧?啊应该div和失败四个很好来说。这不很累吗?没问题是吧,没问题。好,来最后一个了,最后一个选择所有class属性,为什么box的div?好,来,我们搞一搞,先说我们是不是要找第二有问题,但够了吗?不够啊,还需要什么点,为什么box。那也就是说只能是什么,第一个和第二个对不对。没你吧?
17:01
是吧,好,那现在是用的是交集还是并集啊,是不是交集,但这个交集啊,也不能选择器,不能瞎写,你能这么写吗?能不能,那他你想想看,你要这么写,他就以为是你的那个类名叫什么box div了。能不能看出来?就他呢,怎么能有说他,他不应该很聪明,他应该跟我分享,他没有这么聪明。啊,你要搞清楚。Okay。好,所以说必须写什么,写这个。你说老师我怎么判断能不能呢啊,你写多了你自然就会了。这都比较简单,说实话,现在都写的最最基本的选择器。好,那我要选择所有的会是一种什么信号,看看试一下,他不还有个星吗?
18:04
是吧,点啊别点了又被被覆盖掉了。会怎么样?那就是。一片红啊,好看啊,简单吧,超级简单。我的目标就是让大家觉得学习是一件比较轻松的事,也不知道愿望能不能达成。
我来说两句