w3c h5 + css + js筆記

公司電腦：/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js 

「

1. js基礎/css基礎/html基礎

    w3school https://www.w3school.com.cn/js/index.asp

    菜鳥 https://www.runoob.com/js/js-tutorial.html

 

    注意點

        css flex佈局

            實例 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

            語法 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

        css 浮動float和清除clear 需要理解但現在佈局儘量多使用flex少使用float

        css position

        css 佈局盒模型

        css bem法則, 要用人能看懂的語言

        css 作用域

 

        js jquery

           原型鏈

           var 變量提升

           this

           AMD/CMD require()

           閉包

 

       js es6語法

            Class

            const/let

            箭頭函數

            promise then catch 鏈式 all併發

            解構

            展開運算符

            import/export

            async/await

            generators 理解但非重點,用async/await

2. 工程化

    npm 用法

    node 用途, 暫時無需深入

    webpack 瞭解下, 暫時無需深入

    babel 轉義瞭解下, 無需深入

    vue 重點,百信全行在用,文檔看官方文檔就行

        vue-router

        vue-cli

    餓了嗎的element-ui

    react

    螞蟻的ant design

    css加工 less/sass/stylus(財富在用) .less .sass .sty .css

    elerion  

 

3.調試

    chrome debug

 

4.工具

    webstorm

    sublime

    vscode

        prettier 格式化插件

        vetur vue插件

        language-stylus stylus插件

        color highlight 顏色高亮插件

」

============================

 

7.22

html

標籤http://www.w3school.com.cn/tiy/t.asp?f=html_textformatting

1、h標籤（標題標籤）：h1~h6字體變小

2、hr標籤（水平線標籤）

   例：

   <hr/>

    <p>This is a paragraph</p>

  <hr />

  <p>This is a paragraph</p>

3、p標籤（段落標籤）p

4、br標籤（折行標籤）br  <br /> 

5、

  5.1文本格式化標籤：文本進行格式化

    粗體標籤：<b>This text is bold</b>

    加重語氣：<strong>This text is strong</strong>

    大號字：<big>This text is big</big>(H5已刪除)

    着重文字（也是斜的）：<em>This text is emphasized</em>

    斜體：<i>This text is italic</i>

    小號字：<small>This text is small</small>

    下標字（右下角）：

            This text contains

            _subscript

    上標字（右上角）：

           This text contains

           ^superscript

   5.2、pre標籤對空格和空行進行控制：

        保留空格和空行

        定義預格式文本：

         <pre>

             for i = 1 to 10

                  print i

               next i

        </pre>

   5.3、不同的“計算機輸出”標籤的顯示效果

          定義計算機代碼（code元素不保留多餘的空格和折行）：<code>Computer code</code>

          定義鍵盤碼：<kbd>Keyboard input</kbd>

          定義打字機代碼：<tt>Teletype text</tt> (H5已刪除)

          定義計算機代碼樣本：<samp>Sample text</samp>

          定義變量：<var>Computer variable</var>

   5.4、地址標籤（元素通常以斜體顯示）

定義地址：<address>

Written by <a href="mailto:[email protected]">Donald Duck</a>.<br

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

 

    5.5、縮寫或首字母縮寫（僅對於 IE 5 中的 acronym 元素有效；對於 Netscape 6.2 中的 abbr 和 acronym 元素都有效。）

    定義縮寫：<abbr title="etcetera">etc.</abbr>

    定義首字母縮寫：<acronym title="World Wide Web">WWW</acronym>(H5已刪除)

 

   5.6、改變文字的方向（如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)）

    定義文字方向：<bdo dir="rtl">

    Here is some Hebrew text

    </bdo>

 

  5.7、實現長短不一的引用語：使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現

     長塊引用：

定義長的引用：<blockquote>

這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。

</blockquote>    

   斷塊引用（四周都會添加空白）：

 

  定義短的引用語(含雙引號的文字)：

  <q>

這是短的引用。

   </q>

  

  5.8、標記刪除文本和插入文本（大多數瀏覽器會改寫爲刪除文本和下劃線文本；一些老式的瀏覽器會把刪除文本和下劃線文本顯示爲普通文本）

 <p>一打有 

刪除字：<del>二十</del> 

插入字：<ins>十二</ins> 件。

</p>

 

5.9、其他

定義引用、引證：<cite>元素

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

定義一個定義項目：

<dfn>

<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>

 

6、a標籤 ：

文本鏈接：

指向本網站中的一個頁面的鏈接：<a href="/index.html">本文本</a>

指向萬維網上的頁面的鏈接：<a href="http://www.microsoft.com/">

圖像鏈接：

<a href="/example/html/lastpage.html">

<img border="0" src="/i/eg_buttonnext.gif" />

</a>

有兩種使用 <a> 標籤的方式：

1. 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
2. 通過使用 name 屬性 - 創建文檔內的書籤

提示："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成爲鏈接。

a標籤屬性：

   1》、href = ”“

   2》、target = ”_blank“打開新窗口顯示

   3》、name = ”“ 錨（anchor）；用name 屬性創建 HTML 頁面中的書籤；使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了

     例：

      <a name="tips">基本的注意事項 - 有用的提示</a>

    <a href="#tips">有用的提示</a>//在同一個文檔中創建指向錨的鏈接

    <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>//在其他頁面中創建指向該錨的鏈接

  4》、跳出框架：target="_top" （？？？？）

  其他常用鏈接：

   發郵件（有發郵件的軟件）：<a href="mailto:[email protected]?subject=Hello%20again">發送郵件</a>

   複雜郵件鏈接：<a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件！</a>

 

7、圖像標籤：<img> 是一種空標籤，空標籤：即只能包含屬性，而且並沒有閉合標籤

屬性：

  1》src = “url”

  2》alt = “”爲圖像定義一串預備的可替換的文本；在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像

圖片常用案例：

1》HTML 頁面添加背景圖片：<body background="/i/eg_background.jpg">

2》文本中添加圖片：<p>圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>（對齊方式align="bottom”；align=“middle”；align=“top”，默認是bottom對齊）

3》段落添加浮動圖片：

 3.1》段落前：

<p>

<img src ="/i/eg_cute.gif" align ="left"> 

帶有圖像的一個段落。圖像的 align 屬性設置爲 "left"。圖像將浮動到文本的左側。

</p>

  3.2》段落右側：

 <p>

<img src ="/i/eg_cute.gif" align ="right"> 

帶有圖像的一個段落。圖像的 align 屬性設置爲 "right"。圖像將浮動到文本的右側。

</p>

4》調整圖片尺寸：<img src="/i/eg_mouse.jpg" width="200" height="200">

5》如果無法顯示圖像，將顯示 "alt" 屬性中的文本：<img src="/i/eg_goleft.gif" alt="向左轉" />

6》圖像鏈接：

   <a href="/example/html/lastpage.html">

   <img border="0" src="/i/eg_buttonnext.gif" />

   </a>

 7》圖像映射：

   <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

 

8、<area>:定義圖像映射中的區域（注：圖像映射指得是帶有可點擊區域的圖像）,area 元素總是嵌套在 <map> 標籤中；定義圖像地圖中的可點擊區域

屬性：

   1》alt

   2》coords：座標值

   3》herf：

   4》noherf：從圖像映射排除某個區域

   5》shape：default；rect；circle；poly 定義區域的形狀。

   6》target：_blank;_parent;_self;_top

 

9、<map>:定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像；定義圖像地圖

註釋：area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

註釋：<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），所以我們應同時向 <map> 添加 id 和 name 屬性

屬性：

      id（必須屬性） 爲 map 標籤定義唯一的名稱

      Name（可選屬性）爲 image-map 規定的名稱

10、表格：<table>

組成（由多標籤組成）：

表格由 table 標籤開始;

表格行由 tr 標籤開始;

表格數據由 td 標籤開始

 <h4>兩行三列：</h4>

<table border="1">

<tr>

  <td>100</td>

  <td>200</td>

  <td>300</td>

</tr>

<tr>

  <td>400</td>

  <td>500</td>

  <td>600</td>

</tr>

</table>

table屬性：

1》邊框：border = ”1“ <table border="1">

2》單元格邊距cellpadding：內容與其邊框的空白 <table cellpadding="10">

3》單元格間距cellspacing：<table cellspacing="10">

4》表格背景色bgcolor：<table bgcolor="red">

5》表格背景圖background：<table  background="/i/eg_bg_07.gif">

6》表格邊框展示：<table frame="box">  展示四周

                          <table frame="above"> 展示上線

                          <table frame="below"> 展示下線

                          <table frame="hsides"> 展示上下線

                          <table frame="vsides"> 展示左右線

                          

td屬性：

1》單元格背景色bgcolor：<td bgcolor="red">First</td>

2》單元格背景圖background：<td background="/i/eg_bg_07.gif"> Second</td>

3》對齊align：<td align="left">衣服</td> <td align="right">$241.10</td>

th屬性：

1》內容對齊屬性align：<th align="left">消費項目</th>  <th align="right">二月</th>

 

其他：

1、表格表頭：<th>表格頭</th> :

   <tr>

   <th>Heading</th>

   <th>Another Heading</th>

   </tr>

2、空單元格（有邊框）：&nbsp;

<tr>

<td>&nbsp;</td>

<td>row 2, cell 2</td>

</tr>

用空格佔位符：插入一個 no-breaking 空格；no-breaking 空格是一個字符實體；no-breaking 空格由和號開始 ("&")，然後是字符"nbsp"，並以分號結尾(";")

3、表格標題：<caption>我的標題</caption>

4、跨多行或多列的單元格：

   <th colspan="2">電話</th>  跨兩行

   <th rowspan="2">電話</th> 跨兩列

5、單元格內容與其邊框之間的空白：

    cellpadding

表格標籤其它相關標籤：

1、<thead>：表格頁眉

2、<tbody>：表格主題

3、<tfoot>：表格頁腳

4、<col>：定義用於表格列的屬性。 safari和chrome 不好使，而w3說（所有主流瀏覽器都支持 <col> 標籤）？？？

5、<colgroup>：定義表格列的組。即<colgroup> safari和chrome 不好使，而w3說（Firefox、Chrome 以及 Safari 僅支持 colgroup 元素的 span 和 width 屬性）？？？例 <colgroup span="2" align="left"></colgroup> 注意第一個 colgroup 元素橫跨兩列

例：其它相關標籤之1、2、3，感覺沒啥實際意義

<table border="1">

    <thead>

    <tr>

        <th>Month</th>

        <th>Savings</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>January</td>

        <td>$100</td>

    </tr>

    <tr>

        <td>February</td>

        <td>$80</td>

    </tr>

    </tbody>

    <tfoot>

    <tr>

        <td>Sum</td>

        <td>$180</td>

    </tr>

    </tfoot>

</table>

 

11、列表

1、無序列表： <ul>列表；<li>列表行元素

   <ul>

    <li>蘋果</li>

    <li>香蕉</li>

    <li>菠蘿</li>

   </ul>

列表屬性：type="disc”（圓黑點,默認） “circle”（圓圈）  “square”（正方形）”none”

 

2、有序列表：<ol>列表；<li>列表行元素

列表屬性：type=“A”； “a”（默認）；”I”（羅馬數字，大寫i）；”i”（小寫羅馬數字，小寫i）；decimal（阿拉伯數字）

 

3、自定義列表：<dl> <dt> <dd>

自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

注：<dir>(H5已刪除) <menu>已被<ul>代替

 

12、塊

<div>（塊元素） ：用於組合其他 HTML 元素的容器；與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性；定義文檔中的分區或節（division/section）；存在意義：設置樣式

<span>（內聯元素）：用作文本的容器；與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性；定義 span，用來組合文檔中的行內元素。存在意義：設置樣式

塊元素：div；p；h；ul，…

內聯元素：b；td；img；a；span，…

 

13、佈局:

HTML5的網站佈局：H5提供新語義元素定義了網頁的不同部分：

<header>

<nav>

<section>

<footer>

<article>

<aside>

<details>

<summary>

自己寫的例子如下（沒發現這樣寫有什麼好處，除了詳細信息的下箭頭以外，可能是我這樣寫有問題 to be continued）：

==========================

<body>

<header>

header定義文檔或節的頁眉

</header>

 

<nav>

nav:定義導航鏈接的容器

</nav>

 

<section>

section:定義文檔中的節

</section>

 

<article>

article:定義獨立的自包含文章

</article>

 

<summary>

summary:定義 details 元素的標題

</summary>

 

<details>

 details:定義額外的細節

</details>

 

<aside>

 aside:定義內容之外的內容（比如側欄）

</aside>

 

<footer>

footer:定義文檔或節的頁腳

</footer>

 

</body>

==========================

14、響應式設計：RWD（Respons Web Design）：響應式web設計；能夠以可變尺寸傳遞網頁，對於平板和移動設備是必須的

使用Bootstrap

 

15、框架

1》框架結構標籤：<frameset>  (H5已刪除)

  屬性：cols = “25%，75%” （按比例）；cols = “100，*”（第一列佔100寬，另一列佔剩下所有）

           rows = “25%，75%” 

           noresize="noresize”加上此屬性，框架就不能拖動調整尺寸

2》框架標籤：<frame>(H5已刪除)

 屬性：src = "/example/html/frame_a.html"

          name="showframe"

 

假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。爲了避免這種情況發生，可以在 <frame> 標籤中加入：noresize="noresize"。

爲不支持框架的瀏覽器添加 <noframes> (H5已刪除)標籤

 

3》不能將 <body></body> 標籤與 <frameset></frameset>(html5中已刪除) 標籤同時使用！不過，假如你添加包含一段文本的 <noframes> 標籤，就必須將這段文字嵌套於 <body></body> 標籤內。（在下面的第一個實例中，可以查看它是如何實現的。）

加<noframe>標籤好像也顯示不了<body>標籤內的內容

示例：

<html>

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">

<frame src="/example/html/frame_b.html">

<frame src="/example/html/frame_c.html">

</frameset>

</frameset>

</html>

4》導航框架：

頁面中兩個框架：其中一個框架裏有三個鏈接，另外一個框架展示第一個框架選中的鏈接

<html>

 

<frameset cols="100,*" noresize = "noresize">

 

  <frame src="/example/html/html_contents.html">

  <frame src="/example/html/frame_a.html" name="showframe">

 

</frameset>

 

</html>

解析：

http://www.w3school.com.cn/example/html/html_contents.html

http://www.w3school.com.cn/example/html/content.html

content.html源碼如下：

	<html>
	<body>
	<a href ="/example/html/frame_a.html" target ="showframe">Frame a</a><br />
	<a href ="/example/html/frame_b.html" target ="showframe">Frame b</a><br />
	<a href ="/example/html/frame_c.html" target ="showframe">Frame c</a>
	</body>
	</html>

 

5》內聯框架：（HTML頁中的框架）<iframe>

一些老瀏覽器不支持iframe；如果不支持，iframe不可見

<html>

<body>

<iframe src="https://www.baidu.com/"></iframe>

<p>一些老的瀏覽器不支持 iframe。</p>

<p>如果得不到支持，iframe 是不可見的。</p>

</body>

</html>

 

6》跳轉至框架內的指定細節

<html>

<frameset cols="180,*">

<frame src="/example/html/content.html">

<frame src="/example/html/link.html" name="showframe">

</frameset>

</html>

//http://www.w3school.com.cn/example/html/content.html

源碼：

	<html>
	<body>
	<a href ="/example/html/link.html" target ="showframe">沒有錨的鏈接</a><br />
	<a href ="/example/html/link.html#C10" target ="showframe">帶有錨的鏈接</a>
	</body>
	</html>
//http://www.w3school.com.cn/example/html/link.html#C10  與  http://www.w3school.com.cn/example/html/link.html 是一個鏈接地址，只不過前者加了錨點

源碼：	<html>
	<body>
	<a name="C1"><h2>Chapter 1</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C2"><h2>Chapter 2</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C3"><h2>Chapter 3</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C4"><h2>Chapter 4</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C5"><h2>Chapter 5</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C6"><h2>Chapter 6</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C7"><h2>Chapter 7</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C8"><h2>Chapter 8</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C9"><h2>Chapter 9</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C10"><h2>Chapter 10</h2></a>
	<p>This chapter explains ba bla bla</p>
	<a name="C11"><h2>Chapter 11</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C12"><h2>Chapter 12</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C13"><h2>Chapter 13</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C14"><h2>Chapter 14</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C15"><h2>Chapter 15</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C16"><h2>Chapter 16</h2>
	<p>This chapter explains ba bla bla</p>
	<a name="C17"><h2>Chapter 17</h2>
	<p>This chapter explains ba bla bla</p>
	</body>
	</html>

16、內聯框架<iframe> 用於在網頁內顯示網頁：<iframe src="URL"></iframe>

屬性：src="https://www.baidu.com/"

     width="200" 

     height="200" 

         frameborder=“0”//0即邊框；非0即有邊框

17、背景

<body>修改body的背景或背景色

屬性：bgcolor="#000000" ；”rgb(0,0,0)" ；”black"

         background="clouds.gif”；"http://www.w3school.com.cn/clouds.gif"

18、HTML腳本

1》<noscript> 不支持 Javascript 的瀏覽器將顯示 noscript 元素中的文本

<script type="text/javascript">

document.write("Hello World!")

</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

 

19、HTML路徑

20、頭部標籤<head>：頭部元素常包含以下標籤：

<title>、<base>、<link>、<meta>、<script> 以及 <style>。

 

1》<title>

2》<base>:標籤爲頁面上的所有鏈接規定默認地址或默認目標（target）

3》<link>:標籤定義文檔與外部資源之間的關係;標籤最常用於連接樣式表

4》<style>：樣式

5》<meta>：meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。

  屬性：name；content

<meta> 標籤始終位於 head 元素中。

元數據可用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。（name和content屬性的作用是描述頁面內容）

  搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面

  5.1》描述：<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

  5.2》定義頁面關鍵字：<meta name="keywords" content="HTML, CSS, XML" />

 5.3》重定向：<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />//5即5秒跳轉

6》<script>元素：用於定義客戶端腳本

 

21、實體：希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）

格式：&entity_name;或&#entity_number;

 實體符號參考手冊：http://www.w3school.com.cn/tags/html_ref_entities.html

22、URL：scheme://host.domain:port/path/filename 

23、URL編碼：URL只能通過ASCII字符集來通過網絡進行發送；所以URL中非ASCII之外的字符必須轉化爲ASCII格式；URL編碼用%其後跟兩位十六進制數來替換非ASCII字符；URL不能包含空格。URL編碼通常使用+來替換空格 （URL編碼手冊 http://www.w3school.com.cn/tags/html_ref_urlencode.html）

 

 

24、HTML文檔類型：<!DOCTYPE>聲明：此聲明幫助瀏覽器正確地顯示網頁；不是 HTML 標籤。它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的

<!DOCTYPE html>是HTML5

25、<form>表單：收集用戶輸入

表單包含表單元素：input、複選框、單選按鈕、提交按鈕等

<form>屬性：

1》action 提交表單的動作<form action="/demo/demo_form.asp"> 表單數據會被髮送到名爲 demo_form.asp 的頁面；會把input標籤的name和value發送給服務器；如果省略action，則action或被設置爲當前頁

2》method <form action="action_page.php" method="GET"> 請求方式

3》accept-charset

4》autocomplete：規定瀏覽器應該自動完成表單（默認：開啓）

5》enctype：規定被提交數據的編碼（默認：url-encoded）

6》name：規定識別表單的名稱（對於 DOM 使用：document.forms.name）

7》novalidate：規定瀏覽器不驗證表單。

8》target：規定 action 屬性中地址的目標（默認：_self）

例：<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> </form> 

 

26、表單元素：

1、<input>

屬性：

1.1》type （輸入類型）= “text”（常規文本輸入；輸入框）；

               “radio”（單選按鈕輸入；圓圈）；

               “submit”（提交表單；按鈕）；

               ”password”(密碼類型的輸入)

               “checkbox”（複選框）

               “button”

以下是html5新加的type取值（老式的會把新加的識別爲text）

• color

• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Input的輸入限制（輸入屬性 to be continued）：

disabled 規定輸入字段應該被禁用

max 規定輸入字段的最大值

maxlength 輸入字段的最大字符數；輸入字符的長度

min 最小值

pattern 規定通過其檢查輸入值的正則表達式

readonly 輸入的值無法修改

            <input type="text" name="firstname" value="John" readonly>    

                readonly 屬性不需要值。它等同於 readonly="readonly"。

required 必輸

size 輸入字段的寬度，輸入框的寬度（字符計 ）

step 輸入字段的合法數字間隔

value 輸入字段的默認值

 

