前端基礎(chǔ)

印度阿三17 2019-06-07

展開全文

第十一章前端開發(fā)

第十一章前端開發(fā)

11.1 html基礎(chǔ)

瀏覽器	內(nèi)核
IE	trident
chrome	blink
火狐	gecko
Safari	webkit

PS：「瀏覽器內(nèi)核」也就是瀏覽器所采用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。

總結(jié)：渲染引擎是兼容性問題出現(xiàn)的根本原因。
首頁：index.html(64,32). Index.htm(32位)

1. 創(chuàng)建html文件

html全稱HyperText Mackeup Language，翻譯為

超文本標(biāo)記語言

，它不是一種編程語言，是一種描述性的標(biāo)記語言，用于描述超文本內(nèi)容的顯示方式。比如字體、顏色、大小等。
- 超文本：音頻，視頻，圖片稱為超文本。
- 標(biāo)記：<英文單詞或者字母>稱為標(biāo)記，一個HTML頁面都是由各種標(biāo)記組成。
作用：HTML是負(fù)責(zé)描述文檔語義的語言。
注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標(biāo)記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執(zhí)行。

2. 基本格式

webstrom：重量級html編輯器
stylesheet css文件
javascript file js文件
文件名：全英文、命名規(guī)范
標(biāo)簽也稱為標(biāo)記：雙閉合標(biāo)簽、單閉合標(biāo)簽

# ctrl   / 注釋
<!DOCTYPE html>                                 # html5的聲明。隨著版本的變化而變化
<html lang='en'>                  # 開始標(biāo)記
  <head>
    <meta charset='utf-8'>      # 元信息, charset屬性，名值對,配置網(wǎng)站信息
    <title>Title</title>                # 標(biāo)題，搜索引擎首先查找title
    <link rel='stylesheet' href='index.css'>     # 鏈接css文件 
    <script src='index.js'></script>             # 連接js文件，彈出框 
  </head>

  <body>正文</body>
</html>

css樣式定義

# 行內(nèi)嵌css，style段獨(dú)立
<style>
  body{
    backgroud-color:red;
  }
</style>

js彈出框

# js文件
var a='warning';
alert(a);

3. head標(biāo)簽(5)

meta 基本網(wǎng)站元信息標(biāo)簽
titile 網(wǎng)站的標(biāo)題
script 鏈接javascript文件：動態(tài)
link 鏈接css文件：靜態(tài)裝飾
style 直接把link文件寫進(jìn)html文件，內(nèi)嵌顏色

4. body標(biāo)簽(7)

4.1 標(biāo)題標(biāo)簽

# h1-h6
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
如果是h7，則認(rèn)為是普通文本

4.2 段落標(biāo)簽

# 段落標(biāo)記，&nbsp表示一個空格
<p>\ \ 段落</p>

4.3 超鏈接

href：鏈接的網(wǎng)址，默認(rèn)有下劃線，#top：錨點(diǎn)
tartget：默認(rèn)_self當(dāng)前頁面打開, 可以使用_blank，# 表示空連接
sytle：行內(nèi)樣式，text-decoration:none取消下劃線，color：指定字體顏色
title：懸浮顯示

<a  href='localhost' target='_self' style='text-decoration:none; color:red;' title='小圓圈'>哈哈哈</a>

<h6 id='#top'> <h6>
<a href='#top' target='_self' style='text-decoration:none; color:red;' title='小圓圈'>實(shí)現(xiàn)跳轉(zhuǎn)</a>

4.4 img標(biāo)簽

src：路徑、title：標(biāo)題
class：類
style：每個標(biāo)簽都有的行內(nèi)屬性
alt：圖片加載失敗時顯示的文本
width等比例縮放、height，改變圖片大小

<img src='路徑' alt='?；? width='200'>

其他

換行標(biāo)簽<br>
分割線<hr>
特殊字符? &copy;
<u>下劃線</u>
<strong>字體加粗</strong>
<em>斜體</em>
<i>斜體2</i>

4.5 列表標(biāo)簽

有序列表

type表示順序a，A，1，I，i，start='3'從3開始
<ol type="A" start="3">
        <li>echo</li>
        <li>dean</li>
        <li>henry</li>
</ol>

無序列表
000 白 111/222/777灰 FFF 黑
li獨(dú)占一行

type還有circle，默認(rèn)實(shí)體的circle
<ul type="square" >
  <li>python</li>
  <li>linux</li>
  <li>golong</li>
</ul>

自定義列表(常用于網(wǎng)站底端)

<dl>
  <li>python</li>
  <li>linux</li>
  <li>golong</li>
</dl>

4.6 表格

border：邊框，cellspacing：邊框之間間隙，width：等比例縮放(或設(shè)置height)

<table border="1px" cellspacing="0" width="50px">
  <tr>
    <th>id</th>
    <th>name</th>
  </tr>
  <tr>
    <td>1</td>
    <td>henry</td>
  </tr>
  <tr>
    <td>2</td>
    <td>echo</td>
  </tr>
</table>

4.7 表單

# <form action='域名:端口號' method='get/post'> </form>
# action默認(rèn)self， method默認(rèn)get
文本輸入框/密碼輸入框/表單按鈕
表單控件
# 請求的方式 get(明文，網(wǎng)址最大2k byte) / post(密碼，密文提交使用post)

# 文本輸入框
# get：明文不安全、網(wǎng)址欄顯示且內(nèi)容不能超過2k，key:value&key2:value
# post：安全，提交任意內(nèi)容
<!--form表單-->
    <form action="提交服務(wù)器地址" method="post" enctype="multipart/form-data">
        <p id="username">
            <input type="text" name="username" value="">
        </p>
        <p>  
                <!--密文顯示-->
            <input type="password" name="pwd" value="">
        </p>
        <!--單選，給每個name定一個相同的名字產(chǎn)生互斥效果-->
        <h3>單選</h3>
        <input type="radio" name="gender" checked> 男
        <input type="radio" name="gender"> 女
        <!--多選-->
        <h3>多選</h3>
        <p>
            <input type="checkbox" name="A" checked>A
            <input type="checkbox" name="B">B
            <input type="checkbox" name="C">C
        </p>
        <!--單選 多選-->
        <h3>單選 多選</h3>
        <p>
            <select name="hobby" id="" multiple>
            <option value="musics">音樂</option>
            <option value="reading"selected>閱讀</option>
            <option value="movies">電影</option>
            </select>
        </p>
        <!--時間選擇-->
        <h3>時間選擇</h3>
        <input type="datetime-local">
        <!--多行文本-->
        <p><textarea name="" cols="30" rows="10"></textarea></p>
        <!--提交表單-->
        <h3>提交表單</h3>
        <p><input type="submit" value="登錄"></p>

    </form>

Note(5)

空白折疊：換行和空格都成為一個空格
自動換行，每個標(biāo)簽都有style屬性
標(biāo)題獨(dú)占一行
% 表示空格

11.2 CSS基礎(chǔ)

1. div標(biāo)簽

盒子標(biāo)簽，divison：分割，把網(wǎng)頁分割成不同的獨(dú)立的邏輯區(qū)域
span：可以包裹文本，利用class，可以在head標(biāo)簽中定義文本格式

