網站基礎html javascript jquery

時間 2019-12-09
原文原文鏈接
第二章HTML
HBuilder的使用
邊改邊看模式
chrome瀏覽器看.
HTML的基本格式
超文本標記語言
HyperText Markup Language
HyperText 超文本
Markup 標記<><><>爲標記.
<head> 頭部信息    </head>
<body> 主體內容 </body>

<taitle>寫在頭部內</taitle>

1.標記成對出現
2.空白字符不影響顯示.

3.寫在<body>裏面註釋 <!--
            做者：offline
            時間：2018-12-29
            描述：
        -->

源碼與執行
源碼:HBuilder裏面寫的.
執行:用戶在瀏覽器裏面打開網頁
在這裏,瀏覽器是一個解釋執行HTML源碼的工具.

2.2文本與段落
<h1> header,1級標題.
<h2> header 2級標題.
<p> paragraph 段落
<br>break 換行.

通常把文本放在某個標籤下面.
有的標籤不成對出現好比<br/>或者<br>

2.3插入圖片
<img src="img/XXX"/>格式
標籤的屬性
<img>標籤應指定src屬性,表示圖片地址

--屬性的值用單引號或者雙引號包.
--多個屬性用空格隔開

記住如下原則:
1.不能訪問項目目錄外的資源
2.使用相對路徑訪問

src屬性不能使用本地路徑.

2.4超連接
使用<a href="xxx.html"> xxx  </a>

超連接的做用,進入網站首頁後,不須要輸入地址.



第三章URL
3.1URL
統一資源定位器,描述Internet上的一個資源地址

例如:https://baike.baidu.com/item/mySQL/471251?fr=aladdin

前半段https://baike.baidu.com/:描述該資源在哪一個服務器上

item/mySQL/471251?fr=aladdin:描述該資源的相對路徑.

項目目錄外的文件不對internet開放.

3.2相對路徑
.表示同級目錄
..表示上級目錄

相對路徑的解析
計算過程
1.當前路徑
http://127.0.0.1:8020/html0202/index.html
2.目標路徑
http://127.0.0.1:8020/html0202/index.html/pp/p3.html

3.3URL的錯誤寫法
1.帶本地地址.
2.本站的資源不要帶IP

本站資源是不能帶IP地址的!

開發時服務器地址不穩定.
爲何不帶IP,若是多人開發,難道各寫各的地址?


第四章 樣式
添加樣式 Style
        <style>
            .poem
            {
                color: blue;
                font-family:"微軟雅黑";
                font-size:16px;
                line-height:180%;
            }
        </style>

        <p class="poem">
            啊啊啊啊啊
        </p>
樣式寫在style標籤內
.poem是樣式的名字

標題 段落均可以修改.

4.2樣式的檢查.
谷歌瀏覽器F12右邊鼠標標記能夠查看.
每項都是name:value格式.注意冒號和分號


4.3經常使用樣式,
如下爲經常使用樣式，務必熟練使用。
背景 background
background-color: 背景顏色
background-image:
顏色表示:  
rgb  如 
#F00 表示紅色  
#FFF 白色 
#000 黑色
rgba  如 #F008 最後一個8表示透明度
rrggbb 如 #FF9309
rrggbbaa 如 #FF930988 其中 88表示透明度

邊距與填充margin / padding
例：
margin: 10px
margin: 20px  auto  auto  auto ;    按 上 右  下 左 順序
padding: 8px

上右下左均可以分別設置，如padding-left: 8px

邊框 border 
例 border : 1px  solid  #ff0900;
其中，1px是寬度，solid是線型， #ff0900 是顏色

上下左右的邊框能夠分別設置
border-top / border-right / border-bottom / border-left

邊框圓角 border-radius
border-radius: 4px;
上下左右4個角能夠分別設置

寬度 width / min-width / max-width
例：
width: auto
width: 800px
width: 90%
百分比表示佔父元素寬度的百分比

高度 height / min-height / max-height
例：
height: 400px
min-height: 300px;


文字樣式 
color: #444  ;  文字顏色
font: italic bold 14px "微軟雅黑" ;  
font-size: 字高
font-family : 字體名稱
text-align : 段落對齊

4.4樣式單CSS
層疊樣式單.
好比新建一個poem.css
在HTML文件內引入這個css
新建一個css
使用<link rel="stylesheet" href="css/poem.css" />

<h1 class="poem">
<p class="poem">

使用樣式單.css,能夠統一修改網站的風格.

除此以外,可使用style屬性臨時修改樣式

例如:<p style="font-size:20px;">

        <p class="poem" style="font-size:20px;">
            <p style="font-size:20px;">    //或者另外加一行.
            啊啊啊啊啊
        </p>

5.1    dom
文檔對象模型
HTML頁面內根據<body>下每一個節點,稱爲元素Element
例如:html0501
bady
  |
  |-->p-->a
  |
  |-->p-->img

元素的通用屬性
id:給該元素設置一個全局惟一ID
name:給該元素設置一個名字
class:設置樣式類名
style:設置零時樣式
<img id="logo".../>

不要把顯示的內容放在body以外.

5.2類選擇器
Class Selector 類選擇器        .short-text{}
ID Selector ID選擇器        #login-panel{}
Type Selector 標籤類型選擇器    img{}
Descendant Selector 子選擇器    #login-panel .row{}
Pseudo-Class Selector僞類選擇器    button:hover{}


Class Selector 類選擇器
.my-button

            /* 普通按鈕 */
            .my-button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #222;
                background-color: #f1f1f1;
                min-width: 60px;
            }
            
            /* 默認按鈕 */
            .my-button-default{
                background-color: #0078D7;
                color: #f1f1f1;
                border-color: #F1F1F1;
            }

