JavaScript學習筆記（十二）

過前面的11篇文章，我們把JS的基礎(chǔ)知識基本都學習了一遍，包括了聲明變量、運算符、條件語句、循環(huán)語句、數(shù)組、對象、函數(shù)、作用域、構(gòu)造函數(shù)等等，這些基本就包含了主要的JS基礎(chǔ)語法知識，還有剩下的一點基礎(chǔ)語法，就不單獨做一篇筆記了，后面去結(jié)合實際的例子一起講，這篇文章我們一起來通過前面學習到的知識，來完成幾個代碼的編寫。

一、數(shù)組相關(guān)處理

通過前面的知識，我們知道了數(shù)組可以通過循環(huán)的方式去獲取到數(shù)組中的每一個元素和索引，這在實際的應用中非常重要，舉個例子

現(xiàn)有一個數(shù)組[1,3,5,7,9]，我想從這個數(shù)組中獲取所有小于等于5的元素及它們的位置

既然要求獲取元素和位置，那我們當然需要通過for循環(huán)來獲取（復習可以看JavaScript學習筆記（八））

查找出來滿足小于等于5條件的元素分別是1,3,5，對應的索引分別是0,1,2

這里有一個continue，通過字面意思可以知道是繼續(xù)的意思，如果只判斷一種情況，那么條件語句中的else可以不寫，這里寫出來是為了讓代碼的可讀性更強。比如如果我們還需要獲取大于5的元素的和，那我們就需要把求和的代碼寫進else語句里面

求和的代碼寫進else里面

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

上面是循環(huán)語句和條件語句的結(jié)合，這種嵌套的方式在日后的代碼開發(fā)中會經(jīng)常遇到，所以我們要一定要先搞清楚我們的代碼的邏輯是什么，這樣才能寫好代碼

再來看一個例子

現(xiàn)有兩個數(shù)組[1,2,3,4,5] [1,3,5,7,9]，找出兩個數(shù)組中相等元素(交集)

既然是找兩個數(shù)組元素的交集，那就需要獲取到兩個數(shù)組中的每個元素，所以我們就需要將兩個數(shù)組都進行遍歷，因為不需要索引號，所以我們用for、for in、for of循環(huán)都可以

我們來拆解一下整個步驟

首先我們遍歷arr1數(shù)組，當i=0的時候arr1[0]就是arr1數(shù)組的第一個元素1

此時，我們再遍歷arr2數(shù)組，當j=0的時候arr2[j]就是arr2數(shù)組的第一個元素1

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

此時，內(nèi)部的循環(huán)繼續(xù)，j=1，此時i依然是0，所以比較的就是arr1[0]和arr2[1]，很明顯1和3是不等的

依次循環(huán)j，直到j(luò)=4的時候，此時比較的是arr1[0]和arr2[4]，依然不相等，此時內(nèi)部循環(huán)已經(jīng)結(jié)束(j<arr2.length的條件不再成立)，所以跳出的內(nèi)部循環(huán)，轉(zhuǎn)而進行外部循環(huán)，i++ = 1

此時，arr[i] = arr[1] = 2，繼續(xù)進行內(nèi)部循環(huán)，j=0

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

直到最后比較arr1[4]和arr2[4]，結(jié)束所有循環(huán)

可以看到，雙重循環(huán)實際上就是將兩個數(shù)組中的所有元素進行比較，從而進行相應的操作。

既然循環(huán)語句可以有多重嵌套，那么條件語句呢？條件語句當然也可以有多重嵌套

我們之前學到的邏輯語句且(&&)就可以寫成嵌套的邏輯語句

現(xiàn)有1個數(shù)組[1,2,3,4,5]，找出數(shù)組中小于5的偶數(shù)

因為不需要索引，所以我們用for of循環(huán)

用邏輯語句且(&&)可以找到對應的元素，我們換成多重條件語句來試試

雙重條件語句

也是可以的，所以多重條件語句和且(&&)是類似的，具體使用哪種語句，要根據(jù)不同的情況來選擇。

嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變?yōu)閃eb前端高手哦！

第二階段 CSS3

03 CSS基本選擇器

1 調(diào)試工具 chrome使用

此工具是我們的必備工具，以后代碼出了問題，我們首先第一反應就是：

按F12或者是 shift+ctrl+i"打開開發(fā)者工具。

或者右擊網(wǎng)頁空白處——查看

2 標簽選擇器

要想將CSS樣式應用于特定的HTML元素，首先需要找到該目標元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器（選擇符）。

標簽選擇器是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：

標簽選擇器最大的優(yōu)點是能快速為頁面中同類型的標簽統(tǒng)一樣式，同時這也是他的缺點，不能設(shè)計差異化樣式。

3 類選擇器

類選擇器使用”.”（英文點號）進行標識，后面緊跟類名，其基本語法格式如下：

.類名 {屬性1：屬性值1；屬性2：屬性值2；屬性3：屬性值3；}

標簽調(diào)用的時候用c1ass=“類名”即可。

類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。下面是舉個例子，實際工作中不要用中文。

4 CSS命名規(guī)范

1 長名稱或詞組可以使用中橫線來為選擇器命名。

2 不建議使用”_” 下劃線來命名CS5選擇器。

3 不要純數(shù)字、中文等命名，盡量使用英文字母來表示。

5 谷歌課堂案例

6 多類名選擇器

我們可以給標簽指定多個類名，從而達到更多的選擇目的。兩個甚至以上的類名比較常用

樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系，受CSS樣式書寫的上下順序有關(guān)。

各個類名中間用空格隔開。

Class=”red size20”

7 ID選擇器