# 命名，id和class
<head>
  <style type='text/css'>
    #top{                 # id選擇器
      height=40px,        # 盒子高
      line-height=40px,     # 行高
      background-color:#333
      text-align:center;  # 水平居中(left,right,center)
    }
    a{
      text-decoration:none;
      color:#b0b0b0;
      font-size=14
    }
    </style>
</head>

<body>
    <div id='top'>
    <div calss='top-l'>小米頂部</div>
    <a href='#'>小米商城</a>
    <span class='sep'>|</span>
    <a href='#'>loi</a>
    <span class='sep'>|</span>
    <a href='#'>MIUI</a>
    
    <div calss='shop'>shop</div>
    <div calss='user_login'></div>   # 從右往左
  </div>
  
  <div id='nav'>導(dǎo)航</div>
  <div id='bottom'>底部</div>
</body>

.sep：類選擇器，作用：選中標(biāo)簽
div/span/table：選中所有的div/span的標(biāo)簽

2. lable標(biāo)簽

label值和input的id(唯一不重復(fù))值一樣可以點(diǎn)擊，快速定位
for屬性和表單控件的id屬性關(guān)聯(lián)

<form action=''>
  <label for='username'>用戶名</label>
  <input type='text' id='username'>
  <label for='pwd'>用戶名</label>
  <input type='text' id='pwd'>
</form>

h1標(biāo)簽只能有一個
https://www.baidu.com/s?wd=111

<form actin='https://www.baidu.com/s'>
  <input type='text' name='wd'>
  <input type='submit' value='百度一下'>
</form>

2. css(層疊樣式表)

行內(nèi)樣式

<div style='color:red;'>
    henry
</div>

<body>
  <div id='box' style='color:red;'>
    henry
  </div>
</body>

內(nèi)嵌式

在head標(biāo)簽內(nèi)部書寫sytle
<style>
/*css代碼/
</style>

<head>
  <style>
    #box{
      backgroud=greenyellow;
    }
  </style>
  <link href='css/index.css' rel='stylesheet'>
</head>

<body>
  <div id='box' style='color:red;'>
    henry
  </div>
</body>

外接式

<link href='css/index.css' rel='stylesheet'>

三種引入的優(yōu)先級：行內(nèi)>內(nèi)嵌=外接
內(nèi)嵌和外嵌要看順序，在后面的會覆蓋前面的

3. css選擇器

3.1 基礎(chǔ)選擇器

id選擇器，類選擇器，標(biāo)簽選擇器
- #id，id是唯一
- .xxx類可以重復(fù)，可設(shè)置多個

<style>
  /*類選擇器*/
  .box{
    width=200px,
    height=200px,
    backgroud-color:yellow
  }
  /*類選擇器*/
  .active{
    border-radius:200px;
    border-radius:4px;      /*圓角*/
  }
  /*id選擇器*/
  #box{
    color=red;
  }
  /*標(biāo)簽擇器*/
  div{
    border:1px solid #000;
  }
  a{
    text-decoration:none; 或
    text-decoration:underline;
  }
  
  input{
    border:none;    /*邊框線*/
    outline:none;   /*外線*/
  }
  
  #box{
    /*內(nèi)容的寬高*/
    width:200px;
    height:200px;
    backgroud:red;
     /*border到內(nèi)容的距離*/
    padding:50px;
    /*表示上下為0，左右為10*/
    padding:0 10px;
    /*上、左右、下*/
    padding:0 10 20;
    padding-left/right/top/bottom
     /*外邊距*/
    margin-lfet:30px;
    border:1px solid;
  }
</style>

<div class='box active' id='box'></div>
<div class='box'></div>
<div class='box'></div>

<form actin='https://www.baidu.com/s'>
  <input type='text' name='wd'>
  <input type='submit' value='百度一下'>
</form>

盒模型
外邊距
內(nèi)填充padding

3.2 高級選擇器

后代選擇器(256以內(nèi)，一般不超過8層)、子代選擇器(>)、組合選擇器、交集選擇器

<style>
  .box{
    width=200px;
    height=200px;
    background-color:yellow;
    /*顯示行內(nèi)*/
    display:inline;
  }
  a{
    width=100px;
    height=40px;
    backgroud-color:red;
    /*顯示塊*/
    display:block;
    /*left，right，center*/
    text-align:center;
    /*行高等于文本高，垂直居中*/
    line-height=40px;
    /*underline、overline、line-through(del標(biāo)簽)*/
    text-decoration:none;
    color:#333333;
  }
</style>

塊級標(biāo)簽：獨(dú)占一行，可設(shè)置寬高
行內(nèi)標(biāo)簽：一行顯示，不可設(shè)置寬高，盡量不要嵌套塊
input / img是行內(nèi)塊，可以設(shè)置寬高 display inline-block;
body默認(rèn)8px、p默認(rèn)16px、ul默認(rèn)有margin
塊級標(biāo)簽可以嵌套塊級和行內(nèi)標(biāo)簽
p標(biāo)簽不要嵌套div和p標(biāo)簽，可以嵌套a、img、表單控件

/*重制樣式*/
<style>
  p,ul,ol,body{
        margin=0;
    padding=0;
    }
  
  input,textarea{
    boder:none;
    outline=0;
  }
</style>

3.3 層疊性和繼承性

繼承
1. css中某些屬性有繼承性：color、text-xxx、line-height、font-xxx
2. 盒子屬性沒有繼承
3. p標(biāo)簽是一個透明色
4. 行內(nèi)1000>id100>類10>標(biāo)簽1
5. 繼承來的屬性權(quán)重為0
權(quán)重比較
1. 數(shù)選擇器的數(shù)量：id、類、標(biāo)簽，權(quán)重大的優(yōu)先級高
2. 選中標(biāo)簽的優(yōu)先級永遠(yuǎn)大于繼承來的屬性權(quán)重
3. 同是繼承來的屬性
  - 描述近的優(yōu)先級高
  - 描述的一樣近，回歸到第1條
  - !important 一般用于調(diào)試
四條線，基線、文本底線

[TOC]

11.3 CSS 浮動

內(nèi)容回顧：

1.div和span標(biāo)簽在網(wǎng)頁中的作用

div:將網(wǎng)站分割成獨(dú)立的邏輯區(qū)域 division 分割

span: 小區(qū)域標(biāo)簽,在不影響文本正常顯示的情況下，單獨(dú)設(shè)置對應(yīng)的樣式

<style>
    span.active{
        font-weight:bold;
    }
</style>
<p>
    <span class='active'>央視網(wǎng)消息</span>（新聞聯(lián)播）：向世界各地華僑華人致以誠摯問候。
</p>

2.css基礎(chǔ)選擇器和高級選擇器有哪些？

選擇器的作用：選中標(biāo)簽

基礎(chǔ)選擇器

id選擇器特定屬性的元素（標(biāo)簽）
類選擇器 class = 'active' .active 類是可以重復(fù)，并且可以設(shè)置多個
標(biāo)簽選擇器

高級選擇器

后代子子孫孫
子代只包括兒子
組合 html,body,div,p,ul....
交集 span.active