<p>
        <button class='my-button'> 新建 </button>
        <button class='my-button'> 刪除 </button>
        <button class='my-button'> 添加圖片  </button>
        <button class='my-button'> 添加連接  </button>     
</p>


指定多個class
        <button class='my-button my-button-default'> 發佈 </button>    

優先級問題
多個樣式出現衝突(重複指定),和指定順序沒有關係.
覆蓋規則:後出現的樣式優先級較高,
因爲my-button先於my-button-default,全部my-button-default的優先級較高

5.3標籤類型選擇器
Type Selector
button
{
}

button.my-default
{
}

button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #222;
                background-color: #f1f1f1;
                min-width: 60px;
            }
        <p>
            <button > 新建 </button>
            <button > 刪除 </button>
            <button > 添加圖片  </button>
            <button > 添加連接  </button>     
        </p>

        <p>
            <button > 放棄編輯 </button>
            <button class="my-default"> 發佈 </button>
        </p>

5.4ID選擇器
每一個元素均可以設置一個id屬性.
<button id="ok">...
ID應該在頁面惟一.爲了不重複,通常命名應該比較長.

            #ok
            {
                background-color: #0078D7;
                color: #f1f1f1;
                border-color: #F1F1F1;
            }
            #cancel
            {
                background-color: #0078D7;
                color: #f1f1f1;
                border-color: #F1F1F1;
            }

        <p>
            <button id="cancel"> 放棄編輯 </button>
            <button id="ok"> 發佈 </button>
        </p>

優先級問題
ID Selector優先級比較高.
優先級順序(數字表示權重)
內聯樣式1000 <p style="xxxx">
ID選擇器100 <p id="xxxx">
類選擇器10 <p class="xxxx">
標籤選擇器1 


5.5僞類選擇器
即元素的每一種狀態定義一個樣式
xxx        普通狀態顯示
xxx:hover    鼠標移上去時的狀態顯示
xxx:active    鼠標點下時的狀態顯示
xxx:focus    焦點狀態下的狀態顯示
其中,xxx能夠是ID/class/Type Selector都可支持

            /* 普通按鈕 */
            button{
                padding: 8px;
                border: 1px solid silver;
                border-radius: 6px;
                font-size: 12px;
                color: #222;
                background-color: #f1f1f1;
                min-width: 60px;
            }
            /*鼠標移過期顯示 */
            button:hover
            {
                
                border-color:#0078D7 ;
                background-color: #F1F1F1;
            }
            /* 鼠標按下時到擡起前*/
            button:active
            {
                border-color: #0078D7;
                background-color:#0078D7 ;
                color: #fff;
            }
            
            /*元素處理焦點時*/
            button:focus
            {
                border-color: #0078D7;
                background-color:#0078D7 ;
                color: #fff;
            }
5.6子選擇器
#login-panel button{}
在id="login-panel"元素下,全部<button>的樣式
.xxx .yyy .zzz{}
在class="xxx"下的子元素class="yyy"下的class="zzz"


<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #login-panel label
            {
                color: #444;
                padding: 6px;
            }
            #login-panel input
            {
                color: blue;
                padding: 6px;
            }
        </style>
    </head>
    <body>
        <div id="login-panel">
            <label>用戶名</label>
            <input type="text" /><br>
            
            <label>密碼</label>
            <input type="text" /><br>
            
            <button>登陸    </button>
        </div>
    </body>
</html>

6.1網頁佈局

<div>,division 劃分,層
<div>是網頁佈局的主要工具,使用div把網頁劃分爲一塊一塊的區域

佈局相關的屬性
width/height
margin/padding
display
position
z-index

6.2padding 填充 :子元素與本身的距離
margin 邊距:本身與外部元素的距離


6.3box模型
            .test1
            {
                border: 4px solid blue;
                margin: 8px;
                padding: 16px;
                width: 200px;
                height: 50px;
            }

box-sizing(box的尺寸)
box-sizing:border-box;
(content+padding+border)一共的長200px高50px

box-sazing:content-box;
指文本區200px*50px


瀏覽器的兼容性
.test1
    {
        box-sizing:border-box;        /*標準屬性Chrome,IE*/
        -moz-box-sizing:border-box;    /*FireFox*/
        -webkit-box-sizing:border-box;    /*Safari*/
        width:200px;
        height:50px;    
    }
不一樣標籤默認的box-sizing是不一樣的


6.4行內元素與塊元素
爲何<lable>等標籤沒法設置widht和height?/
爲何<div>默認能佔滿一行?

display屬性
display用於控制行內元素,仍是塊元素
常見的4種設置:
inline:行內元素,不可設置寬高
block:塊元素獨佔一行.
inline-block:行內塊元素,能夠設置大小,並且不佔一行,
none:不佔用任何空間(隱藏)

        <label style="border:1px solid blue; display:block;">
            Java
        </label>
        <label style="border:1px solid black; display:inline-block;width: 200px;">
            C
        </label>
        
        <div style="border:1px solid black">xxxx</div>
        <div style="border: 1px solid black; display: none;">hhhh</div>

6.5行內元素對齊
text-align:right 右對齊
text-align:left 左對齊
text-align:center 居中對齊

豎直對齊
1.指定父容器的height 和line-height等高
2.指定子元素的vertical-align屬性

            .container
            {
                width: 600px;
                height: 300px;
                border: 1px solid black;
                text-align: center;
                line-height: 300px;
            }
        <div class='container'>
            <button style="vertical-align: top;">按鈕1</button>
            <button style="vertical-align: middle;">按鈕2</button>
            <button style="vertical-align: bottom;">按鈕3</button>
        </div>

本質上是說父元素的文字基線同高

6.6相對位置定位
position定位
position:static 默認
position:relative 相對位置
position:absolute 絕對位置
position:fixed    固定位置