ID選擇器使用“#”進行標識，后面緊跟ID名，其基本語法格式如下

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

該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于文檔中某一個具體的元素。（只能調(diào)用一次）

用法基本和類選擇器相同。

8 id選擇器和類選擇器的區(qū)別

W3C標準規(guī)定，在同一個頁面內(nèi)，不允許有相同名字的id對象出現(xiàn)，但是允許相同名字的class類選擇器（class）好比人的名字，是可以多次重復使用的，比如張偉王偉李偉李娜id選擇器好比人的身份證號碼，全中國是唯一的，不得重復。只能使用一次。

總結(jié)：類選擇器和id選擇器的的區(qū)別就是在使用次數(shù)上。

9 通配符選擇器

通配符選擇器用*號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

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

這個通配符選擇器，就像我們的電影明星中的夢中情人，想想它就好了，但是它不會和你過日子。所以這個選擇器，我們認識就好了，平時工作很少用。

10 鏈接偽類選擇器的使用

：link/*未訪問的鏈接*/

：visited/*已訪問的鏈接*/很少用到

：hover/*鼠標移動到鏈接上*/

：actⅳe/*選定的鏈接當我們點擊別松開鼠標顯示的狀態(tài)*/很少用到

注意寫的時候，他們的順序不要顛倒，按照L V H A的順序。 love hate愛上了討厭記憶法或者lv包包非常hao

11 鏈接偽類的簡寫方式

實際工作，我們簡單寫鏈接偽元素選擇器就好了

12 結(jié)構(gòu)偽類選擇器（一）

結(jié)構(gòu)（位置）偽類選擇器（CSS3）

1 :first-child：選取屬于其父元素的首個子元素的指定選擇器

2 :last-child：選取屬于其父元素的最后一個子元素的指定選擇器

3 :nth-child（n）：匹配屬于其父元素的第N個子元素，不論元素的類型even偶數(shù)odd奇數(shù)n從0開始

13 結(jié)構(gòu)偽類選擇器（二）

2n就是 0 2 4 6 ……項

3n就是 0 3 6 9 ……項

14 結(jié)構(gòu)偽類選擇器（三）

4 :nth-last-child（n）：選擇器匹配屬于其元素的第N個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數(shù)。n可以是數(shù)字、關(guān)鍵詞或公式

15 目標偽類選擇器

:target目標偽類選擇器選擇器,可用于選取當前活動的目標元素,例如百度百科里的目錄，點一下就可以跳轉(zhuǎn)到目標信息，:target可以使目標信息賦予屬性，字體顏色大小等。

看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結(jié)束，下篇文章將分享《04 CSS外觀樣式及應用》小伙伴們不要錯過喲！

念

前文說，CSS是給HTML添加樣式的，那么要想兩者之間產(chǎn)生作用，就需要用到選擇器。

選擇器標記在HTML標簽上; 通過選擇器，瀏覽器可以知道什么時候加載這些樣式。

CSS 通過選擇器組合一組樣式，集體作用在某一段html代碼上。

多種選擇器

標簽選擇器

標簽選擇器，使用HTML的標簽作為選擇器。

作用域：引用頁面上所有的同名標簽，標簽選擇區(qū)域大，通常用來初始化樣式

舉例

<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都可以設(shè)置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，內(nèi)容紅色
    </span>




</body>
</html>

復合選擇器

選擇器名稱	示例	解釋
后代選擇器	.box1 .sp	選擇類名為box的標簽內(nèi)部的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>

元素關(guān)系選擇器

名稱	舉例	意義
子選擇器	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)	倒數(shù)第三個子元素	IE9
:nth-last-of-type(3)	倒數(shù)第三個摸個類型的子元素，同種標簽指定元素	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 傳參為基數(shù)的時候，css發(fā)揮作用。nht-child 可以寫成 an+b的形式，表示從b開始每a個選擇一個-->
<!--2n+1 表示奇數(shù) 2n表示偶數(shù)-->
<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^=”小區(qū)”]	選擇alt屬性以小區(qū)開頭的img標簽
img[alt$=”花園”]	選擇alt屬性以花園結(jié)尾的img標簽
img[alt*=“小徑”]	選擇alt屬性中包含有小徑字樣的img標簽
img[alt~=”馬賽克”]	選擇有alt屬性中有空格隔開的馬賽克字樣的img標簽
img[alt\|=”作家”]	選擇有alt屬性以 “作家-”或者 “作家”開頭的img標簽

偽類

偽類是添加到選擇器的描述性詞語，指定要選擇的元素的特殊狀態(tài)，例如：超級鏈接有四個特殊狀態(tài)

<!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	選擇當前已經(jīng)勾選的單選按鈕或者復選框
: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,已經(jīng)單選的或者復選框,如果選中，相鄰兄弟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選擇器 即表示根節(jié)點開始的所有元素-->
<style>


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

偽元素

表示虛擬動態(tài)創(chuàng)建的元素, 偽元素用雙冒號表示:: , IE8可以兼容到單冒號

偽元素	意義
::before	表示元素之前的虛擬出一個元素
::after偽元素	表示元素之后的虛擬出一個元素
::selection	用于文檔中被用戶高亮的一部分
::first-letter	選中某個元素（必須是塊級元素）第一行的第一個字母
::first-line	選中某個元素（必須是塊級元素）第一行全部文字

在線咨詢

上一篇：設(shè)計靈感 - 精美登錄頁設(shè)計案例賞析
下一篇：HTML table表格固定表頭 tbody加滾動條

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript學習筆記（十二）

第二階段 CSS3

03 CSS基本選擇器

念

多種選擇器

您的項目需求