3.盒子模型的屬性有哪些？并說明屬性的含義，畫出盒子模型圖

width:內(nèi)容的寬度
height:內(nèi)容的高度
border:邊框
padding:內(nèi)邊距
margin: 外邊距

1559092607717

4.如何讓文本垂直和水平居中？

<style>
    div{
        width:200px;
        height: 60px;
        background-color: red;
        text-align:center;
        line-height: 60px;
    }
</style>
<div>
 wusir
</div>

讓行高等于盒模型的高度實(shí)現(xiàn)垂直居中

使用text-align:center；實(shí)現(xiàn)文本水平居中

5.如何清除a標(biāo)簽的下劃線？

text-decoration: none;

none;無線
underline:下劃線
overline:上劃線
line-through:刪除線

6.如何重置網(wǎng)頁樣式？

reset.css

html,body,p,ul,ol{
    margin: 0;
    padding: 0;
}
/*通配符選擇器 */
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
input,textarea{
    border: none;
    outline: none;
}

7.如何清除input和textarea標(biāo)簽的默認(rèn)邊框和外線？

8.在css中哪些屬性是可以繼承下來的？

color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing

9.如何正確比較css中的權(quán)重？

1559094861228

如果選中了標(biāo)簽
    數(shù)選擇器的數(shù)量  id  class 標(biāo)簽 誰大優(yōu)先級越高 如果一樣大，后面優(yōu)先級越大
    如果沒有選中標(biāo)簽，當(dāng)前屬性是被繼承下來，他們的權(quán)重為0，與選中的標(biāo)簽沒有可比性
    都是繼承來的，誰描述的近，就顯示誰的屬性（就近（選中的標(biāo)簽越近）原則），如果描述的一樣近，繼續(xù)數(shù)選擇器的數(shù)量。
    !important 它設(shè)置當(dāng)前屬性的權(quán)重為無限大，大不過行內(nèi)樣式的優(yōu)先級

10.塊級標(biāo)簽和行內(nèi)標(biāo)簽

塊級標(biāo)簽

1.可以設(shè)置高度，如果不設(shè)置寬度，默認(rèn)是父標(biāo)簽的100%的寬度
2.獨(dú)占一行

p
div
ul
ol
li
h1~h6
table
tr
form

行內(nèi)標(biāo)簽

1.不可以設(shè)置寬高
2.在一行內(nèi)顯示
a 
span
b
strong
em
i

行內(nèi)塊標(biāo)簽

1.可以設(shè)置寬高
2.在一行內(nèi)顯示

input
img

今日內(nèi)容：

偽類選擇器

對于a標(biāo)簽，如果想設(shè)置a標(biāo)簽的樣式，要作用于a標(biāo)簽上，對于繼承性來說，a標(biāo)簽不起作用的

“愛恨準(zhǔn)則”

LoVe HAte

/*LoVe HAte*/
/*a標(biāo)簽沒有被訪問時候設(shè)置的屬性*/
a:link{
    /*color: red;*/
}
/*a標(biāo)簽被訪問時候設(shè)置的屬性*/
a:visited{
    color:yellow;
}
/*a標(biāo)簽懸浮時設(shè)置的屬性*/
a:hover{
    color: deeppink;
}
/*a標(biāo)簽被摁住的時候設(shè)置的屬性*/
a:active{
    color: deepskyblue;
}

屬性選擇器

input[type='text']{
    background-color: red;
}
input[type='checkbox']{

}
input[type='submit']{

}

偽元素選擇器

p::first-letter{
    color: red;
    font-size: 20px;
    font-weight: bold;
}
p::before{
    content:'@';
}
/*解決浮動布局常用的一種方法*/
p::after{
    /*通過偽元素添加的內(nèi)容為行內(nèi)元素*/
    content:'$';
}

常用格式化排版

1.字體屬性

2.文本屬性

參考：https://book./details/351/

盒子模型

margin:在水平方向上不會出現(xiàn)問題，垂直方向上會出現(xiàn)塌陷問題

布局-浮動

先參考一下：https://book./details/355/

明天再詳細(xì)講浮動

今日作業(yè)：

1559107799420

11.4 CSS清除浮動定位 BFC

默寫內(nèi)容回顧：

1.偽類選擇器

a:link{} 沒有被訪問過時a標(biāo)簽的樣式
a:visited{} 訪問過后的
a:hover{} 懸浮時
a:active{} 摁住的時候

2.如何在p標(biāo)簽的后面添加''&'內(nèi)容？

<style>
    p::after{
        /*行內(nèi)元素*/
        content:'&',
        color:red;
        font-size: 20px;
    }
</style>
<p>wusir</p>

3.設(shè)置網(wǎng)頁字體使用哪個屬性，備選字體如何寫？

font-family:'宋體','楷體';

4.如何設(shè)置文字間距和英文單詞間距？

文字間距:letter-spacing
英文單詞間距:word-spacing

5.字體加粗使用哪個屬性，它的取值有哪些？

font-weight:lighter| normal | bold |bolder| 100~900 字體加粗
font-style:italic;/*斜體*/

6.文本修飾用哪個屬性，它的取值有哪些？

text-decoration:none| underline | overline | line-through

7.分別說明px，em,rem單位的意思

px: 絕對單位  固定不變的尺寸
em和rem :相對單位       -------> 和font-size有關(guān)
    em:相對于當(dāng)前的盒子
    rem:相對于根元素（html）

8.如何設(shè)置首行縮進(jìn)，一般使用什么單位？

em    首行縮進(jìn)text-indent: 2em;

9.文本水平排列方式是哪個屬性，它的取值有？

text-align:left | center | right | justify(僅限于英文，兩端對齊)

10.如何讓一個盒子水平居中？

盒子必須有寬度和高度，再設(shè)置margin: 0 auto;
讓文本水平居中： text-align:center;
讓文本垂直居中：line-height = height
文本垂直居中：vertical-align: middle;

11.margin在垂直方向上會出現(xiàn)什么現(xiàn)象？

外邊距合并，“塌陷”
盡量避免出現(xiàn)塌陷問題，只要設(shè)置一個方向的margin

12.如果讓兩個盒子并排在一行上顯示？

1.float浮動屬性
2.設(shè)置盒子的顯示方式 display:inline | inline-block;

13.簡單闡述一下，浮動對盒子產(chǎn)生了什么現(xiàn)象？

1.脫離標(biāo)準(zhǔn)文檔流，不在頁面上占位置 “脫標(biāo)”
2.文字環(huán)繞 設(shè)置浮動屬性的初衷
3.“貼邊” 現(xiàn)象： 給盒子設(shè)置了浮動，會找浮動盒子的邊，如果找不到浮動盒子的邊，會貼到父元素的邊，如果找到了，就會貼到浮動盒子的邊上
4.收縮效果

 有點(diǎn)像 一個塊級元素轉(zhuǎn)成行內(nèi)塊

今日內(nèi)容：

浮動

布局方案

作用：實(shí)現(xiàn)元素并排

浮動的現(xiàn)象

脫離了標(biāo)準(zhǔn)文檔流，不在頁面上占位置
貼邊現(xiàn)象
收縮效果