position:static 默認
按各個<div>出現順序依次佈局
正常文檔流(Normal Flow)

position:relative 相對位置
position:relative;
left:50px;
top:50px;
相對於正常位置,添加偏移,偏移由left/top/right/bottom屬性指定
沒有脫離Normal Flow,該佔的位置仍是佔着
不是相對於父元素,而是相對於本身原有的位置.

position:absolute 絕對位置
position:absolute;
left:50px;
top:50px;
相對於誰? 向上級找父級或者父級的父級,第一個有position:absolute/relative屬性的...
一般都給父元素添加relative屬性
脫離Normal Flow,原有位置被後來者擠佔.
必須給父元素添加position:absolute;屬性.


position:fixed    固定位置
position:fixed;
left:0px;
top:50px;
相對於誰? 相對於瀏覽器
脫離normal flow
一般與z-index聯用,防止被其餘div遮蓋(分層)
fixed:用於實現懸浮框.

7.1居中佈局
1.添加<div>,水平方向佔滿
2.添加<div>,水平方向佔1000px,並居中顯示

水平佔滿
<div>是塊元素,默認將佔滿一行空間
.top{
    height:41px;
    border:1px solid blue;
    }
注意:
1.將<body>的margin設爲0px
2.若是設爲100%,則要設置box-sizing:border-box

        <style>
            body{
                margin: 0px;
                padding: 0px;
            }
            .top{
                    height:41px;
                    border:1px solid blue;
                    background-color:cornflowerblue;
                }
            .main
            {
                width: 1000px;
                height: 400px;
                margin: 0px auto;    /*水平居中*/
                background-color:greenyellow;
            }
        </style>
    </head>
    <body>
        <div class=top>
            頂部區
        </div>
        <div class="main">
            底部區
        </div>
    </body>

水平居中
如下Style設置可讓<div>水平居中
.main
{
width:1000px;
margin:0px auto;
}
<div>是塊元素,自動佔滿一行,瀏覽器會根據margin:auto自動計算左右距離


使用居中佈局時注意:
1.通常須要對<body>設置樣式,去掉margin-> margin:0px;
2.寬度若要設置爲100%,考慮box-sizing.
3.margin的幾種設置方式
margin:10px; /*top=right=bottom=left=10px*/
margin:10px 20px;/*top=bottom=10,left=right=20*/
margin:10px 20px 30px 40px /*top,right,bottom,left*/

7.2分欄佈局
display:inline-block
            .main{
                width: 640px;
                height: 400px;
                border: 1px solid mediumblue;
                margin: 10px auto;
            }
            .div1{
                display: inline-block;
                width: 200px ;
                height: 300px;
                background-color: #B22222AA;
            }

只有行內元素才能實現分欄.
爲何<div>之間有間距
緣由:有空白字符,如換行.tab,空格等
可寫成
            <div class="div1">
                11111
            </div><div class="div2">
                22222
            </div><div class="div3">
                33333
            </div>

若是一行被排滿,則自動擠到下一行顯示.

注意.1.應該設置display:inline-block
2.注意空白字符寬度
3若是被擠到下一行,注意box-sizing和空白寬度,margin也要設置爲0px

7.3動態計算
使用calc()能夠實現佈局的動態計算
.div1{
    display:inline-block;
    width:200px;
    }
.div2{
    display:inline-block;
    width:calc(100% - 200px);
    }

注意:+-號兩側必須加上空格(與正負號區分)
calc()兼容寫法
width:-moz-calc(100% - 200px)  /*FireFox*/
width:-webkit-calc(100% - 200px) /*Safari*/
width:calc(100% - 200px) /*標準寫法IE Chrome*/

margin:0px;
box-sizing:border-box;
<div>之間不留空白


7.4固定佈局
margin-top:80px ;   /*margin-top和頂部高度相同*/
box-shadow: 0px 2px 5px #ccc; /* 偏移0,2 擴展5px的陰影 */

            body{
                margin: 0px;
            }
            #top{
                position: fixed;
                top: 0px;
                z-index: 101;
                width: 100%;
                height: 60px;
                box-sizing: border-box;
                
                background-color: #6089D4;
                box-shadow: 0px 2px 5px #ccc; /* 偏移0,2 擴展5px的陰影 */
            }
            
            #left{
                position: fixed;
                z-index: 100;
                top: 60px;
                left: 0px;
                bottom: 0px;
                
                width: 187px;
                background-color: #FAF8F5;
                border-right: 1px solid #D3D5D5;
            }
            
            #main{
                min-height: 800px;
                background-color: #fff;
                margin-top: 60px; /* 高度應該和頂部高度一致 */
                margin-left: 187px; /* 左側應空出一段空間 */
            }

第八章
8.1表格
表格<table>,用於顯示錶格形式的數據
<table>表格
<tr>table row,一行
<th>table head,一個標題單元格
<td>tbale data,一個數據單元格


        <style>
            table{
                border-collapse:collapse ;   /*邊框收縮*/
            }
            /*逗號指定多個目標樣式*/
            table,td,th{
                border: 1px solid #ccc;
            }
        </style>

    <body>
        <table>
            <tr>
                <th>標題1</th>
                <th>標題2</th>
                <th>標題3</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>13</td>
            </tr>
        </table>
    </body>

合併單元格
使用rowspan和colspan能夠指定合併單元格
例如:
<td rowspan='3'>xxx</td>

8.2標題行與數據行
能夠用<thead> <tbody> <tfoot>,但不是全部瀏覽器都支持
<table>
    <thead><tr>...</tr></thead>
    <tbody>
        <tr></tr>
        <tr></tr>
    </tbody>
</table>

可使用class替代,

