JavaScript学习笔记（十二）

过前面的11篇文章，我们把JS的基础知识基本都学习了一遍，包括了声明变量、运算符、条件语句、循环语句、数组、对象、函数、作用域、构造函数等等，这些基本就包含了主要的JS基础语法知识，还有剩下的一点基础语法，就不单独做一篇笔记了，后面去结合实际的例子一起讲，这篇文章我们一起来通过前面学习到的知识，来完成几个代码的编写。

一、数组相关处理

通过前面的知识，我们知道了数组可以通过循环的方式去获取到数组中的每一个元素和索引，这在实际的应用中非常重要，举个例子

现有一个数组[1,3,5,7,9]，我想从这个数组中获取所有小于等于5的元素及它们的位置

既然要求获取元素和位置，那我们当然需要通过for循环来获取（复习可以看JavaScript学习笔记（八））

查找出来满足小于等于5条件的元素分别是1,3,5，对应的索引分别是0,1,2

这里有一个continue，通过字面意思可以知道是继续的意思，如果只判断一种情况，那么条件语句中的else可以不写，这里写出来是为了让代码的可读性更强。比如如果我们还需要获取大于5的元素的和，那我们就需要把求和的代码写进else语句里面

求和的代码写进else里面

成功求得和为16（7+9）

上面是循环语句和条件语句的结合，这种嵌套的方式在日后的代码开发中会经常遇到，所以我们要一定要先搞清楚我们的代码的逻辑是什么，这样才能写好代码

再来看一个例子

现有两个数组[1,2,3,4,5] [1,3,5,7,9]，找出两个数组中相等元素(交集)

既然是找两个数组元素的交集，那就需要获取到两个数组中的每个元素，所以我们就需要将两个数组都进行遍历，因为不需要索引号，所以我们用for、for in、for of循环都可以

我们来拆解一下整个步骤

首先我们遍历arr1数组，当i=0的时候arr1[0]就是arr1数组的第一个元素1

此时，我们再遍历arr2数组，当j=0的时候arr2[j]就是arr2数组的第一个元素1

此时，arr1[i]和arr2[j]的值都是1，所以输出了1(i=0, j=0)

此时，内部的循环继续，j=1，此时i依然是0，所以比较的就是arr1[0]和arr2[1]，很明显1和3是不等的

依次循环j，直到j=4的时候，此时比较的是arr1[0]和arr2[4]，依然不相等，此时内部循环已经结束(j<arr2.length的条件不再成立)，所以跳出的内部循环，转而进行外部循环，i++ = 1

此时，arr[i] = arr[1] = 2，继续进行内部循环，j=0

依次比较arr1[1]和arr2[0]、arr1[1]和arr2[1]、arr1[1]和arr2[2]....

直到最后比较arr1[4]和arr2[4]，结束所有循环

可以看到，双重循环实际上就是将两个数组中的所有元素进行比较，从而进行相应的操作。

既然循环语句可以有多重嵌套，那么条件语句呢？条件语句当然也可以有多重嵌套

我们之前学到的逻辑语句且(&&)就可以写成嵌套的逻辑语句

现有1个数组[1,2,3,4,5]，找出数组中小于5的偶数

因为不需要索引，所以我们用for of循环

用逻辑语句且(&&)可以找到对应的元素，我们换成多重条件语句来试试

双重条件语句

也是可以的，所以多重条件语句和且(&&)是类似的，具体使用哪种语句，要根据不同的情况来选择。

喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

第二阶段 CSS3

03 CSS基本选择器

1 调试工具 chrome使用

此工具是我们的必备工具，以后代码出了问题，我们首先第一反应就是：

按F12或者是 shift+ctrl+i"打开开发者工具。

或者右击网页空白处——查看

2 标签选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

3 类选择器

类选择器使用”.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}

标签调用的时候用c1ass=“类名”即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。下面是举个例子，实际工作中不要用中文。

4 CSS命名规范

1 长名称或词组可以使用中横线来为选择器命名。

2 不建议使用”_” 下划线来命名CS5选择器。

3 不要纯数字、中文等命名，尽量使用英文字母来表示。

5 谷歌课堂案例

6 多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。两个甚至以上的类名比较常用

样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。

各个类名中间用空格隔开。

Class=”red size20”

7 ID选择器

ID选择器使用“#”进行标识，后面紧跟ID名，其基本语法格式如下

#ID名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。（只能调用一次）

用法基本和类选择器相同。

8 id选择器和类选择器的区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

总结：类选择器和id选择器的的区别就是在使用次数上。

9 通配符选择器

通配符选择器用*号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {属性1：属性值1；属性2：属性值2；風性3：属性值3；}

这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。所以这个选择器，我们认识就好了，平时工作很少用。

10 链接伪类选择器的使用

：link/*未访问的链接*/