浮動的帶來問題（撐不起父盒子的高度）

清除浮動的方式

給父元素添加固定高度 （不靈活，后期不易維護(hù)）

應(yīng)用：萬年不變導(dǎo)航欄

內(nèi)墻法：給最后一個浮動元素的后面添加一個空的塊級標(biāo)簽，并且設(shè)置該標(biāo)簽的屬性為clear:both;
問題：冗余

偽元素清除法 推薦大家使用
.clearfix::after{
    content:'';
    display: block;
    clear: both;
    /*visibility: hidden;*/
    /*height: 0;*/
}

overflow:hidden; 常用

因?yàn)閛verflow:hidden;會形成BFC區(qū)域，形成BFC區(qū)域之后，內(nèi)部有它的布局規(guī)則
計算BFC的高度時，浮動元素也參與計算
但是小心overflow：hidden它自己的本意

定位

position:static | relative | absolute | fixed;
         靜態(tài)      相對        絕對        固定

相對定位 relative

特征：

與標(biāo)準(zhǔn)文檔流下的盒子沒有任何區(qū)別
留“坑”，【占著原來的位置】會影響頁面布局
不脫標(biāo)，在頁面上占位置

作用：

做“子絕父相”布局方案的參考

參考點(diǎn)：

以原來的盒子為參考點(diǎn)

絕對定位 absolute

參考點(diǎn)

脫標(biāo)了，在頁面上不占位置

如果單獨(dú)設(shè)置一個盒子為絕對定位，

絕對定位：脫標(biāo)
以top描述，它的參考點(diǎn)是以body的（0，0）為參考點(diǎn)
以bottom描述，它的參考點(diǎn)是以瀏覽器的左下角為參考點(diǎn)

子絕父相


子元素：絕對定位 以最近的父輩元素的左上角為參考點(diǎn)進(jìn)行定位
設(shè)置相對定位【壓蓋，有坑，保留原來的位置】，不會脫標(biāo)，不會有任何變化

特征

1.脫標(biāo)
2.壓蓋
3.子絕父相

11.5 CSS 定位層級z-index

內(nèi)容回顧默寫

1.浮動有哪些現(xiàn)象？

1.脫離標(biāo)準(zhǔn)文檔劉
2.貼邊
3.收縮
4.文字環(huán)繞

浮動帶來問題：不去計算浮動元素的高度，導(dǎo)致?lián)尾黄鸶负凶拥母叨?/p>

2.清除浮動的方式？

1.給父盒子添加固定高度
2.內(nèi)墻法：給最后一個浮動元素添加一個空的塊級標(biāo)簽，設(shè)置該標(biāo)簽的屬性為clear:both;
3.偽元素清除
 給父元素添加一個類
 .clearfix::after{
    content:'',
    display:block;
    clear:both
 }
4.overflow:hidden; BFC區(qū)域

3.overflow:hidden和overflow:scroll屬性的作用？

overflow:hidden;超出部分隱藏
overflow:scroll;出現(xiàn)滾動條

清除浮動

4.定位有哪幾種？

position: static | relative | absolute | fixed

5.相對定位的元素有哪些特征？它的參考點(diǎn)是誰？

1.給一個標(biāo)準(zhǔn)文檔流下的盒子單純的設(shè)置相對定位，與普通的盒子沒有任何區(qū)別
2.top|bottom|left|right

參考點(diǎn)：以原來的位置為參考點(diǎn)
應(yīng)用：1.微調(diào)元素 2.做“子絕父相”

6.絕對定位的元素由哪些特征？它的參考點(diǎn)？

現(xiàn)象：
    1.脫標(biāo)
    2.壓蓋現(xiàn)象
參考點(diǎn)：
是否有定位（相對定位，絕對定位，固定定位）的祖先盒子進(jìn)行定位，如果沒有定位的祖先盒子，以body為參考點(diǎn)

重要： “子絕父相”

7.闡述一下，“子絕父相”布局方案的好處

8.引用效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <!--<link rel="stylesheet" href="css/index.css">-->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #000;
            margin: 100px auto;
            position: relative;
            transition: all .2s linear; # 動畫特效
        }
        .box:hover{
             top: -2px;
             box-shadow: 0 0  20px red;   # 陰影部分
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

9.圓角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: red;
            /*border-radius: 50%;*/
            border-radius: 50px;  # 圓角
            border: 3px solid blue;
        }
         #box:hover{
             background-color: #000;
         }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