8.3表格的列寬和換行
table-layout:fixed;  /*自動佈局仍是固定寬度*/
word-break:break-all; /*換行設定*/
word-wrap:break-word; /*換行折斷設定*/

        <style>
            table{
                border-collapse:collapse ;/*邊線縮進*/
                table-layout: fixed;/*自動佈局仍是固定寬度*/
                word-break: break-all;/*換行設定*/
                word-wrap: break-word;/*換行折斷*/
            }
            table,td,th{
                padding: 10px;
                text-align: center;
            }
            
            tr.head{
                border: 0px solid #aaa;
                border-width:2px 0px ;
            }
            tr.data{
                border: 0px solid #ccc;
                border-width:1px 0px ;
            }
            table{
                width:100%;
            }
            table .c1{width: 60px;}
            table .c2{width: 100px;}
            table .c3{width: 60px;}
            table .c4{width: 120px;}
            table .c5{
                width:calc(100% - 60px - 100px - 60px - 120px);
                text-align: left;
            }
            
        </style>
    </head>
    <body>
        <table>
            <tr class='head'>
                <th class='c1'>學號</th>
                <th class='c2'>姓名</th>
                <th class='c3'>性別</th>
                <th class='c4'>手機號</th>
                <th class='c5'>地址</th>
            </tr>
            <tr class='data'>
                <td>20190001</td>
                <td>趙</td>
                <td>女</td>
                <td>13000000000</td>
                <td class='c5'>aaaaaaaaaaaaaaaaaassssssss</td>
            </tr>
             <tr class='data'>
                <td>20190001</td>
                <td>趙</td>
                <td>女</td>
                <td>13000000000</td>
                <td class='c5'>aaaaaaaaaaaaaaaaaassssssss</td>
            </tr>

        </table>

第九章.
JavaScript
在html中添加一段javascript
寫在body後面.
    <script>
        var name="xxxx"
        console.log("個人"+name);
    </script>
當瀏覽器加載網頁時,會執行JavaScropt裏的代碼.
<script>標籤沒有特別指定的位置.

2.能夠嵌入多段<script>
從上到下依次執行

9.2JS數據結構
JS是一種弱類型語言,
不能指定類型
var id=123123
var name="xxxx"
var sex=true
不管什麼類型都用var來指定
弱類型不是沒有類型,自動識別
經常使用類型:
number:數字
String:字符串
Boolean:布爾類型
Object:
Array:數組

9.3JS的方法
function定義方法.
function test2(a,b)
{
    return a*b;
}
其中a,b是參數.

    <script>
        function test1()
        {
            console.log("asdasd");
        }
        function test2(a,b)
        {
            return a*b;
        }
        test1(); //方法的調用
        
        var result = test2(10,20);
        console.log(result);
    </script>

注意:
1.參數不要加類型 function test2(var a,var b)不行
2.方法重載不行,之後一個爲準.
3.每頁的代碼中相互獨立,沒有影響.

9.4JS的調試.
1.單步調試
2.打印調試console.log()
若是有語法錯誤,瀏覽器便是解釋器,又是調試器.

第十章
10.1    JS對象
1.建立一個對象
2.添加屬性和方法.

    <script>
        //建立一個對象,並不須要先聲明一個Student類型
        var stu = new Object();
        //直接添加屬性
        stu.id = 20190103;
        stu.name="xxx";
        stu.sex=true;
        //直接添加方法
        stu.introduce = function(){
            console.log("hi,i am"+this.name);
        };
        //調用方法
        stu.introduce();
        //能夠直接把一個Object 輸出到控制檯
        console.log(stu);
    </script>

1.方法的形式記住
2.訪問屬性時,不能省略this.

10.2    JS自定義類型
js也能夠先定義一個類,可是不多這麼作.
    <script>
        function Student(id,name,sex)
        {
            this.id=id;
            this.name=name;
            this.sex=sex;
            
            this.introduce=function()
            {
                console.log(this.name);
            };    //注意結尾;號
        }
        function Teacher()
        {
            this.name=null;
            this.start=function(){
                console.log(this.name + "skl");
            };    //注意結尾;號
        }
        
        var s= new Student(10,"xx",true);
        s.introduce();
        
        var t=new Teacher();
        t.name="老師";
        t.start();
        
    </script>

10.3    瀏覽器對象BOM
瀏覽器對象模型
使用它們能夠在JS代碼中操做瀏覽器.
經常使用BOM對象包括:
window:當前窗口
screen:屏幕對象
history:訪問歷史
location:地址欄
localStorage:本地存儲
sessionStorage:會話級存儲

控制瀏覽器跳轉
    <body>
        <!--
            描述:按鈕跳轉測試
        -->
        <button onclick="test()"> 跳轉 </button>
    </body>
    <script>
        function test()
        {
            //控制瀏覽器跳轉
            location.href= "https://www.baidu.com/"
        }
    </script>
全部的全局對象和方法(global)都屬於Window
例如:
var a=10;
至關於
window.a=10;

全部瀏覽器對象都基本屬於window下面.

10.4文檔對象DOM
文檔對象模型.
當瀏覽器加載HTML後,<body>內全部都顯示.
例如:body第一層 div第二層, button第三層,a.href第三層.

    <body>
        <!--
            描述:按鈕轉換
        -->
            <div>
            <button onclick="test()"> 跳轉 </button><br />
            <a id='website' href="index.html">xxxx</a> <br />
            <p id="abc">abcd</p>
        </div>
        
    </body>
    
    <script>
        function test()
        {
            //經過元素ID找到元素
            var elem =document.getElementById("website");
            //修改元素內容
            elem.innerHTML="aaaa"
            //經過元素ID找到元素
            var elem =document.getElementById("abc");
            //修改文本內容
            elem.innerText="1234"
        }
    </script>

