00:00
我们先来看一下这个几块的选择器啊，都是跟查询有关的啊，那我都给你换成红色的，先看基本选择器上哪看呢？打开这个文档，咱们笔记里面有这个文档，叫这个文档，你双击把它打开。啊，这边是类目分类啊，这边是具体内容选择器，看哪个，看这个位置都是选择器，从上往下你看都是啊，咱们先看这一组基本选择器，这是咱们用的最多的一组选择器啊，先看第一个井号，后面跟着ID看到吗？这不就是ID选择器吗？你点开根据给定的ID匹配一个元素，这就是ID选择器了啊，然后看到这个示例，他说查找ID为MYDA的元素，那下面你看啊，有两个div，一个ID是那的力啊，一个呢是MYDA。然后他怎么写啊，Dollar符括号里面写上井号MYDA，这是干嘛，是按照ID来查询。
01:05
那么他就问了，诶，你的ID是不是MYD啊，不是啊，结果中没有你，你的ID是不是MYD啊，是，你看结果中是不是有，他就按照ID来查啊，然后接着再来看element，我们说element是元素，元素是标签，这是标签名选择器，你看根据给定的元素名匹配所有的元素，匹配所有的元素，哎，大家看一下哈，这里有个示例，他说查找一个DNA，诶，看一下哈，这是一个DNA。这俩div下面是不是一个span是吧？他怎么写，他写上标签名div，那标签名div是干嘛？是按照标签名查，他就到上面逐个去问，你是不是div啊，是A下来了，你是不是D啊，试下怎么样了，最后一个你是不是D啊，不是结果中没有他。Okay。接着再来看点个另下的T，当是根据给定的类来进行匹配元素啊，看一下是例，他说查找所有类似麦看。
02:05
好了，这里呢有三个标签，然后三个标签，两个div，一个SPA嘛，然后他就怎么写，他说点my class，按照类型来查，他就问，诶，你的型是不class啊，不是，你的类型是不啊，是下来了，看见了吧？诶你的类型是class啊是，那这个是不是也下来了，就这样OK。然后再去看星星，其实不用多讲，就所有元素看见吗？这里三个元素写个星，三个元素都下来了，没啥可说的，就选部所有的意思啊，好，再看看这个组合选择器看见吗？选择器一选择器二选择A对吧？好组合选择器干嘛？只要每个选择器匹配到的结果合并到一起返回。合并的一起返回啊，请看示例，他说查找到匹配任意一个啊类的元素，这里是有一个DA，一个P，一个SPA一个P啊，那他怎么写DA。
03:06
逗号spend逗号p my class他先拿到这个查，这是组合讲的器吧，先在按照D查D你是不是是下来了，看见了吧，然后呢，Spend标签名，你是不是是这是不是也下来了，然后这这是啥，这要特别说明一下啊，最后这个要特别说明一下。来了。我写在这里，这表示什么？表示标签名必须是P标签，而且。类型还要是对吗。Class就两个必须同时成立，那么好，那么P标签这是一个P，这是是不是两个P啊，但是他们的类型不同，第一个my class结果中是不是有它比my class结果中是没有它。做好OK啊，那这里呢，还要强调一个点。
04:05
想到什么呢？大家注意看一下我们这个结果和他这个选择器的顺序好像对不上，先是div没问题，到SPASPA是不是到结果了。哎，那这个结果的顺序到底跟什么。对，跟什么有关系呢？跟页面的这个标签顺序有关系，大家注意结果的顺序，就是他们这些标签在页面中从上到下的顺序，能理解吧，跟我们昨天一样。它是按照这个从上到下的顺序来的，好给咱们了解一下好吧，那咱们这个基本选择器咱们就讲完了，咱们看看练习怎么用这个东西，好我把这些都关掉啊，咱们练习在哪呢？在DEMO的第二个目录里面，这都是讲选择器的，咱们来看看基本选择器，我打开它，我先运行起来，它就是这样的一个页面。
05:02
啊，它是这样一个页面，然后啊，咱们看看这里面到底是个啥。大家请看一下哈，首先在上面这一部分是啥？是不是一些样式啊，是单是样式嘛，是吧，CSS样式，然后到了这里是什么？是不是引出这个几块类文件，然后下面这句干嘛是留给我们去写那些功能代码能理解吧？啊留给我们写功能的，你看他需求给你标起来了，然后接下来往下看包里面是不是我们看得见的页面的内容了，是吧？哎，先是这里五个按钮看见吗？差不等于包同是不是按钮啊，来五个按钮，每个按钮上面都标了他要干的事情啊，然后再往下，这是div里面是不是又放了一个小div。Mini晓得吗？你看这个地方。一个大的DNA里面放一个小DNA，看见吗？啊，并且它有个什么特点，你要注意看一下这个属性的信息，刚好是这个DNA里文字的描述信息，你看ID，它上面也是一样啊，ID为one，这是不是ID为one class为one，是class为one的DNA看见吗？诶，这个是class mini，这个class mini看到吗？文字刚好是对这个标签的描述，下面这个是什么呢？Idv处，Idv处看见吗？Class one c微one c为test div就是刚好啦，这是第二个大的div，里面套两个小的。
06:33
看这边这个大的头俩小的看见吧，再看啊，嗯，这是一个大的头，四个小的。对吧。你大头缩小的。再看啊，嗯，一个大套四个小的是吧，也没问题，来再看一个大套四个小的，然后接着再来看，到这个地方开始就不太一样了。呃，就不太一样了，好，这里是啥？诶这个方啊，你看看啊，呃，Display等于那class one，然后style的display为none的D，你在页面中是不是看不到啊。
07:09
为啥注意看，我把这个东西给你取消，这个是不是样式，这是不是样式，来我给它取消，然后我再一刷新，是不是看到了吗？那这个display等于none的作用是什么？就是让它消失，就是不显示在页面上，Display是什么？是显示啊，你可以稍微看看，是显示看见了吗？那是什么就什么都不用。那什么都没有就不显示嘛，是这个意思哈，好，那这里呢，还有一个class。这是什么卡拉斯，你看刷新一下是不是也没有啊，也没有，那是为啥呢？你看这里有个样式对吧？来。它是不是也是低分等啊，所以这个。他也看不见，能理解吧？啊，因为它也是等就来到这个啊，这个div啊，包含input type hidden的div啊来看见了吗？包含input type为he的D位，是不是它呀，来里面还放了一个隐藏域是吧？隐藏域本身就看不见吗？啊然后再来，后面是一个span，还有个笑脸的东西是吧？SPA嘛，哎，外加两个笑脸左右好了，那这个页面的内容咱们就介绍完了，那接下来咱们就回过头来看看咱们这些按钮需要我们干啥？
08:30
首先咱们看先先看第一个按钮啊，他说选择ID为one的元素。好，那我们就来实现这个功能啊，先给这个按钮绑上当地事件。注意看。我现在开始写，注意我这写的是错误的ID是多少啊，我是不是先通过ID查找到他，给他把它当事件呢？B t1啊，但是我写的有错误，注意看一会出不来点。翻了水，咱们之前是不是这么满的一天的事件的。
09:05
哎，咱们说单机世界，你看看会不会出来哈，一会你就知道错在哪啊，你多注意一下，好多同学都犯这个错误，这没有效果，有同学说出来了哈，因为你这个代码还没有在页面站在网络之后，这个东西查标签查不到还记得吧，一定要记住，到了服。小括号里面是不是写的方式呢？这就是页面加载完成之后，你放在这里写就没有问题了。啊，来再次启动是不是可以啊，一定要记住这个问题啊，一定要记住这个问题，好，那咱们第一个按钮上，我们干嘛选择idv one的元素呢？在这里面选一下是。井号ID为万，是这样吧，好，那么我们找到它之后alert一下。好。走。
10:02
就出来了，但问题是有的时候选择ID维护你了来，好像看到效果不是特别明显是吧？怎么办呢？我们改一下这个ID维护one这个元素的一些样式效果，让它明显一点，怎么做大家看这里呢，有一个方法。叫做什么点CSS看见了吧，那这个线号干啥了呢？我先说明一下CSS。方法可以设置和获取样式。可以设置和获取样式，就比如说我设置怎么办，那你得告诉他你设置哪个样式，比如说这里都准备好了band color是不是背景颜色，我设置背景颜色，然后告诉他，那你设置这个背景颜色到底什么值啊，你给我呀，来我给个红色。走龙你刷新我点一下是不是红了，那IDV问这个元素不就找到了吗？但是这个红色可能丑一点啊，那我们我们一直以来都是用这个颜色，我们就用这个颜色啊，可能这个颜色好看一点啊，点绿了是吧？好OK，这个idv万了早就选中了哈，哎，那后面呢，咱们接着考下，看第二个按钮，咱们先给第二个按钮呢把上单击事件。
11:26
同样。走井号叫做大家看啊，它这些按钮的ID值是不是顺序增长的，那你这个BTN1是不是到BTN2呀就完了，哎，好接着写上翻水就完了，这是第二个按钮。好，选择class为me的所有元素，那这个按照什么查是不是类型，查类型是不是类型选择器啊，写上点mini看见了吗？哎，然后点CSS，你把这个拿过来就看见效果了。
12:09
好运行大家看。Mini看见吗？就那些小的嘛，哎，就mini的嘛，是吧，好接我们看第三个，我把它拿进来。啊拿进来，咱们先给第三个按钮啊，绑上单击事件BDN3，然后点click。好放水，第三个是什么，他说选择标签名是div的所有元素，那是不是按照什么查对标签名查，那你就用标签名选择器嘛，Div，然后后面是不是给他设置这个样式。都好了。OK。来点击所有的D都选上了，这是什么？这是不是spend，所以它没有啊，来再来看一下第四个。
13:06
我觉得第四个挺无聊的，选择所有元素，那简单吧，就星嘛是吧，没啥可说的嘛，我把这个ID直接改成四，这个是不是改成星啊啊啊。好，那你点它绿油油一大片是吧，好了最后一个啊，咱们看看最后一个，我给最后一个把它按钮先把它事件啊。走井号啊BTN5，别着急点，哎呀，Click好，我们在这里写个function好，他说查找所有的SPA元素和ID为初的元素，这时候用组合选择器了，对吧？嗯，那就是标签名选择器和ID选择器来，怎么做，我们先写上一个啊，就是标签名选择器，先试试看效果啊，不着急一点点来。那改吗？好，我先跑一下这span是不是选上了，因为咱们就先写了一个SPA嘛，那ID选择器也加上组合选择器啊注看逗号隔开对吧，井号出看见吧，然后你再运行一次，我1.span和ID为出看见吗？都出来了OK。
我来说两句