10.輪播圖左右按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            color: #fff;
        }

        ul {
            list-style: none;
        }

        #box {
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            background-color: #000;
        }

        #box ul {
            /*overflow: hidden;*/
            padding: 12px 0 0 30px;
            /*width: 500px;*/
            height: 88px;
            /*background-color: red;*/
        }

        #box ul li {
            float: left;
            width: 60px;
            height: 58px;
            /*padding-top: 30px;*/
        }

        #box ul li.active {
            width: 100px;
            height: 88px;
            background-color: green;
            position: relative;
        }

        #box ul li.active .box {
            position: absolute;
            width: 234px;
            height: 600px;
            background-color: rgba(0, 0, 0, .5);
            top: 88px;
            left: -30px;
            z-index: 80;
        }

        .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }

        .swiper {
            width: 100%;
            height: 460px;

        }

        .container {
            width: 1226px;
            position: relative;
            margin: 0 auto;
        }

        .swiper span {
            display: inline-block;
            width: 41px;
            height: 69px;
            background: url("icon-slides.png") no-repeat 0 0;
            position: absolute;
            margin-top: -34px;
            top: 50%;
            cursor: pointer;
        }

        .swiper span.prev {
            background-position: -83px 0;
            left: 234px;
        }

        .swiper span.next {
            background-position: -124px 0;
            right: 0;
        }
        .swiper span.prev:hover{
            background-position: 0 0;
        }
         .swiper span.next:hover{
            background-position: -42px 0;
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="clearfix">
        <li class="active">
            <div class="box"></div>
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
<div class="swiper">
    <div class="container">
        <img src="xmad.jpg" alt="" width="1226">
        <span class="prev"></span>
        <span class="next"></span>
    </div>
</div>
</body>
</html>

要浮動一起浮動，有浮動清除浮動，浮動帶來的好處：實(shí)現(xiàn)元素并排

今日內(nèi)容

固定定位

1.脫標(biāo)
2.固定不變
3.提高層級

參考點(diǎn)：
    以瀏覽器的左上角為參考點(diǎn)

z-index

只適用與定位的元素，z-index:auto;

z-index只應(yīng)用在定位的元素，默認(rèn)z-index:auto;
z-index取值為整數(shù)，數(shù)值越大，它的層級越高
如果元素設(shè)置了定位，沒有設(shè)置z-index，那么誰寫在最后面的，表示誰的層級越高。(與標(biāo)簽的結(jié)構(gòu)有關(guān)系)
從父現(xiàn)象。通常布局方案我們采用子絕父相，比較的是父元素的z-index值，哪個父元素的z-index值越大，表示子元素的層級越高。

background背景

/*設(shè)置背景圖*/
background-image: url("xiaohua.jpg");
background-repeat: no-repeat;
/*調(diào)整背景圖的位置*/
background-position: -164px -106px;

border

border-radius 設(shè)置圓角或者圓

陰影

box-shadow: 水平距離 垂直距離 模糊程度 陰影顏色 inset

行內(nèi)的水平和垂直居中

塊的水平和垂直居中

鏈接：https://book./details/355/#8.網(wǎng)頁中的常用問題

周末作業(yè)

1.腦圖主要

2.小米商城主要

3.預(yù)習(xí) ： https://book./details/358/

11.6 JavaScript基礎(chǔ)

預(yù)習(xí)

判斷一個變量是不是undefined，用typeof函數(shù)，typeof函數(shù)主要是返回的是字符串，主要這么幾種："number"、"string"、"boolean"、"object"、"function"、"undefined"

null==undefined   ======> true
null===undefined   ======> false

1. js的引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行內(nèi)js-->
<p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--內(nèi)嵌-->
<script type="text/javascript">
    //js代碼
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

2.遞增和遞減運(yùn)算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var a = 1; # 定義一個變量
    a   ;//a =1;
    console.log(a);
    var a = 4;
    // 先讓a的值賦值給c 再對a  
    var c = a   ;  # 先賦值，再加1，a =1
    console.log(c);//4
    console.log(a);//5*/
    var c =   a;  # 先a =1， 再賦值
    console.log(c);//5
    console.log(a);//5
</script>
</body>
</html>

3.拼接字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var name = 'wusir', age = 28;
    var str = name   '今年是'   age   '歲了，快要結(jié)婚了，娶了個黑姑娘'; #字符串拼接1
    console.log(str);
    //    es6的模板字符串 ``   
    var str2 = `${name}今年是${age}歲了，快要結(jié)婚了，娶了個黑姑娘`;  #字符串拼接2
    console.log(str2);
</script>
</body>
</html>

4.數(shù)組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr  = [1,'2','mjj'];

    //解釋器 遇到var聲明的變量 會把var聲明的變量提升到全局作用域下
    var i;
    var c;
    for(i = 0;i < arr.length;i  ){
        console.log(arr[i]);
    }
    function fn(){
        var d = 4;
    }

    // console.log(i,c);
</script>
</body>
</html>

5.流程控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var score = 100;
    if(score > 80){
       console.log('可以吃雞了');
    }else if(){
        console.log('在家呆著');
    }else if{

    }else if{}
    var weather = prompt('請輸入今天的天氣');
    switch (weather) {                 # switch： 把輸入的值和case的值對比
        case '晴天':
            console.log('可以去打籃球');
            break;
        case '下雨':
            console.log('可以睡覺');
            break;
        default:
            console.log('學(xué)習(xí)');
            break;
    }

    //    == ===
    var a = 2;
    var b = '2';
    console.log(a == b);//比較的是值
    console.log(a === b); //比較是值和數(shù)據(jù)類型
</script>
</body>
</html>

6.循環(huán)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var arr = [8,9,0];
    //1.初始化循環(huán)變量  2.循環(huán)條件  3.更新循環(huán)變量
    for(var i = 0;i < arr.length; i  ){
        console.log(arr[i]);
    }

//    1到100之間的數(shù)
//     while

    var a = 1;
    while(a <= 100){
        console.log(a);
        a =1;
    }
</script>
</body>
</html>

7.函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    function fn() {
        switch (arguments.length) {
            case 2:
                console.log('2個參數(shù)')
                break;
            case 3:
                console.log('3個參數(shù)')
                break;
            default:
                break;
        }
    }

    fn(2, 3);
    fn(2, 3, 4)

</script>
</body>
</html>

8.對象Object【python中字典】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //1.字面量創(chuàng)建方式
    var obj = {};
    obj.name = 'mjj';
    obj.fav = function(){
        //obj
        console.log(this);
    }
    obj.fav();
   //點(diǎn)語法 set 和get
    console.log(obj.name);

    //構(gòu)造函數(shù)
    var obj2 = new Object();
    console.log(obj2);
    obj2.name = 'wusir';

    /*console.log(this);
    function  add(x,y) {
        console.log(this.name);
        console.log(x);
        console.log(y);
    }

    // console.dir(add);
    // add();
    // add.call(obj,1,2);
    add.apply(obj,[1,2]);

    (function () {
        console.log(this);
    })()*/


    class Person{
        constructor(name,age){
            //初始化
            this.name = name;
            this.age = age;
        }
        fav(){
            console.log(this.name);
        }
        showName(){

        }
    }
    var p = new Person('mjj',18);
    p.fav();
</script>
</body>
</html>

9.數(shù)組的常用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //1,判斷當(dāng)前數(shù)組是否為數(shù)組，返回值是true,則證明是數(shù)組

        var num = 123;
        var arr = ['red','green','yellow'];
        console.log(Array.isArray(arr));
        console.log(arr.toString());//red,green,yellow
        console.log(num.toString());
        console.log(typeof num.toString());
        console.log(arr.join('^'));

        console.log(arr.push('purple')); //返回了數(shù)組的最新的長度
        console.log(arr);
        console.log(arr.pop());//返回刪除的內(nèi)容
        console.log(arr);

        //往數(shù)組的第一項(xiàng)上添加內(nèi)容
        console.log(arr.unshift('gray','black'));
        console.log(arr);
        console.log(arr.shift());
        console.log(arr);

        var names = ['女神','wusir','太白'];
        // names.splice() //對數(shù)組進(jìn)行添加，刪除，替換操作
        //name.slice(1) //對數(shù)組進(jìn)行分割


        // for(var i = 0; i < names.length; i  ){
        //     names[i]
        // }
        names.forEach(function (index,item) {
            console.log(index);
            console.log(item);
        });
        function  fn(a,b) {
            //arguments.length 代指的實(shí)參的個數(shù)
            //arguments它不是一個數(shù)組，它被稱為叫偽數(shù)組
            console.log(arguments);
            for(var i = 0; i < arguments.length; i  ){
                console.log(arguments[i]);
            }
        }
        fn(2,3,4);
        console.log(fn.length);//形參的個數(shù)

        var  str = '            mjj          '


    </script>
</body>
</html>

10.日期對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var date = new Date();
    console.log(date);
    console.log(date.getDate());
    console.log(date.getMonth() 1);
    console.log(date.getFullYear());
    console.log(date.getDay());
    console.log(date.getHours());
    console.log(date.getMinutes());
    console.log(date.getSeconds());

    console.log(date.toLocaleString());
    var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
    console.log(weeks[date.getDay()]);
    var day = weeks[date.getDay()];
    document.write(`<a href="#">${day}</a>`);

    var a =  1 < 2 ? "yes": "no";
    console.log(a);

</script>
</body>
</html>

11.數(shù)字時鐘案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2 id="time"></h2>
<script>
    var timeObj = document.getElementById('time');
    console.log(time);

    function getNowTime() {
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var temp = ""   ((hour > 12) ? hour - 12 : hour);
        if (hour == 0) {
            temp = "12";
        }
        temp  = ((minute < 10) ? ":0" : ":")   minute;
        temp  = ((second < 10) ? ":0" : ":")   second;
        temp  = (hour >= 12) ? " P.M." : " A.M.";
        timeObj.innerText = temp;
    }

    setInterval(getNowTime, 20)
</script>

</body>
</html>

12.window對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var name = 'mjj';
    console.log(window);
    console.log(window.name);
</script>
</body>
</html>

13.math對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var obj = {name:'mjj'};
    function add() {
        console.log(this.name);
    }
    // add();
    // add.call(obj);
    // add.apply(obj,[]);

    //求最大值和最小值
    var values = [1,2,36,23,43,3,41];
    var max = Math.max.apply(null,values);
    console.log(max);

    var a = 1.49999999;
    console.log(Math.ceil(a));//天花板函數(shù)
    console.log(Math.floor(a))//地板函數(shù)
    console.log(Math.round(a))//四舍五入

//    隨機(jī)數(shù)
    console.log(Math.random());

//    min~  max
    //0.113131313
    function random(min,max) {
       return min Math.floor(Math.random()*(max-min))
    }

    console.log(random(100, 400));

//    rgb(237,100,10)


</script>
</body>
</html>

11.7 BOM 、DOM

bom對象 dom對象

內(nèi)容回顧

ECMAScript基礎(chǔ)語法

1.基本數(shù)據(jù)類型和引用數(shù)據(jù)類型

基本數(shù)據(jù)類型:number,string,boolean,undefined,null
引用數(shù)據(jù)類型:Array,Object,Function

2.條件判斷和循環(huán)

switch(name){
    case 'xxx':
        break;
    case 'xxx':
        break;
    default:
        break;
}

for(var i = 0; i < 10; i   ){
    
}

三元運(yùn)算
1 > 3 ? '真的' : '假的';

3.賦值運(yùn)算符，邏輯運(yùn)算符

&&  跟py的and
||   or
!    not

i  

==   比較的值的
===   比較的值和數(shù)據(jù)類型

4.字符串的常用方法

slice() 切片，有一個參數(shù)，從當(dāng)前位置切到最后，兩個參數(shù)，顧頭不顧尾
substring()
substr() 如果有兩個參數(shù)，第二個參數(shù)表示切字符串的個數(shù)

拼接字符串
concat() 返回新的字符串
 
es6的模板字符串
``  插入變量用${變量名}

//獲取索引
indexOf()
lastIndexOf()

//獲取字符
charAt()
//獲取字符的ASCII碼
charCodeAt()


//轉(zhuǎn)大寫
toUppercase()
//轉(zhuǎn)小寫
tolowercase()


typeof 校驗(yàn)當(dāng)前變量的數(shù)據(jù)類型

trim() 清除左右的空格

5.數(shù)組的常用方法

toString()
join('*')
concat()  # 數(shù)組拼接

//棧方法 后進(jìn)先出
push()  # 壓棧
pop()   # 出棧

//堆方法 先進(jìn)先出
unshift() 
shift()


splice(起始位置，刪除的個數(shù)，添加的元素)； 對數(shù)組的增加，刪除，替換
slice()
reverse()
sort()  #排序   【后面的元素，只和第一個元素對比】


//迭代方法
for
forEach() 僅能在數(shù)組對象中使用
在函數(shù)中arguments 這個對象是偽數(shù)組，不能使用這個方法，只能用for循環(huán)遍歷

6.對象

var obj = {
      name:'mjj',
      age:18
}
obj['name']
obj['fav'] = function(){}
obj.name
obj.fav = function(){}


function fn(name){
    var obj = {};
    obj[name] = 'mjj';
    return obj;

}
fn('age')

//遍歷對象
for(var key in obj){
    obj[key]
}

7.函數(shù)

1.創(chuàng)建方法
（1）普通函數(shù)
   function fn(){
       
   }
   fn();
(2)函數(shù)表達(dá)式
  var fn = function(){}
  
 (3) 自執(zhí)行函數(shù)
 ;(function(){
    this指向 一定是指向window
 })()

全局作用域下，函數(shù)作用域，自執(zhí)行函數(shù)都指向了window,函數(shù)作用域中this指向可以發(fā)生改變，可以使用call()或者apply()


var obj = {name：'mjj'};
function fn(){
    console.log(this.name);
}
fn();//是空值，因?yàn)楹瘮?shù)內(nèi)部this指向了window
fn.call(obj)//此時函數(shù)內(nèi)部的this指向了obj


作用： 解決冗余性代碼，為了封裝


構(gòu)造函數(shù)
new Object();
new Array();
new String();
new Number();


//使用構(gòu)造函數(shù)來創(chuàng)建對象
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '('   this.x   ', '   this.y   ')';
};