第11章    DOM事件處理
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .ppp{
                display: inline-block;
                padding: 10px;
                border: 1px solid #ccc;
                background-color:#f1f1f1 ;
                cursor: pointer;/*鼠標形狀設置*/
            }
        </style>
    </head>
    
    <body>
        <div class="ppp" onclick="test(this)">xx</div>
    </body>
    
    <script>
        window.test = function(elem)
        {
            elem.innerHTML="aa";
        };
    </script>

onclick 當用戶點擊時調用的事件.
1.onclick裏能夠指定一大段代碼
2.多元素都支持鼠標事件
3.單引號與雙引號的混用，能夠外層用雙引號內層用單引號或者內存用雙引號內層用單引號
4.onclick裏可用的上下文參數:this,event        alert提示點擊了什麼.
<div class="ppp" onclick="test(this,event)">xx</div>  這兩個參數能夠直接使用.
5.運行時檢查錯誤,不運行就不檢查錯誤


11.2鼠標事件
    <body>
        <div class="ppp" 
            onmouseenter="test(this)"
            onmouseleave="test1(this)">xx</div>
    </body>
    
    <script>
        function test(Z)
        {
            Z.innerHTML="hello";
            Z.style.backgroundColor="#00ff00";
        }
        function test1(Z)
        {
            Z.innerHTML="welcome";
            Z.style.backgroundColor="#f1f1f2";
        }
    </script>

11.3    鍵盤事件
        <style>
            .login{
                width:300px;
                padding: 20px;
                height: 150px;
                margin: 100px auto;
                background-color:#f1f1f1 ;
                border: 1px solid #ccc;
                box-shadow: 1px 1px 3px #aaa;
            }
            
            .login .prompt{
                text-align: center;
                margin: 10px auto;
                color: #444;
            }
            input{
                width: 100%;
                padding: 6px;
                margin: 2px;
                box-sizing: border-box;
            }
        </style>
    </head>
    
    <body>
        <div class='login'>
            <div class="prompt">用戶登陸</div>
            <input type='text' placeholder="用戶名" /><br />
            <input type="password" placeholder="密碼"
                onkeyup="if(event.keyCode==13){ enterPressed();}"  />
        </div>
    </body>
    
    <script>
        function enterPressed()
        {
            alert("輸入回車")
        }
    </script>

alert提示點擊了什麼.
input type="password"  以password的形式*****顯示.
<!--描述：type=password表示密碼框  placeholder表示空置時的顯示 -->

11.4事件監聽器
    <script>
        //從DOM中取得目標元素
        var elem =document.getElementById("password");
        
        //給目標元素添加一個事件監聽器:當'keyup'事件發生時,運行相應的function
        elem.addEventListener('keyup',function(event){
            if(event.keyCode==13)
            {
                alert("回車");
            }
        });
    </script>


elem.addEventListener('keyup',function(event){        });
第一個參數爲事件名,如click,keyup
第二個參數是一個回調function,當對應事件發生時,此function被調用.  和匿名內部類寫法類似.
本章要求不高,由於經常使用操做在下一章

12.1    JS文件
建立JS/* 文件名應爲英文或者拼音 */

var number =102;
var example()
{
    console.log("this is a example");
}
//引入JS文件.
    <script type="text/javascript" src="js/sample.js"></script>

例如jQuery庫的使用.
12.2引入jQuery庫,對原生JS進行封裝.是前端最經常使用的庫
jquery.com

12.3使用jQuery
    <body>
        <label class="website">xxxxxxx</label>
        
        <button onclick="test()">測試</button>
    </body>
    <script>
        function test()
        {
            //取得class='website'的對象
            var j = $('.website');
            
            //修改目標對象的html內容
            j.html('aaaaa');

            //簡寫模式    $('.website').html("xx");
        }
    </script>

$('.website').html("xx");
$('.website'):取得class='website'對象
$:是一個function名稱
html(str):修改目標對象裏的html內容.

//從class='box1'的元素內取出html.
var str =$('.box1').html();
            
//設置class='box2'的元素的html
$('.box2').html(str);
            
//清空class='box1'的內容
$('box1').html('');

jQuery的api風格
j.html(str):帶參數時表示設置 (setter)
str=j.html():不帶參數時表示獲取(getter)

12.4    認識jQuery對象
$(".java")實際返回了一個數組/集合同時操做全部匹配的目標元素.

jQuery對象和DOM對象的轉換
DOM對象:原生對象,操做不方便
jQuery對象:封裝了DOM對象,操做方法
二者能夠互相轉換,一般只使用jQuery對象.

//kecheng:可操做全部class='java'的元素
var kecheng =$(".java");
//e:原生DOM元素
var e=kecheng[0];
e.innerHTML="aaaaaa";
//je:jquery包裝後的對象
var je=$(e);
je.addClass("ke")


    //選中全部的class='java'的元素
    var kecheng =$(".java");
            
    for(var i=0;i<kecheng.length;i++)
    {
        //遍歷獲得的是原生的DOM對象
        var e =kecheng[i];
        //轉成jquery對象
        var je =$(e);
        console.log("課: "+je.html());
    }
在調試時DOM對象由標籤,jQuery對象時數組
在運行時,xxx.html is not a function說明他是原生的DOM對象.

12.5選擇器
選擇器,用於DOM樹中定位查詢一個元素經常使用的選擇器.
經常使用選擇器
ID選擇器,如$("#example")
Class選擇器, $(".large")
標籤類型選擇器  $("img")
子選擇器  $("#login .username")
屬性選擇器  $("input[type='checkbox']")

標籤類型選擇器  $("img")
var jelist=$("label");    

for(var i=0;i<jelist.length;i++)
{
    var e=jelist[i];
    var je=$(e);
    console.log(je.html());
}
//另外一種遍歷方式
for(var e of jelist)
{
    var str=$(e).html();
    console.log(str);
}