• 以下是html5爲<input>新加的屬性：
• autocomplete：屬性規定表單或輸入字段是否應該自動完成，當自動完成開啓，瀏覽器會基於用戶之前的輸入值自動填寫值；把表單的 autocomplete 設置爲 on，同時把特定的輸入字段設置爲 off
• autofocus：boolean值，規定當頁面加載時 <input> 元素應該自動獲得焦點
• form：與<form>的id屬性合用；屬性規定 <input> 元素所屬的一個或多個表單;即使在<form>之外，但仍屬表單。
•   <form action="action_page.php" id="form1">
•       First name: <input type="text" name="fname"><br>
•             <input type="submit" value="Submit">
•       </form>

 

•         Last name: <input type="text" name="lname" form="form1">

 

• formaction：會覆蓋<form> 元素的 action 屬性；適用於 type="submit" 以及 type="image"
• formenctype:把表單數據（form-data）提交至服務器時如何對其進行編碼（僅針對 method="post" 的表單）;覆蓋 <form> 元素的 enctype 屬性;適用於 type="submit" 以及 type="image" ;<input type="submit" formenctype="multipart/form-data"

 

• formmethod:定義用以向 action URL 發送表單數據（form-data）的 HTTP 方法;覆蓋 <form> 元素的 method 屬性;適用於 type="submit" 以及 type="image"
• formnovalidate:布爾型；規定在提交表單時不對 <input> 元素進行驗證；屬性覆蓋 <form> 元素的 novalidate 屬性；可用於 type="submit”；<input type="submit" formnovalidate value="Submit without validation">
• formtarget:規定的名稱或關鍵詞指示提交表單後在何處顯示接收到的響應;會覆蓋 <form> 元素的 target 屬性;與 type="submit" 和 type="image" 使用
• height 和 width:屬性規定 <input> 元素的高度和寬度;僅用於 <input type="image”>;注意：請始終規定圖像的尺寸。如果瀏覽器不清楚圖像尺寸，則頁面會在圖像加載時閃爍
• list：引用的 <datalist> 元素中包含了 <input> 元素的預定義選項，即匹配相應<datalist>；
• min 和 max
• multiple：boolean屬性；如果設置，則規定允許用戶在 <input> 元素中輸入一個以上的值；適用於以下輸入類型：email 和 file
• pattern (regexp)：用於檢查 <input> 元素值的正則表達式；<input type="text" name="country_code" pattern="[A-z]{3}"title="三個字母的國家代碼" />;與title屬性合用，給用戶提示
• placeholder：
• required
• step：規定 <input> 元素的合法數字間隔；
• title：提示內容；與pattern合用給用戶改正錯誤的提示；如果 step="3"，則合法數字應該是 -3、0、3、6、等等。

 

 

 

 

 

1.2》name：要正確地被提交，每個輸入字段必須設置一個 name 屬性

1.3》value：input顯示的值（radio除外）

1.4》checked：input顯示的值（radio專用）

1.4》list

<filedset>：組合表單數據，一般嵌套在<form>外層  一個框框

<legend>:爲<fieldset>元素定義標題，緊挨着第一個<filedset>  框框上線之間的文字

 

2、<select> 元素（下拉列表），列表的每一項用<option>元素表示

      屬性：name 提交的name

    <option> 素定義待選擇的選項

      屬性：

       value =“” 提交的值

       selected 默認選中第一個，<option>元素加上此屬性，則此<option>標籤成爲默認值，定義預定義選項

 

3、<textarea> 定義多行輸入字段

  屬性：

  name=“”

  rows=“10” 行

  cols=“30” 列

4、<button>

5、<datalist>(H5新加的):爲<input>規定預定義選項列表，用戶輸入時會看到此列表；<input>元素的list屬性必須引用<datalist>元素的id屬性；與<input>和<option>標籤合用

屬性：id

例：

<form action="action_page.php">

<input list="browsers">

<datalist id="browsers">

   <option value="Internet Explorer">

   <option value="Firefox">

   <option value="Chrome">

   <option value="Opera">

   <option value="Safari">

</datalist> 

</form>

 

6、<keygen>(H5新加的)

 

7、<output>(H5新加的)

 

 

 

 

 

 

 

26、<option>

27、<select>

28、<textarea>

29、HTML5

1》H5被刪的元素：<acronym>;<applet>;<basefont>;<big>;<center>;<dir>;<font>;;<frame>;;<frameset>;<noframes>;<strike>;<tt>;

2》瀏覽器支持：所有現代瀏覽器都支持 HTML5；所有瀏覽器，不論新舊，都會自動把未識別元素當做行內元素來處理

HTML5 定義了八個新的語義 HTML 元素（都是塊級元素），故爲適配舊瀏覽器，需要將H5新加的元素block化：

header, section, footer, aside, nav, main, article, figure {

    display: block; 

}

3》添加自定義元素：

<style>

  myHero {

    display: block;

    background-color: #ddd;

    padding: 50px;

    font-size: 30px;

  } 

</style> 

 

<myHero>My First Hero</myHero>

但是：已添加的 JavaScript 語句 document.createElement("myHero")，僅適用於 IE

自定義元素及給此元素添加樣式適用於所有新的 HTML5 元素，IE8之前版本除外，可通過Shiv解決，如下：

 

  <!--[if lt IE 9]>

  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

  <![endif]-->

 

 

注：以上代碼（shiv 代碼）是一段註釋，但是 IE9 的早期版本會讀取它（並理解它）；shiv 代碼的鏈接必須位於 <head> 元素中，因爲 Internet Explorer 需要在讀取之前認識所有新元素

4》skeleton

 

30、註釋：

一般註釋：

<!- - dd - ->

條件註釋：

<!--[if IE 8]>

    .... some HTML here ....

<![endif]-->

 

31、html的css樣式：

外部樣式表：<link>

內部樣式表:<head> <style> </style> </head>

內聯樣式:<p style = “”></p>

 

32、H5畫布canvas：使用js在網頁上繪製圖像，是一矩形區域，可以控制其每一像素

有多種繪製路徑；

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d”);//創建context對象；此對象是內建的H5對象

cxt.fillStyle="#FF0000”;//填充顏色

cxt.fillRect(0,0,150,75);//填充位置和區域

</script>

1》<canvas>元素：

  屬性：width

           height

           style

 

2》js的context對象：

