前端基礎知識學習
目錄javascript
- 第十一章 前端開發
- 11.1 html基礎
- 11.2 CSS基礎
- 11.3 CSS 浮動
- 11.4 CSS清除浮動+定位+BFC
- 11.5 CSS 定位層級z-index
- 11.6 JavaScript基礎
- 11.7 BOM 、DOM
- 11.8 jQuery基礎一
- 默認+內容回顧
- 1.列出至少5個以上數組的經常使用方法，並說明它們的含義
- 2.列出數學對象Math經常使用的三個方法，並說明它們的含義
- 3.函數對象中，能夠經過哪兩個方法改變函數內部this的指向？
- 4.javascript的基本數據類型和引用數據類型有哪些？
- 5.對DOM的理解
- 6.獲取節點對象的三種方式
- 7.如何設置節點對象的樣式，屬性，類？
- 8.節點對象的建立，添加，刪除分別用什麼方法？
- 9.列出你所知道的js中的事件？
- 10.定時方法有哪兩個？寫出對應的方法，並說明它們的含義
- 11.設置值的操做
- 今日內容
- 1.jquery介紹
- 2.jquery的選擇器
- 3.jq對象和js節點對象轉換
- 4.基本選擇器和高級選擇器
- 5.屬性選擇器
- 6.過濾選擇器和篩選方法
- 7.經常使用事件
- 8.樣式操做
- 9.類操做
- 10.屬性操做
- 11.動畫的方法
- 11.9 jQuery 基礎二
第十一章 前端開發
11.1 html基礎
| 瀏覽器 | 內核 |
|---|---|
| IE | trident |
| chrome | blink |
| 火狐 | gecko |
| Safari | webkit |
PS：「瀏覽器內核」也就是瀏覽器所採用的「渲染引擎」，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式信息。css
- 總結：渲染引擎是兼容性問題出現的根本緣由。
- 首頁：index.html(64,32). Index.htm(32位)
1. 建立html文件
html全稱HyperText Mackeup Language，翻譯爲html
超文本標記語言前端
，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。好比字體、顏色、大小等。html5
- 超文本：音頻，視頻，圖片稱爲超文本。
- 標記 ： <英文單詞或者字母> 稱爲 標記， 一個HTML頁面都是由各類標記組成。
做用：HTML是負責描述文檔語義的語言。java
注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。python
2. 基本格式
- webstrom：重量級html編輯器
- stylesheet css文件
- javascript file js文件
- 文件名：全英文、命名規範
- 標籤也稱爲標記：雙閉合標籤、單閉合標籤
# ctrl + / 註釋
<!DOCTYPE html> # html5的聲明。隨着版本的變化而變化
<html lang='en'> # 開始標記
<head>
<meta charset='utf-8'> # 元信息, charset屬性，名值對,配置網站信息
<title>Title</title> # 標題，搜索引擎首先查找title
<link rel='stylesheet' href='index.css'> # 連接css文件
<script src='index.js'></script> # 鏈接js文件，彈出框
</head>
<body>正文</body>
</html>
- css樣式定義
# 行內嵌css，style段獨立
<style>
body{
backgroud-color:red;
}
</style>
- js彈出框
# js文件 var a='warning'; alert(a);
3. head標籤(5)
- meta 基本網站元信息標籤
- titile 網站的標題
- script 連接javascript文件：動態
- link 連接css文件：靜態裝飾
- style 直接把link文件寫進html文件，內嵌顏色
4. body標籤(7)
4.1 標題標籤
# h1-h6 <h1>一級標題</h1> <h2>二級標題</h2> 若是是h7，則認爲是普通文本
4.2 段落標籤
# 段落標記， 表示一個空格 <p>\ \ 段落</p>
4.3 超連接
- href：連接的網址，默認有下劃線，#top：錨點
- tartget：默認_self當前頁面打開, 可使用_blank，# 表示空鏈接
- sytle：行內樣式，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='小圓圈'>實現跳轉</a>
4.4 img標籤
- src：路徑、title：標題
- class：類
- style：每一個標籤都有的行內屬性
- alt：圖片加載失敗時顯示的文本
- width等比例縮放、height，改變圖片大小
<img src='路徑' alt='校花' width='200'>
- 其餘
換行標籤<br> 分割線<hr> 特殊字符© © <u>下劃線</u> <strong>字體加粗</strong> <em>斜體</em> <i>斜體2</i>
4.5 列表標籤
- 有序列表
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獨佔一行
type還有circle，默認實體的circle <ul type="square" > <li>python</li> <li>linux</li> <li>golong</li> </ul>
- 自定義列表(經常使用於網站底端)
<dl> <li>python</li> <li>linux</li> <li>golong</li> </dl>
4.6 表格
- border：邊框，cellspacing：邊框之間間隙，width：等比例縮放(或設置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默認self， method默認get 文本輸入框/密碼輸入框/表單按鈕 表單控件 # 請求的方式 get(明文，網址最大2k byte) / post(密碼，密文提交使用post)
# 文本輸入框
# get：明文不安全、網址欄顯示且內容不能超過2k，key:value&key2:value
# post：安全，提交任意內容
<!--form表單-->
<form action="提交服務器地址" 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定一個相同的名字產生互斥效果-->
<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)
- 空白摺疊：換行和空格都成爲一個空格
- 自動換行，每一個標籤都有style屬性
- 標題獨佔一行
- % 表示空格
11.2 CSS基礎
1. div標籤
- 盒子標籤，divison：分割，把網頁分割成不一樣的獨立的邏輯區域
- span：能夠包裹文本，利用class，能夠在head標籤中定義文本格式
# 命名，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'>導航</div>
<div id='bottom'>底部</div>
</body>
- .sep：類選擇器，做用：選中標籤
- div/span/table：選中全部的div/span的標籤
2. lable標籤
- label值和input的id(惟一不重複)值同樣能夠點擊，快速定位
- for屬性和表單控件的id屬性關聯
<form action=''> <label for='username'>用戶名</label> <input type='text' id='username'> <label for='pwd'>用戶名</label> <input type='text' id='pwd'> </form>
- h1標籤只能有一個
- 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(層疊樣式表)
- 行內樣式
<div style='color:red;'>
henry
</div>
<body>
<div id='box' style='color:red;'>
henry
</div>
</body>
- 內嵌式
在head標籤內部書寫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'>
- 三種引入的優先級：行內>內嵌=外接
- 內嵌和外嵌要看順序，在後面的會覆蓋前面的
3. css選擇器
3.1 基礎選擇器
- id選擇器，類選擇器，標籤選擇器
- #id，id是惟一
- .xxx類能夠重複，可設置多個
<style>
/*類選擇器*/
.box{
width=200px,
height=200px,
backgroud-color:yellow
}
/*類選擇器*/
.active{
border-radius:200px;
border-radius:4px; /*圓角*/
}
/*id選擇器*/
#box{
color=red;
}
/*標籤擇器*/
div{
border:1px solid #000;
}
a{
text-decoration:none; 或
text-decoration:underline;
}
input{
border:none; /*邊框線*/
outline:none; /*外線*/
}
#box{
/*內容的寬高*/
width:200px;
height:200px;
backgroud:red;
/*border到內容的距離*/
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>
- 盒模型
- 外邊距
- 內填充padding
3.2 高級選擇器
- 後代選擇器(256之內，通常不超過8層)、子代選擇器(>)、組合選擇器、交集選擇器
<style>
.box{
width=200px;
height=200px;
background-color:yellow;
/*顯示行內*/
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標籤)*/
text-decoration:none;
color:#333333;
}
</style>
- 塊級標籤：獨佔一行，可設置寬高
- 行內標籤：一行顯示，不可設置寬高，儘可能不要嵌套塊
- input / img是行內塊，能夠設置寬高 display inline-block;
- body默認8px、p默認16px、ul默認有margin
- 塊級標籤能夠嵌套塊級和行內標籤
- p標籤不要嵌套div和p標籤，能夠嵌套a、img、表單控件
/*重製樣式*/
<style>
p,ul,ol,body{
margin=0;
padding=0;
}
input,textarea{
boder:none;
outline=0;
}
</style>
3.3 層疊性和繼承性
- 繼承
- css中某些屬性有繼承性：color、text-xxx、line-height、font-xxx
- 盒子屬性沒有繼承
- p標籤是一個透明色
- 行內1000>id100>類10>標籤1
- 繼承來的屬性權重爲0
- 權重比較
- 數選擇器的數量：id、類、標籤，權重大的優先級高
- 選中標籤的優先級永遠大於繼承來的屬性權重
- 同是繼承來的屬性
- 描述近的優先級高
- 描述的同樣近，迴歸到第1條
- !important 通常用於調試
- 四條線，基線、文本底線
11.3 CSS 浮動
內容回顧：
1.div和span標籤在網頁中的做用
div:將網站分割成獨立的邏輯區域 division 分割jquery
span: 小區域標籤,在不影響文本正常顯示的狀況下，單獨設置對應的樣式linux
<style>
span.active{
font-weight:bold;
}
</style>
<p>
<span class='active'>央視網消息</span>（新聞聯播）：北京人民大會堂親切會見出席第九屆世界華僑華人社團聯誼大會和中華海外聯誼會五屆一次理事大會的全體表明，表明黨中央、國務院向你們表示熱烈歡迎和衷心祝賀，向世界各地華僑華人致以誠摯問候。
</p>
2.css基礎選擇器和高級選擇器有哪些？
選擇器的做用：選中標籤es6
基礎選擇器
- id選擇器 特定屬性的元素（標籤）
- 類選擇器 class = 'active' .active 類是能夠重複，而且能夠設置多個
- 標籤選擇器
高級選擇器
- 後代 子子孫孫
- 子代 只包括兒子
- 組合 html,body,div,p,ul....
- 交集 span.active
3.盒子模型的屬性有哪些？並說明屬性的含義，畫出盒子模型圖
width:內容的寬度 height:內容的高度 border:邊框 padding:內邊距 margin: 外邊距
4.如何讓文本垂直和水平居中？
<style>
div{
width:200px;
height: 60px;
background-color: red;
text-align:center;
line-height: 60px;
}
</style>
<div>
wusir
</div>
讓行高等於盒模型的高度實現垂直居中
使用text-align:center；實現文本水平居中
5.如何清除a標籤的下劃線？
text-decoration: none; none;無線 underline:下劃線 overline:上劃線 line-through:刪除線
6.如何重置網頁樣式？
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標籤的默認邊框和外線？
8.在css中哪些屬性是能夠繼承下來的？
color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing
9.如何正確比較css中的權重？
若是選中了標籤
數選擇器的數量 id class 標籤 誰大優先級越高 若是同樣大，後面優先級越大
若是沒有選中標籤，當前屬性是被繼承下來，他們的權重爲0，與選中的標籤沒有可比性
都是繼承來的，誰描述的近，就顯示誰的屬性（就近（選中的標籤越近）原則），若是描述的同樣近，繼續數選擇器的數量。
!important 它設置當前屬性的權重爲無限大，大不過行內樣式的優先級
10.塊級標籤和行內標籤
塊級標籤
1.能夠設置高度，若是不設置寬度，默認是父標籤的100%的寬度 2.獨佔一行 p div ul ol li h1~h6 table tr form
行內標籤
1.不能夠設置寬高 2.在一行內顯示 a span b strong em i
行內塊標籤
1.能夠設置寬高 2.在一行內顯示 input img
今日內容：
僞類選擇器
對於a標籤，若是想設置a標籤的樣式，要做用於a標籤上，對於繼承性來講，a標籤不起做用的
「愛恨準則」
LoVe HAte
/*LoVe HAte*/
/*a標籤沒有被訪問時候設置的屬性*/
a:link{
/*color: red;*/
}
/*a標籤被訪問時候設置的屬性*/
a:visited{
color:yellow;
}
/*a標籤懸浮時設置的屬性*/
a:hover{
color: deeppink;
}
/*a標籤被摁住的時候設置的屬性*/
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{
/*經過僞元素添加的內容爲行內元素*/
content:'$';
}
經常使用格式化排版
1.字體屬性
2.文本屬性
參考：https://book.apeland.cn/details/351/
盒子模型
margin:在水平方向上不會出現問題，垂直方向上會出現塌陷問題
佈局-浮動
先參考一下：https://book.apeland.cn/details/355/
明天再詳細講浮動
今日做業：
11.4 CSS清除浮動+定位+BFC
默寫+內容回顧：
1.僞類選擇器
a:link{} 沒有被訪問過期a標籤的樣式
a:visited{} 訪問事後的
a:hover{} 懸浮時
a:active{} 摁住的時候
2.如何在p標籤的後面添加''&'內容？
<style>
p::after{
/*行內元素*/
content:'&',
color:red;
font-size: 20px;
}
</style>
<p>wusir</p>
3.設置網頁字體使用哪一個屬性，備選字體如何寫？
font-family:'宋體','楷體';
4.如何設置文字間距和英文單詞間距？
文字間距: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有關
em:相對於當前的盒子
rem:相對於根元素（html）
8.如何設置首行縮進，通常使用什麼單位？
em 首行縮進text-indent: 2em;
9.文本水平排列方式是哪一個屬性，它的取值有？
text-align:left | center | right | justify(僅限於英文，兩端對齊)
10.如何讓一個盒子水平居中？
盒子必須有寬度和高度，再設置margin: 0 auto; 讓文本水平居中： text-align:center; 讓文本垂直居中：line-height = height 文本垂直居中：vertical-align: middle;
11.margin在垂直方向上會出現什麼現象？
外邊距合併，「塌陷」 儘可能避免出現塌陷問題，只要設置一個方向的margin
12.若是讓兩個盒子並排在一行上顯示？
1.float浮動屬性 2.設置盒子的顯示方式 display:inline | inline-block;
13.簡單闡述一下，浮動對盒子產生了什麼現象？
1.脫離標準文檔流，不在頁面上佔位置 「脫標」 2.文字環繞 設置浮動屬性的初衷 3.「貼邊」 現象： 給盒子設置了浮動，會找浮動盒子的邊，若是找不到浮動盒子的邊，會貼到父元素的邊，若是找到了，就會貼到浮動盒子的邊上 4.收縮效果 有點像 一個塊級元素轉成行內塊
今日內容：
浮動
佈局方案
做用：實現元素並排
浮動的現象
脫離了標準文檔流，不在頁面上佔位置
貼邊現象
收縮效果
浮動的帶來問題（撐不起父盒子的高度）
清除浮動的方式
給父元素添加固定高度 （不靈活，後期不易維護）
- 應用：萬年不變導航欄
內牆法：給最後一個浮動元素的後面添加一個空的塊級標籤，而且設置該標籤的屬性爲clear:both; 問題：冗餘
僞元素清除法 推薦你們使用 .clearfix::after{ content:''; display: block; clear: both; /*visibility: hidden;*/ /*height: 0;*/ }overflow:hidden; 經常使用 由於overflow:hidden;會造成BFC區域，造成BFC區域以後，內部有它的佈局規則 計算BFC的高度時，浮動元素也參與計算 可是當心overflow：hidden它本身的本意
定位
position:static | relative | absolute | fixed;
靜態 相對 絕對 固定
相對定位 relative
特徵：
- 與標準文檔流下的盒子沒有任何區別
- 留「坑」，【佔着原來的位置】會影響頁面佈局
- 不脫標，在頁面上佔位置
做用：
作「子絕父相」佈局方案的參考
參考點：
以原來的盒子爲參考點
絕對定位 absolute
參考點
脫標了，在頁面上不佔位置
若是單獨設置一個盒子爲絕對定位，
絕對定位：脫標 以top描述，它的參考點是以body的（0，0）爲參考點 以bottom描述，它的參考點是以瀏覽器的左下角爲參考點
子絕父相
子元素：絕對定位 以最近的父輩元素的左上角爲參考點進行定位 設置相對定位【壓蓋，有坑，保留原來的位置】，不會脫標，不會有任何變化
特徵
1.脫標 2.壓蓋 3.子絕父相
11.5 CSS 定位層級z-index
內容回顧+默寫
1.浮動有哪些現象？
1.脫離標準文檔劉 2.貼邊 3.收縮 4.文字環繞
浮動帶來問題：不去計算浮動元素的高度，致使撐不起父盒子的高度
2.清除浮動的方式？
1.給父盒子添加固定高度
2.內牆法：給最後一個浮動元素添加一個空的塊級標籤，設置該標籤的屬性爲clear:both;
3.僞元素清除
給父元素添加一個類
.clearfix::after{
content:'',
display:block;
clear:both
}
4.overflow:hidden; BFC區域
3.overflow:hidden和overflow:scroll屬性的做用？
overflow:hidden;超出部分隱藏 overflow:scroll;出現滾動條 清除浮動
4.定位有哪幾種？
position: static | relative | absolute | fixed
5.相對定位的元素有哪些特徵？它的參考點是誰？
1.給一個標準文檔流下的盒子單純的設置相對定位，與普通的盒子沒有任何區別 2.top|bottom|left|right 參考點：以原來的位置爲參考點 應用：1.微調元素 2.作「子絕父相」
6.絕對定位的元素由哪些特徵？它的參考點？
現象：
1.脫標
2.壓蓋現象
參考點：
是否有定位（相對定位，絕對定位，固定定位）的祖先盒子進行定位，若是沒有定位的祖先盒子，以body爲參考點
重要： 「子絕父相」
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>
要浮動一塊兒浮動，有浮動清除浮動，浮動帶來的好處：實現元素並排
今日內容
固定定位
1.脫標
2.固定不變
3.提升層級
參考點：
以瀏覽器的左上角爲參考點
z-index
只適用與定位的元素，z-index:auto;
z-index只應用在定位的元素，默認z-index:auto; z-index取值爲整數，數值越大，它的層級越高 若是元素設置了定位，沒有設置z-index，那麼誰寫在最後面的，表示誰的層級越高。(與標籤的結構有關係) 從父現象。一般佈局方案咱們採用子絕父相，比較的是父元素的z-index值，哪一個父元素的z-index值越大，表示子元素的層級越高。
background背景
/*設置背景圖*/
background-image: url("xiaohua.jpg");
background-repeat: no-repeat;
/*調整背景圖的位置*/
background-position: -164px -106px;
border
border-radius 設置圓角或者圓
陰影
box-shadow: 水平距離 垂直距離 模糊程度 陰影顏色 inset
行內的水平和垂直居中
塊的水平和垂直居中
週末做業
1.腦圖 主要
2.小米商城 主要
3.預習 ： https://book.apeland.cn/details/358/
11.6 JavaScript基礎
預習
判斷一個變量是否是undefined，用typeof函數，typeof函數主要是返回的是字符串，主要這麼幾種："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>
<!--行內js-->
<p id="" class="" style="" onclick="console.log(2);">mjj</p>
<!--內嵌-->
<script type="text/javascript">
//js代碼
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2.遞增和遞減運算符
<!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 + '歲了，快要結婚了，娶了個黑姑娘'; #字符串拼接1
console.log(str);
// es6的模板字符串 ``
var str2 = `${name}今年是${age}歲了，快要結婚了，娶了個黑姑娘`; #字符串拼接2
console.log(str2);
</script>
</body>
</html>
4.數組
<!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('學習');
break;
}
// == ===
var a = 2;
var b = '2';
console.log(a == b);//比較的是值
console.log(a === b); //比較是值和數據類型
</script>
</body>
</html>
6.循環
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = [8,9,0];
//1.初始化循環變量 2.循環條件 3.更新循環變量
for(var i = 0;i < arr.length; i++){
console.log(arr[i]);
}
// 1到100之間的數
// while
var a = 1;
while(a <= 100){
console.log(a);
a+=1;
}
</script>
</body>
</html>
7.函數
<!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個參數')
break;
case 3:
console.log('3個參數')
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.字面量建立方式
var obj = {};
obj.name = 'mjj';
obj.fav = function(){
//obj
console.log(this);
}
obj.fav();
//點語法 set 和get
console.log(obj.name);
//構造函數
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.數組的經常使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1,判斷當前數組是否爲數組，返回值是true,則證實是數組
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')); //返回了數組的最新的長度
console.log(arr);
console.log(arr.pop());//返回刪除的內容
console.log(arr);
//往數組的第一項上添加內容
console.log(arr.unshift('gray','black'));
console.log(arr);
console.log(arr.shift());
console.log(arr);
var names = ['女神','wusir','太白'];
// names.splice() //對數組進行添加，刪除，替換操做
//name.slice(1) //對數組進行分割
// 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 代指的實參的個數
//arguments它不是一個數組，它被稱爲叫僞數組
console.log(arguments);
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
}
fn(2,3,4);
console.log(fn.length);//形參的個數
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.數字時鐘案例
<!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));//天花板函數
console.log(Math.floor(a))//地板函數
console.log(Math.round(a))//四捨五入
// 隨機數
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對象
內容回顧
ECMAScript基礎語法
1.基本數據類型和引用數據類型
基本數據類型:number,string,boolean,undefined,null 引用數據類型:Array,Object,Function
2.條件判斷和循環
switch(name){
case 'xxx':
break;
case 'xxx':
break;
default:
break;
}
for(var i = 0; i < 10; i ++){
}
三元運算
1 > 3 ? '真的' : '假的';
3.賦值運算符，邏輯運算符
&& 跟py的and || or ! not i++ == 比較的值的 === 比較的值和數據類型
4.字符串的經常使用方法
slice() 切片，有一個參數，從當前位置切到最後，兩個參數，顧頭不顧尾
substring()
substr() 若是有兩個參數，第二個參數表示切字符串的個數
拼接字符串
concat() 返回新的字符串
+
es6的模板字符串
`` 插入變量用${變量名}
//獲取索引
indexOf()
lastIndexOf()
//獲取字符
charAt()
//獲取字符的ASCII碼
charCodeAt()
//轉大寫
toUppercase()
//轉小寫
tolowercase()
typeof 校驗當前變量的數據類型
trim() 清除左右的空格
5.數組的經常使用方法
toString()
join('*')
concat() # 數組拼接
//棧方法 後進先出
push() # 壓棧
pop() # 出棧
//堆方法 先進先出
unshift()
shift()
splice(起始位置，刪除的個數，添加的元素)； 對數組的增長，刪除，替換
slice()
reverse()
sort() #排序 【後面的元素，只和第一個元素對比】
//迭代方法
for
forEach() 僅能在數組對象中使用
在函數中arguments 這個對象是僞數組，不能使用這個方法，只能用for循環遍歷
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.函數
1.建立方法
（1）普通函數
function fn(){
}
fn();
(2)函數表達式
var fn = function(){}
(3) 自執行函數
;(function(){
this指向 必定是指向window
})()
全局做用域下，函數做用域，自執行函數都指向了window,函數做用域中this指向能夠發生改變，可使用call()或者apply()
var obj = {name：'mjj'};
function fn(){
console.log(this.name);
}
fn();//是空值，由於函數內部this指向了window
fn.call(obj)//此時函數內部的this指向了obj
做用： 解決冗餘性代碼，爲了封裝
構造函數
new Object();
new Array();
new String();
new Number();
//使用構造函數來建立對象
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來建立對象
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數學對象
Math.ceil();向上取整 天花板函數
Math.floor();向下取整，地板函數
Math.round()；標準的四捨五入
隨機數
Math.random(); 獲取0到1之間的數
function random(min,max){
return Math.floor(Math.random()*(max-min)) + min;
}
10.數值和字符串轉換
1.數值轉字符串 toString(); 數字+空的字符串 2.字符串轉數值 parseInt() 轉整數 parseFloat() 轉浮點型 Number()
var a = NaN # not a number isNaN(a) Infinity 無限大的
今日內容
BOM
Browser Object Model 瀏覽器對象模型
【bom相關的api】
1.系統對話框方法
- alert() 警告框
- confirm() 確認框
- prompt() 提交框
2.定時方法 ***
一次性任務
var timer = setTimeout(callback,2000); clearTimeout(timer);
週期性循環
var timer = setInterval(callback,2000); # 異步 //清除定時器 關閉 clearInterval(timer);
3.location對象的屬性和方法
DOM
獲取節點對象的方式
標籤，div span p
document.getElementById(); #經過id獲取元素 document.getElementsByTagName(); # 經過標籤名獲取與元素 document.getElementsByClassName(); # 經過類名獲取與元素
對樣式操做
樣式操做
style（）
box.style.color box.style.backgroundColor box.style.width ....
對屬性設置
setAttribute(name,value); # 設置屬性 getAttribute(name);
事件
onclick() # 點擊時間 onmouseover() #鼠標通過 onmouseout() #鼠標離開
11.8 jQuery基礎一
默認+內容回顧
1.列出至少5個以上數組的經常使用方法，並說明它們的含義
2.列出數學對象Math經常使用的三個方法，並說明它們的含義
Math.ceil() 向上取整 Math.floor() 向下取整 Math.random() 隨機數 Math.round() 四捨五入取整
3.函數對象中，能夠經過哪兩個方法改變函數內部this的指向？
function fn(){
console.log(this);//this指向了window
}
fn.call(obj);
fn.apply(obj)
4.javascript的基本數據類型和引用數據類型有哪些？
基本數據類型：number,string,boolean,undefined,null 引用數據類型：Array,Object,Function,Date
5.對DOM的理解
D:document 文檔 O:object 對象 M:model 模型
6.獲取節點對象的三種方式
var b = document.getElementById()
document.getElementsByTagName()
var a = document.getElementsByClassName('active')
b.setAttribute();
7.如何設置節點對象的樣式，屬性，類？
設置樣式
obj.style
設置屬性
obj.setAttribute(name,value);
obj.getAttribute(name);
obj.className
obj.title
8.節點對象的建立，添加，刪除分別用什麼方法？
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.定時方法有哪兩個？寫出對應的方法，並說明它們的含義
setTimeout(callback,毫秒) 一次性任務，延遲操做，異步 setInterval(callback,毫秒) 週期性循環任務 動畫 css transtion tranform
11.設置值的操做
innerText 只設置文本
innerHTML 即設置文本，又渲染標籤
針對與表單控件
inputText.value = '123';
<input placeholder=「請輸入密碼」>
今日內容
1.jquery介紹
jQuery是一個快速，小巧，功能豐富的JavaScript庫。
它經過易於使用的API在大量瀏覽器中運行，
使得HTML文檔遍歷和操做，事件處理，動畫和Ajax變得更加簡單。經過多功能性和可擴展性的結合，jQuery改變了數百萬人編寫JavaScript的方式。
操做: 獲取節點元素對象，屬性操做，樣式操做，類名，節點的建立，刪除，添加，替換
jquery核心：write less,do more
1.1 jquery對象轉換js對象
$('button')[0]
1.2 js對象轉換jquery對象
$(js對象)
2.jquery的選擇器
- 基礎選擇器
- 高級選擇器
- 屬性選擇器
- 基本過濾選擇器
3.jq對象和js節點對象轉換
$('.box') jquery對象 僞數組
$('#box')[0] jquery對象轉js節點對象
4.基本選擇器和高級選擇器
- 基礎選擇器
#id $("#box")
.class $(".box")
element $("div")
- 高級選擇器
後代選擇器 $("div p") 選擇p和p的子代的全部標籤
子代選擇器 $("div>p") 和p平級的都選
組合選擇器 $("div,p")
交集選擇器 $("div.box")
5.屬性選擇器
$('input[type=submit]') 屬性選擇器
<input type="submit" value='提交'>
6.過濾選擇器和篩選方法
基本過濾選擇器： :eq() 選擇一個 索引從0開始 :first 獲取第一個 :last 獲取最後一個 :odd 獲取奇數 :even 獲取偶數 過濾的方法： .eq() 選擇一個 索引從0開始 .children() 獲取親兒子 .find() 獲取的後代 .parent() 獲取父級對象 .siblings() 獲取除它以外的兄弟元素
7.經常使用事件
8.樣式操做
經過調用.css()方法
若是傳入一個參數，看一下這個參數若是是一個字符串表示獲取值，若是是對象，表示設置多少屬性值，若是是兩個參數，設置單個屬性值
9.類操做
addClass() removeClass() toggleClass()
10.屬性操做
attr(name,value);//設置屬性 removeAttr(name);//刪除屬性
11.動畫的方法
- 普通動畫
show()
hide()
toggle() 切換【開關】
- 捲簾門動畫
slideDown()
slideUp()
slideToggle() 捲簾門切換【開關】
- 淡入淡出效果
fadeIn()
fadeOut()
fadeToggle() 淡入淡出切換
- 自定義動畫
.animate({params},speed,callback) #callback回調函數
# 做用：執行一組CSS屬性的自定義動畫。
第一個參數表示：要執行動畫的CSS屬性（必選）
第二個參數表示：執行動畫時長（可選）
第三個參數表示：動畫執行完後，當即執行的回調函數（可選）
11.9 jQuery 基礎二
1.對屬性的操做
attr（） #獲取屬性（id，class），設置屬性（id，class） removeAttr() #移除屬性
2.文檔的操做
3.事件
1)鼠標事件
<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 鼠標穿過父級元素和子元素都會調用方法
$('#box').mouseover(function(){
console.log('移入進來了');
$('#child').slideDown(1000);
})
$('#box').mouseout(function(){
console.log('移除了');
$('#child').slideUp(1000);
})
$('#box').mouseenter(function(){
console.log('進來了');
$('#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);
})
//默認加載頁面聚焦行爲
$('input[type=text]').focus();
$('input[type=text]').focus(function(){
//聚焦
console.log('聚焦了');
})
$('input[type=text]').blur(function(){
//聚焦
console.log('失去焦點了');
})
$('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(){
// 獲取首頁的數據
$.ajax({
url:'https://api.apeland.cn/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.jq22.com/
6.H5小拓展
H5新標籤 在05年被普遍使用 #音頻 <audio src="static/BEYOND%20-%20情人.mp3" controls=""></audio> #畫布 【作小遊戲】 <canvas id="" width="" height=""></canvas> #視頻 <video src="static/速度與激情7_bd.mp4" controls=""></video>
相關文章
- 1. 前端基礎知識學習FreeCodeCamp
- 2. #前端學習#------基礎知識
- 3. Python學習-基礎篇12 前端知識之Javascript知識
- 4. java前端基礎知識
- 5. 前端基礎知識
- 6. 前端基礎知識---HTML
- 7. 前端基礎知識2018
- 8. 前端HTML5基礎知識
- 9. Web前端基礎知識
- 10. web前端基礎知識！
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端基礎知識學習FreeCodeCamp
- 2. #前端學習#------基礎知識
- 3. Python學習-基礎篇12 前端知識之Javascript知識
- 4. java前端基礎知識
- 5. 前端基礎知識
- 6. 前端基礎知識---HTML
- 7. 前端基礎知識2018
- 8. 前端HTML5基礎知識
- 9. Web前端基礎知識
- 10. web前端基礎知識！