子選擇器  $("#login .username")
console.log($(".box1 .mark").html());
console.log($(".box2 .mark").html());

12.6顯示和隱藏元素
顯示 $(xxx).show()
隱藏 %(xxx).hide()
    <body>
        <div class="box">
        <button onclick="test1()">隱藏</button>
        <button onclick="test2()">顯示</button>
        </div>
        
        <div class='box'>
            <img class='thumb' src="img/微信圖片_20181229161713.png"/>
        </div>
    </body>
    <script>
        function test1()
        {
            //其實是動態添加了 style="display:none"
            //class選擇器
            $(".thumb").hide();
        }
        function test2()
        {
            $('.thumb').show();
        }
    </script>

淡入淡出操做
淡入$(xxx).fadeIn()
淡出$(xxx).fadeOut()

"$('.mask',this).fadeIn()"
在這個父元素下選擇.mask子元素.

        <style>
            /* 頭像框 */
            .thumb {
                position: relative;
                width: 150px;
                height: 150px;
            }

            /* 頭像框  / 圖像 */
            .thumb img
            {
                width: 100%;
                height: 100%;
            }

            /* 頭像框  / 下方遮罩層 */
            .thumb .mask
            {
                display: none;
                position: absolute;
                width: 100%;
                height:30px;
                bottom: 0px;
                background-color:#fff8 ;/*半透明*/
            }

            /* 頭像框  / 下方遮罩層 / 按鈕 */
            .thumb .mask button
            {        
                width: 50%;
                height: 100%;
                box-sizing: border-box;
                background-color:#fff0 ;/*半透明*/
                border: 1px solid #aaa;
            }

            .thumb .mask button:hover{
                color: darkblue;
            }
        </style>
    </head>
    <body>
        <div class="thumb" onmouseenter="$('.mask',this).fadeIn()"
            onmouseleave="$('.mask',this).fadeOut()">
            <img src="img/微信圖片_20190108111207.jpg" />
            <div class='mask'>
                <button>上傳</button><button>刪除</button>
            </div>
        </div>
    </body>

13.1jquery事件處理
使用jqueery能夠給元素添加事件處理.
    <body>
        <button class="xxx">按鈕1</button>
        <button class="xxx">按鈕2</button>
        <button class="xxx">按鈕3</button>
    </body>
    
    <script>
        $(".xxx").click(function(){
            var je=$(this);        //this爲DOM對象,$(this)包裝爲jquery
            alert("點中了:"+je.html());
        });
    </script>

頁面加載事件
等頁面加載完成再執行:
$(document).ready(function(){
    //在此執行頁面加載完成後的初始化.
});


    <script>
        function initEventSupport()
        {
            $('.xxx').click(function(){
                var je=$(this);
                alert("按鈕爲"+je.html());
            });
        }
        //ready 也是一個事件,表示頁面完成加載.
        $(document).ready(function(){
            //頁面加載完成了,再添加事件回調
            initEventSupport();
        });
    </script>

當script寫在body前面時,dom元素尚未生存,須要這麼寫,等待頁面加載完成.

13.4    單選列表

        <style>
            .meru{
                width: 300px;
                background-color: cornflowerblue;
            }
            /*菜單面板-單項*/
            .meru .item{
                padding: 8px;
                color: #fff;
                text-align: center;
                user-select:none;  /*文字不可選中(需考慮兼容)*/
            }
            /*hover模式*/
            .meru .item:hover{
                background-color: #eee4;
                border-color:#888 ;
                border-width:1px 0px ;
                color: #444;
            }
            /*選中狀態(子選擇器.menu元素下的.selected元素)*/
            .meru .selected{
                background-color:#eee8 ;
                border-color:#888 ;
                border-width:1px 0px ;
                color:#444;
            }
        </style>
    </head>
    <body>
        <div class='meru'>
            <div class='item'>快速入門</div>
            <div class='item selected'>c++入門</div>
            <div class='item'>java入門</div>
        </div>
    </body>
    <script>
        //給每一個.item 添加事件處理
        $('.meru .item').click(function(){
            //把舊的選中項去掉選中狀態
            //注意:removeClass()參數裏不須要添加點號
            $('.meru .selected').removeClass('selected');
            
            $(this).addClass('selected');
            var str=$(this).html();
            alert("選中了"+str);
        });
    </script>

13.03
對話框:
1.平時隱藏
2.對話框顯示時,後面不能操做
3.對話框能夠關閉
        <style>
            /* 全窗口背景 : 指定 left top right bottom */
            .af-dialog{
                display: none; /* 默認隱藏 */
                position: fixed;
                z-index: 1000; /*確保遮罩住全部後面的元素 */
                left: 0px;
                top: 0px;
                right: 0px;
                bottom: 0px;
                background-color: rgba(128,128,128,0.5); /* 半透明背景色 , 除老IE以外均支持 */    
            }
            
            /* 前景: 對話框窗口 */
            .af-dialog .frame{
                position: relative;
                width:  350px; 
                min-height: 150px;
                margin: 150px auto; /* 居中顯示 */
                background-color: #fff;
                border-radius: 2px;
                border: 1px solid #ccc;
                box-shadow: 1px 1px 3px #aaa;
            }    
            
            /* 右上角的關閉按鈕, 絕對定位 */
            .af-dialog .close{
                position: absolute;
                top: 0px;
                right: 0px;
                border: 1px solid #fff;
            }    
            .af-dialog .close:hover{
                border: 1px solid #ccc;
            }
            
            /* 用戶自定義內容區 */
            .af-dialog .content {
                width: 100%;
                text-align: center;
                margin: 50px auto;
            }
        </style>
    </head>
    <body>
        <div>
            <button onclick='test1()'> 顯示對話框 </button>
        </div>
        
        <!-- 對話框定義 -->        
        <div id='mydlg' class='af-dialog'>
            <div class='frame'>                
                <img class='close' src='img/ic_close.png'>
                <div class='content'>
                    Af-Dialog 對話框演示!
                </div>
            </div>            
        </div>
        

    </body>
    
    <script>
        function test1()
        {
            showDialog("#mydlg");
        }
        
        /* 能夠傳一個 jQuery對象，也能夠傳一個字符串 */
        showDialog = function(selector)
        {
            var dlg = selector;                //這3句沒徹底理解.
            if(selector.constructor == String)         //這3句沒徹底理解.
            dlg = $(selector);                //這3句沒徹底理解.
            
            // 點擊關閉時，關閉對話框  從父窗口dlg找到.close元素
            $(".close", dlg).click(function(){
                dlg.hide(); // Closure 閉包
            });
                        
            dlg.show();
        }
        
    </script>