var p = new Point(1, 2);

//es6用class來創(chuàng)建對象
class Person{
    constructor(x,y){
        this.x = x;
        this.y = y
    }
    toString(){
        
    }
    
}
var p = new Person();

8.日期對象

var date = new Date();
date.getDate();
date.getMonth();
date.getDay();
date.getHours();
date.getMinutes();
date.getSeconds()

date.toLocaleString() 2018/08/21 21:30:23

9.Math數(shù)學(xué)對象

Math.ceil();向上取整 天花板函數(shù)
Math.floor();向下取整，地板函數(shù)
Math.round()；標(biāo)準(zhǔn)的四舍五入

隨機(jī)數(shù)
Math.random(); 獲取0到1之間的數(shù)

function random(min,max){
    return Math.floor(Math.random()*(max-min))   min;
}

10.數(shù)值和字符串轉(zhuǎn)換

1.數(shù)值轉(zhuǎn)字符串
toString();
數(shù)字 空的字符串
2.字符串轉(zhuǎn)數(shù)值
parseInt() 轉(zhuǎn)整數(shù)
parseFloat() 轉(zhuǎn)浮點(diǎn)型
Number()

var a = NaN   # not a number
isNaN(a)

Infinity 無限大的

今日內(nèi)容

BOM

Browser Object Model 瀏覽器對象模型

【bom相關(guān)的api】

1.系統(tǒng)對話框方法

alert() 警告框
confirm() 確認(rèn)框
prompt() 提交框

2.定時方法 ***

一次性任務(wù)

var timer = setTimeout(callback,2000);
clearTimeout(timer);

周期性循環(huán)

var timer = setInterval(callback,2000);  # 異步
//清除定時器 關(guān)閉
clearInterval(timer);

3.location對象的屬性和方法

DOM

獲取節(jié)點(diǎn)對象的方式

標(biāo)簽，div span p

document.getElementById();  #通過id獲取元素
document.getElementsByTagName(); # 通過標(biāo)簽名獲取與元素
document.getElementsByClassName(); # 通過類名獲取與元素

對樣式操作

樣式操作

style（）

box.style.color
box.style.backgroundColor
box.style.width
....

對屬性設(shè)置

setAttribute(name,value); # 設(shè)置屬性
getAttribute(name);

事件

onclick()  # 點(diǎn)擊時間
onmouseover()  #鼠標(biāo)經(jīng)過
onmouseout() #鼠標(biāo)離開

11.8 jQuery基礎(chǔ)一