：visited/*已访问的链接*/很少用到

：hover/*鼠标移动到链接上*/

：actⅳe/*选定的链接当我们点击别松开鼠标显示的状态*/很少用到

注意写的时候，他们的顺序不要颠倒，按照L V H A的顺序。 love hate爱上了讨厌记忆法或者lv包包非常hao

11 链接伪类的简写方式

实际工作，我们简单写链接伪元素选择器就好了

12 结构伪类选择器（一）

结构（位置）伪类选择器（CSS3）

1 :first-child：选取属于其父元素的首个子元素的指定选择器

2 :last-child：选取属于其父元素的最后一个子元素的指定选择器

3 :nth-child（n）：匹配属于其父元素的第N个子元素，不论元素的类型even偶数odd奇数n从0开始

13 结构伪类选择器（二）

2n就是 0 2 4 6 ……项

3n就是 0 3 6 9 ……项

14 结构伪类选择器（三）

4 :nth-last-child（n）：选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式

15 目标伪类选择器

:target目标伪类选择器选择器,可用于选取当前活动的目标元素,例如百度百科里的目录，点一下就可以跳转到目标信息，:target可以使目标信息赋予属性，字体颜色大小等。

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《04 CSS外观样式及应用》小伙伴们不要错过哟！

念

前文说，CSS是给HTML添加样式的，那么要想两者之间产生作用，就需要用到选择器。

选择器标记在HTML标签上; 通过选择器，浏览器可以知道什么时候加载这些样式。

CSS 通过选择器组合一组样式，集体作用在某一段html代码上。

多种选择器

标签选择器

标签选择器，使用HTML的标签作为选择器。

作用域：引用页面上所有的同名标签，标签选择区域大，通常用来初始化样式

举例

<style>
      span {
          background-color: rebeccapurple;
          color: rgb(182, 56, 56)


      }
</style>


<body>
    <span >
       我式这个div
    </span>
    <span >
        我式这个div
     </span>
    <div>这个</div>
    <div>那个</div>
</body>

id选择器

每个html标签都可以有id属性，用来标记该标签的唯一性。

定义了id属性，就可以用id 作为一个选择器来用。

id选择器通常以#号开头。

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <!--匹配demoSpan ， 匹配上的才会选择，匹配不上的就不选择 -->
    <style>
        #demoSpan{
            color: rgb(128, 0, 53);


        }
</style>
</head>
<body>
    <span >
       我式这个div
    </span>
    <span id="demoSpan">
        我式这个div
     </span>


</body>
</html>

class 选择器

每个html都可以设置class属性，用来指定特定的样式。

利用class属性来指定样式的，定义为class选择器。

class 选择器通常以符号 . 开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .colorRed{
            color: red;


        }
</style>
</head>
<body>
    <span class="colorRed">
       我是span，内容红色
    </span>




</body>
</html>

复合选择器

选择器名称	示例	解释
后代选择器	.box1 .sp	选择类名为box的标签内部的class属性值为sp的标签,使用空格隔开
交集选择器	li.sp	选择既是li标签也属于 sp类的标签
并集选择器(也叫分组选择器)	ul,ol	选择所有的ul和ol标签
复合选择器	div.box li p.spec.item	复合选择器可以式 id，class 后代选择器等的随组合从而形成的选择器



<!--后代选择器示例-->




<!--css 后代选择器， 只有box1自己的后代中叫 sp 才会显示红色-->
.box1 .sp {
    color: red
}




<div class="box1">
    <span class="sp">第一段文字</span>
</div>


<div class="box2">
    <span class="s2">第二段文字</span>
</div>






<!--交集选择器 同时 拥有 box1 和 box2 的盒子才会高亮-->


.box1.box2 {
    color: red
}
<div class="box1">
   盒子1
</div>


<div class="box1 box2">
   盒子2
</div>


<div class="box2">
   盒子3
</div>




<!--并集选择器 box1 box2 颜色均会为红色-->


.box1,.box2 {
    color: red
}
<div class="box1">
       盒子1
    </div>


    <div class="box2">
       盒子2
    </div>


    <div class="box3">
       盒子3
    </div>

元素关系选择器

名称	举例	意义
子选择器	div>p	div的子标签，只会匹配div标签的子（不含孙子等）元素中的所有P标签
相邻兄弟选择器	img+p	图片后面紧跟着的段落将被选中
通用兄弟选择器	p~span	p元素后的所有同层级span元素，（从IE7开始兼容）

序号选择器

名称	意义	兼容性
:first-child	第一个子元素	IE7
:last-child	最后一个子元素	IE9
:nth-child(3)	第3个子元素	IE9
:nth-of-type(3)	第三个某类型子元素,同种标签指定序号	IE9
:nth-last-child(3)	倒数第三个子元素	IE9
:nth-last-of-type(3)	倒数第三个摸个类型的子元素，同种标签指定元素	IE9