1.全窗口背景af-dialog
2.左上角關閉按鈕:絕對定位在右上角
3.在父元素下找子元素:$('.class',dlg)
4.添加事件處理.

編程全部圖標能夠在iconfot.cn上下載.


14.1 表單處理(文本框)
文本框<input type='text'/>
獲取值str=$('xxx').val()
設置值$(xxx).val('new value')
和html()方法相似,一個是getter 一個是setter.
    <body>
        <div>
            <button onclick="test1()">獲取值</button>
            <button onclick="test2()">設置值</button>
        </div>
        
        <div class='form' style='margin-top:10px ;'>
            <input type='text' class='username' />
        </div>
    </body>
    <script>
        //獲取文本里的值
        function test1()
        {
            var str = $('.username').val();
            alert(str);
        }
        //設置文本的值
        function test2()
        {
            $('.username').val('xxx yyy zzz');
        }
    </script>

14.2表單處理(複選框)
<input type="checkbox">  複選框

    <body>
        <div>
            <button onclick="test1()">獲取值</button>
            <button onclick="test2()">設置值</button>
        </div>
        
        <div class='form' style='margin-top:10px ;'>
            <input type="checkbox" class='like' onchange="userChanged()"/> 你喜歡這個課程嗎.
        </div>
    </body>
    <script>
        //獲取文本里的值
        function test1()
        {
            var like = $('.like').prop('checked');  //固定寫法返回一個boolean的值
            if(like)
                alert('是的');
            else
                alert('爲何不呢');
        }
        //設置文本的值
        function test2()
        {
            $('.like').prop('checked',true);
        }
        //事件處理
        function userChanged()
        {
            var like =$('.like').prop('checked');
            console.log("用戶改變了選擇"+like);
        }
    </script>


        //獲取文本里的值
        function onSubmit ()
        {
            // 使用子選 器 + 屬性選擇器，選擇全部的 checkbox
            var jelist = $(".form input[type='checkbox'] ");
            for(var e of jelist)
            {
                var je = $(e);
                if( je.prop('checked'))  // 判斷它是否被勾選
                {
                    var data = je.attr('data'); // attr方法能夠獲取屬性
                    console.log("選擇了: " + data);
                }
            }
        }

14.3表單的處理,下拉列表
<select class='ke'>
    <option value='chinese'>語文</option>
    <option value='math'>數學</option>
    <option value='english'>英語</option>
</select>


例:設置2個按鈕,一個獲取下拉菜單的value值.一個設置.
    <body>
        
        <div>
            <button onclick="test1()">獲取值</button>
            <button onclick="test2()">設置值</button>
        </div>
        
        <div class='form' style='margin-top: 10px;'>
            <select class='ke'>
                <option value="chinese">語文</option>
                <option value="math">數學</option>
                <option value="english">英語</option>
            </select>
            
        </div>
    </body>
    <script>
        function test1()
        {
            var ke = $('.ke').val();
            alert("你選擇了"+ ke );
        }
        function test2()
        {
            $('.ke').val('english');
        }
    </script>

表單處理
獲取選中的值:$(xxx).val()
設置選中的值:$(xxx).val('newvalue')

動態生成
<button onclick="test3()">動態添加</button>

function test3()
{
    var str="<option value='java'>Java編程</option>";
    $('.ke').append(str);
}

append方法.

15.1    認識js對象.
第一種
    <script>
        //建立一個對象,並不須要先聲明一個Student類型
        var stu = new Object();
        //直接添加屬性
        stu.id = 20190103;
        stu.name="xxx";
        stu.sex=true;
        //直接添加方法
        stu.introduce = function(){
            console.log("hi,i am"+this.name);
        };
        //調用方法
        stu.introduce();
        //能夠直接把一個Object 輸出到控制檯
        console.log(stu);
    </script>
第二種
每一個屬性以逗號隔開,最後屬性不加對象.
var stu={
    id:xxx,
    name:"xxx",
    introduce:finction(){
        console.log("xxx");
    }
}
stu.introduce();    

第三種
//{}就是一個對象
var stu={};

//javascript裏的對象,其實是個HashMap
stu['id']=20123;
stu['name']='xxx';
stu['introduce']=function(){
    console.log();
    };
//調用
stu.introduce();

第四種
function test(stu)
{
    console.log("學號:"+stu.id+",姓名:"+stu.name);
}
//括號包起來的就是一個對象.
    test({
    id:2010,
    name:'xxxx'
});

//另外一種遍歷對象裏全部屬性
for(var key in stu)
{    
    var value=stu[key];
    //jquery判斷該屬性是否是function
    if(!$.isFuncion(value))
    {
        console.log(key+":"+value);
    }
}

15.2    認識JS數組
基本寫法
var names=new Array();
names.push("a");
names.push("b");
names.push("c");
for(var i=0;i<=names.length;i++)
{
console.log(names[i]);
}