函數：創建context對象:var cxt=c.getContext("2d”);

         填充顏色：cxt.fillStyle="#FF0000”;閉合圖形纔有用

     填充位置和區域：cxt.fillRect(0,0,150,75);

         移到指定點:cxt.moveTo(10,10);

         畫線：cxt.lineTo(10,10);

            ??：cxt.stroke();

         開始：cxt.beginPath();畫扇形或圓下邊有指定座標的

         畫角：cxt.arc(70,18,15,0,Math.PI*2,true);

                cxt.closePath();

         cxt.fill();

    漸變色：

         var grd=cxt.createLinearGradient(0,0,175,50);

         grd.addColorStop(0,"#FF0000");

         grd.addColorStop(1,"#00FF00");

         cxt.fillStyle=grd;

         將圖像放到畫布上： cxt.drawImage(img,0,0);

 

畫矩形；畫圓；畫角；把圖片貼到畫布上

 

33、H5內聯SVG：可縮放矢量圖形 SVG教程；

34、Canvas與SVG對比：

SVG：使用XML描述2D圖形的語言；基於XML故SVG DOM中每個元素都可用，每個元素都可用js事件處理器；SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

Canvas：通過js來繪製2D圖形；是逐像素進行渲染；一旦繪製完成，便不會繼續得到瀏覽器關注；如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

Canvas

• 依賴分辨率
• 不支持事件處理器
• 弱的文本渲染能力
• 能夠以 .png 或 .jpg 格式保存結果圖像
• 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

• 不依賴分辨率
• 支持事件處理器
• 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
• 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
• 不適合遊戲應用

 

34、HTML媒體：

媒體的格式：

音頻：。。。。。。

視頻：。。。。。。

 

35、HTML Object元素：

<object>:作用支持HTML助手(插件)；輔助應用程序（helper application）是可由瀏覽器啓動的程序。輔助應用程序也稱爲插件；輔助程序可用於播放音頻和視頻（以及其他）；輔助程序是使用 <object> 標籤來加載的；使用輔助程序播放視頻和音頻的一個優勢是，您能夠允許用戶來控制部分或全部播放設置；大多數輔助應用程序允許對音量設置和播放功能（比如後退、暫停、停止和播放）的手工（或程序的）控制。<object width="400" height="50" data="bookmark.swf"></object>

    HTML的embed元素：

可使用 <object> 或 <embed> 標籤來將插件添加到 HTML 頁面；

<embed width="400" height="50" src="bookmark.swf">

 

36、使用插件

插件有很多用途：播放音樂、顯示地圖、驗證銀行賬號，控制輸入等等

使用插件問題：

• 不同的瀏覽器對音頻格式的支持也不同。
• 如果瀏覽器不支持該文件格式，沒有插件的話就無法播放該音頻。
• 如果用戶的計算機未安裝插件，無法播放音頻。
• 如果把該文件轉換爲其他格式，仍然無法在所有瀏覽器中播放。

 

37、音頻：audio元素：H5可用，H4非法

1》、插件<embed>  <embed height="100" width="100" src="song.mp3" /> 有問題

2》、插件<object> <object height="100" width="100" data="song.mp3"></object> 有問題

3》、<audio> 有問題

<audio controls="controls">

  <source src="song.mp3" type="audio/mp3" />

  <source src="song.ogg" type="audio/ogg" />

Your browser does not support this audio format.

</audio>

4》、<audio> + <embed> 有問題

<audio controls="controls" height="100" width="100">

  <source src="song.mp3" type="audio/mp3" />

  <source src="song.ogg" type="audio/ogg" />

<embed height="100" width="100" src="song.mp3" />

</audio>

5》將音頻添加到三方網站（最簡單添加音頻方法）例如使用雅虎網

<a href="song.mp3">Play Sound</a>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">

</script>

6》使用超鏈接

如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會自動使用“輔助應用程序”來播放文件。

以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啓動“輔助應用程序”來播放該文件 例：<a href="song.mp3">Play the sound</a>

• 總結：5、6方法比較好
•  

H4中音頻多媒體標籤：

<applet>不贊成。定義內嵌 applet。;<object>;<param>定義對象的參數。

H5中音頻多媒體標籤：<audio> <embed>

 

38、視頻video：

播放視頻方法：

1》<embed> <embed src="movie.swf" height="200" width="200"/> 有問題

2》<object> <object data="movie.swf" height="200" width="200"/>有問題

3》<video>（H5新加）有問題

      <video width="320" height="240" controls="controls">

  <source src="movie.mp4" type="video/mp4" />

  <source src="movie.ogg" type="video/ogg" />

  <source src="movie.webm" type="video/webm" />

Your browser does not support the video tag.

</video>

4》以上三種各有問題，最好方式如下：<video>+ <object> + <embed> 有問題

<video width="320" height="240" controls="controls">

  <source src="movie.mp4" type="video/mp4" />

  <source src="movie.ogg" type="video/ogg" />

  <source src="movie.webm" type="video/webm" />

  <object data="movie.mp4" width="320" height="240">

    <embed src="movie.swf" width="320" height="240" />

  </object>

</video>

 

5》藉助三方網站：在 HTML 中顯示視頻的最簡單的方法是使用優酷等視頻網站

    <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 

width="480" height="400" 

type="application/x-shockwave-flash">

</embed>

 

6》使用a標籤：如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會自動使用“輔助應用程序”來播放文件。以下代碼片段顯示指向 AVI 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啓動“輔助應用程序”

<a href="movie.swf">Play a video file</a>

 

總結：5、6方法比較好

 

H4中視頻多媒體標籤：

<applet>不贊成。定義內嵌 applet。;<object>;<param>定義對象的參數。

H5中視頻多媒體標籤：<video> <embed>

 

HTML API

39、H5地理定位：

判斷是否支持地理定位：navigator.geolocation 

獲取地理定位：navigator.geolocation.getCurrentPosition(showPosition，錯誤處理);

        錯誤處理：PERMISSION_DENIED；POSITION_UNAVAILABLE；TIMEOUT；UNKNOWN_ERROR

維度：position.coords.latitude

精度：position.coords.longitude

返回用戶當前位置，並持續更新：navigator.geolocation.watchPosition(showPosition);

停止更新用戶位置：navigator.clearWatch()

 

40、H5拖放：

元素的draggable設爲true  <img draggable="true">

ondragstart()

ev.dataTransfer.setData("text", ev.target.id);

ondragover()

event.preventDefault():數據/元素無法被放置到其他元素中。爲了實現拖放，我們必須阻止元素的這種默認的處理方式

ondrop() ev.dataTransfer.getData("text");

 

41、Web本地存儲：web 應用程序能夠在用戶瀏覽器中對數據進行本地的存儲

H5之前，用於程序數據只能存在cookie中，包括每個服務器請求；本地存儲更安全，且可在不影響網站性能前提下將大量數據存在本地。比cookie存儲限制大（>=5MB）,且信息不會傳到服務器。

本地存儲對象：

存儲數據時，先檢查是否支持本地存儲：typeof(Storage) !== "undefined"

1》對象1：window.localStorage:存儲沒截止日期的數據；

     存數據：localStorage.setItem("lastname", "Gates”);等價於localStorage. lastname = "Gates”

     取數據：localStorage.getItem("lastname"); 於localStorage.lastname

   刪除數據：localStorage.removeItem("lastname");

   注：存儲的名稱和值都只能爲字符串類型；

     其他屬性：clickcount點擊次數

2》對象2：window.sessionStorage:針對一個 session 來存儲數據，瀏覽器相應標籤頁則數據被刪除；

    與window.localStorage對象存取刪數據一樣，同樣存在clickcount點擊次數屬性

 

42、HTML5應用程序緩存：

    通過創建cache manifest文件，可輕鬆創建web應用的離線版本

    <html manifest="demo.appcache"> </html>

    如果啓用應用程序緩存，需要在<html>中包含manifest屬性

    manifest文件的擴展名是.appcache；而相應的web服務器上需要配置：MIME-type="text/cache-manifest”；此文件是簡單的文本文件，它告知瀏覽器被緩存的內容及不緩存的內容

   manifest文件有三個部分：

     1》CACHE MANIFEST 在此標題下列出的文件將在首次下載後緩存；

     2》NETWORK 此標題下列出的文件需要與服務器的鏈接，且不會緩存；

     3》FALLBACK 此標題下列出的文件規定當頁面無法訪問時的回退頁面（404）

更新緩存：

    一旦應用被緩存，它就會保持緩存直到發生下列情況：

    1、用戶清空瀏覽器緩存； 2、manifest文件修改； 3、應用程序更新應用緩存

   

完整的manifest文件如下：

CACHE MANIFEST

# 2012-02-21 v1.0.0 （一般通過更新此處的日期或版本號更新manifest文件）（#開頭是註釋）

/theme.css

/logo.gif

/main.js

 

NETWORK:

login.asp

 

FALLBACK:

/html/ /offline.html   （/offline.html 替換 /html/）

 

應用程序緩存注意項：

一旦文件被緩存，則瀏覽器會繼續展示已緩存的版本，即使您修改了服務器上的文件。爲了確保瀏覽器更新緩存，您需要更新 manifest 文件

瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器的限制是每個站點 5MB）。

 

43、HTML5 Web Workers：是運行在後臺的js代碼；

出現原因：當HTML頁面執行腳本時，頁面不可響應，直到腳本已完成。

Web worker 是運行在後臺的js，獨立於其他腳本，不會影響頁面性能。

案例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

</head>

<body>

 

<p>計數: <output id="result"></output></p>

<button οnclick="startWorker()">開始 Worker</button>

<button οnclick="stopWorker()">停止 Worker</button>

<br /><br />

 

<script>

    var w;

 

    function startWorker()

    {

        if(typeof(Worker)!=="undefined")

        {

            if(typeof(w)=="undefined")

            {

                w=new Worker("/example/html5/demo_workers.js");

            }

            w.onmessage = function (event) {

                document.getElementById("result").innerHTML=event.data;

            };

        }

        else

        {

            document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";

        }

    }

 

    function stopWorker()

    {

        w.terminate();

        w = undefined;//把 worker 變量設置爲 undefined，在其被終止後，可以重複使用該代碼

    }

</script>

 

</body>

</html>

Event現在不太懂，學完js再來看吧，先理解web work

注: web worker 通常不用於如此簡單的腳本，而是用於更耗費 CPU 資源的任務。

注：由於web worker位於外部文件，它們無法訪問如下js對象：window；document；parent；

 

44、HTML5 SSE（Server-Sent事件）：此事件允許網頁自動從服務器獲得更新；以前也可以更新，但前提是網頁得詢問是否有可用更新；通過server-sent可以自動更新

接收SSE事件通知：var source = new EventSource("demo_sse.php");

示例：

<!DOCTYPE html>

<html>

<body>

<h1>獲得服務器更新</h1>

<div id="result"></div>

 

<script>

if(typeof(EventSource)!=="undefined")

  {

  var source=new EventSource("/example/html5/demo_sse.php");

  source.onmessage=function(event)

    {

    document.getElementById("result").innerHTML+=event.data + "<br />";

    };

  }

else

  {

  document.getElementById("result").innerHTML="抱歉，您的瀏覽器不支持 server-sent 事件 ...";

  }

</script>

 

</body>

</html>

 

SSE需要能夠發送數據更新的服務器（比如 PHP 或 ASP）；

服務器端把 "Content-Type" 報頭設置爲 "text/event-stream"

 

EventSource對象的事件：

     onopen() 當通往服務器的連接被打開;

     onmessage()當接收到消息

     onerror()當發生錯誤

 

 

45、ISO語言代碼：

HTML的lang：

<html lang="en">

...

</html>

HTML 的 lang 屬性可用於網頁或部分網頁的語言。這對搜索引擎和瀏覽器是有幫助的；根據 W3C 推薦標準，您應該通過 <html> 標籤中的 lang 屬性對每張頁面中的主要語言進行聲明即lang=""

 

XHTML的lang：

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

...

</html>

 

 

46、ISO字符集：ISO 字符集是國際標準組織 (ISO) 針對不同的字母表/語言定義的標準字符集

字符集和字符編碼：https://www.jianshu.com/p/c5339d31afd1

 

==============================================

CSS教程： 

css重疊時層疊次序：優先級從低到高：瀏覽器缺省設置；外部設置（link裏）；頁面設置（head裏）；內聯樣式（寫在元素內部）

 

47、路徑：

<img src="picture.jpg">    picture.jpg 位於與當前網頁相同的文件夾

<img src="images/picture.jpg">  picture.jpg 位於當前文件夾的 images 文件夾中

<img src="/images/picture.jpg"> picture.jpg 當前站點根目錄的 images 文件夾中

<img src="../picture.jpg"> picture.jpg 位於當前文件夾的上一級文件夾中

 

1、css基礎語法：

格式：selector {property: value;property: value}

值的不同寫法和單位：

   color屬性：

     h1 {color:red}；

     h1 {color:#ff0000}；

     h1 {color:#f00}；

     h1 {color:rgb(255,0,0);}；

     h1 {color:rgb(100%,0%,0%);}；

 

2、css高級語法：

 2.1》選擇器分組：

  h1,h2,h3,h4,h5,h6 {

  color: green;

  }

 2.2》繼承及其問題：

     body {

     font-family: Verdana, sans-serif;

     }

按說所有<body>的子元素都能繼承上邊body的css樣式；但是Netspace4不支持；不僅忽略繼承，而且也忽略應用於 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略

 用以下方法解決Netspace4的問題：

     body  {

     font-family: Verdana, sans-serif;

     }

 

   p, td, ul, ol, li, dl, dt, dd  {

     font-family: Verdana, sans-serif;

     }

 

3、css派生選擇器（上下文選擇器）：依據元素在其位置的上下文關係定義樣式

   後代選擇器（包含選擇器）:

             注意點：

               1》h1 em   h2{color:yellow;}  元素間可以是一個或多個空格；可以多代嵌套；主要針對最後一種元素設置格式

               2》ul em {color:red; font-weight:bold;}

                        <li>List item <em>1-3-2</em></li>  //1-3-2爲紅色，滿足後代關係

                        <li>List item <div><em>1-3-2</em></div></li>  //1-3-2爲紅色，滿足後代關係，即使是中間又隔n個div 也可以

                3》h1 em   h2{color:yellow;} 

                     <h1>22This i<p>a2qe</p>sheading</h1>//a2qe沒有yellow樣式，不符合此後代選擇器

 

     子元素選擇器：

        h1 > strong {color:red;}

     <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>//有用

     <h1>This is <em>really <strong>very</strong></em> important.</h1>//無用

        注：>前後有無空格都可以

     相鄰兄弟選擇器：選擇緊接在另一個元素後的元素，而且二者有相同的父元素;一個結合符(+)只能選擇兩個相鄰兄弟中的第二個元素

li + li {font-weight:bold;background:red}

<body>

<div>

  <ul>

    <li>List item 1</li>

    <li>List item 2</li>//紅

    <li>List item 3</li>//紅

  </ul>

  <ol>

    <li>List item 1</li>

    <li>List item 2</li>//紅

    <li>List item 3</li>//紅

  </ol>

</div>

</body>

 

4、id選擇器：

1》簡單用

#red {color:red;}

<p id="red">這個段落是紅色。</p>

2》id和派生

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

id和後代

3》元素+id：1》加下邊

div#sidebar {

border: 1px dotted #000;

padding: 10px;

}

id爲sidebar的div標籤

 

5、類選擇器：

1》簡單用

.center {text-align: center}

<h1 class="center">

This heading will be center-aligned

</h1>

2》class和派生

.fancy td {

color: #f60;

background: #666;

}

class和後代

3》元素+class：

td.fancy {

color: #f60;

background: #666;

}

<td class="fancy">

 

6、屬性選擇器：對帶有指定屬性的所有元素設置樣式：

1》單純屬性選擇器：

[title]{

color:red;

}

2》屬性和值選擇器：

[title=W3School]{

border:5px solid blue;

}

3》屬性和值選擇器-多個值：

~=:

[title~=hello]{//所有title屬性並且屬性值以空格分割的且某個空格間內容含hello的

color:red;

} 

<h2 title="hello world">Hello world</h2>

<p title="student hello"> W3School Hello students!</h1>

 

|=:

[title|=mama]{//所有title屬性並且屬性值以mama開頭的，且mama爲單獨的詞組

color:red;

} 

4》元素+屬性

input[type="text"]

{

  width:150px;

  display:block;

  margin-bottom:10px;

  background-color:yellow;

  font-family: Verdana, Arial;

}

5》元素+屬性

[attribute]選取帶有指定屬性的元素

[attribute=value]用於選取帶有指定屬性和值的元素

[attribute~=value]用於選取屬性值中包含指定詞彙的元素，且此詞彙爲單獨的，且由空格鏈接

[attribute|=value]用於選取帶有以指定值開頭的屬性值的元素，該值必須是單獨的,且由-鏈接

[attribute^=value]匹配屬性值以指定值開頭的每個元素

[attribute$=value]匹配屬性值以指定值結尾的每個元素

[attribute*=value]匹配屬性值中包含指定值的每個元素

 

7.29

7、創建css

1》外部樣式：

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

2》內部樣式：

<head>

<style type="text/css">

  hr {color: sienna;}

  p {margin-left: 20px;}

  body {background-image: url("images/back40.gif");}

</style>

</head>

3》內聯樣式：

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

8、背景：

1》backgoround-color：transparent（透明）；#00ff00；rgb(250,0,255)；yellow

p {background-color: gray; padding: 20px;}

2》background-image：

body {background-image: url(/i/eg_bg_04.gif);}

3》背景重複：background-repeat:  no-repeat;  repeat-x; repeat-y；repeat

body

  { 

  background-image: url(/i/eg_bg_03.gif);

  background-repeat: repeat-y;

  }

4》背景定位：background-position：

4.1》background-position+關鍵字：top、bottom、left、right、center；默認值left top 位置關鍵字可以按任何順序出現，只要保證不超過兩個關鍵字 - 一個對應水平方向，另一個對應垂直方向；如果只出現一個關鍵字，則認爲另一個關鍵字是 center；

body

  { 

    background-image:url('/i/eg_bg_03.gif');padding: 20px;

    background-repeat:no-repeat;

    background-position:center;

  }

等價位置關鍵字：

center  =  center center

top = top center 或 center top

bottom = bottom center 或 center bottom

right = right center 或 center right

left = left center 或 center left

 

4.2》background-position+百分數值：

background-position:100% 100%  //右下角

background-position:0% 0%  //左下角

如果只提供一個百分數值，所提供的這個值將用作水平值，垂直值將假設爲 50%。這一點與關鍵字類似。

 

4.3》background-position+長度值：

background-position:50px 100px;

 

5》背景關聯：backgorund-attachment 默認值：scroll

如果文檔比較長，那麼當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。

background-attachment:fixed

 

6》將所有背景屬性簡寫到一個聲明中：

body

{

    background: #ff0000 url(refresh1.png) no-repeat fixed center;

}

 

9、css文本：

0》文本顏色 color：

1》縮進文本：text-indent

text-indent:（使用具體值）

一般來說，可以爲所有塊級元素應用 text-indent，但無法將該屬性應用於行內元素，圖像之類的替換元素上也無法應用 text-indent 屬性。不過，如果一個塊級元素（比如段落）的首行中有一個圖像，它會隨該行的其餘文本移動

如果想把一個行內元素的第一行“縮進”，可以用左內邊距或外邊距創造這種效果。

text-indent:（使用百分比值）縮進值是父元素寬度的百分比 

text-indent:（cm）p {text-indent: 1cm}

 

div {width: 500px;}

p {text-indent: 20%;}

 

<div>

<p>this is a paragragh</p>

</div>

縮進值是父元素的 20%，即 100 個像素

text-indent:（繼承）可以繼承給內層元素

div#outer {width: 500px;}

div#inner {text-indent: 10%;}

p {width: 200px;}

 

<div id="outer">

<div id="inner">some text. some text. some text.

<p>this is a paragragh.</p>//繼承父元素div的inner樣式

</div>

</div>

2》對齊：text-align left；right；center；justify(兩端對齊)

3》字間隔：word-spacing ：默認normal（0）

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

4》字母間隔：letter-spacing：

h1 {letter-spacing: -0.5em}

h4 {letter-spacing: 20px}

5》字符轉換：text-transform：  none；uppercase；lowercase；capitalize（對每個單詞的首字母大寫）

6》文本裝飾：text-decoration：none；underline；overline；line-through；blink(文本閃爍，但實際測試無效果)

    結合：a:link a:visited {text-decoration: underline overline;}

7》處理空白符：white-sapce

normal：丟掉多餘的空白符；換行字符（回車）會轉換爲空格；一行中多個空格的序列也會轉換爲一個空格

pre：空白符不會被忽略；注：E 7 以及更早版本的瀏覽器不支持該值，因此請使用非 IE 的瀏覽器來查看上面的實例

nowrap：防止元素中文本換行，除非使用br元素；

pre-wrap:元素中的文本會保留空白符序列，但是文本行會正常地換行;

pre-line:元素中的文本會不保留空白符序列，但是文本行會正常地換行;

pre-line	合併	保留	允許
normal	合併	忽略	允許
nowrap	合併	忽略	不允許
pre	保留	保留	不允許
pre-wrap	保留	保留	允許

8》的文本方向：

塊級元素：direction：ltr（默認）；rtr；inherit

行內元素：unicode-bidi ：

9》行間距：

百分比：在大多數瀏覽器中默認行高大約是 110% 到 120%。

p.small {line-height: 100%}

p.big {line-height: 200%}

Px：在大多數瀏覽器中默認行高大約是 20px

p.small {line-height: 10px}

p.big {line-height: 20px}

數字：默認行高大約是 1

p.small {line-height: 0.5}

p.big {line-height: 2}

 

10、CSS字體：通用字體 + 特定字體

1》font-family字體系列：

使用通用字體（有相似外觀的字體系統組合）：sans-serif；serif；monospace; cursive; fantasy

特定字體（具體的字體系列）：Times；Courier。。。。

用戶代理上沒有安裝 Georgia（特定） 字體，就只能使用用戶代理的默認字體來顯示 h1 元素。可以通過結合特定字體名和通用字體系列來解決這個問題如下：

h1 {font-family: Georgia, serif;}

也可以爲給定的元素指定一系列類似的字體。要做到這一點，需要把這些字體按照優先順序排列，然後用逗號進行連接：p {font-family: Times, TimesNR, 'New Century Schoolbook',

     Georgia, 'New York', serif;}

當字體名中有一個或多個空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號，才需要在 font-family 聲明中加引號，單引號或雙引號都可以接受。但是，如果把一個 font-family 屬性放在 HTML 的 style 屬性中，則需要使用該屬性本身未使用的那種引號：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>

2》font-style字體風格：normal；italic（斜體）；oblique（傾斜）

斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本;通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

3》font-variant字體形變：設定小型大寫字母（小型大寫字母的字體顯示文本，這意味着所有的小寫字母均會被轉換爲大寫，但是所有使用小型大寫字體的字母與其餘文本相比，其字體尺寸更小）

取值：small-caps（小型大寫字母）;normal

4》font-weight字體加粗：取值範圍：100 ~ 900 ；400（normal）；700（bold）;lightter;bold;bolder;

5》font-size字體大小：

絕對值（px爲單位）：將文本設置爲指定的大小；不允許用戶在所有瀏覽器中改變文本大小（不利於可用性）；絕對大小在確定了輸出的物理尺寸時很有用

h1 {font-size:60px;}

相對大小（相對於父元素）（em爲單位）：相對於周圍的元素（一般是相對於父元素）來設置大小；允許用戶在瀏覽器改變文本大小；

1em 等於當前的字體尺寸。如果一個元素的 font-size 爲 16 像素，那麼對於該元素，1em 就等於 16 像素。在設置字體大小時，em 的值會相對於父元素的字體大小改變；

p {font-size:0.875em;}

（注：16 等於父元素的默認字體大小，假設父元素的 font-size 爲 20px，那麼公式需改爲：pixels/20=em）

h1 {font-size:3.75em;} /* 60px/16=3.75em */

h2 {font-size:2.5em;}  /* 40px/16=2.5em */

p {font-size:0.875em;} /* 14px/16=0.875em */

注意：如果沒有規定字體大小，普通文本（比如段落）的默認大小是 16 像素 (16px=1em)。

在上面的例子中，以 em 爲單位的文本大小與前一個例子中以像素計的文本是相同的。不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。

不幸的是，在 IE 中仍存在問題。在重設文本大小時，會比正常的尺寸更大或更小。

結合使用百分比和 EM

在所有瀏覽器中均有效的方案是爲 body 元素（父元素）以百分比設置默認的 font-size 值：body {font-size:100%;}

 

6》簡寫屬性：font 用簡寫屬性將字體屬性設置在一個聲明內

p.ex2

{

font:italic bold 12px/30px arial,sans-serif;（逗號前的順序好像不能任意互換，有時候換位後則不顯示目標效果；只有italic 和 bold可互換，其屬性不能互換，否則無目標效果）

background-color:red;

}

 

11、CSS鏈接：能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）；鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式

鏈接四種狀態：

a:link 普通、未被訪問的鏈接

a:visited 已經被訪問的鏈接

a:hover 鼠標指針位於鏈接上方

a:active 鏈接被點擊的時刻

注意：當爲鏈接的不同狀態設置樣式時，請按照以下次序：

• a:hover 必須位於 a:link 和 a:visited 之後
• a:active 必須位於 a:hover 之後

  即 l v h a （link visited hover active）

例：

a:link,a:visited

{

display:block;

font-weight:bold;

font-size:14px;

font-family:Verdana, Arial, Helvetica, sans-serif;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

}

 

a:hover,a:active

{

background-color:#7A991A;

}

12、CSS列表：

1》列表類型：list-style-type（與學習html中type屬性相似）；（列表點樣式）

無序：disc  ; circle ；square ；none 

有序：upper-roman ；lower-roman ；upper-alpha ；lower-alpha；decimal

「HTML列表的type屬性

【無序列表屬性：type="disc”（圓黑點,默認） “circle”（圓圈）  “square”（正方形）】

【有序列表屬性：type=“A”； “a”（默認）；”I”（羅馬數字，大寫i）；”i”（小寫羅馬數字，小寫i）；decimal（阿拉伯數字）】

  」

list-style-type:square;

所有的list-style-type類型如下：

ul.none {list-style-type: none}

ul.disc {list-style-type: disc}

ul.circle {list-style-type: circle}

ul.square {list-style-type: square}

ul.decimal {list-style-type: decimal}//1.

ul.decimal-leading-zero {list-style-type: decimal-leading-zero}//01.

ul.lower-roman {list-style-type: lower-roman}//i.

ul.upper-roman {list-style-type: upper-roman}//I.

ul.lower-alpha {list-style-type: lower-alpha}//a.

ul.upper-alpha {list-style-type: upper-alpha}//A.

ul.lower-greek {list-style-type: lower-greek}// α.

ul.lower-latin {list-style-type: lower-latin}// a. 

ul.upper-latin {list-style-type: upper-latin}//A.

ul.hebrew {list-style-type: hebrew} //א.

ul.armenian {list-style-type: armenian}//

ul.georgian {list-style-type: georgian}//

ul.cjk-ideographic {list-style-type: cjk-ideographic}//一、

ul.hiragana {list-style-type: hiragana} //あ、

ul.katakana {list-style-type: katakana}//ア 、

ul.hiragana-iroha {list-style-type: hiragana-iroha}//い、

ul.katakana-iroha {list-style-type: katakana-iroha}//イ、

2》列表項圖像：list-style-image   （列表點樣式）

 list-style-image:url("/i/arrow.gif");

3》列表標誌位置：list-style-position 規定列表中列表項目標記的位置：inside outside （列表點位置）

list-style-position:inside;

4》簡寫列表樣式：list-style 

list-style: inside url('/i/eg_arrow.gif');

list-style 的值可以按任何順序列出，而且這些值都可以忽略。只要提供了一個值，其它的就會填入其默認值。

 

13、CSS表格：

1》表格邊框：border

table,th,td{

  border:1px solid blue;

}

2》摺疊邊框：border-collapse 設置是否將表格邊框摺疊爲單一邊框

border-collapse屬性與borde合用：（如果沒有規定 !DOCTYPE，border-collapse 屬性可能會引起意想不到的錯誤）

取值：collapse（合併）；separate（默認；不合並）；

table

  {

  border-collapse:collapse;

  }

 

table,th,td

  {

  border: 1px solid black;

  }

3》表格寬度和高度：

width:  px ；百分比（佔父元素的）

height：px；百分比（佔父元素的）

4》表格文本對齊：

text-align：水平對齊（左對齊left；右對齊right；居中center）

vertical-align：豎直對齊（底bottom；頂top；居中center）

5》表格內邊距：padding:15px

6》單元格邊距：border-spacing：xspaceing yspacing  border-spacing: 40px 20px

7》caption-side：表格標題的位置 bottom；top

8》empty-cells：是否隱藏空單元格 取值：hide（隱藏）；show（不隱藏，默認）

9》table-layout：設置顯示單元、行和列的算法

  取值：atomatic：根據td內的內容顯示單元格寬度；與設定的width無關（默認。列寬度由單元格內容設定。）

           Fixed：根據設定的width顯示單元格寬度；與td內容無關（列寬由表格寬度和列寬度設定。）

 

14、CSS輪廓：outline 元素周圍的一條線，border外圍

outline-color:

outline-style:

outline-width:

outline: red 1px solid;

 

15、CSS模型概述：

16、css內邊距：padding

在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

padding屬性：長度px；百分比%；不能爲負。padding-top；padding-right；padding-bottom；padding-left；

注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對於父元素寬度設置，而不是相對於高度。

td.test2 {padding: 0.5cm 2.5cm} 上下是0.5cm；左右是2.5cm

17、css邊框：border

1》邊框與背景：元素的背景是內容、內邊距和邊框區的背景（邊框在元素的背景上）

邊框樣式：樣式是邊框最重要的一個方面，這不是因爲樣式控制着邊框的顯示（當然，樣式確實控制着邊框的顯示），而是因爲如果沒有樣式，將根本沒有邊框。

2》邊框樣式：

多邊樣式：border-style

dotted；dashed；solid；double；groove；ridge；inset；outset

多種樣式可以混合：p.aside {border-style: solid dotted dashed double;}

單邊樣式：border-top-style;border-right-style;border-bottom-style;border-left-style

p {border-style: solid solid solid none;}等價於p {border-style: solid; border-left-style: none;}

3》邊框寬：border-width

px或em或三個關鍵字（thin、medium(默認)、thick）

p {border-style: solid; border-width: 5px;}

p {border-style: solid; border-width: thick;}

p {border-style: solid; border-width: 15px 5px 15px 5px;}

p {border-style: solid; border-width: 15px 5px;}

定義單邊寬度：（上右下左）

border-top-width;border-right-width;border-bottom-width;border-left-border

4》無邊框：border-style默認是none

p {border-style: none; border-width: 50px;}

5》邊框顏色：border-color

p {

  border-style: solid;

  border-color: blue rgb(25%,35%,45%) #909090 red;

  }

p {//上下藍色；左右紅色

  border-style: solid;

  border-color: blue red;

  }

5.1、默認的邊框顏色是元素本身的前景色。如果沒有爲邊框聲明顏色，它將與元素的文本顏色相同

5.2、如果元素沒有任何文本，假設它是一個表格，其中只包含圖像，那麼該表的邊框顏色就是其父元素的文本顏色（因爲 color 可以繼承）。這個父元素很可能是 body、div 或另一個 table。

單邊顏色：border-top-color；border-right-color；border-bottom-color；border-left-color；

透明邊框：transparent

從某種意義上說，利用 transparent，使用邊框就像是額外的內邊距一樣；此外還有一個好處，就是能在你需要的時候使其可見。這種透明邊框相當於內邊距，因爲元素的背景會延伸到邊框區域（如果有可見背景的話）

 

6》練習

6.1》邊框樣式簡寫：

p {

border: medium double rgb(0,0,0)

}

6.2》設置某一邊的簡寫：

p {

border-style:solid;

border-bottom:thick dotted #ff0000;

}

 

18、css外邊距 

1》margin （默認0）

auto

單位：可接受任何單位：px；in；cm;mm；em；%（百分數是相對於父元素的 width 計算）等

值複製：

CSS 定義了一些規則，允許爲外邊距指定少於 4 個值。規則如下：

• 如果缺少左外邊距的值，則使用右外邊距的值。
• 如果缺少下外邊距的值，則使用上外邊距的值。
• 如果缺少右外邊距的值，則使用上外邊距的值

2》單邊外邊距

margin-left;margin-right;margin-bottom;mragin-top

3》簡寫：p.margin {margin: 2cm 4cm 3cm 4cm}

 

19、css外邊距合併 

1》當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合併。

展示結果爲：這兩個元素之中上邊的元素的下邊距不變，下邊元素的上邊距消失

2》當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。

展示結果爲：裏邊的元素的上和/或下外邊距消失，左右的不變

3》外邊距甚至可以與自身發生合併。

假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併；如果這個外邊距遇到另一個元素的外邊距，它還會發生合併

展示結果爲：內側元素不展示

 

20、css定位 定位概述

1》定位機制：普通流；浮動；絕對定位

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱爲行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。

2》position屬性：

定位：相對於此元素的正常位置；

         相對於此元素的父元素；

         相對於另一個元素；

         相對於瀏覽器窗口本身位置；

一切皆爲框：塊框（塊級元素）；行內框（行內元素）；

display修改框類型：block；inline；inline-block；none(生成的元素無框，即該框不展示，不佔用文檔空間)

但是在一種情況下，即使沒有進行顯式定義，也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素（比如 div）的開頭。即使沒有把這些文本定義爲段落，它也會被當作段落對待（說的是下邊的some text還是整個div？？？）：

<div>

some text

<p>Some more text.</p>

</div>

在這種情況下，這個框稱爲無名塊框（匿名塊框），因爲它不與專門定義的元素相關聯。（應該說的是some text這塊內容）

 

匿名塊框：當在塊框前添加文本時，會將這些文本定義爲塊級元素，形成匿名塊框。

例如：<div>這裏的文本會形成匿名塊框！<p>此爲一個塊框</p></div>

這裏的文本會形成匿名塊框！這段內容即爲匿名塊框

 

行內框（inline box）：每個行內元素會生成一個行內框；只是一個概念，它無法顯示出來，但是它又確實存在；它的高度就是行高；在沒有其他因素（padding）影響的時候，行內框等於內容區域。

tip：能通過border側面烘托出行內框區域；

 

• 行框（line box）：同行內框類似，行框是指本行的一個虛擬的矩形框 ；行框高度等於本行內所有元素中行高最大的值。
•  

行高（line-height）：行高就是等於行與行間的基線距離的文本高度；

https://www.cnblogs.com/dolphinX/p/3236686.html（寫的比較好的）

 

position取值：

Static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

元素正常生成；

Relative：生成相對定位的元素，相對於其正常位置進行定位。

因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留

h2.pos_left

{

position:relative;

left:-20px

}

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

元素從文檔流完全刪除，相對於其包含快定位。包含塊可能是文檔中的另一個元素或初始包含塊。元素原先在正常文檔流中佔的空間會關閉，好像元素不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

h2.pos_abs

{

position:absolute;

left:100px;

top:150px

}

Fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

表現類似於abosolute，不過其包含塊是視窗本身。(相對於瀏覽器窗口來對元素進行定位）生成塊級元素

p.one

{

position:fixed;

left:5px;

top:5px;

}

固定值：

百分比：

像素：

 

處理超出內容的情況：overflow（溢出）；clip（剪切）

3》overflow屬性：溢出

3.1》scroll(滾動展示溢出內容)：

元素內容太大而超出規定區域時，如何設置溢出屬性來規定相應的動作

3.2》hidden（隱藏溢出內容）：

元素中的內容太大以至於無法適應指定的區域時，如何設置 overflow 屬性來隱藏其內容

3.3》 auto

設置瀏覽器來自動地處理溢出

注：這個屬性定義溢出元素內容區的內容會如何處理。如果值爲 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。默認值是 visible。

 

4》clip屬性：剪切

設置元素的形狀。此元素被剪裁到這個形狀內，並顯示出來

img 

{

position:absolute;

clip:rect(0px 50px 200px 0px)

}

5》vertical-align 在文本中垂直排列圖象

  取值：top；middle；baseline;bottom

6》z-index:z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面;Z-index 僅能在定位元素上奏效;該屬性設置一個定位元素沿 z 軸的位置，z 軸定義爲垂直延伸到顯示區的軸。如果爲正數，則離用戶更近，爲負數則表示離用戶更遠。

默認的 z-index 是 0。Z-index -1 擁有更低的優先級;Z-index 1 擁有更高的優先級

 

21、css相對定位：

Relative：元素“相對於”它的起點進行移動

注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。

#box_relative {

  position: relative;

  left: 30px;

  top: 20px;

}

 

22、css絕對定位：

設置爲絕對定位的元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框

 

絕對定位使元素的位置與文檔流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因爲元素的位置相對於它在普通流中的位置。普通流中其它元素的佈局就像絕對定位的元素不存在一樣。

絕對定位的元素的位置相對於最近的已定位祖先元素（相對或絕對定位都包括在內），如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們複習一下學過的知識吧：相對定位是“相對於”元素在文檔中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。

註釋：根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。

提示：因爲絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。

 

23、css浮動：float：float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動，浮動元素會生成一個塊級框，而不論它本身是何種元素

浮動的框可以左右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現的就像浮動框不存在一樣。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會儘可能地窄。

取值：left right none（默認值）

1》當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣

2》當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因爲它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失

3》如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框

4》如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間

5》如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”

 

24、css選擇器：

元素選擇器（類型選擇器）：h1 {color:blue;}

CSS 元素選擇器（類型選擇器）可以設置 XML 文檔中元素的樣式

 

25、css選擇器分組：

h2, p {color:gray;}

body, h2, p, table, th, td, pre, strong, em {color:gray;}

 

26、通配符選擇器：* 該選擇器可以和任何元素匹配，就像一個通配符。

* {color:red;}  此規則可以使文檔中的每個元素都爲紅色

這個聲明等價於列出了文檔中所有元素的一個分組選擇器。利用通配選擇器，只需敲一次鍵（僅一個星號）就能使文檔中所有元素的 color 屬性值指定爲 red

 

27、類選擇器：

1》普通類選擇器：

.important {color:red;}

2》結合元素選擇器：

p.important {color:red;}

3》多類選擇器：

一個 class 值中可能包含一個詞列表，各個詞之間用空格分隔。例如，如果希望將一個特定的元素同時標記爲重要（important）和警告（warning），就可以寫作

<p class="important warning">

</p>

 

例：class 爲 important 的所有元素都是粗體，而 class 爲 warning 的所有元素爲斜體，class 中同時包含 important 和 warning 的所有元素還有一個銀色的背景 。就可以寫作：

.important {font-weight:bold;}

.warning {font-style:italic;}

.important.warning {background:silver;}

 

<p class="important">This paragraph is very important.</p>

<p class="warning">This is a warning.</p>

<p class="important warning">This paragraph is a very important warning.</p>

注：通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）；如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗；.important.urgent {background:silver;}

不出所料，這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此，如果一個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配以下元素：

<p class="important urgent warning">

This paragraph is a very important and urgent warning.

</p>

 

28、id選擇器：

1》

#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>

2》類選擇器與id選擇器區別：

2.1》與類不同，在一個 HTML 文檔中，ID 選擇器會使用一次，而且僅一次；

2.2》不同於類選擇器，ID 選擇器不能結合使用，因爲 ID 屬性不允許有以空格分隔的詞列表；

2.3》類似於類，可以獨立於元素來選擇 ID；

 

29、屬性選擇器：根據元素的屬性或屬性的值來選擇元素。

1》簡單屬性選擇器：

1.1》把包含標題（title）的所有元素變爲紅色：[title] {color:red;}或*[title] {color:red;}

     對有 href 屬性的錨（a 元素）應用樣式：a[href] {color:red;}

1.2》可以根據多個屬性進行選擇，只需將屬性選擇器鏈接在一起即可：a[href][title] {color:red;}

1.3》爲 XML 文檔使用屬性選擇器

 

2》根據具體屬性值選擇：

2.1》a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

2.2》a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

2.3》XML 語言也可以利用這種方法來設置樣式

 

注意：屬性與屬性值必須完全匹配：這種格式要求必須與屬性值完全匹配；如果屬性值包含用空格分隔的值列表，匹配就可能出問題。

<p class="important warning">This paragraph is a very important warning.</p>

如果寫成 p[class="important"]，那麼這個規則不能匹配示例標記。

要根據具體屬性值來選擇該元素，必須這樣寫：

p[class="important warning"] {color: red;}

 

3》根據部分屬性值選擇：

3.1》如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號（~）想選擇 class 屬性中包含 important 的元素：p[class~="important"] {color: red;}

   ~=

   |=

3.2》子串匹配屬性選擇器

[abc^="def"]選擇 abc 屬性值以 "def" 開頭的所有元素

[abc$="def"]選擇 abc 屬性值以 "def" 結尾的所有元素

[abc*="def"]選擇 abc 屬性值以 "def" 包含的所有元素:a[href*="w3school.com.cn"] {color: red;}

3.3》特定屬性選擇器：

*[lang|="en"] {color: red;}會選擇 lang 屬性等於 en ；或以 en- 開頭的所有元素

HTML 文檔中有一系列圖片，其中每個圖片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些圖像：img[src|="figure"] {border: 1px solid gray;}

 

30、css後代選擇器(包含選擇器)：a b{}

有關後代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的；如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深；

 

31、子元素選擇器：a>b{}(>左右兩邊可以有也可以無空格)

a元素與b元素必須緊緊相鄰，中間不能隔代

集合後代選擇器：table.company td > p

 

32、相鄰兄弟選擇器：a+b{}(+左右兩邊可以有也可以無空格)

可選擇緊鄰在另一個元素後的元素(注意只是緊挨着的一個元素)，且二者有相同的父元素

用一個結合符只能選擇兩個相鄰兄弟中的第二個元素

結合其他選擇器：html > body table + ul {margin-top:20px;}

 

33、僞類：用於向某些選擇器添加特殊效果：

1》a （link；visited；hover；active ）

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

 

a.one:link {color: #ff0000}

a.one:visited {color: #0000ff}

a.one:hover {color: #ffcc00}

 

2》focus僞類 （焦點）

input:focus

{

background-color:yellow;

}

如果已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 :focus 僞類。

 

34、first-child僞類 （首個子對象）(必須聲明 <!DOCTYPE>，這樣 :first-child 才能在 IE 中生效。)

p:first-child {font-weight: bold;}

li:first-child {text-transform:uppercase;}

p > em:first-child

{

font-weight:bold

}

p:first-child em

{

font-weight:bold

}

 

 

35、lang僞類（語言）如果已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 :lang 僞類。

lang 僞類允許您爲不同的語言定義特殊的規則。在下面的例子中，在下面的例子中，:lang 類爲帶有值爲 "no" 的 lang 屬性的 q 元素定義引號的類型

q:lang(no)

{

quotes: "~" "~"

}

<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

僞類語法：selector : pseudo-class {property: value}

Css類與僞類搭配：selector.class : pseudo-class {property: value}

 

錨僞類：a標籤的狀態

a:link {color: #FF0000} /* 未訪問的鏈接 */

a:visited {color: #00FF00} /* 已訪問的鏈接 */

a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */

a:active {color: #0000FF} /* 選定的鏈接 */

 

僞類總結：

:active向被激活的元素添加樣式。（css1）

:focus向擁有鍵盤輸入焦點的元素添加樣式。（css2 需要聲明<!DOCTYPE>）

:hover當鼠標懸浮在元素上方時，向元素添加樣式。（css1）

:link向未被訪問的鏈接添加樣式。（css1）

:visited向已被訪問的鏈接添加樣式。（css1）

:first-child向元素的第一個子元素添加樣式。（css2必須需聲明<!DOCTYPE>才能用於IE）

:lang向帶有指定 lang 屬性的元素添加樣式。（css2需要聲明<!DOCTYPE>）

 

36、僞元素：

1》:first-line

註釋："first-line" 僞元素只能用於塊級元素。

下列屬性可用於first-line僞元素

• font
• color
• background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

 

2》:first-letter

註釋："first-letter" 僞元素只能用於塊級元素。

註釋：下面的屬性可應用於 "first-letter" 僞元素：

• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align (僅當 float 爲 none 時)
• text-transform
• line-height
• float
• clear

 

3》僞元素和css類：

僞元素和css類配合使用：

p.article:first-letter

  {

  color: #FF0000;

  }

<p class="article">This is a paragraph in an article。</p>

 

4》多重僞元素：結合多個僞元素來使用

p:first-letter

  {

  color:#ff0000;

  font-size:xx-large;

  }

 

p:first-line 

  {

  color:#0000ff;

  font-variant:small-caps;

  }

<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

 

5》:before僞元素：":before" 僞元素可以在元素的內容前面插入新內容；默認地，這個僞元素是行內元素，不過可以使用屬性 display 改變這一點。

h1:before

  {

  content:url(logo.gif);//插入圖片

  }

 

h1:before {content:"ddsd"} //插入ddsd內容

 

6》:after僞元素：":after" 僞元素可以在元素的內容之後插入新內容；默認地，這個僞元素是行內元素，不過可以使用屬性 display 改變這一點。

h1:after

  {

  content:url(logo.gif);

  }

h1:after {content:"ddsd"} //插入ddsd內容

 

37、css對齊：

1》margin 水平對齊

左右margin設爲auto來對齊塊元素

把左和右外邊距設置爲 auto，規定的是均等地分配可用的外邊距。結果就是居中的元素

.center{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

 

2》position 左右對齊

.right{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

 

3》float左右對齊

.right{

float:right;

width:300px;

background-color:#b0e0e6;

}

 

38、css尺寸 

width（auto ;px；%）； height（auto ;px；%；） ；max-height（none;px；%）；max-width（none;px；%）；min-height（0;px；%）；min-width（none;px；%）；line-height（normal;%；px；數值）

 

39、css分類：允許你規定如何及在何處顯示元素。

CSS 分類屬性允許你控制如何顯示元素，設置圖像顯示於另一元素中的何處，相對於其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度。

1》display：inline（內聯）； none （不展示）；block（塊級）

2》float：

3》visibility：visible；hidden

4》改變光標：cursor: auto；crosshair；default；pointer；move；e-resize ；ne-resize；nw-resize；n-resize；se-resize；sw-resize；s-resize；w-resize；text；wait；help

5》clear 設置一個元素的側面是否允許其他的浮動元素。

clear設置一個元素的側面是否允許其他的浮動元素。left（左側不允許浮動）； right（右側不允許浮動）； both （左右兩側均不允許浮動）；none（允許浮動出現在兩側）

cursor規定當指向某元素之上時顯示的指針類型。

display設置是否及如何顯示元素。

float定義元素在哪個方向浮動。

position把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。

visibility設置元素是否可見或不可見。

 

40、css導航條：

用ul 及li轉化的

 

41、css圖片庫：

 

42、css圖像透明度：

img{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

img:hover{

opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

}

IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來設定透明度。opacity 屬性能夠設置的值從 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小，越透明。

 

43、css媒介類型：媒介類型(Media Types)允許你定義以何種媒介來提交文檔。文檔可以被顯示在顯示器、紙媒介或者聽覺瀏覽器等等。

@media規則：

<style>

@media screen//瀏覽器字體和字體類型展示

{

p.test {font-family:verdana,sans-serif; font-size:14px}

}

 

@media print//打印時字體和字體類型展示

{

p.test {font-family:times,serif; font-size:10px}

}

 

@media screen,print//瀏覽器和打印時 字體

{

p.test {font-weight:bold}

}

</style>

不同媒介：

All 所有媒介設備；

Aural 語音和音頻合成器

Braille 盲人用點字法觸覺回饋設備

Embossed 用於分頁的盲人用點字法打印機

handheld 用於小的手持的設備。

print 用於打印機。

projection 用於方案展示，比如幻燈片。

screen 用於電腦顯示器。

tty 用於使用固定密度字母柵格的媒介，比如電傳打字機和終端。

tv 用於電視機類型的設備。

 

44、css注意事項：

Internet Explorer Behaviors：behaviors 是一種通過使用 CSS 向 HTML 元素添加行爲的方法；爲什麼要避免它？只有 Internet Explorer 支持 behavior 屬性；

 

==================================

js

1、js輸出：

window.alert() 寫入警告框 ；document.getElementById("demo").innerHTML = 5 + 6;

document.write() 寫入 HTML 輸出； document.write(5 + 6); 測試用 ；

    1》在文檔加載完後使用document.write()將刪除所有HTML（即在window.onlaod函數中調用時）

    2》<button type="button" οnclick="document.write(5 + 6)">試一試 （即在按鈕的事件函數中調用時）

innerHTML 寫入 HTML 元素；document.getElementById("demo").innerHTML = 5 + 6;

console.log() 寫入瀏覽器控制檯；

 

2、js語句：

3、js語法：

Js值：混合值（字面量）； 變量值（變量）

Js數據類型：

可包含值的數據類型：string；number；boolean；object；function

對象類型：Object；Date；Array

不包含值的數據類型：null；undefined；

• NaN 的數據類型是數值

• 數組的數據類型是對象

• 日期的數據類型是對象

• null 的數據類型是對象

• 未定義變量的數據類型是 undefined

• 尚未賦值的變量的數據類型也是 undefined

無法使用 typeof 去判斷 JavaScript 對象是否是數組（或日期）。

 

4、js運算符：

4.1》+= 賦值運算符也可用於相加（級聯）字符串：txt1 = "Hello "; txt1 += "Kitty!"; 

4.2》類型運算符：typeof；  instanceof（返回 true，如果對象是對象類型的實例。）

4.3》邏輯運算符 &&（邏輯與） ||（邏輯或） !（邏輯非）

4.4》位運算符：&； |； ~（非）；^;<<(零填充左位移)；>>（有符號右位移）；>>>(零填充右位移)

 

5、算數：

算數運算符：

1》**冪  var z = x ** 2;          // 結果是 25

     var z = Math.pow(x,2);   // 結果是 25

2》in 對象中的屬性  "PI" in Math

3》yield暫停函數  yield x

6、賦值運算符：

x %= y  即 x = x % y

x <<= y 即 x = x << y

x >>= y 即 x = x >> y

x >>>= y即x = x >>> y

x &= y即x = x & y

x ^= y  x = x ^ y

x |= y x = x | y

x **= y x = x ** y

 

>>> 右位移（無符號）

 

6、js數據類型：

1》Js擁有動態類型：即相同變量可用作不同類型

var x;

x = 7;

x = “bill”

變量x從number轉換爲string類型

2》字符串：string

3》js數值：number

超大或超小都可以用科學計數法來寫：

var y = 123e5; //12300000

Var z = 123e-5;//0.00123

4》js布爾：

 

5》數組：array

 

6》對象：object

 

typeof運算符：

數組-object（js中數組屬於對象）

 

7》Undefined：

7.1》無值的變量值爲undefined；typeof返回undefined

eg：var person；//值和類型分別是undefined和undefined

7.2》任何變量可以通過設置爲undefined進行清空。其類型也是undefined

eg：person = undefined；//值和類型分別是undefined和undefined

 

8》空值：

與undefined不一回事；例如空的字符串變量既有值也有類型；eg var str= “”；//值是“”，類型是string

9》Null：是object類型；也可以用來清空對象

10》Null與Undefined區別：==返回true；類型不同

typeof undefined              // undefined

typeof null                   // object

null === undefined            // false

null == undefined             // true

11》

 11.1》 原始數據：typeof返回string number boolean undefined 

 11.2》 複雜數據：typeof返回function object

          typeof 數組/對象/null爲 object；

          typeof 函數 function

 

原始類型：Undefined、Null、Boolean、Number 、 String

typeof原始類型：undefined、object、boolean、number、string

Undefined類型：Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化或未定義時，該變量的默認值是 undefined。如果對爲聲明的變量使用除 typeof 之外的其他運算符的話，會引起錯誤，因爲其他運算符只能用於已聲明的變量上。

Null類型：另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的；alert(null == undefined);  //輸出 "true"儘管這兩個值相等，但它們的含義不同。undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那麼找不到該對象時，返回的通常是 null。

Boolean類型：

Number類型：整數；浮點數（對於浮點字面量的有趣之處在於，用它進行計算前，真正存儲的是字符串。）；科學計數法；（ECMAScript 默認把具有 6 個或 6 個以上前導 0 的浮點數轉換成科學計數法。）；

           八進制和十六進制：儘管所有整數都可以表示爲八進制或十六進制的字面量，但所有數學運算返回的都是十進制結果。

           特殊Number值：幾個特殊值也被定義爲 Number 類型。

             1》前兩個是 Number.MAX_VALUE 和 Number.MIN_VALUE，它們定義了 Number 值集合的外邊界。所有 ECMAScript 數都必須在這兩個值之間。不過計算生成的數值結果可以不落在這兩個值之間；當計算生成的數大於 Number.MAX_VALUE 時，它將被賦予值 Number.POSITIVE_INFINITY，意味着不再有數字值。同樣，生成的數值小於 Number.MIN_VALUE 的計算也會被賦予值 Number.NEGATIVE_INFINITY，也意味着不再有數字值。如果計算返回的是無窮大值，那麼生成的結果不能再用於其他計算。

                 事實上，有專門的值表示無窮大：infinity；有專門值表示無窮小：-infinity；對任何數調用 isFinite() 方法，以確保該數不是無窮大；

          2》NaN：表示非數；alert(NaN == NaN);  //輸出 "false"

               isNaN(“666”) //false 參數是數字則返回false

           

String類型：是唯一沒有固定大小的原始類型；

 

7、類型轉換：

  1》轉換成字符串：Boolean 值、數字和字符串的原始值的有趣之處在於它們是僞對象，這意味着它們實際上具有屬性和方法。

    1.1》toString()：Boolean；Number；String都可以用此方法，可以把它們的值轉換成字符串；

     1.1.1》Number 類型的 toString()（默認模式/基模式）：

      默認模式：返回的都是數字的十進制表示。因此，以八進制或十六進制字面量形式聲明的數字輸出的都是十進制形式的；var iNum1 = 10;alert(iNum1.toString()); //輸出 "10"

      基模式：可以用不同的基輸出數字，例如二進制的基是 2，八進制的基是 8，十六進制的基是 16。var iNum = 10;alert(iNum.toString(2));//輸出"1010"alert(iNum.toString(8)); //輸出 "12"alert(iNum.toString(16)); //輸出 "A"

      1.1.2》Array類型的toString() 與數組的join()無參方法作用相同

        var arrayStr = array.toString();console.log(arrayStr,typeof arrayStr);

      當數組用於字符串環境時，JavaScript 會調用這一方法將數組自動轉換成字符串。但是在某些情況下，需要顯式地調用該方法。

      1.1.3》boolean類型的toString()  

        返回 true 或 false 在 Boolean 對象被用於字符串環境中時，此方法會被自動調用。

      1.1.4》Date類型的toString()

           var d = new Date();var dateStr = d.toString();

      1.1.5》函數的toString()等於valueof() 返回結果爲函數的描述

    1.2》toLocalString()：得到本地格式的字符串數據

2》轉換數字：          

2.1》parseInt())只有對string類型調用這些方法，他們才能正確運行；對其他類型返回的都是NaN；

默認模式：

基模式：如果十進制數包含前導 0，那麼最好採用基數 10，這樣纔不會意外地得到八進制的值

2.2》parseFloat(注：使用 parseFloat() 方法的另一不同之處在於，字符串必須以十進制形式表示浮點數，而不是用八進制或十六進制。該方法會忽略前導 0，所以八進制數 0102 將被解析爲 102。對於十六進制數 0xA，該方法將返回 NaN，因爲在浮點數中，x 不是有效字符。（註釋：經測試，具體的瀏覽器實現會返回 0，而不是 NaN。）parseFloat() 方法也沒有基模式

3》強制類型轉換：

Boolean(value) - 把給定的值轉換成 Boolean 型;當要轉換的值是至少有一個字符的字符串、非 0 數字或對象時，Boolean() 函數將返回 true。如果該值是空字符串、數字 0、undefined 或 null，它將返回 false;

Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）:Number() 函數的強制類型轉換與 parseInt() 和 parseFloat() 方法的處理方式相似，只是它轉換的是整個值，而不是部分值;Number() 進行強制類型轉換，"1.2.3" 將返回 NaN,如果字符串值能被完整地轉換，Number() 將判斷是調用 parseInt() 方法還是 parseFloat() 方法

String(value) - 把給定的值轉換成字符串

 

 

 

 

8、js函數：

1》函數在加()是函數的調用；如果不加括號則引用的是函數對象；

2》局部變量：在函數中聲明的變量，只能在函數內訪問。

3》、Function對象（類）：

3.1》直接創建函數：

var function_name = new function(arg1, arg2, ..., argN, function_body)

在上面的形式中，每個 arg 都是一個參數，最後一個參數是函數主體（要執行的代碼）。這些參數必須是字符串。

function sayHi(sName, sMessage) {

  alert("Hello " + sName + sMessage);

}

等價於：

var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");

注意：儘管可以使用 Function 構造函數創建函數，但最好不要使用它，因爲用它定義函數比用傳統方式要慢得多。不過，所有函數都應看作 Function 類的實例。

3.2》Function對象的length：函數期望的參數個數，即形參個數。

3.3》Function對象的方法：valueof() toString()

function doAdd(iNum) {

    alert(iNum + 10);

}

document.write(doAdd.toString());

document.write(doAdd.valueOf());

結果都是函數的源代碼function doAdd(iNum) { alert(iNum + 10); }

4》arguments對象：函數實參組成的數組；

4.1》

function howManyArgs() {

  alert(arguments.length);

}

 

howManyArgs("string", 45);//2

howManyArgs();//0

howManyArgs(12);//1

註釋：與其他程序設計語言不同，ECMAScript 不會驗證傳遞給函數的參數個數是否等於函數定義的參數個數。開發者定義的函數都可以接受任意個數的參數（根據 Netscape 的文檔，最多可接受 255 個），而不會引發任何錯誤。任何遺漏的參數都會以 undefined 傳遞給函數，多餘的函數將忽略。

4.2》可以模擬重載：

function doAdd() {

  if(arguments.length == 1) {

    alert(arguments[0] + 5);

  } else if(arguments.length == 2) {

    alert(arguments[0] + arguments[1]);

  }

}

 

doAdd(10); //輸出 "15"

doAdd(40, 20); //輸出 "60"

5》閉包：函數可以使用函數之外定義的變量

簡單閉包：在 ECMAScript 中使用全局變量是一個簡單的閉包實例。

var sMessage = "hello world";

function sayHelloWorld() {

  alert(sMessage);

}

sayHelloWorld();

 

複雜閉包：在一個函數中定義另一個會使閉包變得更加複雜

var iBaseNum = 10;

function addNum(iNum1, iNum2) {

  function doAdd() {

    return iNum1 + iNum2 + iBaseNum;

  }

  return doAdd();

}

閉包由兩部分構成：函數，以及創建該函數的環境。環境由閉包創建時在作用域中的任何局部變量組成。

外部函數調用之後其變量對象本應該被銷燬，但閉包的存在使我們仍然可以訪問外部函數的變量對象，這就是閉包的重要概念。

閉包一般都是函數嵌套函數

在javascript中，如果一個對象不再被引用，那麼這個對象就會被垃圾回收機制回收；

如果兩個對象互相引用，而不再被第3者所引用，那麼這兩個互相引用的對象也會被回收。

這裏要理解函數名與函數功能是分割開的，不要認爲函數在哪裏，其內部的this就指向哪裏。這裏要理解函數名與函數功能是分割開的，不要認爲函數在哪裏，其內部的this就指向哪裏。

閉包：https://www.jianshu.com/p/102e44f35b3b

         https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

 

9、this關鍵字：this關鍵字是它所屬的對象；

其位置不同，則取值不同：

1》方法中，this指的是所有者對象；

2》單獨情況，this指全局對象；

3》函數中，this是全局對象；

4》函數中，嚴格模式下，this是undefined；

5》事件中，this指的是接收事件的元素；

向call(),applay()這樣的方法可以將this引用到任何對象

var person1 = {

  fullName: function() {

    return this.firstName + " " + this.lastName;

  }

}

var person2 = {

  firstName:"Bill",

  lastName: "Gates",

}

person1.fullName.call(person2);  // 會返回 "Bill Gates"

 

10、js對象

對象應用：

聲明和實例化：

var oObject = new Object();

var oStringObject = new String();

如果構造函數無參數，括號則不是必需的，因此可以採用下面的形式重寫上面的兩行代碼：

var oObject = new Object;

var oStringObject = new String;

對象引用：引用類型

對象廢除：ECMAScript擁有無用存儲單元收集程序，即不必專門銷燬對象來釋放內存。當沒有對對象的引用時，該對象被廢除。運行無用存儲單元收集程序時，所有廢除的對象都被銷燬。每當函數執行完它的代碼，無用存儲單元收集程序都會運行，釋放所有的局部變量，還有在一些其他不可預知的情況下，無用存儲單元收集程序也會運行。

對象所有引用設爲null，可強制廢除對象。var oObject = new Object;oObject = null;

注意：廢除對象的所有引用時要當心。如果一個對象有兩個或更多引用，則要正確廢除該對象，必須將其所有引用都設置爲 null。

 

綁定：即把對象的接口與對象實例結合在一起的方法。

晚綁定：指的是編譯器或解釋程序在運行前，不知道對象的類型，使用晚綁定，無需檢查對象的類型，只需檢查對象是否支持屬性和方法即可。ECMAScript 中的所有變量都採用晚綁定方法。這樣就允許執行大量的對象操作，而無任何懲罰。

請不要把字符串、數值和布爾值聲明爲對象:

通過關鍵詞 "new" 來聲明 JavaScript 變量，則該變量會被創建爲對象;

請避免字符串、數值或邏輯對象。他們會增加代碼的複雜性並降低執行速度;

 

 

 

11、ECMAScript引用類型：引用類型通常叫做class，也就是說，遇到引用值，所處理的就是對象。

1、Object對象具有如下屬性：

constructor：對創建對象的函數的引用（指針）。對於object對象，該指針指向原始的Object()函數；對於字面量對象，該指針指向原始的Object()函數；如果是自定義構造函數，則該指針指向此構造函數；

prototype：對該對象的對象原型的引用。對於所有對象，它默認返回Object對象的一個實例。

 

Object對象的其他方法：

1》hasOwnProperty(“屬性名”)：判斷對象是否有某個特定屬性。必須用字符串指定該屬性。（例如：o.hasOwnProperty(“name”)）

console.log(bird.hasOwnProperty('name'),bird.hasOwnProperty('major'),Bird.hasOwnProperty('name’));（注：沒有 bird.prototype.hasOwnProperty('name’)這種寫法） 

2》IsPrototypeOf(object):判斷該對象是否爲另一個對象的原型。console.log(Bird.prototype.isPrototypeOf(bird),Object.prototype.isPrototypeOf(bird));

3》PropertyIsEnumerable 判斷給定的屬性是否可以用 for...in 語句進行枚舉。(通過secondConstructor.prototype = new firstConstructor;

secondConstructor.prototype.constructor = secondConstructor;

方式繼承的屬性的PropertyIsEnumerable值爲false，但卻能通過for…in遍歷出來（特殊）)

for...in語句以任意順序遍歷一個對象的可枚舉屬性。對於每個不同的屬性，語句都會被執行。

如果一個對象的屬性不是可枚舉屬性，那麼這個屬性就不會被for...in迭代出來，包括繼承的可枚舉屬性。

每個對象都有一個propertyIsEnumerable方法。此方法可以確定對象中指定的屬性是否可以被for...in循環枚舉，但是通過原型鏈繼承的屬性除外。如果對象沒有指定的屬性，則此方法返回false。

可枚舉： 如果一個屬性可以使用for in 能遍歷出，就是可枚舉的。

1、可枚舉屬性是指那些內部 “可枚舉” 標誌設置爲 true 的屬性，對於通過直接的賦值和屬性初始化的屬性，該標識值默認爲即爲 true

2、對於通過 Object.defineProperty 等定義的屬性，該標識值默認爲 false。

3、可枚舉的屬性可以通過 for...in 循環進行遍歷（除非該屬性名是一個 Symbol）。屬性的所有權是通過判斷該屬性是否直接屬於某個對象決定的，而不是通過原型鏈繼承的。 

4、繼承屬性如果是可枚舉屬性也能被迭代出來

5、原型屬性原則上是不可枚舉的

 

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable

https://www.jianshu.com/p/305459cabcbd

https://www.cnblogs.com/SourceKing/p/5760050.html

https://blog.csdn.net/qq_44034384/article/details/92018303

2、Boolean對象：

var oBooleanObject = new Boolean(true);在 ECMAScript 中很少使用 Boolean 對象，即使使用，也不易理解。

創建Boolean對象的語法：

 

new Boolean(value);

 

 

 

3、Number對象：

//Number對象

    var num = new Number(68);

    var oriOfNum = num.valueOf();//得到數字對象的Number的原始值

 //toFixed(n) 顯示n爲小數位,僅限於0~20

    var toFixNum = num.toFixed(2);

    var toFixNumm = num.toFixed(3);

//toExponential(n) 用科學計數法表示的數字的字符串形式

    var toExp = num.toExponential(1);

//toPrecision(n) 表示數的數字總數（不包括指數）

    var toPre = num.toPrecision(1);

    var toPree = num.toPrecision(2);

    var toPreee = num.toPrecision(3);

    console.log(num,oriOfNum,toFixNum,toFixNumm,toExp,toPre,toPree,toPreee);

//結果：68 "68.00" "68.000" "6.8e+1" "7e+1" "68" "68.0"

4、String對象：

//String對象

var strO = new String('hello world')

var valueStr = strO.valueOf();

var toStrStr = strO.toString();

console.log(valueStr,typeof valueStr,toStrStr,typeof toStrStr)//hello world string hello world string

 

//字符串的字符個數

var strLen = strO.length;

console.log(strLen);//11

//charAt()

var d0 = strO.charAt(0);

console.log(d0);//h

//charCodeAt()

var d1 = strO.charCodeAt(0);

console.log(d1);//104

//concat() 拼接字符串到str上,原始值不變

    var str1 = new String('hello');

    var str2 = str1.concat('world');

    console.log(str1,str2);//String {"hello"} "helloworld"

//+:調用 concat() 方法返回的是 "hello world"，而 String 對象存放的仍然是 "hello "。出於這種原因，較常見的是用加號（+）連接字符串，因爲這種形式從邏輯上表明瞭真正的行爲

   var str3 = new String('hello');

   var str4 = str3 + 'world';

   var strr = 'hello'

   console.log(str3,str4,strr);//String {"hello"} "helloworld" "hello"

//indexof() lastIndexOf()

   var index1 = strO.indexOf('o');

   var index2 = strO.lastIndexOf('o');

   var index3 = strO.indexOf('m');

   var index4 = strO.lastIndexOf('m');

   console.log(index1,index2,index3,index4)//4 7 -1 -1

// localeCompare() 是區分大小寫;大寫字母在字母順序上排在小寫字母之後

    //如果 String 對象按照字母順序排在參數中的字符串首字母之前，返回-1

    //如果 String 對象等於參數中的字符串首字母之前，返回 0

    //如果 String 對象按照字母順序排在參數中的字符串首字母之前之後，返回1

    var strY = 'eellow'

    var one = strY.localeCompare('abc');//1

    var two = strY.localeCompare('zoo');//-1

    var three = strY.localeCompare('eellow');//0

    var four = strY.localeCompare('Eellow')//-1

    console.log(one,two,three,four);//1 -1 0 -1

//slice(),兩個參數【起始index，終止index）

    var sliceStr = strO.slice(1,3);

    console.log(sliceStr);//el

//substring(),兩個參數【起始index，終止index）

    var subString = strO.substring(1,3);

    console.log(subString);//el

//slice()與subString()區別

// 處理負數時slice()會將負數+字符串長度；subString()會將負數以0處理

//substring() 方法則將兩個參數解釋爲 substring(3, 0)，實際上即 substring(0, 3)，因爲 substring() 總把較小的數字作爲起始位，較大的數字作爲終止位

    var sr1 = strO.slice(-3);

    var sr11 = strO.slice('-3');

    var sr111 = strO.slice('3','-4');

 

    var sr2 = strO.substring(-3);

    var sr22 = strO.substring('3','-4');

    var sr222 = strO.substring('1','-4');

    console.log(sr1,sr11,sr111,sr2,sr22);//rld rld lo w hello world hel

    console.log(sr111,'=',sr22,'=',sr222);//lo w = hel = h

//大小寫轉換

    var s1 = strO.toLowerCase();

    var s2 = strO.toLocaleLowerCase();

    var s3 = strO.toUpperCase();

    var s4 = strO.toLocaleUpperCase();

    console.log(s1,s2,s3,s4);//hello world hello world HELLO WORLD HELLO WORLD

//instanceof運算符;與 typeof 方法不同的是，instanceof 方法要求開發者明確地確認對象爲某特定類型,只有new String創建的字符串此值才爲true

    var bol = strO instanceof String;

    console.log(bol);//true

    var sdf = '都是對的';

    var bol1 = sdf instanceof String;

    console.log(bol1)//false

    var bol2 = sdf instanceof Object;

    console.log(bol2);//false

 

 

 

12、對象類型：

在ECMAScript中，所有對象並非等同創建。

可以創建並使用的對象分三種：本地對象、內置對象、宿主對象

12.1本地對象：本地對象就是 ECMA-262 定義的類（引用類型）

Object；

Function；

Array；

String；

Boolean；

Number；

Date；

RegExp;

Error;

EvalError;

RangeError;

ReferenceError;

SyntaxError;

TypeError;

URIError;

12.2內置對象：開發者不必明確實例化內置對象，它已被實例化，ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每個內置對象都是本地對象）

1》Global對象（全局對象）：全局函數（頂層函數）；全局屬性（頂層屬性）

     全局對象是預定義的對象，作爲 JavaScript 的全局函數和全局屬性的佔位符。通過使用全局對象，可以訪問所有其他所有預定義的對象、函數和屬性。全局對象不是任何對象的屬性，所以它沒有名稱

Math對象；

    在頂層 JavaScript 代碼中，可以用關鍵字 this 引用全局對象。但通常不必用這種方式引用全局對象，因爲全局對象是作用域鏈的頭，這意味着所有非限定性的變量和函數名都會作爲該對象的屬性來查詢。例如，當JavaScript 代碼引用 parseInt() 函數時，它引用的是全局對象的 parseInt 屬性。全局對象是作用域鏈的頭，還意味着在頂層 JavaScript 代碼中聲明的所有變量都將成爲全局對象的屬性。

   var test1="http://www.w3school.com.cn/My first/"

  document.write(encodeURI(test1)+ "<br />")

  document.write(decodeURI(test1))

2》Math對象：

var pi_value=Math.PI;

var sqrt_value=Math.sqrt(15);

12.3宿主對象：所有非本地對象都是宿主對象，所有BOM和DOM對象

 

 

 

RegExp：此對象表示正則表達式，匹配字符串；

1》RegExp對象：

直接量語法：/pattern/attributes

創建RegExp對象語法：new RegExp(pattern,attributes)

   pattern：是正則表達式而不是字符串；

   attributes：可選字符串；（g:全局匹配  i:區分大小寫  m:多行匹配）

返回值：pattern 是正則表達式而不是字符串，RegExp() 構造函數將用與指定的 RegExp 相同的模式和標誌創建一個新的 RegExp 對象。

不用 new 運算符，而將 RegExp() 作爲函數調用，那麼它的行爲與用 new 運算符調用時一樣，只是當 pattern 是正則表達式時，它只返回 pattern，而不再創建一個新的 RegExp 對象？？？。

拋出：

SyntaxError：如果pattern不是合法正則表達式，或attributes含i g m之外的字符，拋出該異常

TypeError：如果pattern是RegExp對象，但沒有省略attributes，拋出該異常。

2》修飾符：匹配規則

i:執行對大小寫不敏感的匹配。

g:執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。

m:執行多行匹配。

3》方括號：用於查找某個範圍內的字符：

[abc]:查找方括號之間的任何字符

[^abc]:查找任何不在方括號之間的字符

[0-9]:查找0-9的數字

[^0-9]:0-9以外的數字

[a-z]:a到z的字符

[A-Z]:A到Z的字符

[A-z]:A到z的字符

[adgk]:給定集合的任意字符

[^adgk]:給定集合外是任何字符

(red|blue|green):查找任何指定的選項

4》元字符：擁有特殊含義的字符

. 查找單個字符，除了換行和行結束符

\w 查找單詞字符

\W 查找非單詞字符

\d 查找數字

\D 查找非數字字符

\s 空白字符

\S 非空白字符

\b 匹配單詞邊界

\B 匹配非單詞邊界

\0 查找NUL字符

\n 查找換行符

\f 換頁符

\r 回車符

\t 製表符

\v 垂直製表符

\xxx 八進制數xxx規定的字符

\xdd 十六進制數dd規定的字符

\uxxxx 十六進制數xxxx規定的Unicode字符

5》量詞：

n+ 匹配任何包含至少一個n的字符串

n* 。。。。。。零個或多個n的字符串

n? 。。。。。。零個或一個n的字符串

n{X} 匹配包含X個n的序列的字符串

n{X,Y} 匹配包含X至Y個n的序列字符串

n{X,} 匹配包含至少X個n的序列字符串

n$ 匹配任何結尾爲n的字符串

^n 。。。。以n開頭的字符串

?=n 。。。。其後緊接指定字符串n的字符串

?!n 。。。。其後沒有緊接指定字符串n的字符串

 

6》對象屬性：

Global：RegExp對象是否有標誌g，如果g標誌被設置則爲true，反之爲false

ignoreCase：RegExp對象是否有標誌i，如果i標誌被設置則爲true，反之爲false

lastIndex：一個整數，標示開始下一次匹配的起始字符位置（重要事項：不具有標誌 g 和不表示全局模式的 RegExp 對象不能使用 lastIndex 屬性。提示：如果在成功地匹配了某個字符串之後就開始檢索另一個新的字符串，需要手動地把這個屬性設置爲 0。）

multiline: RegExp對象是否有標誌m，如果m標誌被設置則爲true，反之爲false

source: 正則表達式的源文本

7》對象方法：

compile():編譯正則表達式；改變和重新編譯正則表達式

<script type="text/javascript">

var str="Every man in the world! Every woman on earth!";

patt=/man/g;

str2=str.replace(patt,"person");

document.write(str2+"<br />");

patt=/(wo)?man/g;

patt.compile(patt);

str2=str.replace(patt,"person");

document.write(str2);

</script>

exec():檢索字符串中指定的值。返回找到的值，並確定其位置

返回一個數組，其中存放匹配的結果。如果未找到匹配，則返回值爲 null。

如果 exec() 找到了匹配的文本，則返回一個結果數組。否則，返回 null。此數組的第 0 個元素是與正則表達式相匹配的文本，第 1 個元素是與 RegExpObject 的第 1 個子表達式相匹配的文本（如果有的話），第 2 個元素是與 RegExpObject 的第 2 個子表達式相匹配的文本（如果有的話），以此類推。除了數組元素和 length 屬性之外，exec() 方法還返回兩個屬性。index 屬性聲明的是匹配文本的第一個字符的位置。input 屬性則存放的是被檢索的字符串 string。我們可以看得出，在調用非全局的 RegExp 對象的 exec() 方法時，返回的數組與調用方法 String.match() 返回的數組是相同的。

但是，當 RegExpObject 是一個全局正則表達式時，exec() 的行爲就稍微複雜一些。它會在 RegExpObject 的 lastIndex 屬性指定的字符處開始檢索字符串 string。當 exec() 找到了與表達式相匹配的文本時，在匹配後，它將把 RegExpObject 的 lastIndex 屬性設置爲匹配文本的最後一個字符的下一個位置。這就是說，您可以通過反覆調用 exec() 方法來遍歷字符串中的所有匹配文本。當 exec() 再也找不到匹配的文本時，它將返回 null，並把 lastIndex 屬性重置爲 0。

例：

var str = "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School";

//2、局部RegExp

function testIvarRegExp() {

    var patt = new RegExp("W3School","g");

    var pattresult = patt.exec(str);

    console.log(pattresult)

    console.log('match',str.match('W3School'))

}

//1、全局RegExp

var patt = new RegExp("W3School","g");

var result;

while ((result = patt.exec(str)) != null)  {

    document.write(result);

    document.write("<br />");

    document.write(patt.lastIndex);

    document.write("<br />");

    console.log('result',result)

}

result ["W3School", index: 8, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School", groups: undefined]

js-對象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 23, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School", groups: undefined]

js-對象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 33, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School", groups: undefined]

js-對象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 77, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School", groups: undefined]

js-對象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:356 result ["W3School", index: 89, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School", groups: undefined]

js-對象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:345 

 

["W3School", index: 8, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School", groups: undefined]

js-對象.html?_ijt=bn65ed7rc3griu7a6i6pnbf22c:346 match ["W3School", index: 8, input: "w3SchoolW3School Visit W3School, W3School is a place to study web technology.W3Schoolll  W3School", groups: undefined]

提示：請注意，無論 RegExpObject 是否是全局模式，exec() 都會把完整的細節添加到它返回的數組中。這就是 exec() 與 String.match() 的不同之處，後者在全局模式下返回的信息要少得多。因此我們可以這麼說，在循環中反覆地調用 exec() 方法是唯一一種獲得全局模式的完整模式匹配信息的方法。

test():檢索字符串中指定值。返回true或false

RegExpObject.test(string)

var str = "Visit W3School";

var patt1 = new RegExp("W3School");

var result = patt1.test(str);

如果字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，否則返回 false。

8》支持正則表達式的String對象的方法：

search():方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。

stringObject.search(regexp)如果沒有找到任何匹配的子串，則返回 -1。

search() 方法不執行全局匹配，它將忽略標誌 g。它同時忽略 regexp 的 lastIndex 屬性，並且總是從字符串的開始進行檢索，這意味着它總是返回 stringObject 的第一個匹配的位置

//支持正則表達式的String對象的方法

//1、search()

    //返回值：stringObject 中第一個與 regexp 相匹配的子串的起始位置。如果沒有找到任何匹配的子串，則返回 -1。

    //

    var str = 'Visit w3School W3School ffW3School teacher!'

    var ind = str.search(/W3School/);

    var pattern = new RegExp('W3School','i');

    var ind1 = str.search(pattern);

    var ind2 = str.search(/W3School/i);

    var ind3 = str.search(/w3School/i);

    var ind4 = str.search(/w3School/);

    var ind5 = str.search(/W3School/g);

    var ind6 = str.search(/Teacher/)

    console.log(ind,ind1,ind2,ind3,ind4,ind5,ind6);

    //    15 6 6 6 6 15 -1

//2、match() 找到一個或多個正則表達式的匹配

返回：存放匹配結果的數組。該數組的內容依賴於 regexp 是否具有全局標誌 g。

match() 方法將檢索字符串 stringObject，以找到一個或多個與 regexp 匹配的文本。這個方法的行爲在很大程度上有賴於 regexp 是否具有標誌 g。

如果 regexp 沒有標誌 g，那麼 match() 方法就只能在 stringObject 中執行一次匹配。如果沒有找到任何匹配的文本， match() 將返回 null。否則，它將返回一個數組，其中存放了與它找到的匹配文本有關的信息。該數組的第 0 個元素存放的是匹配文本，而其餘的元素存放的是與正則表達式的子表達式匹配的文本。除了這些常規的數組元素之外，返回的數組還含有兩個對象屬性。index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置，input 屬性聲明的是對 stringObject 的引用。

如果 regexp 具有標誌 g，則 match() 方法將執行全局檢索，找到 stringObject 中的所有匹配子字符串。若沒有找到任何匹配的子串，則返回 null。如果找到了一個或多個匹配子串，則返回一個數組。不過全局匹配返回的數組的內容與前者大不相同，它的數組元素中存放的是 stringObject 中所有的匹配子串，而且也沒有 index 屬性或 input 屬性。

 

   //2.1 match()檢索字符串：stringObject.match(searchvalue)

    var strm="Hello world!"

    var  m1 = strm.match('world');

    var m2 = strm.match('World');

    var m3 = strm.match('worlld');

    var m4 = strm.match('world!');

    console.log(m1,m2,m3,m4);

   // ["world", index: 6, input: "Hello world!", groups: undefined]

   // null

   // null

   // ["world!", index: 6, input: "Hello world!", groups: undefined]

 

   //2.2 match()檢索正則表達式：stringObject.match(regexp)

  var strmm = '1plus2equal3';

   var patternM = new RegExp('\d','g');

   var patternM1 = /\d+/g;

   var mm1 = strmm.match(patternM);

   var mm2 = strmm.match(patternM1);

   console.log(mm1,mm2);

 

//3、replace() 方法用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。

//stringObject.replace(regexp/substr,replacement)

//返回值：一個新的字符串，是用 replacement 替換了 regexp 的第一次匹配或所有匹配之後得到的

// regexp 具有全局標誌 g，那麼 replace() 方法將替換所有匹配的子串。否則，它只替換第一個匹配子串。

//第一個參數：規定子字符串或要替換的模式的 RegExp 對象，請注意，如果該值是一個字符串，則將它作爲要檢索的直接量文本模式，而不是首先被轉換爲 RegExp 對象

//第二個參數replacement：可以是字符串，也可以是函數；

//replacement中的$有特定含義

/**

 * $1、$2、$3、$4、...、$99 與 regexp 中的第 1 到第 99 個子表達式相匹配的文本

 * $& 與 regexp 相匹配的子串

 * $` 位於匹配子串左側的文本

 * $' 位於匹配子串右側的文本

 * $$ 直接量符號

 * 注意：ECMAScript v3 規定，replace() 方法的參數 replacement 可以是函數而不是字符串。在這種情況下，每個匹配都調用該函數，它返回的字符串將作爲替換文本使用。該函數的第一個參數是匹配模式的字符串。接下來的參數是與模式中的子表達式匹配的字符串，可以有 0 個或多個這樣的參數。接下來的參數是一個整數，聲明瞭匹配在 stringObject 中出現的位置。最後一個參數是 stringObject 本身。

 * */

 

// 3.1、替換字符串

var str="Visit Microsoft!"

console.log(str.replace(/Microsoft/, "W3School"));

// 3.2、替換字符串-全局替換

var str="Welcome to Microsoft! "

str=str + "We are proud to announce that Microsoft has "

str=str + "one of the largest Web Developers sites in the world."

console.log(str.replace(/Microsoft/g, "W3School"));

// 3.3、確保匹配字符串大寫字符的正確

var text = "javascript Tutorial";

text.replace(/javascript/i, "JavaScript");

// 3.4、正則表達式+replacement參數中$符

var name = "Doe, John";

name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

// 3.5、正則表達式+replacement參數$符

name = '"a", "b"';

name.replace(/"([^"]*)"/g, "'$1'");

// 3.6、正則表達式+replacement參數爲函數

name = 'aaa bbb ccc';

uw=name.replace(/\b\w+\b/g, function(word){

    return word.substring(0,1).toUpperCase()+word.substring(1);}

);

 

//4、split()把字符串分割爲字符串數組

//    stringObject.split(separator,howmany)

//    參數一：必需，字符串或正則表達式，從該參數指定的地方分割 stringObject

//    參數二：可選，該參數可指定返回的數組的最大長度。如果設置了該參數，返回的子串不會多於這個參數指定的數組。如果沒有設置該參數，整個字符串都會被分割，不考慮它的長度

//返回值：一個字符串數組。該數組是通過在 separator 指定的邊界處將字符串 stringObject 分割成子串創建的。返回的數組中的字串不包括 separator 自身。

// 但是，如果 separator 是包含子表達式的正則表達式，那麼返回的數組中包括與這些子表達式匹配的字串（但不包括與整個正則表達式匹配的文本

//String.split() 執行的操作與 Array.join 執行的操作是相反的

//1》

    var strSp = "How are you doing today?";

    var sp1 = strSp.split('');

    var sp2 = strSp.split(' ');

    var sp3 = strSp.split(' ',3);

    console.log(sp1,sp2,sp3);

//2》

    var sp4 = '2:3:4:5'.split(':');

    var sp5 = '|a|b|c'.split('|');

    console.log(sp4,sp5);

// 3》

    var sentence = 'I am a beautify girl';

    var sp6 = sentence.split(' ');

    var sp7 = sentence.split(/\s+/);

    console.log(sp6,sp7);

 

2》Js Events

事件通常與函數配合使用；

onabort:圖像加載被中斷

onblur：元素失去焦點

onchange：用戶改變閾的內容

onclick：鼠標點擊某個對象

ondblclick：鼠標雙擊某個對象

onerror：當加載文檔或圖像時發生某個錯誤

onfocus：元素獲得焦點

onkeydown：某個鍵盤的鍵被按下

onkeypress：某個鍵盤的鍵被按下或按住

onkeyup：某個鍵盤的鍵被鬆開

onload：某個頁面或圖像被完成加載

onmousedown：某個鼠標按鍵被按下

onmousemove：鼠標被移動

onmouseout：鼠標從某元素移開

onmouseover：鼠標被移到某元素之上

onmouseup：某個鼠標按鍵被鬆開

onreset：重置按鈕被點擊

onresize：窗口或框架被調整尺寸

onselect：文本被選定

onsubmit：提交按鈕被點擊

onunload：用戶退出頁面

 

13、js繼承：/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js/testJS/html/js-繼承.html（公司電腦）

https://www.cnblogs.com/liangxiaofeng/p/5935581.html

https://www.cnblogs.com/yichengbo/p/3719387.html

https://www.cnblogs.com/yichengbo/p/3719164.html

https://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp

出於安全原因，本地類和宿主類不能作爲基類，這樣可以防止公用訪問編譯過的瀏覽器級的代碼，因爲這些代碼可以被用於惡意攻擊。

有時，你可能想創建一個不能直接使用的基類，它只是用於給子類提供通用的函數。在這種情況下，基類被看作抽象類。

創建的子類將繼承超類的所有屬性和方法，包括構造函數及方法的實現。

ECMAScript 實現繼承的方式不止一種；是因爲 JavaScript 中的繼承機制並不是明確規定的，而是通過模仿實現的。這意味着所有的繼承細節並非完全由解釋程序處理。作爲開發者，你有權決定最適用的繼承方式。

 

繼承方式：

 

1》對象冒充：使A類的構造方法成爲B類的方法，然後在B類的構造方法中調用此方法。

構想原始的 ECMAScript 時，根本沒打算設計對象冒充（object masquerading）。它是在開發者開始理解函數的工作方式，尤其是如何在函數環境中使用 this 關鍵字後才發展出來。

原理：構造函數使用 this 關鍵字給所有屬性和方法賦值（即採用類聲明的構造函數方式）。因爲構造函數只是一個函數，所以可使 ClassA 構造函數成爲 ClassB 的方法，然後調用它。ClassB 就會收到 ClassA 的構造函數中定義的屬性和方法；這個原理是把 ClassA 作爲常規函數來建立繼承機制，而不是作爲構造函數。在代碼中，爲 ClassA 賦予了方法 newMethod（請記住，函數名只是指向它的指針）。然後調用該方法，傳遞給它的是 ClassB 構造函數的參數 sColor。最後一行代碼刪除了對 ClassA 的引用，這樣以後就不能再調用它；所有新屬性和新方法都必須在刪除了新方法的代碼行後定義。否則，可能會覆蓋超類的相關屬性和方法（我未刪除，暫未發現覆蓋的問題，可能在特定情況下會出問題）

1.1》冒充對象-直接法

{//冒充對象

function classA(sColor) {

    this.color = sColor;

    this.sayColor = function () {

        console.log(this.color);

    }

}

function classB(sColor,name) {

    this.newMethod = classA;

    this.newMethod(sColor);

    delete this.newMethod;

 

    this.BMethod = function () {

        console.log('B類新加的方法');

    }

    this.Bname = name;

}

 

var a = new classA('blue');

var b = new classB('red','小龍');

a.sayColor();//blue

// a.BMethod(); //Uncaught TypeError: a.BMethod is not a function

b.sayColor();//red

b.BMethod();//B類新加的方法

console.log(a.color,a.Bname,b.color,b.Bname);//blue,undefined，red，小龍

}

冒充對象可以實現多重繼承

function ClassZ() {

    this.newMethod = ClassX;

    this.newMethod();

    delete this.newMethod;

 

    this.newMethod = ClassY;

    this.newMethod();

    delete this.newMethod;

}

這裏存在一個弊端，如果存在兩個類 ClassX 和 ClassY 具有同名的屬性或方法，ClassY 具有高優先級。因爲它從後面的類繼承。除這點小問題之外，用對象冒充實現多重繼承機制輕而易舉

call()方法
function sayColor(sPrefix,sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

 

var obj = new Object();

obj.color = "blue";

 

sayColor.call(obj, "The color is ", "a very nice color indeed.");

 

1.2》冒充對象-call()方法:與對象冒充方法相似；參數一：this對象；其他參數都直接傳遞給函數自身。

要與繼承機制的對象冒充方法一起使用該方法，只需將前三行的賦值、調用和刪除代碼替換即可:

function ClassB(sColor, sName) {

    //this.newMethod = ClassA;

    //this.newMethod(color);

    //delete this.newMethod;

    ClassA.call(this, sColor);

 

    this.name = sName;

    this.sayName = function () {

        alert(this.name);

    };

}

1.3》冒充對象-apply()方法：與call()方法相似；參數一：this對象；參數二：要傳遞給函數的參數的數組；

注：webstorm(MAC)格式化快捷鍵：option + cmd + L

 

2》原型鏈：(prototype-chaining)//原型鏈不經繼承以原型方式創建的屬性和方法，也繼承構造函數中創建的屬性和方法

繼承這種形式在 ECMAScript 中原本是用於原型鏈的。上一章介紹了定義類的原型方式。原型鏈擴展了這種方式，以一種有趣的方式實現繼承機制。

在上一章學過，prototype 對象是個模板，要實例化的對象都以這個模板爲基礎。總而言之，prototype 對象的任何屬性和方法都被傳遞給那個類的所有實例。原型鏈利用這種功能來實現繼承機制。

 

function ClassA() {

  this.onlyAPro = 'aOne';

  this.onlyAFunc = function () {

      console.log(this,'這是ClassA的only方法',this.onlyAPro);

  }

}

ClassA.prototype.name = '小明';

ClassA.prototype.age = 12;

ClassA.prototype.aMethod = function () {

    console.log(this.name,this.age);

}

 

function ClassB() {

    this.onlyBPro = 'bOne';

    this.onlyBFunc = function () {

        console.log(this,'這是ClassB的only方法',this.onlyBPro);

    }

}

ClassB.prototype = new ClassA();

 

ClassB.prototype.address = '中國';

ClassB.prototype.name = '曉梅';

 

ClassB.prototype.bMethod = function () {

   console.log(this.name,this.age,this.address);

}

 

var a = new ClassA();

a.aMethod();

a.onlyAFunc();

 

// a.bMethod();//Uncaught TypeError: a.bMethod is not a function

 

var b = new ClassB();

b.age = 23;

b.aMethod();

b.bMethod();

b.onlyBFunc();

b.onlyAFunc();

//原型鏈不經繼承以原型方式創建的屬性和方法，也繼承構造函數中創建的屬性和方法

 

//注意：在原型鏈中，instanceof 運算符的運行方式也很獨特。對 ClassB 的所有實例，instanceof 爲 ClassA 和 ClassB 都返回 true

console.log(a instanceof ClassA);

console.log(b instanceof ClassB);

原型方式的神奇之處在於ClassB.prototype = new ClassA();。這裏，把 ClassB 的 prototype 屬性設置成 ClassA 的實例。這很有意思，因爲想要 ClassA 的所有屬性和方法，但又不想逐個將它們 ClassB 的 prototype 屬性。這是最好方法。

注意：調用 ClassA 的構造函數，沒有給它傳遞參數。這在原型鏈中是標準做法。要確保構造函數沒有任何參數。

與對象冒充相似，子類的所有屬性和方法都必須出現在 prototype 屬性被賦值後，因爲在它之前賦值的所有方法都會被刪除。因爲 prototype 屬性被替換成了新對象，添加了新方法的原始對象將被銷燬。

在原型鏈中，instanceof 運算符的運行方式也很獨特。對 ClassB 的所有實例，instanceof 爲 ClassA 和 ClassB 都返回 true

console.log(a instanceof ClassA);

console.log(b instanceof ClassB);

在 ECMAScript 的弱類型世界中，這是極其有用的工具，不過使用對象冒充時不能使用它。

原型鏈的弊端是不支持多重繼承。記住，原型鏈會用另一類型的對象重寫類的 prototype 屬性。

 

3》混合方式：創建類的最好方式是用構造函數定義屬性，用原型定義方法。這種方式同樣適用於繼承機制，用對象冒充繼承構造函數的屬性，用原型鏈繼承 prototype 對象的方法

function ClassA(name) {

    this.name = name;

}

ClassA.prototype.tellStory = function () {

    console.log('聽',this.age,'歲的',this.name,'講ClassA的故事');

}

 

function ClassB(name,age) {

    ClassA.call(this,name);

    this.age = age;

}

ClassB.prototype = new ClassA();

 

 

var a = new ClassA('小龍');

 

var b = new ClassB('小麗',13);

a.tellStory();

b.tellStory();

 

console.log(a instanceof ClassA);//true

console.log(b instanceof ClassB);//true

 

由於這種混合方式使用了原型鏈，所以 instanceof 運算符仍能正確運行

 

URL URI：

 URL 的常見定義格式爲：scheme://host[:port#]/path/.../[;url-params][?query-string][#anchor]

URL：統一資源定位符

URI：統一資源標識符

URI 屬於父類，而 URL 屬於 URI 的子類。URL 是 URI 的一個子集。

二者的區別在於，URI 表示請求服務器的路徑，定義這麼一個資源。而 URL 同時說明要如何訪問這個資源（http://）

 

https://www.cnblogs.com/haore147/p/5507662.html

 

14、對象-定義類或對象的方式：

1》工廠方式：

每個對象都有自己的 showColor() 版本。而事實上，每個對象都共享同一個函數。

有些開發者在工廠函數外定義對象的方法，然後通過屬性指向該方法，從而避免這個問題：

function showColor() {

  alert(this.color);

}

 

function createCar(sColor,iDoors,iMpg) {

  var oTempCar = new Object;

  oTempCar.color = sColor;

  oTempCar.doors = iDoors;

  oTempCar.mpg = iMpg;

  oTempCar.showColor = showColor;

  return oTempCar;

}

 

var oCar1 = createCar("red",4,23);

var oCar2 = createCar("blue",3,25);

 

oCar1.showColor(); //輸出 "red"

oCar2.showColor(); //輸出 "blue"

 

2》構造函數方式：

function Car(sColor,iDoors,iMpg) {

  this.color = sColor;

  this.doors = iDoors;

  this.mpg = iMpg;

  this.showColor = function() {

    alert(this.color);

  };

}

 

var oCar1 = new Car("red",4,23);

var oCar2 = new Car("blue",3,25);

就像工廠函數，構造函數會重複生成函數，爲每個對象都創建獨立的函數版本。不過，與工廠函數相似，也可以用外部函數重寫構造函數，同樣地，這麼做語義上無任何意義。這正是下面要講的原型方式的優勢所在

3》原型方式：

function Car() {

}

Car.prototype.color = "blue";

Car.prototype.doors = 4;

Car.prototype.mpg = 25;

Car.prototype.drivers = new Array("Mike","John");

Car.prototype.showColor = function() {

  alert(this.color);

};

var oCar1 = new Car();

var oCar2 = new Car();

oCar1.drivers.push("Bill");

alert(oCar1.drivers); //輸出 "Mike,John,Bill"

alert(oCar2.drivers); //輸出 "Mike,John,Bill"

問題：

1、這個構造函數沒有參數。使用原型方式，不能通過給構造函數傳遞參數來初始化屬性的值

2、函數共享不會造成問題，但對象卻很少被多個實例共享，是引用值，Car 的兩個實例都指向同一個數組。這意味着給 oCar1.drivers 添加值 "Bill"，在 oCar2.drivers 中也能看到。輸出這兩個指針中的任何一個，結果都是顯示字符串 "Mike,John,Bill"。

 

4》混合的構造函數/原型方式：最優解

聯合使用構造函數和原型方式，就可像用其他程序設計語言一樣創建對象。這種概念非常簡單，即用構造函數定義對象的所有非函數屬性，用原型方式定義對象的函數屬性（方法）。結果是，所有函數都只創建一次，而每個對象都具有自己的對象屬性實例

function Car(sColor,iDoors,iMpg) {

  this.color = sColor;

  this.doors = iDoors;

  this.mpg = iMpg;

  this.drivers = new Array("Mike","John");

}

Car.prototype.showColor = function() {

  alert(this.color);

};

var oCar1 = new Car("red",4,23);

var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers); //輸出 "Mike,John,Bill"

alert(oCar2.drivers); //輸出 "Mike,John"

5》動態原型方法：次優解

動態原型方法的基本想法與混合的構造函數/原型方式相同，即在構造函數內定義非函數屬性，而函數屬性則利用原型屬性定義。唯一的區別是賦予對象方法的位置

function Car(sColor,iDoors,iMpg) {

  this.color = sColor;

  this.doors = iDoors;

  this.mpg = iMpg;

  this.drivers = new Array("Mike","John");

  if (typeof Car._initialized == "undefined") {

    Car.prototype.showColor = function() {

      alert(this.color);

    };

    Car._initialized = true;

  }

}

 

6》混合工廠方式：

這種方式通常是在不能應用前一種方式時的變通方法。它的目的是創建假構造函數，只返回另一種對象的新實例。

這段代碼看起來與工廠函數非常相似

function Car() {

  var oTempCar = new Object;

  oTempCar.color = "blue";

  oTempCar.doors = 4;

  oTempCar.mpg = 25;

  oTempCar.showColor = function() {

    alert(this.color);

  };

  return oTempCar;

}

var car = new Car();

結論：使用最廣泛的是混合的構造函數/原型方式。此外，動態原始方法也很流行，在功能上與構造函數/原型方式等價。可以採用這兩種方式中的任何一種。

 

15、對象-對象作用域：

1》公用、私有、受保護作用域

ECMAScript只有公用作用域；ECMAScript 中的所有對象的所有屬性和方法都是公用的；

建議性解決方法：有效的屬性作用域模式，解決了ECMAScript這種問題；

由於缺少私有作用域，開發者確定了一個規約，說明哪些屬性和方法應該被看做私有的。這種規約規定在屬性前後加下劃線：obj._color_ = "blue";

注意：下劃線並不改變屬性是公用屬性的事實，它只是告訴其他開發者，應該把該屬性看作私有的。

2》靜態作用域：ECMAScript 沒有靜態作用域

嚴格來說，ECMAScript 並沒有靜態作用域。不過，它可以給構造函數提供屬性和方法。構造函數只是函數。函數是對象，對象可以有屬性和方法

function sayHello() {

  alert("hello");

}

sayHello.alternate = function() {

  alert("hi");

}

sayHello(); //輸出 "hello"

sayHello.alternate(); //輸出 "hi"

這裏，方法 alternate() 實際上是函數 sayHello 的方法。可以像調用常規函數一樣調用 sayHello() 輸出 "hello"，也可以調用 sayHello.alternate() 輸出 "hi"。即使如此，alternate() 也是 sayHello() 公用作用域中的方法，而不是靜態方法。

3》關鍵字this：在對象的方法中。關鍵字 this 總是指向調用該方法的對象

var oCar = new Object;

oCar.color = "red";

oCar.showColor = function() {

  alert(this.color);//等價於alert(oCar.color);

};

oCar.showColor(); //輸出 "red"

//this 等於 oCar。

使用this原因：因爲在實例化對象時，總是不能確定開發者會使用什麼樣的變量名。使用 this，即可在任何多個地方重用同一個函數。

 

如果不用對象或 this 關鍵字引用變量，ECMAScript 就會把它看作局部變量或全局變量。然後該函數將查找名爲 color 的局部或全局變量，但是不會找到。結果如何呢？該函數將在警告中顯示 "null"

function showColor() {

  alert(color);

};

16、對象-修改對象：

1》創建新方法：

Number.prototype.toHexString = function() {

  return this.toString(16);

};

var iNum = 15;

alert(iNum.toHexString()); //輸出 "F"

2》重命名已有方法：

我們還可以爲已有的方法命名更易懂的名稱。例如，可以給 Array 類添加兩個方法 enqueue() 和 dequeue()，只讓它們反覆調用已有的 push() 和 shift() 方法即可：

Array.prototype.enqueue = function(vItem) {

  this.push(vItem);

};

Array.prototype.dequeue = function() {

  return this.shift();

};

3》添加與已有方法無關的方法：假設要判斷某個項在數組中的位置，沒有本地方法可以做這種事情。我們可以輕鬆地創建下面的方法：

Array.prototype.indexOf = function (vItem) {

  for (var i=0; i<this.length; i++) {

    if (vItem == this[i]) {

  return i;

}

  }

  return -1;

}

var aColors = new Array("red","green","blue");

alert(aColors.indexOf("green")); //輸出 "1"

4》爲本地對象添加新方法：如果想給 ECMAScript 中每個本地對象添加新方法，必須在 Object 對象的 prototype 屬性上定義它；所有本地對象都繼承了 Object 對象，所以對 Object 對象做任何改變，都會反應在所有本地對象上。例如，如果想添加一個用警告輸出對象的當前值的方法，可以採用下面的代碼：

 

Object.prototype.showValue = function () {

  alert(this.valueOf());

};

 

var str = "hello";

var iNum = 25;

str.showValue(); //輸出 "hello"

iNum.showValue(); //輸出 "25"

5》重定義已有方法：

Function.prototype.toString = function() {

  return "Function code hidden";

}

function sayHi() {

  alert("hi");

}

alert(sayHi.toString()); //輸出 "Function code hidden"

toString() 指向的原始函數怎麼了呢？它將被無用存儲單元回收程序回收，因爲它被完全廢棄了。沒有能夠恢復原始函數的方法，所以在覆蓋原始方法前，比較安全的做法是存儲它的指針，以便以後的使用。有時你甚至可能在新方法中調用原始方法：

Function.prototype.originalToString = Function.prototype.toString;

Function.prototype.toString = function() {

  if (this.originalToString().length > 100) {

    return "Function too long to display.";

  } else {

    return this.originalToString();

  }

};

6》極晚綁定：從技術上講，根本不存在極晚綁定。本書採用該術語描述 ECMAScript 中的一種現象，即能夠在對象實例化後再定義它的方法。

 

var o = new Object();

Object.prototype.sayHi = function () {

  alert("hi");

};

o.sayHi();

在大多數程序設計語言中，必須在實例化對象之前定義對象的方法。這裏，方法 sayHi() 是在創建 Object 類的一個實例之後來添加進來的。在傳統語言中不僅沒聽說過這種操作，也沒聽說過該方法還會自動賦予 Object 對象的實例並能立即使用（接下來的一行）。

注意：不建議使用極晚綁定方法，因爲很難對其跟蹤和記錄。不過，還是應該瞭解這種可能。

 

15、js事件：

16、js字符串：

  \轉義符：

  \'     '

  \"    "

  \\   \

 \b 退格

 \f 換頁

 \n 換行

 \r 回車

\t 水平製表符

\v 垂直製表符

長代碼行換行：爲了最佳可讀性， 程序員們通常會避免每行代碼超過 80 個字符串。如果某條 JavaScript 語句不適合一整行，那麼最佳換行位置是某個運算符之後；

也可以在字符串中換行，通過一個反斜槓即可：document.getElementById("demo").innerHTML = "Hello \

Kitty!";

\ 方法並不是 ECMAScript (JavaScript) 標準。

某些瀏覽器也不允許 \ 字符之後的空格。

對長字符串換行的最安全做法（但是有點慢）是使用字符串加法：

document.getElementById("demo").innerHTML = "Hello" + 

"Kitty!";

字符串可以是對象 new創建：var y = new String("Bill");

字面方式創建：var firstName = "Bill"

注：請不要把字符串創建爲對象。它會拖慢執行速度

var x = "Bill";             

var y = new String("Bill");

// (x === y) 爲 false，因爲 x 和 y 的類型不同（字符串與對象）

var x = new String("Bill");             

var y = new String("Bill");

// (x == y) 爲 false，因爲 x 和 y 是不同的對象

 

17、js字符串方法

//1、查找字符串

//indexOf()返回字符串中指定文本首次出現的索引;如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

//作爲檢索起始位置的第二個參數

    var str = "The full name of China is the People's Republic of China.";

    var pos = str.indexOf('china')

    var pos1 = str.indexOf('China')

    var pos2 = str.indexOf('China',18);

    var pos2 = str.indexOf('China',3);

    console.log(pos,pos1,pos2);

 

//lastIndexOf() 法返回指定文本在字符串中最後一次出現的索引;如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

//lastIndexOf() 方法向後進行檢索（從尾到頭），這意味着：假如第二個參數是 50，則從位置 50 開始檢索，直到字符串的起點。

    var lain = str.lastIndexOf('China');

    var lain1 = str.lastIndexOf('China',50);

    var lain2 = str.lastIndexOf('China',52);

    console.log(lain,lain1,lain2);

 

//search()方法搜索特定值的字符串，並返回匹配的位置：可與正則聯合使用

   var se = str.search('locate');

   var se1 = str.search('China');

   var se2 = str.search(/china/i);

   console.log(se,se1,se2);

 

//2、提取部分字符串

    /**

     * slice(start,end) [)

     *      1:如果某個參數爲負，則從字符串的結尾開始計數

     *      2:如果省略第二個參數，則該方法將裁剪字符串的剩餘部分

     *      index = str.length + 負數

     * substring(start,end) [)

     *      1:substring() 類似於 slice()。

     *      2:不同之處在於 substring() 無法接受負的索引

     *      3:如果省略第二個參數，則該 substring() 將裁剪字符串的剩餘部分。

     * substr(start,end) [)

     *      1:substr() 類似於 slice()

     *      2:不同之處在於第二個參數規定被提取部分的長度

     *      3:如果省略第二個參數，則該 substr() 將裁剪字符串的剩餘部分

     *      4:第一個參數可以爲負，第二個則不能爲負;如果首個參數爲負，則從字符串的結尾計算位置

     * */

    //slice()

    var str = "Apple, Banana, Mango";

    var res = str.slice(7,13);

    var res1 = str.slice(-13,-7);//str.slice(-13+str.length,-7+str.length)

    var res2 = str.slice(7);

    var res3 = str.slice(-13);

    console.log(str.length,res,res1,res2,res3);

    // Banana   Banana    Banana, Mango  Banana, Mango

 

    //substring()

    var str = "Apple, Banana, Mango";

    var subS = str.substring(7,13);

    var subS1 = str.substring(7);

    console.log(subS,subS1);

 

    //substr()

    var str = "Apple, Banana, Mango";

    var res = str.substr(7,6);

    var res1 = str.substr(7);

    var res2 = str.substr(-5);

    console.log(res,res1,res2);

 

//3、替換字符串內容replace()

/**

 * replace() 方法不會改變調用它的字符串。它返回的是新字符串。

 * 默認地，replace() 只替換首個匹配

 * 默認地，replace() 對大小寫敏感

 * 與正則聯合使用

 *

 * */

    str = "Please visit Microsoft!";

    var restr = str.replace('Microsoft','mama');

    console.log(str,restr);

 

//4、大小寫轉換

    //大寫

    var text1 = "Hello World!";

    var text2 = text1.toUpperCase();

 

    //小寫

    var text3 = text1.toLowerCase();

    console.log(text1,text2,text3);

 

//5、concat() 連接兩個或多個字符串;所有字符串方法都會返回新字符串。它們不會修改原始字符串。

// 正式地說：字符串是不可變的：字符串不能更改，只能替換

    var tex1 = 'hello';

    var tex2 = 'world';

    var tex3 = tex1.concat('',tex2);

    var tex4 = tex1.concat('-',tex2);

    var tex5 = tex1.concat('aa','bb','cc');

    console.log(tex3,tex4,tex5);

 

//6、trim() 方法刪除字符串兩端的空白符

    var str = '   hello world!  ';

    var strr = str.trim();

    console.log(str,strr);

    //正則去兩端的空白

    var str = "       Hello World!        ";

    var strrr = str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

    console.log(strrr);

 

//7、提取字符串字符

    /**

     * charAt(position) 方法返回字符串中指定下標（位置）的字符串

     * charCodeAt(position) 方法返回字符串中指定索引的字符 unicode 編碼

     * */

 

    //charAt(position)

    var str = "HELLO WORLD"

    var str1 = str.charAt(0);

 

    //charCodeAt(position)

    var str2 = str.charCodeAt(0);

 

    console.log(str1,str2);

 

//8、屬性訪問

    /**

     使用屬性訪問有點不太靠譜：

     不適用 Internet Explorer 7 或更早的版本

     它讓字符串看起來像是數組（其實並不是）

     如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。

     它是隻讀的。str[0] = "A" 不會產生錯誤（但也不會工作！）

     * */

    var str = "HELLO WORLD";

    var s = str[0];

    console.log(s);//H

 

    //不靠譜

    str[0] = 's';

    console.log(str[0]);//依舊是H

 

//9、字符串轉換爲數組 split()

/**

 * 如果省略分隔符，被返回的數組將包含 index [0] 中的整個字符串

 * 如果分隔符是 ""，被返回的數組將是間隔單個字符的數組

 * */

    var txt = 'a,b,c,d,e';

    var t1 = txt.split(',');

    var t2 = txt.split('');

    var t3 = txt.split('|');

    console.log(t1,t2,t3);

//    ["a", "b", "c", "d", "e"]   ["a", ",", "b", ",", "c", ",", "d", ",", "e"] ["a,b,c,d,e"]

    

 

18、js數字

JavaScript 只有一種數值類型;書寫數值時帶不帶小數點均可。

 

//1、書寫 只有一種數值類型 JavaScript 數值既可以帶小數點，也可以不帶

   var x = 3.14;

   var y = 3;

 

//2、科學計數

    var x = 123e5;

    var y = 123e-5;

    console.log(x,y);

//3、js數值始終是64位的浮點數

    /**

     * 與許多其他編程語言不同，JavaScript 不會定義不同類型的數，比如整數、短的、長的、浮點的等等;

     * JavaScript 數值始終以雙精度浮點數來存儲，根據國際 IEEE 754 標準。

     * 此格式用 64 位存儲數值，其中 0 到 51 存儲數字（片段），52 到 62 存儲指數，63 位存儲符號：

     * */

 

//4、精度:

// 整數（不使用指數或科學計數法）會被精確到15位

    var x = 999999999999999;//15    999999999999999

    var y = 9999999999999999;//16 10000000000000000 17

    console.log(x,y);

    //999999999999999 10000000000000000

 

// 小數 小數的最大數是 17 位，但是浮點的算數並不總是 100% 精準

    var x = 0.2 + 0.1;

    console.log(x);

    //0.30000000000000004 //17

    var x = 2e-1 + 1e-1;

    console.log(x);

    //乘法解決以上問題

    var x = (0.2 * 10 + 0.1 * 10)/10;

    console.log(x);

//5、數字和字符相加

//    js加法和級聯（concatenation）都使用 + 運算符。

//    在所有數字運算中，js會嘗試將字符串轉化爲數字 / * -

 

//6、數字字符串

        var x = "100";

        var y = "10";

        var z = x / y

        var m = x - y;

        var n = x * y;

        console.log(z,m,n,typeof z,typeof m,typeof n);

 

//7、NaN 非數值

// NaN 屬於 JavaScript 保留詞，指示某個數不是合法數。

// NaN 是數，typeof NaN 返回 number：

 

      var x = 100 / "Apple";

      isNaN(x);

      console.log(x,isNaN(x));

      //NaN true

 

     //數學運算中使用了 NaN，則結果也將是 NaN

      var x = NaN;

      var y = 5;

      var z = x + y;         // z 將是 NaN

      console.log(z);

 

     //級聯運算中使用了 NaN，結果是字符串

      var x = NaN;

      var y = "5";

      var z = x + y;         // z 將是 NaN5

      console.log(z);

 

//8、Infinity：Infinity （或 -Infinity）是 JavaScript 在計算數時超出最大可能數範圍時返回的值

      //    除以 0（零）也會生成 Infinity

      var x =  2 / 0;          // x 將是 Infinity

      var y = -2 / 0;          // y 將是 -Infinity

      console.log(x,y,typeof Infinity,typeof -Infinity);

 

//9、進制

    /**

     * 絕不要用前導零寫數字（比如 07）,一些 JavaScript 版本會把帶有前導零的數解釋爲八進制

     *默認地，Javascript 把數顯示爲十進制小數。

     *但是您能夠使用 toString() 方法把數輸出爲十六進制、八進制或二進制。

     * */

    var num = 128;

    var a = num.toString(16);

    var b = num.toString(8);

    var c = num.toString(2);

    console.log(a,b,c);

 

//10、數值可以是對象

/**

 * 請不要創建數值對象。這樣會拖慢執行速度。

   new 關鍵詞使代碼複雜化，併產生某些無法預料的結果;

   當使用 == 相等運算符時，相等的數看上去相等;

   對象無法進行對比

 * */

   var x = 123;

   var y = new Number(123);

   console.log(typeof x,typeof y)

   //  number object

   console.log(x == y,x === y);

   //true false

 

   //對象無法進行對比

    var ff = new Number(500);

    var gg = new Number(500);

    console.log(ff == gg,ff === gg);

    //false false

 

19、js Let

js塊作用域：

1》通過var聲明的變量沒有塊作用域，即塊{}內聲明的變量可以在塊外進行訪問。

{ 

  var x = 10; 

}

// 此處可以使用 x

ES2015之前，js沒有塊作用域。ES2015 引入了兩個重要的 JavaScript 新關鍵詞：let 和 const

可以使用let關鍵詞聲明擁有塊作用域的變量。

2》let在塊{}內聲明的變量無法在塊外訪問。

{ 

  let x = 10;

}

// 此處不可以使用 x

3》重新聲明變量：使用var關鍵字重新聲明變量會帶來問題。在塊中聲明變量也將重新聲明塊外變量。使用 let 關鍵字重新聲明變量可以解決這個問題。

var x = 10;

// 此處 x 爲 10

{ 

  var x = 6;

  // 此處 x 爲 6

}

// 此處 x 爲 6

用 let 關鍵字重新聲明變量可以解決這個問題，在塊中重新聲明變量不會重新聲明塊外的變量。

var x = 10;

// 此處 x 爲 10

{ 

  let x = 6;

  // 此處 x 爲 6

}

// 此處 x 爲 10

 

4》循環作用域：

4.1》在循環中使用var：

var i = 7;

for (var i = 0; i < 10; i++) {

  // 一些語句

}

// 此處，i 爲 10

此循環中使用var重新聲明瞭循環外的變量i

4.2》在循環中使用let：

let i = 7;

for (let i = 0; i < 10; i++) {

  // 一些語句

}

// 此處 i 爲 7

此循環中使用let並沒有重新聲明循環外的變量；如果在循環中用let聲明瞭變量i，那麼只有在循環內i纔是可見的。

5》函數作用域：

在函數內聲明變量時，let和var很相似。都有函數作用域：

function myFunction() {

  var carName = "porsche";   // 函數作用域

}

function myFunction() {

  let carName = "porsche";   // 函數作用域

}

 

6》全局作用域：在塊外聲明，var和let也很相似，都有全局作用域；

var x = 10;       // 全局作用域

let y = 6;       // 全局作用域

7》HTML中全局變量：

使用js情況下，全局作用域是js環境；

在HTML中，全局作用域是window；

通過var關鍵詞定義的全局變量屬於window；

通過let關鍵詞定義的全局變量不屬於window；

8》重新聲明：

8.1》允許在程序的任何位置使用 var 重新聲明 JavaScript 變量：

var x = 10;

// 現在，x 爲 10

var x = 6;

// 現在，x 爲 6

8.2》在相同的作用域，或在相同的塊中，通過 let 重新聲明一個 var 變量是不允許的

var x = 10;       // 允許

let x = 6;       // 不允許

{

  var x = 10;   // 允許

  let x = 6;   // 不允許

}

8.3》在相同的作用域，或在相同的塊中，通過 let 重新聲明一個 let 變量是不允許的

let x = 10;       // 允許

let x = 6;       // 不允許

{

  let x = 10;   // 允許

  let x = 6;   // 不允許

}

8.4》在相同的作用域，或在相同的塊中，通過 var 重新聲明一個 let 變量是不允許的

let x = 10;       // 允許

var x = 6;       // 不允許

{

  let x = 10;   // 允許

  var x = 6;   // 不允許

}

8.5》在不同的作用域或塊中，通過 let 重新聲明變量是允許的：

let x = 6;       // 允許

{

  let x = 7;   // 允許

}

{

  let x = 8;   // 允許

}

9》提升：

通過 var 聲明的變量會提升到頂端；可以在聲明變量之前就使用它

通過 let 定義的變量不會被提升到頂端；在聲明 let 變量之前就使用它會導致 ReferenceError，變量從塊的開頭一直處於“暫時死區”，直到聲明爲止。

20、js數組：（家裏電腦 WebstormProjects/untitled/）

//1、創建數組

 //字面量方法：

 //存同種類型元素

 var cars = ['ss','d','D','true'];

 console.log(cars);

 //存不同類型的元素

 var array1 = ['s',true,12,'dd'];

 console.log(array1);

 //new創建數組：存不同類型的元素

 var newArray = new Array('trr','收到',34);

 console.log(newArray);

 //2、訪問數組元素

 var a1 = newArray[0];

 console.log(a1);

 //3、元素賦值

 newArray[0] = '勻速';

 console.log(newArray);

 //4、訪問完整數組

 console.log(newArray);

 //5、數組是對象

 console.log(typeof array1,typeof newArray);

 //6、數組元素可以是不同類型的變量;

 var func = new Function('boy','girl','console.log(boy,girl);console.log(\'男孩和女孩\',boy,girl);')

 var objecrtArray = new Array(Date.now(),func,cars);

 console.log(objecrtArray);

 //7、數組屬性和方法

 var x = objecrtArray.length;

 var y = objecrtArray.sort();

 console.log(x,y)

 //8、遍歷數組

 //8.1 for循環遍歷數組

 for (i = 0;i < objecrtArray.length;i++){

     console.log(objecrtArray[i])

 }

 //8.2 forEach(func) 爲每個數組元素調用函數

 var text = '0';

 function myFunction(value) {

     text += value;

 }

 objecrtArray.forEach(myFunction);

 console.log(text);

 //8.3添加數組元素

 // push（）

 console.log(objecrtArray);

 objecrtArray.push('水果');

 console.log(objecrtArray);

 //index

 objecrtArray[objecrtArray.length] = '擰開乾媽看穿一切';

 console.log(objecrtArray);

 //8.3.1添加最高索引的元素可在數組中創建未定義的'洞'

 objecrtArray[objecrtArray.length + 1] = '未定義的洞';

 console.log(objecrtArray);

 //8.4 關聯數組：很多編程元素支持命名索引的數組;具有命名索引的數組別稱爲關聯數組

 //js不支持命名索引的數組；js只能使用數字索引

 //如果在js中使用了命名索引數組，則會將此數組重新定義爲標準對象,則所有數組的方法和屬性將產生非正確結果(親測，js索引數組沒這些毛病)

 var person = [];

 person[0] = '人1';

 person[1] = '人2';

 console.log(person,person instanceof Array,person.length);

 person['第三個人'] = '三人成虎';

 console.log(person,person instanceof Array,person.length);

//8.5 識別數組 isArray()

 var dd = Array.isArray(objecrtArray);

 console.log(dd);

21、數組方法：

var array = ['a','b','c'];

//1、合成用逗號分割的字符串

var a1 = array.toString();

console.log(a1);

//2、合成用指定字符分割的字符串

var a2 = array.join();

console.log(a2);

var a3 = array.join('*');

console.log(a3);

var a4 = array.join('');

console.log(a4);

//3、pop() 刪除最後一個元素,並返回最後一個元素

var a5 = array.pop()

console.log('a5:'+a5);

//4、push()返回數組長度

 var a6 = array.push('push');

 console.log('a6:'+a6);

//5、shift() 刪除第一個元素，數組元素索引整體變小；並返回刪除的元素

 var a7 = array.shift();

 console.log('a7:'+a7);

//6、unshift() 向數組開頭添加元素，返回數組長度

 var a8 = array.unshift('unshift');

 console.log('a8:'+a8,array);

//7、更改元素

  array[0] = '更改第一個元素';

//8、刪除元素:delete會產生數組空洞，一般不用delete刪除，而用pop或splice

  delete array[2];

  console.log('刪除第三個元素後：',array);

//9、拼接數組splice() 返回新的數組(只返回被刪除的元素組成的數組，不包含新添加的元素)；原數組會被改變

  var a9 = array.splice(1,1,'splice1','splice2');//刪除並添加元素

  var ad = ['1','2','3','4','5','6','7'];

  var ad1 = ad.splice(1,2,'收到','發');

  console.log('a9:'+a9,'ad1:'+ad1,ad);

  var a10 = array.splice(1,3);//刪除元素

  console.log('a10:'+a10);

//10、合併數組concat() 返回一個新數組，原數組不變

  var array1 = ['concat1','concat2','concat3'];

  var array2 = ['conc1','conc2','conc3'];

  var a11 = array.concat(array1,array2);

  console.log('a11:'+a11);

//11、剪裁數組 slice() 返回剪裁後的數組;原數組不變

console.log("array:"+array);

  var a12 = a11.slice(1,3);

  console.log('a12:'+a12,a11);

  var a13 = a11.slice(2);//從索引2開始剪裁剩下的數組

  console.log('a13:'+a13,a11);

 

//12、自動toString()

  document.getElementsByClassName('hh')[0].innerHTML = array;

  document.getElementsByClassName('hhh')[0].innerHTML = array.toString();

 

 

 

22、數組排序：

 var fruits = ["Banana", "Orange", "Apple", "Mango"];

 console.log(fruits);

 //1、排序sort()

 fruits.sort();

 console.log(fruits);

 //2、翻轉數組

 fruits.reverse();

 console.log(fruits);

 //3、數字排序

 var numArray = [21,13,1,3,6,12];

 console.log(numArray);

 numArray.sort();

 console.log(numArray);

 //升序

 numArray.sort(function (a, b) {

    return a - b;

 });

 console.log(numArray);

 //降序

 numArray.sort(function (a, b) {

     return b - a;

 })

 console.log(numArray);

 //4、查找數組最大、小值

 //4.1、排序後查找,效率極低

 //4.2、Math.max;Math.min

 var max = Math.max.apply(null,numArray);

 var min = Math.min.apply(null,numArray);

 console.log(max,min);

 //4.3、自制方法

 //最大值 此函數遍歷數組，用找到的最高值與每個值進行比較

 function myArrayMax(arr) {

     var len = arr.length

     var max = -Infinity;

     while (len--) {

         if (arr[len] > max) {

             max = arr[len];

         }

     }

     return max;

 }

 var maxx = myArrayMax(numArray);

 console.log('自制函數max:',maxx);

 //最小值 此函數遍歷數組，用找到的最低值與每個值進行比較

 function myArrayMin(arr) {

     var len = arr.length

     var min = Infinity;

     while (len--) {

         if (arr[len] < min) {

             min = arr[len];

         }

     }

     return min;

 }

 var minm = myArrayMin(numArray);

 console.log('自制函數min：',minm);

 //5、排序對象數組

 var cars = [{type:'Volovw',year:2015},{type: 'Saab',year: 2001},{type:'BMW',year:2010}];

 //數字排序：根據year

 // cars.sort(function (a,b) {

 //     return a.year - b.year;

 // })

 cars.sort(function(a, b){return a.year - b.year});

 console.log(cars);

 /**

  *  0: {type: "Saab", year: 2001}

  *  1: {type: "BMW", year: 2010}

  *  2: {type: "Volovw", year: 2015}

  * */

 //文字排序：根據type

 cars.sort(function (a, b) {

     var x = a.type.toLowerCase();

     var y = b.type.toLowerCase();

     if (x < y){return -1;}

     if (x > y){return 1;}

     return 0;

 });

 console.log(cars);

/**

 *  0: {type: "BMW", year: 2010}

 *  1: {type: "Saab", year: 2001}

 *  2: {type: "Volovw", year: 2015}

 * */

 

23、數組迭代：

//1、forEach() 方法爲每個數組元素調用一次函數（回調函數）;不產生新數組

   var number = [45,4,9,16,25];

   console.log(number);

   var newArray = [];

   number.forEach(function (value, index, array) {

       newArray[index] = value + 2;

   });

   console.log(number,newArray);

 

//2、map()產生新數組

/**

 * map() 方法通過對每個數組元素執行函數來創建新數組。

   map() 方法不會對沒有值的數組元素執行函數。

   map() 方法不會更改原始數組。

 * */

  var newN = number.map(function (value, index, array) {

    return  value += 3;

  });

  console.log(number,newN);

 

//3、filter() 方法創建一個包含通過測試的數組元素的新數組

 var over18 = number.filter(function (value,index,array) {

     return value > 18

 });

 console.log('over18:',over18);

 

//4、reduce() 返回一個值

 /**

  * reduce() 方法在每個數組元素上運行函數，以生成（減少它）單個值。

    reduce() 方法在數組中從左到右工作。另請參見 reduceRight（）。

    reduce() 方法不會減少原始數組

  * */

 var sum = number.reduce(function (total,value,index,array) {

     console.log('total:'+total);

    return total + value;

 });

 console.log(sum);

 

 

//5、reduceRight() 與reduce()啥區別

/**

 * reduceRight() 方法在每個數組元素上運行函數，以生成（減少它）單個值。

   reduceRight() 方法在數組中從左到右工作。另請參見 reduce（）。

   reduceRight() 方法不會減少原始數組

 * */

 var sumRight = number.reduceRight(function (total,value,index,array) {

    return total + value;

});

 console.log('sumRight:'+sumRight);

 

//6、every() 查看是否每個元素都滿足條件；返回boolean值

  var every = number.every(function (value, index, array) {

    return  value > 18;

  });

  console.log(every);

//7、some() 查看是否有元素滿足條件；返回boolean值

  var some = number.some(function (value, index, array) {

    return  value > 18;

  });

  console.log(some);

 

//8、indexOf() 方法在數組中搜索元素值並返回其位置。

var fruits = ["Apple", "Orange", "Apple", "Mango","Apple"];

var a = fruits.indexOf("Apple");

//9、lastIndexOf()  array.lastIndexOf(item, start)  start可選。從哪裏開始搜索。負值將從結尾開始的給定位置開始，並搜索到開頭

var b = fruits.lastIndexOf("Apple");

var c = fruits.lastIndexOf("Apple",1);//????不太好使呢，這個方法

console.log(a,b,c);

//10、find() 方法返回通過測試函數的第一個數組元素的值

var finds = number.find(function (value,index,array) {

   return value > 18;

});

console.log('find:',finds);

 

//11、findIndex() 方法返回通過測試函數的第一個數組元素的索引

var findindex = number.findIndex(function (value, index, array) {

    return value < 18;

});

console.log(findindex);

 

 

24、日期

var d = new Date();

console.log(d);

/**

 創建 Date 對象

 Date 對象由新的 Date() 構造函數創建。

 有 4 種方法創建新的日期對象：

 new Date()

 new Date(year, month, day, hours, minutes, seconds, milliseconds)

 new Date(milliseconds)

 new Date(date string)*

 * */

var d1 = new Date(2018,11,24,10,33,30,0);

var d2 = new Date(2018,11,24,10,33,30);

var d3 = new Date(2018,11,24,10,33);

var d4 = new Date(2018,11,24,10);

var d5 = new Date(2018,11,24);

var d6 = new Date(2018,11);

var d7 = new Date(2018);//不能神略月份，如果只提供一個參數，則將其視爲毫秒

console.log(d1,d2,d3,d4,d5,d6,d7);

 

//上世紀：一位和兩位數年份將被解釋爲 19xx 年

var d8 = new Date(99,11,24);

var d9 = new Date(9,11,24);

console.log(d8,d9);

 

//日期字符串 new Date(dateString) 從日期字符串創建一個新的日期對象

var d10 = new Date("October 13, 2014 11:13:00");

console.log(d10);

 

// new Date(milliseconds) 創建一個零時加毫秒的新日期對象

var d11 = new Date(0);

var d12 = new Date(100000000000);//1970年 1 月 1 日加上100 000 000 000毫秒，大約是 1973 年 3 月 3 日

var d13 = new Date(-100000000000);//1970 年 1 月 1 日減去 100 000 000 000 毫秒大約是 1966 年 10 月 31 日

console.log(d11,d12,d13);

 

//在 HTML 中顯示日期對象時，會使用 toString() 方法自動轉換爲字符串

d = new Date();

document.getElementById("demo1").innerHTML = d;

// 等同於

document.getElementById("demo2").innerHTML = d.toString();

//toUTCString() 方法將日期轉換爲 UTC 字符串（一種日期顯示標準）。

document.getElementById("demo3").innerHTML = d.toUTCString();

//toDateString() 方法將日期轉換爲更易讀的格式

document.getElementById('demo4').innerHTML = d.toDateString();

 

25、日期格式：沒啥內容；無論輸入哪種格式，輸出的日期格式一樣，JavaScript 默認將輸出全文本字符串格式

ISO 日期	"2018-02-19" （國際標準）
短日期	"02/19/2018" 或者 "2018/02/19"
長日期	"Feb 19 2018" 或者 "19 Feb 2019"
完整日期	"Monday February 25 2015"

 

26、日期獲取方法：

/**

 getDate() 以數值返回天（1-31）

 getDay() 以數值獲取周名（0-6）

 getFullYear() 獲取四位的年（yyyy）

 getHours() 獲取小時（0-23）

 getMilliseconds() 獲取毫秒（0-999）

 getMinutes() 獲取分（0-59）

 getMonth() 獲取月（0-11）

 getSeconds()    獲取秒（0-59）

 getTime()    獲取時間（從 1970 年 1 月 1 日至今

 * */

var d = new Date();

var d1 = d.getDate();

var d2 = d.getDay();

var d3 = d.getFullYear();

var d4 = d.getHours();

var d5 = d.getMilliseconds();

var d6 = d.getMinutes();

var d7 = d.getMonth();

var d8 = d.getSeconds();

var d9 = d.getTime();

console.log(d,d1, d2, d3, d4, d5, d6, d7, d8, d9)

// Sun Aug 25 2019 17:03:40 GMT+0800 (中國標準時間) 25 0 2019 17 862 3 7 40 1566723820862

 

/**

 getUTCDate()    等於 getDate()，但返回 UTC 日期

 getUTCDay()    等於 getDay()，但返回 UTC 日

 getUTCFullYear()    等於 getFullYear()，但返回 UTC 年

 getUTCHours()    等於 getHours()，但返回 UTC 小時

 getUTCMilliseconds()    等於 getMilliseconds()，但返回 UTC 毫秒

 getUTCMinutes()    等於 getMinutes()，但返回 UTC 分

 getUTCMonth()    等於 getMonth()，但返回 UTC 月

 getUTCSeconds()    等於 getSeconds()，但返回 UTC 秒

 * */

var dd = new Date();

var dd1 = dd.getUTCDate();

var dd2 = dd.getUTCDay();

var dd3 = dd.getUTCFullYear();

var dd4 = dd.getUTCHours();

var dd5 = dd.getUTCMilliseconds();

var dd6 = dd.getUTCMinutes();

var dd7 = dd.getUTCMonth();

var dd8 = dd.getUTCSeconds();

console.log(dd,dd1,dd2,dd3,dd4,dd5,dd6,dd7,dd8);

// Sun Aug 25 2019 17:03:40 GMT+0800 (中國標準時間) 25 0 2019 9 862 3 7 40

 

 

27、日期設置方法：

 /**

  setDate() 以數值（1-31）設置日

  setFullYear() 設置年（可選月和日）

  setHours() 設置小時（0-23）

  setMilliseconds() 設置毫秒（0-999）

  setMinutes() 設置分（0-59）

  setMonth() 設置月（0-11）

  setSeconds() 設置秒（0-59）

  setTime() 設置時間（從 1970 年 1 月 1 日至今的毫秒數）

  * */

 var d = new Date();

 console.log(d);

 d.setFullYear(2020);

 console.log(d);

 d.setFullYear(2020,11,3);

 console.log(d);

 d.setMonth(11);

 console.log(d);

 d.setDate(12);

 console.log(d);

 d.setDate(d.getDate() + 50);

 console.log(d);

 d.setHours(2);

 console.log(d);

 d.setMinutes(34);

 console.log(d);

 d.setSeconds(21);

 console.log(d);

 

//比較日期

 var today = new Date();

 var someDay = new Date();

 someDay.setFullYear(2022);

 if (today > someDay){

     console.log('今天在2022年之後');

 } else {

     console.log('今天在2022年之前');

 }

 

 

28、數學

var a1 = Math.PI;

var a2 = Math.round(1.23);//的返回值是 x 四捨五入爲最接近的整數

var a3 = Math.pow(8,2);//Math.pow(x, y) 的返回值是 x 的 y 次冪

var a4 = Math.sqrt(64);//Math.sqrt(x) 返回 x 的平方根

var a5 = Math.abs(-34);//Math.abs(x) 返回 x 的絕對（正）值

var a6 = Math.ceil(8.4);//Math.ceil(x) 的返回值是 x 上舍入最接近的整數

var a7 = Math.floor(4.2);//Math.floor(x) 的返回值是 x 下舍入最接近的整數

var a8 = Math.max(0,23,1,21,-3,4);

var a9 = Math.min(0,23,1,21,-3,4);

var a10 = Math.random();//[0,1)返回介於 0（包括） 與 1（不包括） 之間的隨機數

console.log(a1,a2,a3,a4,a5,a6,a7,a8,a9,a10);

 

29、隨機

// Math.random() 與 Math.floor() 一起使用用於返回隨機整數

//返回0~9

var a1 = Math.floor(Math.random() * 10);

console.log(a1);

var a2 = Math.floor(Math.random() * 100)+1;//1~100

console.log(a2);

 

//一個適當的隨機數

function getRndInteger(min,max) {

    return Math.floor(Math.random()*(max - min))+min;

}

var num = getRndInteger(2,13);

console.log(num);

 

 

30、邏輯

過

31、比較

過

32、條件

過

33、Switch

過

34、Loop For

for循環 過

35、Loop While

while循環 過

36、Break

過

37、類型轉換

// Number() 轉換數值，String() 轉換字符串，Boolean() 轉換布爾值

/**

 JavaScript 中有五種可包含值的數據類型：

 字符串（string）

 數字（number）

 布爾（boolean）

 對象（object）

 函數（function）

 有三種對象類型：

 

 對象（Object）

 日期（Date）

 數組（Array）

 同時有兩種不能包含值的數據類型：

 

 null

 undefined

 * */

//1、typeof typeof 運算符不是變量。它屬於運算符。運算符（比如 + - * /）沒有數據類型。但是，typeof 始終會返回字符串（包含運算數的類型）

typeof "Bill"                 // 返回 "string"

typeof 3.14                   // 返回 "number"

typeof NaN                    // 返回 "number"

typeof false                  // 返回 "boolean"

typeof [1,2,3,4]              // 返回 "object"

typeof {name:'Bill', age:62}  // 返回 "object"

typeof new Date()             // 返回 "object"

typeof function () {}         // 返回 "function"

typeof myCar                  // 返回 "undefined" *

typeof null                   // 返回 "object"

 

//2、constructor 屬性返回所有 JavaScript 變量的構造器函數

/*

"Bill".constructor                 // 返回 "function String()  { [native code] }"

(3.14).constructor                 // 返回 "function Number()  { [native code] }"

false.constructor                  // 返回 "function Boolean() { [native code] }"

    [1,2,3,4].constructor              // 返回 "function Array()   { [native code] }"

{name:'Bill', age:62}.constructor  // 返回" function Object()  { [native code] }"

new Date().constructor             // 返回 "function Date()    { [native code] }"

function(){}.constructor         // 返回 "function Function(){ [native code] }"

*/

//3、typeof查看不了具體類型，這時候可以用constructor判斷具體類型

function isArray(myArray) {

    return myArray.constructor.toString().indexOf("Array") > -1;

}

function isTArray(myArray) {

    console.log(myArray.constructor);

    return myArray.constructor === Array;

}

var array = ['d',12,true,'33'];

var is = isTArray(array);

console.log(is)

 

 

38、位運算

過

39、正則表達式 （TODO）

 

40、異常

 

41、作用域

 

42、Hoisting

 

43、嚴格模式

 

44、this關鍵字

 

45、Let

 

46、Const

 

47、調試

 

48、