<!--一段html代码-->
<div class="parentBox">
    <div class="box">
        <p>box1</p>
        <p>box1</p>
    </div>        
    <div class="box">
        <p>box2</p>
        <p>box2</p>
    </div>        
    <div class="box">
        <p>box3</p>
        <p>box3</p>
    </div>
    <div class="box">
        <p>box4</p>
        <p>box4</p>
    </div>
    <div class="box">
        <p>box5</p>
        <p>box5</p>
    </div>
</div>


<!--模拟第一个div元素，背景称红色-->
    <style>


        .box:first-child {
            background-color: red;
        }
</style>






<!--模拟div元素，最后一个背景为绿色-->
<style>


    .box:last-child {
        background-color: green;
    }
</style>




<!--模拟 nth-child指定 元素下标，如果指定的元素下表不是p标签，那么css也不会生效-->
<style>


        div p:nth-child(4) {
            background-color: red;
        }
</style>
<div>


        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <div>第一个div子标签</div>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
    </div>






<!--模拟 nth-child 传参为基数的时候，css发挥作用。nht-child 可以写成 an+b的形式，表示从b开始每a个选择一个-->
<!--2n+1 表示奇数 2n表示偶数-->
<style>


        div p:nth-child(2n+1) {
            background-color: red;
        }
</style>




<div>


        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <div>第一个div子标签</div>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
    </div>




<!--模拟将选择同种标签指定子元素序号的子元素-->


<style>


        div p:nth-of-type(2n) {
            background-color: red;
        }
</style>


<div>


        <p>第1个p标签</p>
        <p>第2个p标签</p>
        <div>第一个div子标签</div>
        <p>第3个p标签</p>
        <p>第4个p标签</p>
    </div>

属性选择器

举例	意义
img[alt]	选择有alt属性的img标签
img[alt=”房子”]	选择alt属性是房子的img标签
img[alt^=”小区”]	选择alt属性以小区开头的img标签
img[alt$=”花园”]	选择alt属性以花园结尾的img标签
img[alt*=“小径”]	选择alt属性中包含有小径字样的img标签
img[alt~=”马赛克”]	选择有alt属性中有空格隔开的马赛克字样的img标签
img[alt\|=”作家”]	选择有alt属性以 “作家-”或者 “作家”开头的img标签

伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，例如：超级链接有四个特殊状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


        a:link {
            color: dodgerblue;
        }


        a:visited {
            color: black;
        }


        a:hover {
            color: brown;
        }


        a:active {
            color:crimson;
        }
</style>
</head>
<body>


    <div>
        <a href="http://www.taobao.com">淘宝</a>
    </div>
    <div>
        <a href="http://www.alibaba.com">阿里巴巴</a>
    </div>
</body>
</html>

CSS3新增伪类

伪类	意思
:empty	选择空标签
:focos	选择当前获得焦点的表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已经勾选的单选按钮或者复选框
:root	选择根元素，即<html>标签

<!--验证选取空标签示例-->
<style>


        p {
            height: 200px;
            width: 200px;
            border: 2px solid red;
        }


        p:empty {
            background-color: green;
        }
</style>
<p></p>
<p></p>
<p>费控标签</p>
<p></p>




<!--验证获得焦点后 背景颜色为黑色-->


<style>


  input:focus {
      background-color: black;
  }
</style>


<input></input>
<input></input>
<input></input>
<input></input>




<!--验证添加disabled enabled伪类-->
<!--默认情况下， 为input标签为 enabled-->
<style>
    input:disabled {
        background-color: blue;
    }
    input:enabled {
        background-color: green;
    }
</style>
<input></input>
<input></input>
<input disabled></input>
<input></input>


<!--验证 checked,已经单选的或者复选框,如果选中，相邻兄弟span标签的文字变成红色-->


<style>    
    input:checked+span{
        color: red;
    }
</style>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>




<!--root选择器 即表示根节点开始的所有元素-->
<style>


    :root {
      font-size: 30px;
    }
</style>

伪元素

表示虚拟动态创建的元素, 伪元素用双冒号表示:: , IE8可以兼容到单冒号

伪元素	意义
::before	表示元素之前的虚拟出一个元素
::after伪元素	表示元素之后的虚拟出一个元素
::selection	用于文档中被用户高亮的一部分
::first-letter	选中某个元素（必须是块级元素）第一行的第一个字母
::first-line	选中某个元素（必须是块级元素）第一行全部文字

在线咨询

上一篇：设计灵感 - 精美登录页设计案例赏析
下一篇：HTML table表格固定表头 tbody加滚动条

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript学习笔记（十二）

第二阶段 CSS3

03 CSS基本选择器

念

多种选择器

您的项目需求