在JS中中括號[]能夠表示一個數組對象
var names =["a","b","c"];
//for循環遍歷
for(var i=0;i<=names.length;i++)
{
console.log(names[i]);
}

第三種
function Student(id,name)
{
    this.id=id;
    this.name=name;
}
var students[];
sutdents.push(new Student(2011,"a"));
sutdents.push(new Student(2012,"b"));
sutdents.push(new Student(2013,"c"));

for(var i=0;i<=names.length;i++)
{
var stu=students[i];
console.log('學號'+stu.id+"姓名"+stu.name);
}

JS裏的數組至關於Java裏的ArrayList
splice()插入元素/刪除元素
concat()合併
join()合成一個字符串
reverse()反轉
sort()排序


15.3JSON
如何將一個學生的信息傳給網站後臺.
必須把Object轉換成String類型

使用jQuery裏自帶的JSON的支持
    var stu={
    id:1234,
    name:'xxx'
    };
    //Object->String
    var jsonstr=JSON.stringify(stu);
    console.log("轉成JSON字符串:" + jsonstr);
        
    //String-> Object
    var obj =JSON.parse(jsonstr);
    console.log("轉成對象:");
    console.log(obj);


    var names={"a","b","c"};

    //Object->String
    var jsonstr=JSON.stringify(names);
    console.log("轉成JSON字符串:" + jsonstr);
        
    //String-> Object
    var arr =JSON.parse(jsonstr);
    console.log("轉成對象:");
    console.log(arr);

16.1    選擇器優化
jQuery選擇器問題:在selector寫錯時,沒有任何提示.
function doChange()
{
    var target = $('.simple');
    if(target.length==0)         //若是target的長度爲0.說明選中爲null.
        throw'錯誤的選擇器'; //javascript也能夠拋出異常對象
    target.html('xxxx');
}

另外一個解決方案
jQuery對象的length爲0,代表selector有誤.


16.2    表單優化    
    <body>
        <div class='main'>
            <div class='row'>新用戶註冊</div>
            <div class='row'>
                <label>用戶名</label><input class='username' />
            </div>
            <div class='row'>
                <label>密碼</label><input class='password' type="password"/>
            </div>
            <div class='row'>
                <label>手機</label><input class='cellphone' />
            </div>
            <div class='row'>
                <button onclick="submit()">提交</button>
            </div>
        </div>
    </body>
    <script>
        function submit()
        {
            var req={};
            req.username = $('.main .username').val().trim(); //去掉兩邊空白字符
            req.password = $('.main .password').val().trim();
            req.cellphone = $('.main .cellphone').val().trim();
            console.log('用戶提交信息:' );
            console.log(req);
        }
    </script>


使用afquery
    <script>
        
        function submit()
        {
            var f = new AfForm('.main');
            var req = f.get(); // 自動取值
            console.log("提交用戶信息: ...");
            console.log( req );
        }
        
        function init()
        {
            var data = {
                username: '邵發',
                password: '123456',
                cellphone: '13810012345',
            };
            new AfForm('.main').set(data); // 自動設值
        }
        
        init();
        
    </script>

16.3    對話框優化



17.1    子頁面加載
    function load(url)
    {
        $.get(url,t);
                    
        function t(data)
        {
            $('#con').html(data);
        }
    }


    function load(url)
    {
        $.get(url,function(data){
            $('#con').html(data);        //加載html內容,填充到#con裏面去.
        });
    }



其中$.get() 和jQuery.get()是等效的.

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script>
            function load(url)
            {
                $.get(url,function(data){
                    $('#con').html(data);        //加載html內容,填充到#con裏面去.
                });
            }
        </script>
    </head>
    <body>
        <div id='head'>
            <button onclick="load('test1.html')">1</button>
            <button onclick="load('test2.html')">2</button>
            <button onclick="load('test3.html')">3</button>
        </div>
        <div id='con'>
            <!--
                做者：offline
                時間：2019-01-10
                描述：內容區域
            -->
        </div>
    </body>

17.2 頁面刷新問題.
使用hash
解決辦法,將當前子頁面路徑記在hash裏
當頁面刷新時,取出hash,加載子頁面.
地址欄的hash即爲子頁面路徑


        // 取出全部<button>添加事件處理
        $('#head button').click(function(){
            // 取得button的page參數
            var page = $(this).attr('page');
            // 加載子頁面 （封裝到了afquery.js裏）
            Af.loadPage('#content', page); 
            // 記到地址欄的hash裏
            window.location.hash = page;
        });
        
        // 檢查地址欄
        if(location.hash != null && location.hash.length>0)
        {
            // location.hash: 示例 #home.html
            var page = location.hash.substr(1); // 去掉#號
            Af.loadPage('#content', page); 
            window.location.hash = page;
        }
        

173.子頁面JS調試

<div class='main'>
    <label> xxxx有限公司711</label>

    <p>
    地址：中國 北京市**區**街道**號 <br>
    郵編：100100 <br>
    電話：010-0000000 <br>
    </p>
    
    <div>
        <textarea class='message'></textarea>
        <button onclick='M.doSubmit()'> 提交反饋意見 </button>
    </div>
</div>

<script>
    
    var M = {};
    
    M.doSubmit = function()
    {
        var str = $('.main .message').val();
        console.log(str);
        alert('已提交!');
    }
    
    //@ sourceURL=about.js
</script>


經過最後一段//@ sourceURL=about.js 進行子頁面調試.

18.純靜態網站發佈.
沒有後臺支持,純粹用於展現的網站.
只用html,css,javascript.
1.本機測試
(1),在Hbuilder裏測試
(2)在WebServer裏測試
2,部署到公網服務器
(1)申請一臺公網服務器
(2)遠程登陸上去,把WebServer.zip拷貝上去
(3)把網站項目拷貝到webapps\ROOT\下
(4)啓動服務

cmd mstsc