默認(rèn) 內(nèi)容回顧

1.列出至少5個以上數(shù)組的常用方法，并說明它們的含義

2.列出數(shù)學(xué)對象Math常用的三個方法，并說明它們的含義

Math.ceil() 向上取整
Math.floor() 向下取整
Math.random() 隨機(jī)數(shù)
Math.round() 四舍五入取整

3.函數(shù)對象中，可以通過哪兩個方法改變函數(shù)內(nèi)部this的指向？

function fn(){
            console.log(this);//this指向了window
        }
        fn.call(obj);
        fn.apply(obj)

4.javascript的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型有哪些？

基本數(shù)據(jù)類型：number,string,boolean,undefined,null
引用數(shù)據(jù)類型：Array,Object,Function,Date

5.對DOM的理解

D:document 文檔
O:object 對象
M:model 模型

6.獲取節(jié)點(diǎn)對象的三種方式

 var b = document.getElementById()
      document.getElementsByTagName()
      var a = document.getElementsByClassName('active')
      b.setAttribute();

7.如何設(shè)置節(jié)點(diǎn)對象的樣式，屬性，類？

    設(shè)置樣式
    obj.style
    設(shè)置屬性
    obj.setAttribute(name,value);
    obj.getAttribute(name);
    obj.className
    obj.title

8.節(jié)點(diǎn)對象的創(chuàng)建，添加，刪除分別用什么方法？

  var op =  document.createElement('p');
  box.appendChild(op);
  box.insertBefore(newNode,oldNode)
  box.removeChild(op);

9.列出你所知道的js中的事件？

  onclick
 onmouseover
 onmouseout
 onchange 聚焦
 onselect 選中
 onsubmit
 onload

10.定時方法有哪兩個？寫出對應(yīng)的方法，并說明它們的含義

setTimeout(callback,毫秒) 一次性任務(wù)，延遲操作，異步
setInterval(callback,毫秒) 周期性循環(huán)任務(wù)  動畫 css  transtion tranform

11.設(shè)置值的操作

innerText 只設(shè)置文本
innerHTML 即設(shè)置文本，又渲染標(biāo)簽
       
針對與表單控件
inputText.value = '123';
       
<input placeholder=“請輸入密碼”>

今日內(nèi)容

1.jquery介紹

    jQuery是一個快速，小巧，功能豐富的JavaScript庫。
    它通過易于使用的API在大量瀏覽器中運(yùn)行，
    使得HTML文檔遍歷和操作，事件處理，動畫和Ajax變得更加簡單。通過多功能性和可擴(kuò)展性的結(jié)合，jQuery改變了數(shù)百萬人編寫JavaScript的方式。
    操作: 獲取節(jié)點(diǎn)元素對象，屬性操作，樣式操作，類名，節(jié)點(diǎn)的創(chuàng)建，刪除，添加，替換
    jquery核心：write less,do more
    1.1 jquery對象轉(zhuǎn)換js對象
        $('button')[0]
    1.2 js對象轉(zhuǎn)換jquery對象
        $(js對象)

2.jquery的選擇器

        - 基礎(chǔ)選擇器
        - 高級選擇器
        - 屬性選擇器
        - 基本過濾選擇器

3.jq對象和js節(jié)點(diǎn)對象轉(zhuǎn)換

$('.box')  jquery對象 偽數(shù)組

$('#box')[0]  jquery對象轉(zhuǎn)js節(jié)點(diǎn)對象

4.基本選擇器和高級選擇器

- 基礎(chǔ)選擇器
#id       $("#box")
.class   $(".box")
element  $("div")

- 高級選擇器
    后代選擇器 $("div p") 選擇p和p的子代的所有標(biāo)簽
    子代選擇器 $("div>p") 和p平級的都選
    組合選擇器 $("div,p") 
    交集選擇器 $("div.box")

5.屬性選擇器

$('input[type=submit]')     屬性選擇器

<input type="submit" value='提交'>

6.過濾選擇器和篩選方法

基本過濾選擇器：

:eq() 選擇一個 索引從0開始
:first 獲取第一個
:last 獲取最后一個
:odd  獲取奇數(shù)
:even 獲取偶數(shù)

過濾的方法：

.eq() 選擇一個 索引從0開始
.children() 獲取親兒子
.find() 獲取的后代
.parent() 獲取父級對象
.siblings() 獲取除它之外的兄弟元素

7.常用事件

8.樣式操作

    通過調(diào)用.css()方法
    如果傳入一個參數(shù)，看一下這個參數(shù)如果是一個字符串表示獲取值，如果是對象，表示設(shè)置多少屬性值，如果是兩個參數(shù)，設(shè)置單個屬性值

9.類操作

addClass()
removeClass()
toggleClass()

10.屬性操作

attr(name,value);//設(shè)置屬性
removeAttr(name);//刪除屬性

11.動畫的方法

    - 普通動畫
        show()
        hide()
        toggle()  切換【開關(guān)】
    - 卷簾門動畫
        slideDown()
        slideUp()
        slideToggle() 卷簾門切換【開關(guān)】
    - 淡入淡出效果
        fadeIn()
        fadeOut()
        fadeToggle() 淡入淡出切換
    - 自定義動畫
        .animate({params},speed,callback)  #callback回調(diào)函數(shù)

# 作用：執(zhí)行一組CSS屬性的自定義動畫。
    第一個參數(shù)表示：要執(zhí)行動畫的CSS屬性（必選）
    第二個參數(shù)表示：執(zhí)行動畫時長（可選）
    第三個參數(shù)表示：動畫執(zhí)行完后，立即執(zhí)行的回調(diào)函數(shù)（可選）

11.9 jQuery 基礎(chǔ)二

1.對屬性的操作

attr（） #獲取屬性（id，class），設(shè)置屬性（id，class）
removeAttr() #移除屬性

2.文檔的操作

3.事件

1)鼠標(biāo)事件

<body>
   <div id="box">
      <div id="child"></div>
   </div>
   <input type="text">
   <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

   <script type="text/javascript">
      // mouseover 鼠標(biāo)穿過父級元素和子元素都會調(diào)用方法
       $('#box').mouseover(function(){
         console.log('移入進(jìn)來了');
         
         $('#child').slideDown(1000);
      })
      $('#box').mouseout(function(){
         console.log('移除了');
         
         $('#child').slideUp(1000);
      })
      
       $('#box').mouseenter(function(){
         console.log('進(jìn)來了');
         
         $('#child').stop().slideDown(1000);
      })
      $('#box').mouseleave(function(){
         console.log('離開了');
         
         $('#child').stop().slideUp(1000);
      })
      
      $('#box').hover(function(){
         $('#child').stop().slideDown(1000);
      },function(){
         $('#child').stop().slideUp(1000);
      })
      //默認(rèn)加載頁面聚焦行為
      $('input[type=text]').focus();
      $('input[type=text]').focus(function(){
         //聚焦
         console.log('聚焦了');
      })
      $('input[type=text]').blur(function(){
         //聚焦
         console.log('失去焦點(diǎn)了');
      })

      
      $('input[type=text]').keydown(function(e){
         console.log(e.keyCode);
         switch (e.keyCode){
            case 8:
               $(this).val(' ')
               break;
            default:
               break;
         }  
      })
   </script>
</body>

表單提交事件

增   刪   改   查

4.ajax（了解）

<script type="text/javascript">
            $(function(){
                // 獲取首頁的數(shù)據(jù)
                $.ajax({
                    url:'https://api./api/banner/', # 接口
                    methods:'get',
                    success:function(res){
                        console.log(res);
                        if(res.code === 0){
                            var cover = res.data[0].cover;
                            var name = res.data[0].name;
                            console.log(cover);
                            $('#box').append(`<img src=${cover} alt=${name}>`)
                        }
                    },
                    error:function(err){
                        console.log(err);
                    }
                })
            })
        </script>

5.jQuery插件

jQuery插件庫
https://www./

6.H5小拓展

H5新標(biāo)簽 在05年被廣泛使用
#音頻
<audio src="static/BEYOND - 情人.mp3" controls=""></audio>
#畫布  【做小游戲】
<canvas id="" width="" height=""></canvas>
#視頻
<video src="static/速度與激情7_bd.mp4" controls=""></video>

來源：http://www./content-4-229551.html

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：印度阿三17 > 《開發(fā)》

舉報/認(rèn)領(lǐng)

0條評論

發(fā)表

請遵守用戶評論公約

類似文章 更多

印度阿三17

關(guān)注對話

TA的最新館藏

mysql中字段空格轉(zhuǎn)換
Git提交信息規(guī)范
動物識別 python 人工智能實(shí)驗(yàn)
require.context 自動引入指定目錄下的文件、組件、redux
Flask+Vue 用戶登錄
比較器comparable 和 comparator

喜歡該文的人也喜歡更多

熱門閱讀換一換

一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

前端基礎(chǔ)

第十一章 前端開發(fā)

11.1 html基礎(chǔ)

1. 創(chuàng)建html文件

2. 基本格式

3. head標(biāo)簽(5)

4. body標(biāo)簽(7)

4.1 標(biāo)題標(biāo)簽

4.2 段落標(biāo)簽

4.3 超鏈接

4.4 img標(biāo)簽

4.5 列表標(biāo)簽

4.6 表格

4.7 表單

Note(5)

11.2 CSS基礎(chǔ)

1. div標(biāo)簽

2. lable標(biāo)簽

2. css(層疊樣式表)

3. css選擇器

3.1 基礎(chǔ)選擇器

3.2 高級選擇器

3.3 層疊性和繼承性

11.3 CSS 浮動

內(nèi)容回顧：

1.div和span標(biāo)簽在網(wǎng)頁中的作用

2.css基礎(chǔ)選擇器和高級選擇器有哪些？

基礎(chǔ)選擇器

高級選擇器

3.盒子模型的屬性有哪些？并說明屬性的含義，畫出盒子模型圖

4.如何讓文本垂直和水平居中？

5.如何清除a標(biāo)簽的下劃線？

6.如何重置網(wǎng)頁樣式？

7.如何清除input和textarea標(biāo)簽的默認(rèn)邊框和外線？

8.在css中哪些屬性是可以繼承下來的？

9.如何正確比較css中的權(quán)重？

10.塊級標(biāo)簽和行內(nèi)標(biāo)簽

塊級標(biāo)簽

行內(nèi)標(biāo)簽

行內(nèi)塊標(biāo)簽

今日內(nèi)容：

偽類選擇器

屬性選擇器

偽元素選擇器

常用格式化排版

1.字體屬性

2.文本屬性

盒子模型

布局-浮動

今日作業(yè)：

11.4 CSS清除浮動 定位 BFC

默寫 內(nèi)容回顧：

1.偽類選擇器

2.如何在p標(biāo)簽的后面添加''&'內(nèi)容？

3.設(shè)置網(wǎng)頁字體使用哪個屬性，備選字體如何寫？

4.如何設(shè)置文字間距和英文單詞間距？

5.字體加粗使用哪個屬性，它的取值有哪些？

6.文本修飾用哪個屬性，它的取值有哪些？

7.分別說明px，em,rem單位的意思

8.如何設(shè)置首行縮進(jìn)，一般使用什么單位？

9.文本水平排列方式是哪個屬性，它的取值有？

10.如何讓一個盒子水平居中？

11.margin在垂直方向上會出現(xiàn)什么現(xiàn)象？

12.如果讓兩個盒子并排在一行上顯示？

13.簡單闡述一下，浮動對盒子產(chǎn)生了什么現(xiàn)象？

今日內(nèi)容：

浮動

浮動的現(xiàn)象

浮動的帶來問題（撐不起父盒子的高度）

清除浮動的方式

定位

相對定位 relative

絕對定位 absolute

如果單獨(dú)設(shè)置一個盒子為絕對定位，

子絕父相

特征

11.5 CSS 定位層級z-index

內(nèi)容回顧 默寫

1.浮動有哪些現(xiàn)象？

第十一章前端開發(fā)

2.css基礎(chǔ)選擇器和高級選擇器有哪些？

3.盒子模型的屬性有哪些？并說明屬性的含義，畫出盒子模型圖

4.如何讓文本垂直和水平居中？

5.如何清除a標(biāo)簽的下劃線？

7.如何清除input和textarea標(biāo)簽的默認(rèn)邊框和外線？

8.在css中哪些屬性是可以繼承下來的？

11.4 CSS清除浮動定位 BFC

默寫內(nèi)容回顧：

2.如何在p標(biāo)簽的后面添加''&'內(nèi)容？

3.設(shè)置網(wǎng)頁字體使用哪個屬性，備選字體如何寫？

4.如何設(shè)置文字間距和英文單詞間距？

5.字體加粗使用哪個屬性，它的取值有哪些？

8.如何設(shè)置首行縮進(jìn)，一般使用什么單位？

9.文本水平排列方式是哪個屬性，它的取值有？

10.如何讓一個盒子水平居中？

11.margin在垂直方向上會出現(xiàn)什么現(xiàn)象？

12.如果讓兩個盒子并排在一行上顯示？

13.簡單闡述一下，浮動對盒子產(chǎn)生了什么現(xiàn)象？

內(nèi)容回顧默寫

1.浮動有哪些現(xiàn)象？

3.overflow:hidden和overflow:scroll屬性的作用？

5.相對定位的元素有哪些特征？它的參考點(diǎn)是誰？

6.絕對定位的元素由哪些特征？它的參考點(diǎn)？

11.7 BOM 、DOM

3.賦值運(yùn)算符，邏輯運(yùn)算符

1.列出至少5個以上數(shù)組的常用方法，并說明它們的含義

2.列出數(shù)學(xué)對象Math常用的三個方法，并說明它們的含義

3.函數(shù)對象中，可以通過哪兩個方法改變函數(shù)內(nèi)部this的指向？

4.javascript的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型有哪些？

7.如何設(shè)置節(jié)點(diǎn)對象的樣式，屬性，類？

8.節(jié)點(diǎn)對象的創(chuàng)建，添加，刪除分別用什么方法？

10.定時方法有哪兩個？寫出對應(yīng)的方法，并說明它們的含義