前端

前端

前端：任何與用戶直接打交道的操作界面都可以稱之為前端
比如:電腦界面 手機界面 平板界面

后端：后端類似于幕后操作者(一堆讓人頭皮發(fā)麻的代碼)，不直接跟用戶打交道

HTML:網(wǎng)頁的骨架 沒有任何的樣式
CSS:給骨架添加各種樣式 變得好看
JS:控制網(wǎng)頁的動態(tài)效果

前端框架:BOOTSTRAP、JQuery、Vue
提前封裝好很多操作 你只需要按照固定的語法調(diào)用即可

軟件開發(fā)架構

cs  客戶端 服務端
bs  瀏覽器 服務端
ps:bs本質也是cs

瀏覽器窗口輸入網(wǎng)址回車發(fā)生了幾件事

1 瀏覽器朝服務端發(fā)送請求
2 服務端接受請求(eg:請求百度首頁)
3 服務端返回相應的響應(eg:返回一個百度首頁)
4 瀏覽器接收響應 根據(jù)特定的規(guī)則渲染頁面展示給用戶看

瀏覽器可以充當很多服務端的客戶端(百度 騰訊視頻 優(yōu)酷視頻...)

如何做到瀏覽器能夠跟多個不同的客戶端之間進行數(shù)據(jù)交互？
1.瀏覽器能夠自動識別不同服務端做不同處理
2.制定一個統(tǒng)一的標準 如果你想要讓你寫的服務端能夠跟客戶端之間做正常的數(shù)據(jù)交互,那么你就必須要遵循一些規(guī)則

1.HTTP協(xié)議

1.HTTP協(xié)議

即超文本傳輸協(xié)議，用來規(guī)定服務端和瀏覽器之間的數(shù)據(jù)交互的格式

2.四大特性

1.基于請求響應
2.基于TCP/IP作用于應用層之上的協(xié)議
3.無狀態(tài)（不保存用戶的信息）
由于HTTP協(xié)議是無狀態(tài)的 所以后續(xù)出現(xiàn)了一些專門用來記錄用戶狀態(tài)的技術（cookie、session、token...）
4.無/短鏈接
請求來一次響應一次 之后就沒有任何鏈接和關系

? 長鏈接:雙方建立連接之后默認不斷開 websocket

3.數(shù)據(jù)格式

1.請求數(shù)據(jù)格式

請求首行(標識HTTP協(xié)議版本熟妓，當前請求方式)

請求頭(一大堆k,v鍵值對)

\r\n(不可省略)

請求體(并不是所有的請求方式都有get沒有post有 存放的是post請求提交的敏感數(shù)據(jù))

請求方式

1.get請求

朝服務端要數(shù)據(jù)
eg:輸入網(wǎng)址獲取對應的內(nèi)容
2.post請求

朝服務端提交數(shù)據(jù)
eg:用戶登陸 輸入用戶名和密碼之后 提交到服務端后端做身份校驗

url:統(tǒng)一資源定位符(大白話 網(wǎng)址)

2.響應數(shù)據(jù)格式

響應首行(標識HTTP協(xié)議版本，響應狀態(tài)碼)
響應頭(一大堆k,v鍵值對)

\r\n(不可省略)

響應體(返回給瀏覽器展示給用戶看的數(shù)據(jù))

響應狀態(tài)碼

用一串簡單的數(shù)字來表示一些復雜的狀態(tài)或者描述性信息 404:請求資源不存在

1XX:服務端已經(jīng)成功接收到了你的數(shù)據(jù)正在處理栏尚，你可以繼續(xù)提交額外的數(shù)據(jù)
2XX:服務端成功響應了你想要的數(shù)據(jù)(200 OK請求成功)
3XX:重定向(當你在訪問一個需要登陸之后才能看的頁面 你會發(fā)現(xiàn)會自動跳轉到登陸頁面)
4XX:請求錯誤
    404:請求資源不存在
    403:當前請求不合法或者不符合訪問資源的條件
5XX:服務器內(nèi)部錯誤(500)

2.HTML

html:超文本標記語言起愈，是一種用于創(chuàng)建網(wǎng)頁的標記語言

想要讓瀏覽器能夠渲染出你寫的頁面,必須遵循HTML語法

瀏覽器看到的頁面，內(nèi)部其實都是HTML代碼(所有的網(wǎng)站內(nèi)部都是HTML代碼)

服務端

import socket
server = socket.socket()
server.bind(("127.0.0.1", 8080))
server.listen(5)
while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    with open ('a.txt','rb') as f:
        conn.send(f.read())
    conn.close()

a.txt內(nèi)容

<h1>hello big baby~</h1>
<a >click me译仗！give you some color to see see抬虽！</a>
<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2159057472,1466656787&fm=26&gp=0.jpg" />

瀏覽器輸入：127.0.0.1:8080

先啟動服務端，然后在瀏覽器輸入127.0.0.1:8080纵菌，運行結果如下：

1.png

HTML就是書寫網(wǎng)頁的一套標準

# 注釋:注釋是代碼之母
<!--單行注釋-->
<!--
多行注釋1
多行注釋2
多行注釋3
-->

用注釋來劃定區(qū)域方便后續(xù)的查找
<!--導航條開始-->
導航條所有的html代碼
<!--導航條結束-->
<!--左側菜單欄開始-->
左側菜單欄的HTMl代碼
<!--左側菜單欄結束-->

1.HTML文檔結構

<html>
    <head></head>:head內(nèi)的標簽不是給用戶看的 而是定義一些配置主要是給瀏覽器看的
  <body></body>:body內(nèi)的標簽 寫什么瀏覽器就渲染什么 用戶就能看到什么
</html>

PS:文件的后綴名其實是給用戶看到的斥赋，只不過對應不同的 文件后綴名有不同的軟件來處理并添加很多功能

注意:HTML代碼是沒有格式的，可以全部寫在一行都沒有問題产艾，只不過我們習慣了縮進來表示代碼

  1. 1. <!DOCTYPE html>聲明為HTML5文檔疤剑。
2. <html>滑绒、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素隘膘，在它們之間是文檔的頭部（head）和主體（body）疑故。
3. <head>、</head>定義了HTML文檔的開頭部分弯菊。它們之間的內(nèi)容不會在瀏覽器的文檔窗口顯示纵势。包含了文檔的元（meta）數(shù)據(jù)。
4. <title>管钳、</title>定義了網(wǎng)頁標題钦铁，在瀏覽器標題欄顯示。
5. <body>、</body>之間的文本是可見的網(wǎng)頁主體內(nèi)容。

    幾個很重要的屬性：

    • id：定義標簽的唯一ID谴轮，HTML文檔樹中唯一
    • class：為html元素定義一個或多個類名（classname）(CSS樣式類名)
    • style：規(guī)定元素的行內(nèi)樣式（CSS樣式）

2.兩種打開HTML文件的方式

  • 找到文件所在的位置右鍵選擇瀏覽器打開
  • 在pycharm內(nèi)部，集成了自動調(diào)用瀏覽器的功能黎比，直接點擊即可(前提是你的電腦上安裝了對應的瀏覽器) 直接全部使用谷歌瀏覽器

3.標簽的分類1

<h1></h1>
<a ></a>
<img/>

1 雙標簽
2 單標簽(自閉和標簽)

4.head內(nèi)常用標簽

html代碼的書寫：寫標簽名,然后tab自動補全

<title>Title</title>  網(wǎng)頁標題
<style>
        h1 {
            color: greenyellow;
        }
</style>  內(nèi)部用來書寫css代碼,顏色

<script>
        alert(123)
</script>  內(nèi)部用來書寫js代碼，彈框
<script src="myjs.js"></script>  還可以引入外部js文件

<link rel="stylesheet" href="mycss.css">  引入外部css文件
html之head內(nèi)常用標簽.png

Meta標簽

Meta標簽介紹：

  • <meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞鸳玩。

  • <meta>標簽位于文檔的頭部阅虫，不包含任何內(nèi)容。

  • <meta>提供的信息是用戶不可見的不跟。

meta標簽的組成：meta標簽共有兩個屬性颓帝，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數(shù)值窝革，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能购城。

1.http-equiv屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息聊闯，以幫助正確地顯示網(wǎng)頁內(nèi)容，與之對應的屬性值為content米诉，content中的內(nèi)容其實就是各個參數(shù)的變量值菱蔬。

<!--指定文檔的編碼類型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">  
<!--2秒后跳轉到對應的網(wǎng)址，注意引號(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告訴IE以最高級模式渲染文檔(了解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name屬性: 主要用于描述網(wǎng)頁史侣，與之對應的屬性值為content拴泌，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">

<meta name="keywords" content="老男孩教育,老男孩,老男孩培訓,Python培訓,Linux培訓,網(wǎng)絡安全培訓,Go語言培訓,人工智能培訓,云計算培訓,Linux運維培訓,Python自動化運維,Python全棧開發(fā),IT培訓"> 
當你在用瀏覽器搜索的時候 只要輸入了keywords后面指定的關鍵字那么該網(wǎng)頁都有可能被百度搜索出來展示給用戶

<meta name="keyword" content="淘寶,掏寶,網(wǎng)上購物,C2C,在線交易,交易市場,網(wǎng)上交易,交易市場,網(wǎng)上買,網(wǎng)上賣,購物網(wǎng)站,團購,網(wǎng)上貿(mào)易,安全購物,電子商務,放心買,供應,買賣信息,網(wǎng)店,一口價,拍賣,網(wǎng)上開店,網(wǎng)絡購物,打折,免費開店,網(wǎng)購,頻道,店鋪">

<meta name="description" content="淘寶網(wǎng) - 亞洲較大的網(wǎng)上交易平臺惊橱，提供各類服飾蚪腐、美容、家居税朴、數(shù)碼回季、話費/點卡充值… 數(shù)億優(yōu)質商品家制，同時提供擔保交易(先收貨后付款)等安全交易保障服務，并由商家提供退貨承諾泡一、破損補寄等消費者保障服務颤殴，讓你安心享受網(wǎng)上購物樂趣！">  網(wǎng)頁的描述性信息

5.body內(nèi)常用標簽

你肉眼能夠在瀏覽器上面看到的花里胡哨的頁面鼻忠。內(nèi)部都是HTML代碼

1.基本標簽

<h1>我是h1</h1>  標題標簽 1～6級標題
<b>加粗</b>
    <i>斜體</i>
    <u>下劃線</u>
    <s>刪除線</s>
    <p>段落</p>
     <br>  換行
      <hr>  水平分割線

2.標簽的分類2

# 1 塊兒級標簽:獨占一行
        h1~h6   p div
# 2 行內(nèi)標簽:自身文本多大就占多大
        i u s b span

1.塊兒級標簽可以修改長寬 行內(nèi)標簽不可以 修改了也不會變化
2.塊兒級標簽內(nèi)部可以嵌套任意的塊兒級標簽和行內(nèi)標簽
但是p標簽雖然是塊兒級標簽 但是它只能嵌套行內(nèi)標簽 不能嵌套塊兒級標簽

總結:
只要是塊兒級標簽都可以嵌套任意的塊兒級標簽和行內(nèi)標簽,但是p標簽只能嵌套行內(nèi)標簽（HTML書寫規(guī)范）

行內(nèi)標簽不能嵌套塊兒級標簽 可以嵌套行內(nèi)標簽

3.特殊符號

&nbsp;  空格
&gt;   大于號
&lt;   小于號
&amp;  &
&yen;  ￥
&copy;  ?
商標&reg; ?

4.常用標簽

div  塊兒級標簽
span  行內(nèi)標簽

頁面的布局一般先用div和span占位之后再去調(diào)整樣式

div使用非常的頻繁
div的作用：用div來提前規(guī)定所有的區(qū)域涵但，之后往該區(qū)域內(nèi)部填寫內(nèi)容即可
普通的文本先用span標簽

5.img標簽

# 圖片標簽
<img src="" alt="">

src：存放指定的圖片路徑；
src：存放指定的url帖蔓，會向指定的網(wǎng)站發(fā)送get請求矮瘟。
alt：圖片無法成功加載時顯示的圖片描述文字。
title：鼠標懸浮在圖片上時展示的圖片信息塑娇。
height：高度
width：寬度

高度和寬度只修改一個的時候 另外一個參數(shù)會等比例縮放

若兩個都修改,則失真

6.a標簽

1.鏈接標簽
<a href=""></a>
"""
a標簽指定的網(wǎng)址未被點擊過 那么a標簽的字體顏色是藍色澈侠，點擊過為紫色
"""

href
1.放url，用戶點擊就會跳轉到該url頁面
2.放其他標簽的id值 點擊即可跳轉到對應的標簽位置

target
默認a標簽是在當前頁面完成跳轉 _self
可以修改為新建頁面跳轉 _blank

2.a標簽的錨點功能

點擊一個文本標題 頁面自動跳轉到標題對應的內(nèi)容區(qū)域

<a href="" id="d1">頂部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中間</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中間</a>
<a href="#d111">回到頂部</a>

7.標簽具有的兩個重要書寫

1.id值
類似于標簽的身份證號 在同一個html頁面上id值不能重復
2.class值
該值有點類似于面向對象里面的繼承 一個標簽可以繼承多個class值

標簽既可以有默認的書寫也可以有自定義的書寫

<p id="d1" class="c1" username="jason" password="123"></p>

8.列表標簽

  • 無序列表(較多)

    <ul>
        <li>第一項</li>
        <li>第二項</li>
        <li>第二項</li>
        <li>第二項</li>
</ul>

    默認使用實心圓點钝吮，可以指定type屬性埋涧。
    circle：空心圓點
    square：實心方塊
    none：無

  • 有序列表(了解)

    <ol type="1" start="5">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

    編號默認是數(shù)字，可以指定type屬性奇瘦。
    A：字母
    I：羅馬數(shù)字

    start屬性用于指定起始計數(shù)位置棘催。

  • 標題列表(了解)

    <dl>
    <dt>標題1</dt>
    <dd>內(nèi)容1</dd>
    <dt>標題2</dt>
    <dd>內(nèi)容2</dd>
    <dt>標題3</dt>
    <dd>內(nèi)容3</dd>
</dl>

9.表格標簽

jason 123 read
egon 123 dbj
tank 123 hecha

<table>
 <thead>
 <tr>  一個tr就表示一行
 <th>username</th>  加粗文本
 <td>username</td>  正常文本
 </tr>
 </thead>  表頭(字段信息)
 <tbody>
 <tr>
 <td>jason</td>
 <td>123</td>
 <td>read</td>
 </tr>
 </tbody>   (數(shù)據(jù)信息)
</table>
?
?
<table border="1">  加外邊寬
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行<

10.表單標簽

能夠獲取前端用戶數(shù)據(jù)(用戶輸入的、用戶選擇耳标、用戶上傳...)基于網(wǎng)絡發(fā)送給后端服務器

1.form標簽
<form action=""></form>

form標簽內(nèi)部書寫的獲取用戶的數(shù)據(jù)都會被form標簽提交到后端

action:控制數(shù)據(jù)提交的后端路徑(給哪個服務端提交數(shù)據(jù)) 1.不寫 默認就是朝當前頁面所在的url提交數(shù)據(jù) 2.寫全路徑:https://www.baidu.com 朝百度服務端提交 3.只寫路徑后綴action='/index/' 自動識別出當前服務端的ip和port拼接到前面 host:port/index

發(fā)送文件必須要修改的兩個參數(shù)

1.method :控制請求方式 1.默認是get請求 也可以攜帶數(shù)據(jù) 但是數(shù)據(jù)是直接破解在url后面的 不安全并且大小有限制 url?username=jason&password=123 2.可以修改為post請求 攜帶的數(shù)據(jù)放在請求體里面的

2.enctype :控制數(shù)據(jù)的編碼方式 默認是urlencoded 只能發(fā)送普通的文本 不能發(fā)送文件 如果你要發(fā)送文件 必須改為 form-data

 <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"></form>
2.input與label標簽

input：獲取用戶數(shù)據(jù)的(輸入 選擇 上傳...)醇坝，通過type屬性變形

<input type=''></input>

  • type可以書寫的類型

    1.text 普通文本

     <label for="d1">
      username：<input type="text" id="d1" name="username">
     </label></pre>

2.**password** 展示密文

    <label for="d2">password:</label>
      <input type="password"id="d2" name="password">

3.**date** 日期

     <p>birthday:
      <input type="date" name="birthday">
     </p>

4.**radio** 單選

默認選擇可以用**checked**(屬性名和屬性值一樣的時候就可以簡寫)

     <p>gender:
     <!--    <input type="radio" name="gender" checked="checked">male-->
      <input type="radio" name="gender" value="male" checked>male
      <input type="radio" name="gender" value="female">female
     </p>

5.**checkbox** 多選

默認選擇可以用**checked**

   <p>hobby:
     <input type="checkbox" name="hobby" value="read">checked>read
     <input type="checkbox" name="hobby" value="dance">dance
     <input type="checkbox" name="hobby" value="shopping" checked>shopping
    </p>

6.**file** 獲取文件

    <input type="file" name="myfile">
     <p>文件：
      <input type="file" multiple name="myfile">
     </p>

了解:可以加**multiple** 支持**傳多個文件**

7.**hidden**:隱藏當前input框(釣魚網(wǎng)站)

    <input type="hidden">

8.**submit** 觸發(fā)form表單**提交**動作

    <input type="submit" value="注冊">

9.**button** 什么功能都沒有 就是一個**普通的按鈕**

```

<input type="button" value="按鈕">
<button>點我</button>可以自定義各種功能

    10.**reset**  **重置**按鈕

 <input type="reset" value="重置">


**label**：給input加上對于的注釋信息

<label for="d1">第一種 直接講input框寫在label內(nèi)
username:<input type="text" id="d1">
?
</label>第二種 通過id鏈接即可 無需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">


##### 3.select標簽

select標簽 ：下拉框

默認是單選，可以加multiple成多選次坡。一個個下拉框選項是一個個的option標簽呼猪，option標簽默認選中可以加**selected**

**單選：**

<p>province
<select name="" id="">
<option value="" selected>上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>


**多選：**

<p>province
<select name="" id="">
<option value="" selected>上海</option>
<option value="" selected>北京</option>
<option value="">深圳</option>
</select>
</p>

##### 4.textarea標簽

textarea標簽:獲取大段文本內(nèi)容

<input type="submit" value="注冊">
<button>點我</button>

##### 6.所有獲取用戶輸入的標簽 都應該有name屬性

name就類似于字典的key,用戶的數(shù)據(jù)就類似于字典的value

<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>>

#### 11.驗證form表單提交數(shù)據(jù)

安裝FLASK

pip3 install FLASK

from flask import Flask, request
?
app = Flask(name)

form表單默認提交數(shù)據(jù)的方式 是get請求 數(shù)據(jù)是直接放在url后面的

http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on
@app.route('/index/', methods=['GET', 'POST']) #method指定提交方式
def index():

獲取form表單提交的非文件數(shù)據(jù)。

print(request.form)

ImmutableMultiDict([('username', 'abc'), ('password', 'abc'), ('birthday', '2020-05-01'), ('sex', 'male'), ('file', '書.txt')])

獲取文件數(shù)據(jù)

print(request.files)

ImmutableMultiDict([('file', < FileStorage: '書.txt' ('text/plain') >)])

file_obj = request.files.get('file')
print(file_obj.name) # file
file_obj.save(file_obj.name)
?
return 'OK'
?
app.run()


<!DOCTYPE html>
 <html>
 <head>
  <title></title>
 </head>
 <body>
  <form action="http://127.0.0.1:5000/index" method="post" enctype="multipart/form-data">
  username: <input id="username" type="text" name="username">
  <br>
  password: <input id="password" type="password" name="password">
  <br>
  birthday: <input id="birthday" type="date" name="birthday">
  <br>
  sex:
  <input type="radio" name="sex" value="male" checked />Male
  <input type="radio" name="sex" value="female" />Female
  <br>
  <input type="file" name="file" />
  <br>
  <input id="submitBtn" type="submit" value="提交">
  </form>
 </body>
 </html>

form表單提交文件需要注意 1.method必須是post 2.enctype="multipart/form-data" enctype類似于數(shù)據(jù)提交的編碼格式 默認是urlencoded 只能夠提交普通的文本數(shù)據(jù) formdata 就可以支持提交文件數(shù)據(jù)

 <form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">

針對用戶選擇的標簽砸琅，不需要輸入內(nèi)容宋距，但要提前給標簽添加內(nèi)容value值

 <p>gender:
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" checked value="female">女
  <input type="radio" name="gender" value="others">其他
 </p>

針對用戶輸入的標簽，加value就是默認值

<label for="d1">username:<input type="text" id="d1" name="username" value="默認值"></label>

disable 禁用 readonly只讀 當表單以post或get方式提交時症脂，設置為disable的標簽的值不會被傳遞谚赎，而設置為readonly的標簽的值會被傳遞出去。

3.css層疊樣式

層貼樣式表:就是給HTML標簽添加樣式的

1.注釋

 /*單行注釋*/
 /*
 多行注釋1
 多行注釋2
 多行注釋3
 */
 ?
 /*這是博客園首頁的css樣式文件*/
 /*頂部導航條樣式*/
 ...
 /*左側菜單欄樣式*/
 ...
 /*右側菜單欄樣式*/

2.css的語法結構

選擇器 {
  屬性1:值1;
  屬性2:值2;
  屬性3:值3;
  屬性4:值4;
 }

3.css的三種引入方式

1.style標簽內(nèi)部直接書寫

<style>
  h1  {
  color: burlywood;
  }
 </style>

2.link標簽引入外部css文件(最正規(guī)的方式 解耦合)

mycss.css文件

 h1{
  color:red;
 }

<link href="mycss.css" rel="stylesheet">

3.行內(nèi)式(一般不用)

<h1 style="color: green">老板好 要上課嗎?</h1>

4.css選擇器

1.基本選擇器

  • id選擇器 選擇id="d1"的所有元素
     #d1 {}</pre>
  • 類選擇器 選擇class="c1"的所有元素
     div {}</pre>
  • 通用選擇器 選擇所有元素诱篷。
    * {}</pre>

  !DOCTYPE html>
     <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>xiaosi</title>
      <style>
      /*id選擇器*/
      /*#d1 {  !*找到id是d1的標簽 將文本顏色變成綠黃色*!*/
      /*    color: greenyellow;*/
      /*}*/
      /*類選擇器*/
      /*.c1 {  !*找到class值里面包含c1的標簽*!*/
      /*    color: red;*/
      /*}*/
      /*元素(標簽)選擇器*/
      /*span {  !*找到所有的span標簽*!*/
      /*    color: red;*/
      /*}*/
      /*通用選擇器*/
      * {  /*將html頁面上所有的標簽全部找到*/
      color: green;
      }
      </style>
     </head>

     <body>
      <div id="d1" class="c1 c2">
      <p>div里面的p</p>
      <span>div里面的span</span>
      </div>
      <p id="d2" class="c1 c2">ppp</p>
      <span id="d3" class="c2">span111</span>
      <span id="d4" class="c3">span222</span>

#### 2.組合選擇器

<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="python" cid="n247" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> """
 在前端 我們將標簽的嵌套用親戚關系來表述層級
  <div>div
  <p>div p</p>
  <p>div p
  <span>div p span</span>
  </p>
  <span>span</span>
  <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的兒子
  p里面的span是p的兒子 是div的孫子
  div是p的父親
 """</pre>

*   后代選擇器 選擇 div 元素內(nèi)部的所有 span 元素壶唤。

div span

*   兒子選擇器 選擇父元素為 div 元素的所有 p 元素（div 元素內(nèi)部第一層的所有 p 元素）

div>span


*   毗鄰選擇器 選擇緊接在 div 元素之后（同級別，中間不能有其它標簽）的所有 p 元素

div+span


*   弟弟選擇器 選擇在 div 元素之后（同級別棕所，不一定緊接）的所有 p 元素

div~span


#### 3.屬性選擇器

以中括號 [ ] 作為標志闸盔。

1 含有某個屬性 **[username]**  選擇帶有 usernamet 屬性所有元素。

``` [username]```

2.含有某個屬性并且有某個值 **[username='jason']**  找到所有屬性名是username并且屬性值是jason的標簽

``` [username='jason']```

3.含有某個屬性并且有某個值的某個標簽**input[username='jason']** 找到所有屬性名是username并且屬性值是jason的input標簽

``` input[username='jason']```

#### 4.分組與嵌套

**分組**： 多個元素的樣式相同 琳省， 用逗號分隔的分組選擇器來統(tǒng)一設置元素樣式

/逗號表示并列關系/
div,
p,
span {
color: yellow;
}
?

d1,.c1,span {

color: orange;
}


**嵌套** 多種選擇器可以混合起來使用迎吵，比如：.c1類內(nèi)部所有p標簽設置字體顏色為紅色

.c1 p {
color: red;
}


#### 5.偽類選擇器

/* a標簽訪問前的狀態(tài) /
a:link
?
/ 鼠標懸浮態(tài) /
a:hover
?
/ 激活態(tài) 鼠標按住不松開的狀態(tài) /
a:active
?
/ 訪問后的狀態(tài) /
a:visited
?
/ input輸入框獲取焦點 */
input:focus


#### 6.偽元素選擇器

/* 第一個字符 /
p:first-leter
?
/ 通過CSS添加文本內(nèi)容躲撰，無法選中。 */
p:before {
content: "Hello";
color: red;
}
p:after {
content: "Bye";
color: red;
}


before和after通常都是用來清除浮動帶來的影響:父標簽塌陷的問題

#### 7.選擇器優(yōu)先級

1.選擇器相同 書寫順序不同  就近原則:誰離標簽更近就聽誰的  2.選擇器不同 ...  行內(nèi) > id選擇器 > 類選擇器 > 標簽選擇器  精確度越高越有效

### 5.css屬性相關(操作標簽樣式)

#### 1.寬和高

width屬性可以為元素設置寬度钓觉。

height屬性可以為元素設置高度茴肥。

塊級標簽才能設置寬度，內(nèi)聯(lián)標簽的寬度由內(nèi)容來決定荡灾。

p {
background-color: red;
height: 200px;
width: 300px;
}


#### 2.字體屬性

p {
font-family: "Times New Roman", Georgia, Serif, "宋體";
font-weight: bolder; /* 100～900瓤狐、normal、bolder批幌、inherit(繼承父元素的字體粗細) */
font-size: 24px;#字體大小

設置顏色的四種方式：

/color:red;/
/color:#ee762e;/
/color:rgb(128,23,45);/
color:rgba(128,23,45,0.9);
}

提取顏色

1.pycharm提供的提取色
2.qq或微信截圖功能


#### 3.文字屬性

p {
text-align: center; /* left, right, justify文字對齊 /
text-decoration: underline; / overline, line-through, none 文字裝飾/
text-indent: 2em; / 首行縮進2個字符 32px/
}
a {
text-decoration: none; / 去掉a標簽的下劃線础锐。 */
}


#### 4.背景屬性

div {
background-color: blue;
background-image: url("111.jpg");
background-repeat: no-repeat; /* 默認全部鋪滿repeat /
background-position: 20px 20px; / 調(diào)節(jié)背景圖片位置 /
background-position: center center; / 使背景圖片居中 /
}
/ 多個屬性名前綴相同，可以簡寫荧缘。位置不限 */
div {
background: blue url("111.jpg") no-repeat center center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

d1 {

height: 500px;
background-color: red;
}

d2 {

height: 500px;
background-color: green;
}

d3 {

height: 500px;
background-image: url("111.png");
background-attachment: fixed;
}

d4 {

height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>


#### 5.邊框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
?
p {
background-color: red;
?
border-width: 5px;
border-style: solid;
border-color: green;
?
}
div {
/border-left-width: 5px;/
/border-left-color: red;/
/border-left-style: dotted;/
?
/border-right-width: 10px;/
/border-right-color: greenyellow;/
/border-right-style: solid;/
?
/border-top-width: 15px;/
/border-top-color: deeppink;/
/border-top-style: dashed;/
?
/border-bottom-width: 10px;/
/border-bottom-color: tomato;/
/border-bottom-style: solid;/
border: 3px solid red; /三者位置可以隨意寫/
?
}

d1 {

background-color: greenyellow;
height: 400px;
width: 400px;
border-radius: 50%; /直接寫50%即可 長寬一樣就是圓 不一樣就是橢圓/
}
</style>
</head>
<body>
<p>人和人終究是不一樣的.png</p>
<div>人生自古誰無死皆警，留取丹心照汗青</div>
<div id="d1"></div>
</body>
</html>


#### 6.display屬性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/#d1 {/
/* !display: none; !隱藏標簽不展示到前端頁面并且原來的位置也不再占有了 但是還存在于文檔上!!/
/ display: inline; !將標簽設置為行內(nèi)標簽的特點!/
/}/
/#d2 {/
/ display: inline;/
/}/
/#d1 {/
/ display: block; !將標簽設置成塊兒級標簽的特點!/
/}/
/#d2 {/
/ display: block;/
/}/
/#d1 {/
/ display: inline-block;/
/}/
/#d2 {/
/ display: inline-block; !標簽即可以在一行顯示又可以設置長寬!/
/}*/
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">單純的隱藏 位置還在</div>
<div>div4</div>




?


</body>
</html>


#### 7.盒子模型

1.  外邊距 Margin  邊框外的區(qū)域，可以理解為標簽與標簽之間的距離截粗。

2.  邊框 Border  圍繞在內(nèi)邊距外的邊框信姓。

3.  內(nèi)邊距 Padding  邊框以內(nèi)內(nèi)容周圍的區(qū)域。

4.  內(nèi)容 Content  標簽實際顯示的數(shù)據(jù)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0; /上下左右全是0
/margin: 10px 20px; !* 第一個上下 第二個左右!/
/margin: 10px 20px 30px; !第一個上 第二個左右 第三個下!/
/margin: 10px 20px 30px 40px; !上 右 下 左!/
}
/p {/
/* margin-left: 0;/
/ margin-top: 0;/
/ margin-right: 0;/
/ margin-bottom: 0;/
/}*/
?

d1 {

margin-bottom: 50px;
}
?
?

d2 {

margin-top: 20px; /不疊加 只取大的/
}
?

dd {

margin: 0 auto; /只能做到標簽的水平居中/
}
p {
border: 3px solid red;
/padding-left: 10px;/
/padding-top: 20px;/
/padding-right: 20px;/
/padding-bottom: 50px;/
?
/padding: 10px;/
/padding: 10px 20px;/
/padding: 10px 20px 30px;/
/padding: 10px 20px 30px 40px;/ /規(guī)律和margin一模一樣/
}
</style>
</head>
<body>





?
<p>ppp</p>
?
</body>
</html>


#### 8.浮動

浮動使標簽脫離標準文檔流绸罗，漂浮起來并向左或向右移動意推。

只能水平方向向左或向右浮動，不能上下浮動珊蟀；  一個浮動元素會盡量向左或向右移動菊值，直到其外邊緣碰到包含框或另一個浮動框的邊框為止；  浮動元素不再是塊級元素育灸，即本身多大就占多大空間腻窒，不再占單獨一行；  周圍的元素也會重新排列磅崭，浮動元素之后的元素將圍繞它儿子，浮動元素之前的元素將不會受到影響。

#### 9.解決浮動帶來的影響

浮動帶來的影響：父標簽塌陷

解決方法：

1.自己加一個div設置高度砸喻，利用clear屬性

d4 {

clear: left; /該標簽的左邊(地面和空中)不能有浮動的元素/
}


2.**通用**的解決浮動帶來的影響方法:在寫html頁面之前 先提前寫好處理浮動帶來的影響的 css代碼

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


之后只要標簽出現(xiàn)了塌陷的問題就給該塌陷的標簽加一個clearfix屬性即可

#### 10.溢出屬性

p {
height: 100px;
width: 50px;
border: 3px solid red;
/overflow: visible; !默認就是可見 溢出還是展示!/
/overflow: hidden; !溢出部分直接隱藏!/
/overflow: scroll; !設置成上下滾動條的形式!/
/overflow: auto;/
}


#### 11.定位

*   靜態(tài)

    所有的標簽默認都是靜態(tài)的static柔逼，無法改變位置

*   相對定位(了解)

    相對于標簽原來的位置做移動relative

*   絕對定位(常用)

    相對于已經(jīng)定位過的父標簽做移動(如果沒有父標簽那么就以body為參照)

    eg:小米網(wǎng)站購物車

    當你不知道頁面其他標簽的位置和參數(shù)，只給了你一個父標簽的參數(shù)恩够，讓你基于該標簽做定位

*   固定定位(常用)

    相對于瀏覽器窗口固定在某個位置

    eg:右側小廣告

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}

d1 {

height: 100px;
width: 100px;
background-color: red;
left: 50px; /從左往右 如果是負數(shù) 方向則相反/
top: 50px; /從上往下 如果是負數(shù) 方向則相反/
/position: static; !默認是static無法修改位置!/
position: relative;
/*相對定位
標簽由static變?yōu)閞elative它的性質就從原來沒有定位的標簽變成了已經(jīng)定位過的標簽
雖然你哪怕沒有動 但是你的性質也已經(jīng)改變了
*/
}
?

d2 {

height: 100px;
width: 200px;
background-color: red;
position: relative; /已經(jīng)定位過了/
}

d3 {

height: 200px;
width: 400px;
background-color: yellowgreen;
position: absolute;
left: 200px;
top: 100px;
}
?

d4 {

position: fixed; /寫了fixed之后 定位就是依據(jù)瀏覽器窗口/
bottom: 10px;
right: 20px;
?
height: 50px;
width: 100px;
background-color: white;
border: 3px solid black;
}
</style>
</head>
<body>

?



?
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: greenyellow"></div>
<div style="height: 500px;background-color: blue"></div>
<div id="d4">回到頂部</div>
?
</body>
</html>


#### 12.驗證浮動和定位是否脫離文檔流

**不脫離文檔流**

相對定位

**脫離文檔流**

1.浮動

2.絕對定位

3.固定定位

</div>-->

?




?
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>


#### 14.z-index模態(tài)框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.cover{
position:fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color:rgba(0,0,0,0.5);
z-index: 99;
}
.modal{
background-color: white;
height:200px;
width:300px;
position: fixed;
left:50%;
top:50%;
z-index: 100;
margin-left: -150px;
margin-top: -100px;
}
</style>
</head>
<body>
<div>這是最底層的頁面內(nèi)容</div>
<div class="cover"></div>
<div class="modal">
<h1>登錄界面</h1>
<p>username：<input type="text"></p>
<p>password：<input type="text"></p>
<button>點我</button>
</div>
?
</body>
</html>


#### 15.透明度opacity

顏色和文字的透明度

rgba:只能影響顏色

opacity：可以修改顏色和字體

## 4.JavaScrip

js也是一門編程語言 它也是可以寫后端代碼的,用js一統(tǒng)天下 前后端都可以寫

ECMAScript和JavaScript的關系是卒落，前者是后者的規(guī)格羡铲，后者是前者的一種實現(xiàn)

JS版本:主要還是用的5.1和6.0

JavaScript 是腳本語言  JavaScript 是一種輕量級的編程語言蜂桶。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面后也切，可由所有的現(xiàn)代瀏覽器執(zhí)行扑媚。

JavaScript 很容易學習腰湾。

### 1.引入方式

#### 1.Script標簽內(nèi)寫代碼

<script>
// 在這里寫你的JS代碼
</script>


#### 2.引入額外的JS文件

<script src="myscript.js"></script>


### 2.語言規(guī)范

**注釋**

// 單行注釋
?
/*
多行注釋1
多行注釋2
多行注釋3
*/


**結束符**

js是以**分號**(;)作為語句的結束

### 3.變量

#### 1.變量

*   在js中 首次定義一個變量名的時候需要用關鍵字聲明  1.關鍵字var

var name='jason'


2.es6推出的新語法

let name='jason'


如果你的編輯器支持的版本是**5.1**那么**無法使用let**

如果是**6.0**則**向下兼容** var let

``` ?
 var n=10;
 for(var n=0;n<5;n++){console.log(n)}
 /0 1 2 3 4/
 n;/5/
 ?
 let n=10;
 for(let n=0;n<5;n++){console.log(n)}
 /0 1 2 3 4/
 n;/10/
 ?
 /*
 var在for循環(huán)里面定義也會影響到全局
 let在局部定義只會在局部生效
 */

  • js變量命名規(guī)范

    1.變量名只能是 （數(shù)字 字母 下劃線 $） 2.變量名命名規(guī)范(不遵循也可以) 1.js中推薦使用駝峰式命名 userName dataOfDb 2.python推薦使用下劃線的方式 user_name data_of_db 3.不能用關鍵字作為變量名

2.常量

python中沒有真正意義上的常量 默認全大寫就是表示常量

js中是有真正意義上的常量的

const pi = 3.14
  • js代碼的書寫位置 1.可以單獨開設js文件書寫 2.還可以直接在瀏覽器提供的console界面書寫 左上方的清空按鈕只是清空當前頁面，代碼還在 徹底清空需重新開設頁面

2.數(shù)據(jù)類型

js是一門面向對象的編程語言,即一切皆對象.

js/python是一門擁有動態(tài)類型

name = 'jason'
 name = 123
 name = [1,2,3,4]
 # name可以指向任意的數(shù)據(jù)類型 
 # 但是有一些語言中疆股，變量名之內(nèi)指向一種后續(xù)不能更改

1.數(shù)值類型(number)

不區(qū)分整型和浮點型费坊，就只有一種數(shù)字類型

var a=11;
 var b=11.11;
 // 查看當前數(shù)據(jù)類型
 typeof a;
 "number"
 typeof b;
 "number"
 ?
 // 特殊的 NaN:數(shù)值類型 表示的意思是“不是一個數(shù)字” NOT A NUMBER
 ?
 // 類型轉換
 parseInt()
 parseFloat()
 ?
 parseInt('12312312')
 12312312
 parseFloat('11.11')
 11.11
 parseInt('11.11')
 11
 parseInt('123sdasdajs2312dasd')
 123
 parseInt('asdasdad123sdasdajs2312dasd')
 NaN

2.字符類型(string)

 var s = 'jason' //支持單引號
 undefined
 typeof s
 "string"
 var s1 = "jason" //支持雙引號
 undefined
 typeof s1;
 "string"
 var s2 = '''egon'''  // 不支持三引號
 VM665:1 Uncaught SyntaxError: Unexpected string
 ?
 // 模版字符串(``)
 var s3 = `
 asdkajsd
 sdjkladj
 asdjlajdkl
 `
 typeof s3
 "string"
 // 模版字符串可以定義多行文本,還可以實現(xiàn)格式化字符串操作
 // 書寫${} 會自動去前面找大括號里面的變量名對應的值 如果沒有定義直接報錯
 var name = 'jason'
 var age = 18
 var sss = `
  my name is ${name} and my age is ${age}`
 sss
 "
  my name is jason and my age is 18
 "
 //沒有定義直接報錯
 var s4 = `my name is ${namemmmmm}`
 VM1140:1 Uncaught ReferenceError: namemmmmm is not defined
  at <anonymous>:1:24
 // 在寫js代碼的時候 不要去管左側箭頭的內(nèi)容
 ?
 ?
 // 字符串的拼接
 // 在python中不推薦你使用+做拼接 使用join
 // 在js中推薦直接使用+做拼接
 name + age //"jason18"

3.字符類型常用方法

方法 說明
.length 返回長度
.trim() 移除空白
.trimLeft() 移除左邊的空白
.trimRight() 移除右邊的空白
.charAt(n) 返回第n個字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根據(jù)索引獲取子序列
.slice(start, end) 切片
.toLowerCase() 小寫
.toUpperCase() 大寫
.split(delimiter, limit) 分割

記憶方法：對比python記憶

 var c=' egonDsB ';
 ?
 c.length
 9
 ?
 c.trim();//不能加括號指定去除的內(nèi)容
 "egonDsB"
 ?
 c.trimLeft();
 "egonDsB "
 ?
 c.trimRight();
 " egonDsB"
 ?
 c.charAt(5);
 "D"
 ?
 c.concat(18);//js是弱類型(內(nèi)部會自動轉換成相同的數(shù)據(jù)類型做操作)
 " egonDsB 18"
 ?
 c.indexOf('on');
 3
 ?
 c.substring(0,5);//不識別負數(shù)
 " egon"
 ?
 c.slice(3,7); //可以識別負數(shù)
 "onDs"
 ?
 c.toLocaleLowerCase();
 " egondsb "
 ?
 c.toLocaleUpperCase();
 " EGONDSB "
 ?
 c.split(' ');
 (3) ["", "egonDsB", ""]0: ""1: "egonDsB"2: ""length: 3__proto__: Array(0)
 ?
 var name = 'tank|hecha|liaomei|mengsao|...'
 ?
 name.split('|')
 (5) ["tank", "hecha", "liaomei", "mengsao", "..."]
 ?
 name.split('|',2)
 (2) ["tank", "hecha"]0: "tank"1: "hecha"length: 2__proto__: Array(0)
 name.split('|',10)  //第二個參數(shù)不是限制切割字符的個數(shù)而獲取切割之后元素的個數(shù)
 (5) ["tank", "hecha", "liaomei", "mengsao", "..."]
 ?
 l = [1,2,3,4,5,6,7]
 res = '|'.join(l)  // 直接報錯
 print(res)

4.布爾值

1.在python中布爾值是首字母大寫的 True,False 2.但是在js中布爾值是全小寫的 true,false

布爾值是false的有:

(空字符串、0旬痹、null附井、undefined、NaN)

5.null與undefined

null:表示值為空 一般都是指定或者清空一個變量時使用

name='json';
 "json"
 name=null
 null
 name
 "null"

undefined:表示聲明了一個變量 但是沒有做初始化操作(沒有給值),函數(shù)沒有指定返回值的時候,返回的也是undefined

6.對象

一切皆對象

  • 數(shù)組(類似于python里面的列表) []

    1.常用方法：

    方法 說明
    .length 數(shù)組的大小
    .push(ele) 尾部追加元素
    .pop() 獲取尾部元素
    .unshift(ele) 頭部插入元素
    .shift() 頭部移除元素
    .slice(start,end) 切片
    .reverse() 反轉
    .join(seq) 將數(shù)組元素連成字符串
    .concat(val,...) 連接數(shù)組
    .sort() 排序
    .forEach() 將數(shù)組的每個元素傳遞給回調(diào)函數(shù)
    .splice() 刪除元素两残，并向數(shù)組添加新元素永毅。
    .map() 返回一個數(shù)組元素調(diào)用函數(shù)處理后的值的新數(shù)組

var l = [11,22,33,44,55]
?
typeof l
"object"
var l1 = [11,'sdasd',11.11,true]
?
l1[1]
"sdasd"
l1[-1] # 不支持負數(shù)索引
?
?
var l = [111,222,333,444,555,666]
undefined
l.length
6
l.push(777)
7
l
(7) [111, 222, 333, 444, 555, 666, 777]
l.pop()
777
l
(6) [111, 222, 333, 444, 555, 666]
l.unshift(123)
7
l
(7) [123, 111, 222, 333, 444, 555, 666]
l.shift()
123
l.slice(0,3)
(3) [111, 222, 333]
l.reverse()
(6) [666, 555, 444, 333, 222, 111]
l.join('/pre>) # 跟python剛好相反
"666555444333222$111"
?
l.concat([111,222,333]) # extend
(9) [666, 555, 444, 333, 222, 111, 111, 222, 333]
l.sort()
(6) [111, 222, 333, 444, 555, 666]


    **2.三個比較重要的方法**：

    **forEach()**

    **語法：**

    forEach(function(currentValue, index, arr), thisValue)

    參數(shù)：

    1.function(currentValue, index, arr)

    currentValue： 必需。當前元素

    index： 可選人弓。當前元素的索引值

    arr： 可選沼死。當前元素所屬的數(shù)組對象。

    2.thisValue： 可選崔赌。傳遞給函數(shù)的值一般用 "this" 值意蛀。  如果這個參數(shù)為空， "undefined" 會傳遞給 "this" 值

var ll = [111,222,333,444,555,666]
 ll.forEach(function(value){console.log(value)},ll)
 VM2277:1 111  # 一個參數(shù)就是數(shù)組里面每一個元素對象
 VM2277:1 222
 VM2277:1 333
 VM2277:1 444
 VM2277:1 555
 VM2277:1 666
 ?
 ll.forEach(function(value,index){console.log(value,index)},ll)
 VM2346:1 111 0  # 兩個參數(shù)就是元素 + 元素索引
 VM2346:1 222 1
 VM2346:1 333 2
 VM2346:1 444 3
 VM2346:1 555 4
 VM2346:1 666 5
 undefined
 ll.forEach(function(value,index,arr){console.log(value,index,arr)},ll)  # 元素 + 元素索引 + 元素的數(shù)據(jù)來源
 VM2430:1 111 0 (6) [111, 222, 333, 444, 555, 666]
 VM2430:1 222 1 (6) [111, 222, 333, 444, 555, 666]
 VM2430:1 333 2 (6) [111, 222, 333, 444, 555, 666]
 VM2430:1 444 3 (6) [111, 222, 333, 444, 555, 666]
 VM2430:1 555 4 (6) [111, 222, 333, 444, 555, 666]
 VM2430:1 666 5 (6) [111, 222, 333, 444, 555, 666]
 undefined
 ?
 ll.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},ll)  # 最多三個
 VM2532:1 111 0 (6) [111, 222, 333, 444, 555, 666] undefined
 VM2532:1 222 1 (6) [111, 222, 333, 444, 555, 666] undefined
 VM2532:1 333 2 (6) [111, 222, 333, 444, 555, 666] undefined
 VM2532:1 444 3 (6) [111, 222, 333, 444, 555, 666] undefined
 VM2532:1 555 4 (6) [111, 222, 333, 444, 555, 666] undefined
 VM2532:1 666 5 (6) [111, 222, 333, 444, 555, 666] undefined


    **splice()**

    **語法：**

    splice(index,howmany,item1,.....,itemX)

    **參數(shù)：**

    index ： 必需健芭。規(guī)定從何處添加/刪除元素县钥。該參數(shù)是開始插入和（或）刪除的數(shù)組元素的下標，必須是數(shù)字吟榴。

    howmany： 必需魁蒜。規(guī)定應該刪除多少元素。必須是數(shù)字吩翻，但可以是 "0"兜看。如果未規(guī)定此參數(shù)，則刪除從 index 開始到原數(shù)組結尾的所有元素狭瞎。

    item1, ..., itemX： 可選细移。要添加到數(shù)組的新元素

 ll
 (6) [111, 222, 333, 444, 555, 666]
 ll.splice(0,3)  # 兩個參數(shù) 第一個是起始位置 第二個是刪除的個數(shù)
 (3) [111, 222, 333]
 ll
 (3) [444, 555, 666]
 ll.splice(0,1,777)  # 先刪除后添加
 [444]
 ll
 (3) [777, 555, 666]
 ll.splice(0,1,[111,222,333,444])
 [777]
 ll
 (3) [Array(4), 555, 666]


    ####

**map()**

**語法：**

map(function(currentValue,index,arr), thisValue)

**參數(shù)：**

function(currentValue, index,arr)

currentValue : 必須。當前元素的值

index: 可選熊锭。當期元素的索引值

arr: 可選弧轧。當期元素屬于的數(shù)組對象

thisValue : 可選。對象作為該執(zhí)行回調(diào)時使用碗殷，傳遞給函數(shù)精绎，用作 "this" 的值。如果省略了 thisValue 锌妻，"this" 的值為 "undefined"

var l1 = [11,22,33,44,55,66]
undefined
l1.map(function(value){console.log(value)},l1)
VM3115:1 11
VM3115:1 22
VM3115:1 33
VM3115:1 44
VM3115:1 55
VM3115:1 66
l1.map(function(value,index){return value2},l1)
(6) [22, 44, 66, 88, 110, 132]
l1.map(function(value,index,arr){return value2},l1)
(6) [22, 44, 66, 88, 110, 132]


#### 7.運算符

**算術運算符**

+ - * / % ++ --

var x = 10;
var res1 = x++;
var res2 = ++x;
res1 10
res2 12
++表示自增1 類似于 +=1
加號在前先加后賦值 加號在后先賦值后加


**比較運算符**

> >= < <= != == === !==

1 == “1” # true 弱等于 內(nèi)部自動轉換成相同的數(shù)據(jù)類型比較了
1 === "1" # false 強等于 內(nèi)部不做類型轉換
1 != '1' # false
1 !== '2'# true


**邏輯運算符**

python中 and or not

js中 && || !

?
5 && '5'
"5"
?
0|| 1;
1
?
!5 &&'5'
false

**賦值運算符**

= += -= *= /=



### 3.流程控制

#### 1.**if**

if判斷

var age = 28;

if(條件){條件成立之后指向的代碼塊}

if (age>18){
console.log('來啊 來啊')
}

if-else

if (age>18){
console.log('來啊 來啊')
}else{
console.log('沒錢 滾蛋')
}

if-else if else

if (age<18){
console.log("培養(yǎng)一下")
}else if(age<24){
console.log('小姐姐你好 我是你的粉絲')
}else{
console.log('你是個好人')
}

()條件,{}代碼塊


#### 2.switch語法

提前列舉好可能出現(xiàn)的條件和解決方式

var num=2;
undefined
switch(num){
case 0:
console.log('吃飯');
break;
case 2:
console.log('睡覺');
break;
case 3:
console.log('打豆豆');
break;
case 4:
console.log('唱歌');
break;
default:
console.log('條件都沒有匹配上 默認走的流程')
}
VM5995:6 睡覺


**switch中的case子句通常都會加break語句代乃，否則程序會繼續(xù)執(zhí)行后續(xù)case中的語句。**

#### 3.for

打印0-9數(shù)字

for(let i=0;i<10;i++){
console.log(i)
}

循環(huán)打印出數(shù)組里面的每一個元素

var l1 = [111,222,333,444,555,666]
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}


#### 4.while

var i = 0
while(i<100){
console.log(i)
i++;
}


#### 5.三元運算符

python中三元運算符 res = 1 if 1>2 else 3

JS中三元運算 res = 1>2?1:3

條件成立取問號(?)后面的1 不成立取冒號(:)后面的3
res = 2>5?8:10 # 10
res = 2>5?8:(8>5?666:444) # 666
"""
三元運算符不要寫的過于復雜
"""


### 4.函數(shù)

```# 在python定義函數(shù)需要用到關鍵字def
 # 在js中定義函數(shù)需要用到關鍵字function</pre>

**格式**：function 函數(shù)名(形參1,形參2,形參3...){函數(shù)體代碼}

**無參函數(shù)**

function func1(){
console.log('hello world')
}
func1()


**有參函數(shù)**

function func2(a,b){
console.log(a,b)
}
func2(1,2)# 值多值少都沒關系


**關鍵字arguments**

function func2(a,b){
console.log(arguments) # 能夠獲取到函數(shù)接受到的所有的參數(shù)
console.log(a,b)
}
?
function func2(a,b){
if(arguments.length<2){
console.log('傳少了')
}else if (arguments.length>2){
console.log('傳多了')
}else{
console.log('正常執(zhí)行')
}
}


**函數(shù)的返回值 return**

function index(){
return 666
}
function index(){
return 666,777,888,999
}
res = index();
999
res
999 # 只能拿到最后一個
?
function index(){
return [666,777,888,999]
}

js不支持解壓賦值\


**匿名函數(shù)**

function(){
console.log('哈哈哈')
}
var res = function(){
console.log('哈哈哈')
}


**箭頭函數(shù)**

主要用來處理簡單的業(yè)務邏輯 類似于python中的匿名函數(shù)

var func1 = v => v; """箭頭左邊的是形參 右邊的是返回值"""
等價于
var func1 = function(v){
return v
}
?
var func2 = (arg1,arg2) => arg1+arg2
等價于
var func1 = function(arg1,arg2){
return arg1+arg2
}


#### 函數(shù)的全局變量與局部變量

跟python查找變量的順序一致

1.

var city = "BeiJing";
undefined
function f() {
var city = "ShangHai";
function inner(){
var city = "ShenZhen";
console.log(city);
}
inner();
}
undefined
f();
VM45:5 ShenZhen

2.

var city='beijing'
undefined
function Bar(){
console.log(city);
}
undefined
function f(){
var city='shanghai';
return Bar;
}
undefined
var ret=f();
undefined
ret()
VM262:2 beijing

3.閉包

var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
ret(); #ShangHai


### 5.內(nèi)置方法/模塊

#### 1.自定義對象

JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），但是只能用字符串作為鍵搁吓。

**創(chuàng)建自定義對象**

第一種創(chuàng)建自定義對象的方式

var d={'name':'json','age':18}
undefined
typeof d
"object"
d['name']
"json"
d.name
"json"
d.age
18
?
for(let i in d){
console.log(i,d[i])
}
VM758:2 name json
VM758:2 age 18


**第二種創(chuàng)建自定義對象的方式** 需要使用關鍵字**new**

var d2=new Object()
undefined
d2.name='css'
"css"
d2['age']=18
18
d2
{name: "css", age: 18}


#### 2.Date對象

let d3=new Date()
undefined
d3
Sun May 17 2020 11:04:56 GMT+0800 (中國標準時間)
d3.toLocaleString()
"2020/5/17 上午11:04:56"
?

也支持自己手動輸入時間

let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()
"2200/11/11 上午11:11:11"
?
let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString() # 月份從0開始0-11月
"1111/12/11 上午11:11:11"
?

時間對象具體方法

let d6 = new Date();
d6.getDate() 獲取日
d6.getDay() 獲取星期
d6.getMonth() 獲取月份(0-11)
d6.getFullYear() 獲取完整的年份
d6.getHours() 獲取小時
d6.getMinutes() 獲取分鐘
d6.getSeconds() 獲取秒
d6.getMilliseconds() 獲取毫秒
d6.getTime() 時間戳


#### 3.JSON對象

在python中序列化反序列化  dumps 序列化  loads  反序列化

在js中也有序列化反序列化  JSON.stringify()  dumps  JSON.parse()  loads

let d7={'name':'json','age':18}
let res666=JSON.stringify(d7)
res666
"{"name":"json","age":18}"
JSON.parse(res666)
{name: "json", age: 18}


#### 4.RegExp對象

在python中如果需要使用正則 需要借助于re模塊  在js中需要你創(chuàng)建正則對象

**第一種創(chuàng)建正則對象的方法**

let reg1 = new RegExp('^[a-zA-Z][a-zA-Z0-9]{5,11}')


**第二種創(chuàng)建正則對象的方法**

let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/


**匹配內(nèi)容**

reg1.test('egondsb')
reg2.test('egondsb')


**獲取字符串里面所有的字母s**

let sss = 'egondsb dsb dsb'
sss.match(/s/) # 拿到一個就停止了
["s", index: 5, input: "egondsb dsb dsb", groups: undefined]
sss.match(/s/g) # 全局匹配 g就表示全局模式
(3) ["s", "s", "s"]


**全局匹配模式吐槽點**1

let reg3 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/g
reg3.test('egondsb')
true
reg3.test('egondsb')
false
reg3.lastIndex #全局匹配時有一個lastIndex屬性
0
reg3.test('egondsb')
true
reg3.lastIndex
7


**吐槽點2**

let reg4 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/
reg4.test()
true
reg4.test() # 什么都不傳 默認傳的是undefined
true
reg4.test()
true
reg4.test(undefined)
true
?
let reg5=/undefined/
undefined
reg5.test('json')
false
reg5.test()
true


#### 5.Math對象

abs(x) 返回數(shù)的絕對值原茅。
exp(x) 返回 e 的指數(shù)。
floor(x) 對數(shù)進行下舍入堕仔。
log(x) 返回數(shù)的自然對數(shù)（底為e）擂橘。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值摩骨。
pow(x,y) 返回 x 的 y 次冪通贞。
random() 返回 0 ~ 1 之間的隨機數(shù)。
round(x) 把數(shù)四舍五入為最接近的整數(shù)恼五。
sin(x) 返回數(shù)的正弦滑频。
sqrt(x) 返回數(shù)的平方根。
tan(x) 返回角的正切唤冈。


## 5.BOM與DOM操作

**BOM**（Browser Object Model）是指**瀏覽器對象模型**峡迷，它使 JavaScript 有能力與瀏覽器進行“對話”。（js代碼操作瀏覽器）

**DOM** （Document Object Model）是指**文檔對象模型**你虹，通過它绘搞，可以訪問HTML文檔的所有元素。（js代碼操作標簽）

### 1.BOM操作

#### 1.window對象

window對象指代的就是瀏覽器窗口

window.innerHeight 瀏覽器窗口的高度

window.innerWidth 瀏覽器窗口的寬度

window.open('[https://www.taobao.com/](https://www.taobao.com/)','','height=400px,width=400px,top=400px,left=400px')

新建窗口打開頁面 第二個參數(shù)寫空即可 第三個參數(shù)寫新建的窗口的大小和位置

window.close() 關閉當前頁面

#### 2.window子對象

Web瀏覽器全稱

window.navigator.appName
"Netscape"
?

Web瀏覽器廠商和版本的詳細字符串

window.navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
?

掌握：用來表示當前是否是一個瀏覽器傅物，客戶端絕大部分信息

window.navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
?

瀏覽器運行所在的操作系統(tǒng)

window.navigator.platform
"Win32"
?

如果是window的子對象 那么window可以省略不寫


**擴展**:**仿爬措施**  1.最簡單最常用的一個就是校驗當前請求的發(fā)起者是否是一個瀏覽器  userAgent  user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36  **如何破解該措施**：在代碼中加上上面的user-agent配置即可

#### 3.history對象

window.history 對象包含瀏覽器的歷史
## 5.BOM與DOM操作

**BOM**（Browser Object Model）是指**瀏覽器對象模型**夯辖，它使 JavaScript 有能力與瀏覽器進行“對話”。（js代碼操作瀏覽器）

**DOM** （Document Object Model）是指**文檔對象模型**董饰，通過它蒿褂，可以訪問HTML文檔的所有元素。（js代碼操作標簽）

### 1.BOM操作

#### 1.window對象

window對象指代的就是瀏覽器窗口

window.innerHeight 瀏覽器窗口的高度

window.innerWidth 瀏覽器窗口的寬度

window.open('[https://www.taobao.com/](https://www.taobao.com/)','','height=400px,width=400px,top=400px,left=400px')

新建窗口打開頁面 第二個參數(shù)寫空即可 第三個參數(shù)寫新建的窗口的大小和位置

window.close() 關閉當前頁面

#### 2.window子對象

Web瀏覽器全稱

window.navigator.appName
"Netscape"
?

Web瀏覽器廠商和版本的詳細字符串

window.navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
?

掌握：用來表示當前是否是一個瀏覽器卒暂，客戶端絕大部分信息

window.navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
?

瀏覽器運行所在的操作系統(tǒng)

window.navigator.platform
"Win32"
?

如果是window的子對象 那么window可以省略不寫

擴展:仿爬措施 1.最簡單最常用的一個就是校驗當前請求的發(fā)起者是否是一個瀏覽器 userAgent user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 如何破解該措施：在代碼中加上上面的user-agent配置即可

window.history.back() 回退到上一頁
window.history.forward() 前進到下一頁
對應的就是你瀏覽器左上方的兩個的箭頭

4.location對象（掌握）

 window.location.href  # 獲取當前頁面的url
 window.location.href = url  # 跳轉到指定的url
 window.location.reload()  # 刷新頁面

5.彈出框

  • 警告框
alert('123')
  • 確認框
confirm('你確定嗎啄栓？')
   true
   confirm('你確定嗎？')
   false
  • 提示框
prompt('請輸入驗證碼','')
     "12345"

6.計時器相關

計時事件：通過使用 JavaScript也祠，我們可以在一定時間間隔之后來執(zhí)行代碼昙楚，而不是在函數(shù)被調(diào)用后立即執(zhí)行

setTimeout()

語法：

 var t=setTimeout("JS語句",毫秒)

setTimeout() 方法會返回某個值, 第一個參數(shù)是含有 JavaScript 語句的字符串 , 第二個參數(shù)指示從當前起多少毫秒后執(zhí)行第一個參數(shù)（1000 毫秒等于一秒)

clearTimeout()

語法：

 clearTimeout(setTimeout_variable)

例子：

# 在指定時間之后執(zhí)行一次相應函數(shù)
 function func1(){
  alert(123)
 }
 let t=setTimeout(func1,3000);#毫秒為單位 3秒之后自動執(zhí)行func1函數(shù)
 # 取消setTimeout設置即取消定時任務
 clearTimeout(t);
setInterval()

setInterval() 方法可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式。

setInterval() 方法會不停地調(diào)用函數(shù)诈嘿，直到 clearInterval() 被調(diào)用或窗口被關閉堪旧。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。

語法：

 setInterval("JS語句",時間間隔)

返回值

一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執(zhí)行的值奖亚。

clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的timeout

clearInterval() 方法的參數(shù)必須是由 setInterval() 返回的 ID 值淳梦。

語法：

clearInterval(setinterval返回的ID值)

例：

<script>
  function func2() {
  alert(123)
  }
  function show(){
  let t = setInterval(func2,3000);  // 每隔3秒執(zhí)行一次
  function inner(){
  clearInterval(t)  // 清除定時器
  }
  setTimeout(inner,9000)  // 9秒中之后觸發(fā)
  }
  show()
 </script>

2.DOM操作

DOM（Document Object Model）是一套對文檔的內(nèi)容進行抽象和概念化的方法。

當網(wǎng)頁被加載時昔字，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）爆袍。

HTML DOM 模型被構造為對象的樹

1.HTML DOM 樹

htm DOM樹.png

DOM標準規(guī)定HTML文檔中的每個成分都是一個節(jié)點(node)：

  • 文檔節(jié)點(document對象)：代表整個文檔

  • 元素節(jié)點(element 對象)：代表一個元素（標簽）

  • 文本節(jié)點(text對象)：代表元素（標簽）中的文本

  • 屬性節(jié)點(attribute對象)：代表一個屬性，元素（標簽）才有屬性

  • 注釋是注釋節(jié)點(comment對象)

JavaScript 可以通過DOM創(chuàng)建動態(tài)的 HTML：

  • JavaScript 能夠改變頁面中的所有 HTML 元素

  • JavaScript 能夠改變頁面中的所有 HTML 屬性

  • JavaScript 能夠改變頁面中的所有 CSS 樣式

  • JavaScript 能夠對頁面中的所有事件做出反應

DOM操作操作的是標簽 而一個html頁面上的標簽有很多 1.如何查找標簽 2.DOM操作標簽 DOM操作需要用關鍵字document起首

2.查找標簽

  • 直接查找(必須掌握)

    id查找，類查找螃宙，標簽查找

document.getElementById 根據(jù)ID獲取一個標簽
document.getElementsByClassName 根據(jù)class屬性獲取
document.getElementsByTagName 根據(jù)標簽名獲取標簽合集


    ```
document.getElementById('d1')
     <div id=?"d1">?…?</div>?
     ?
     document.getElementsByClassName('c1')
     HTMLCollection [p.c1]
     ?
     document.getElementsByTagName('div')
     HTMLCollection(3) [div#d1, div, div, d1: div#d1]

     let divEle=document.getElementsByTagName('div')
     undefined
     divEle
     HTMLCollection(3) [div#d1, div, div, d1: div#d1]

用變量名指代標簽對象的時候 一般情況下都推薦書寫成  xxxEle,divEle,aEle,pEle
  • 間接查找(熟悉)
parentElement            父節(jié)點標簽元素
  children                 所有子標簽
  firstElementChild        第一個子標簽元素
  lastElementChild         最后一個子標簽元素
  nextElementSibling       下一個兄弟標簽元素
  previousElementSibling   上一個兄弟標簽元素

```
let pEle=document.getElementsByClassName('c1')[0] # # 注意是否需要索引取值
 ?
 pEle.parentElement  # 拿父節(jié)點
 <div id=?"d1">?…?</div>?
 ?
 pEle.parentElement.parentElement
 <body>?…?</body>?
 ?
 pEle.parentElement.parentElement.parentElement
 <html lang=?"en">?<head>?…?</head>?<body>?…?</body>?</html>?
 ?
 pEle.parentElement.parentElement.parentElement.parentElement
 null
 ?
 let divEle=document.getElementById('d1')
 divEle.children ## 獲取所有的子標簽
 HTMLCollection(3) [div, p.c1, p]
 ?
 divEle.children[0]
 <div>?div>div?</div>?
 divEle.firstElementChild
 <div>?div>div?</div>?
 ?
 divEle.lastElementChild
 <p>?div>div?</p>?
 divEle.nextElementSibling # 同級別下面第一個
 <div>?div下面的div?</div>?
 divEle.previousElementSibling # 同級別上面第一個
 <div>?div上面的div?</div>?


#### 3.節(jié)點操作

*   **創(chuàng)建節(jié)點**

    語法：

    createElement(標簽名)

    示例：

var divEle = document.createElement("div");


*   **添加節(jié)點**

    語法：

    追加一個子節(jié)點（作為最后的子節(jié)點）

    .appendChild(newnode)；

    把增加的節(jié)點放到某個節(jié)點的前邊所坯。

    somenode.insertBefore(newnode,某個節(jié)點);

例：通過DOM操作動態(tài)的創(chuàng)建img標簽,并且給標簽加屬性,最后將標簽添加到文本中

let imgEle=document.createElement('img')
?
imgEle.src='111.png' # 給標簽設置默認的屬性
"111.png"
imgEle.username='jason'# 自定義的屬性沒辦法點的方式直接設置
"jason"
imgEle
<img src=?"111.png">?
?
imgEle.setAttribute('username','jason') # 既可以設置自定義的屬性也可以設置默認的書寫
imgEle
<img src=?"111.png" username=?"jason">?
imgEle.setAttribute('title','喵喵喵')
imgEle
<img src=?"111.png" username=?"jason" title=?"喵喵喵">?
?
let divEle=document.getElementById('d1')
undefined
divEle.appendChild(imgEle) # 標簽內(nèi)部添加元素(尾部追加)
<img src=?"111.png" username=?"jason" title=?"喵喵喵">?


例：創(chuàng)建a標簽谆扎，設置屬性，設置文本芹助，添加到標簽內(nèi)部堂湖，添加到指定的標簽的上面

let aEle = document.createElement('a')
?
aEle
<a>?</a>?
aEle.href = 'https://www.taobao.com/'
"https://www.taobao.com/"
aEle
<a href=?"https:?/?/?www.taobao.com/?">?</a>?
?
aEle.innerText = '點我' # 給標簽設置文本內(nèi)容
"點我"
aEle
<a href=?"https:?/?/?www.taobao.com/?">?點我?</a>?
?
let divEle = document.getElementById('d1')
undefined
let pEle = document.getElementById('d2')
undefined
divEle.insertBefore(aEle,pEle) # 添加標簽內(nèi)容指定位置添加
<a href=?"https:?/?/?www.taobao.com/?">?點我?</a>?
?```

額外補充 appendChild() removeChild() replaceChild() setAttribute() 設置屬性 getAttribute() 獲取屬性 removeAttribute() 移除屬性

替換節(jié)點：

語法：

somenode.replaceChild(newnode, 某個節(jié)點);

屬性節(jié)點

獲取文本節(jié)點的值：

 var divEle = document.getElementById("d1")
 divEle.innerText # 獲取標簽內(nèi)部所有的文本
 divEle.innerHTML # 內(nèi)部文本和標簽都拿到

設置文本節(jié)點的值：

 var divEle = document.getElementById("d1")
 divEle.innerText="1"
 divEle.innerHTML="<p>2</p>"

3.獲取值操作

語法：

elementNode.value

適用于以下標簽：

  • .input

  • .select

  • .textarea

1.獲取用戶數(shù)據(jù)標簽內(nèi)部的數(shù)據(jù)

 let seEle = document.getElementById('d2')
 seEle.value
 "111"
 seEle.value
 "333"
 ?
 let inputEle = document.getElementById('d1')
 inputEle.value

2.如何獲取用戶上傳的文件數(shù)據(jù)

 let fileEle=document.getElementById('d2')
 undefined
 fileEle.value # 無法獲取到文件數(shù)據(jù)
 "C:\fakepath\3.垃圾管理機制 用戶交互 格式化輸出 運算符.md"
 fileEle.files
 FileList {0: File, length: 1}
 ?
 fileEle.files[0] # 獲取文件數(shù)據(jù)
 File {name: "3.垃圾管理機制 用戶交互 格式化輸出 運算符.md", lastModified: 1589713934934, lastModifiedDate: Sun May 17 2020 19:12:14 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 16622, …}

4.class、css操作

 let divEle = document.getElementById('d1')
 undefined
 divEle.classList  # 獲取標簽所有的類屬性
 DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
 ?
 ?
 divEle.classList.remove('bg_red')  # 移除某個類屬性
 undefined
 ?
 divEle.classList.add('bg_red')  # 添加類屬性
 undefined
 divEle.classList.contains('c1')  # 驗證是否包含某個類屬性
 true
 divEle.classList.contains('c2')
 false
 ?
 divEle.classList.toggle('bg_red')  # 有則刪除無則添加
 false
 divEle.classList.toggle('bg_red')
 true
 divEle.classList.toggle('bg_red')
 false
 divEle.classList.toggle('bg_red')
 true
 divEle.classList.toggle('bg_red')
 false
 divEle.classList.toggle('bg_red')
 true
 ?
 ?
 ?
 # DOM操作操作標簽樣式 統(tǒng)一先用style起手
 let pEle = document.getElementsByTagName('p')[0]
 undefined
 pEle.style.color = 'red'
 "red"
 pEle.style.fontSize = '28px'
 "28px"
 pEle.style.backgroundColor = 'yellow'
 "yellow"
 pEle.style.border = '3px solid red'
 "3px solid red"

5.事件

事件：達到某個事先設定的條件 自動觸發(fā)的動作

 onclick        當用戶點擊某個對象時調(diào)用的事件句柄状土。
 ondblclick     當用戶雙擊某個對象時調(diào)用的事件句柄无蜂。
 ?
 onfocus        元素獲得焦點。 
 onblur         元素失去焦點蒙谓。 
 onchange       域的內(nèi)容被改變斥季。 
 ?
 onkeydown      某個鍵盤按鍵被按下。          
 onkeypress     某個鍵盤按鍵被按下并松開累驮。
 onkeyup        某個鍵盤按鍵被松開酣倾。
 onload         一張頁面或一幅圖像完成加載。
 onmousedown    鼠標按鈕被按下谤专。
 onmousemove    鼠標被移動躁锡。
 onmouseout     鼠標從某元素移開。
 onmouseover    鼠標移到某元素之上置侍。
 ?
 onselect      在文本框中的文本被選中時發(fā)生映之。
 onsubmit      確認按鈕被點擊，使用的對象是form蜡坊。

1.綁定事件的兩種方式

 <button onclick="func1()">點我</button>
 <button id="d1">點我</button>
 <script>
 #第一種
  function func1(){
  alert(123)
  }
  #第二種
  let btnEle = document.getElementById('d1');
  btnEle.onclick = function () {
  alert(222)
  }
 </script>

script標簽既可以放在head內(nèi) 也可以放在body內(nèi) 但是通常情況下都是放在body內(nèi)的最底部

 # 等待瀏覽器窗口加載完畢之后再執(zhí)行代碼
 <script>
 window.onload = function () {
  // 第一種綁定事件的方式
  function func1() {
  alert(111)
  }
  // 第二種
  let btnEle = document.getElementById('d1');
  btnEle.onclick = function () {
  alert(222)
  }
  }
 </script>

6.原生事件js綁定

  • 開關燈案例
<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  .c1{
  height:400px;
  width: 400px;
  border-radius: 50%;
  }
  .bg_red{
  background-color: red;
  }
  .bg_green{
  background-color: green;
  }
  </style>
 ?
 </head>
 <body>
 <div id="d1" class="c1 bg_green bg_red"></div>
 <button id="d2">變色</button>
 <script>
  let btnEle=document.getElementById('d2')
  let divEle=document.getElementById('d1')
  btnEle.onclick=function(){
  # 綁定點擊事件, 動態(tài)的修改div標簽的類屬性
  divEle.classList.toggle('bg_green')
  }
 </script>
 </body>
 </html>

  • input框獲取焦點失去焦點案例

<input type="text" value="一起去吃飯吧" id="d1">
<script>
let iEle=document.getElementById('d1')
#獲取焦點事件
iEle.onfocus=function () {
# 將input框內(nèi)部值去除
# 點value就是獲取 等號賦值就是設置
}
# 失去焦點事件
iEle.onblur=function(){
# 給input標簽重寫賦值
iEle.value='不想去'
}
</script>


*   實時展示當前時間


 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Title</title>
 </head>
 <body>
 <input type="text" id="d1" style="display:block;hei ght:50px;width:200px">
 <button id="d2">開始</button>
 <button id="d3">結束</button>
 <script>
  # 先定義一個全局存儲定時器的變量
  let t=null
  let inputEle=document.getElementById('d1')
  let startEle=document.getElementById('d2')
  let endEle=document.getElementById('d3')
  # 1 訪問頁面之后 將訪問的時間展示到input框中
  # 2 動態(tài)展示當前時間
  # 3 頁面上加兩個按鈕 一個開始 一個結束
  function showTime(){
  let currentTime=new Date();
  inputEle.value=currentTime.toLocaleString()
  }
  startEle.onclick = function () {
  # 限制定時器只能開一個
  if(!t){#t非空時開設
  t=setInterval(showTime,1000)#每點擊一次就會開設一個定時器 而t只指代最后一個
  }
  }
  endEle.onclick=function (){
  clearInterval(t)
  #t重置為空
  t=null
 ?
  }
 </script>
 </body>
 </html>


*   省市聯(lián)動

    ```
     <!DOCTYPE html>
     <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title>Title</title>
     </head>
     <body>
     <select name="" id="d1">
      <option value="" selected></option>
     </select>
     <select name="" id="d2"></select>
     <script>
      let proEle=document.getElementById('d1')
      let cityEle=document.getElementById('d2')
      data = {
      "河北": ["廊坊", "邯鄲",'唐山'],
      "北京": ["朝陽區(qū)", "海淀區(qū)",'昌平區(qū)'],
      "山東": ["威海市", "煙臺市",'臨沂市'],
      '上海':['浦東新區(qū)','靜安區(qū)','黃浦區(qū)'],
      '深圳':['南山區(qū)','寶安區(qū)','福田區(qū)']
      };
      //選for循環(huán)獲取省
      for(let key in data){
      // 將省信息做成一個個option標簽 添加到第一個select框中
      // 1 創(chuàng)建option標簽
      let opEle=document.createElement('option')
      // 2 設置文本
      opEle.innerText=key
      // 3 設置value
      opEle.value=key
      // 4 將創(chuàng)建好的option標簽添加到第一個select中
      proEle.appendChild(opEle)
      }
      //固定用法杠输，獲取select修改了后，就執(zhí)行內(nèi)容{} 
      proEle.onchange=function () {
      // 先獲取到用戶選擇的省
      let currentpro=proEle.value
      // 獲取對應的市信息 
      let currrntCityList=data[currentpro]
      // 清空市select中所有的option
      cityEle.innerHTML=''
      // for循環(huán)所有的市 渲染到第二個select中
      for (let i=0;i<currrntCityList.length;i++){
      let currentCity=currrntCityList[i]
      // 1 創(chuàng)建option標簽
      let opEle=document.createElement('option')
      // 2 設置文本
      opEle.innerText=currentCity
      // 2 設置value
      opEle.value=currentCity
      // 4 將創(chuàng)建好的option標簽添加到第一個select中
      cityEle.appendChild(opEle)
      }
      }
     ?
     </script>
     </body>
     </html>

6.jQuery

1.jQuery的簡介

1.jQuery內(nèi)部封裝了原生的js代碼(還額外添加了很多的功能) 能夠讓你通過書寫更少的代碼 完成js操作秕衙，類似于python里面的模塊 在前端模塊不叫模塊 叫 “類庫”

2.兼容多個瀏覽器的

3.jQuery的宗旨：write less do more 即用更少的代碼完成更多的事情

4.python導入模塊和jQuery導入的區(qū)別：

python導入模塊需要消耗資源抬伺，會影響網(wǎng)絡速度，但jQuery的文件非常小(幾十kb)灾梦，基本不影響網(wǎng)絡速度

2.jQuery的優(yōu)勢

  1. 一款輕量級的JS框架峡钓。jQuery核心js文件才幾十kb，不會影響頁面加載速度若河。

  2. 豐富的DOM選擇器,jQuery的選擇器用起來很方便能岩，比如要找到某個DOM對象的相鄰元素，JS可能要寫好幾行代碼萧福，而jQuery一行代碼就搞定了省核，再比如要將一個表格的隔行變色综液，jQuery也是一行代碼搞定嫂拴。

  3. 鏈式表達式暖途。jQuery的鏈式操作可以把多個操作寫在一行代碼里，更加簡潔咽袜。

  4. 事件、樣式、動畫支持篷就。jQuery還簡化了js操作css的代碼，并且代碼的可讀性也比js要強近忙。

  5. Ajax操作支持竭业。jQuery簡化了AJAX操作，后端只需返回一個JSON格式的字符串就能完成與前端的通信及舍。

  6. 跨瀏覽器兼容未辆。jQuery基本兼容了現(xiàn)在主流的瀏覽器，不用再為瀏覽器的兼容問題而傷透腦筋锯玛。

  7. 插件擴展開發(fā)咐柜。jQuery有著豐富的第三方的插件，例如：樹形菜單攘残、日期控件炕桨、圖片切換插件、彈出窗口等等基本前端頁面上的組件都有對應插件肯腕，并且用jQuery插件做出來的效果很炫献宫，并且可以根據(jù)自己需要去改寫和封裝插件，簡單實用实撒。

3.jQuery內(nèi)容

  1. 選擇器

  2. 篩選器

  3. 樣式操作

  4. 文本操作

  5. 屬性操作

  6. 文檔處理

  7. 事件

  8. 動畫效果

  9. 插件

  10. each姊途、data、Ajax

下載鏈接：jQuery官網(wǎng)

中文文檔：jQuery AP中文文檔

4.jQuery版本

  • 1.x：兼容IE678,使用最為廣泛的知态，官方只做BUG維護捷兰，功能不再新增。因此一般項目來說负敏，使用1.x版本就可以了贡茅，最終版本：1.12.4 (2016年5月20日)

  • 2.x：不兼容IE678，很少有人使用其做，官方只做BUG維護顶考，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x妖泄，最終版本：2.2.4 (2016年5月20日)

  • 3.x：不兼容IE678驹沿，只支持最新的瀏覽器。需要注意的是很多老的jQuery插件不支持3.x版蹈胡。目前該版本是官方主要更新維護的版本渊季。

維護IE678是一件讓人頭疼的事情朋蔫，一般我們都會額外加載一個CSS和JS單獨處理。值得慶幸的是使用這些瀏覽器的人也逐步減少却汉，PC端用戶已經(jīng)逐步被移動端用戶所取代驯妄，如果沒有特殊要求的話，一般都會選擇放棄對678的支持合砂。

5.jQuery文件下載

jQuery文件下載.png

壓縮：容量更小

jQuery在使用之前 一定要確保已經(jīng)導入了

6.針對導入問題

1 文件下載到了本地 如何解決多個文件反復書寫引入語句的代碼

可以借助于pycharm自動初始化代碼功能完成自動添加

先找到settings-->editor-->file and code template

然后輸入

<script src="jquery-3.5.1.min.js"></script>

先點擊應用青扔，再點擊ok

2 直接引入jQuery提供的CDN服務(基于網(wǎng)絡直接請求加載)

CDN:內(nèi)容分發(fā)網(wǎng)絡 CDN有免費的也有收費的 前端免費的cdn網(wǎng)站:bootcdn

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

必須有網(wǎng)絡

7.jQuery基本語法

jQuery(選擇器).action()

jQuery簡寫為jQuery() ===()

jQuery與js代碼對比

eg:將p標簽內(nèi)部的文本顏色改為紅色 原生js代碼操作標簽 let pEle = document.getElementById('d1') pEle.style.color = 'red'

jQuery操作標簽 $('p').css('color','blue')

8.如何查找標簽

1.基本選擇器

 #id選擇器
 $('#d1')
 w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
 #css選擇器
 $('.c1')
 w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0) 
 #標簽選擇器
 $('span')
 w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

jQuery對象如何變成標簽對象(重點)

 $('#d1')[0]
 <div id=?"d1">?…?</div>?
 document.getElementById('d1')
 <div id=?"d1">?…?</div>?

標簽對象如何轉jQuery對象(重點)

 $(document.getElementById('d1'))
 w.fn.init [div#d1]

2.組合選擇器/分組與嵌套

 $('div')
 $('div.c1') # 找到有c1 class類的div標簽
 $('div#d1') #找到有d1 id為d1的div標簽
 $('*')  #所有元素選擇器
 w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
 $('#d1,.c1,p')  # 并列+混用
 $('div span')  # 后代
 $('div>span')  # 兒子
 $('div+span')  # 毗鄰
 $('div~span')  # 弟弟

3.基本篩選器

$('ul li')
 $('ul li:first')#第一個
 $('ul li:last')#最后一個
 $('ul li:eq(index)')# 索引等于index的那個元素
 $('ul li:even')  # 偶數(shù)索引 0包含在內(nèi)
 $('ul li:odd')  # 奇數(shù)索引
 $('ul li:gt(2)')  # 大于索引
 $('ul li:lt(2)')  # 小于索引
 $('ul li:not("#d1")')  # 移除滿足條件的標簽
 $('div:has("p")')  # 選取出包含一個或多個標簽在內(nèi)的標簽(指的是從后代元素找)

4.屬性選擇器

 [attribute]
 [attribute=value]// 屬性等于
 [attribute!=value]// 屬性不等于
 ?
 $('[username]')
 $('[username="Jason"]')
 $('p[username="egon"]')
 $('[type]')
 $('[type="text"]')

5.表單篩選器

:text
 :password
 :file
 :radio
 :checkbox
 :submit
 :reset
 :button
 $('input[type="text"]')
 #等價于
 $(':text')
 ?
 $('input[type="password"]')
 #等價于
 $(':password')

表單對象屬性

 :enabled
 :disabled
 :checked
 :selected

  # 會將checked和selected都拿到
 #解決方法：
 $('input:checked')  # 加一個限制條件
 $(':selected') #只能拿到selected

6.篩選器方法

下一個元素：

 $("#id").next() # 同級別下一個
 $("#id").nextAll()
 $("#id").nextUntil("#i2")

上一個元素：

 $("#id").prev()
 $("#id").prevAll()
 $("#id").prevUntil("#i2")

父親元素：

$("#id").parent()
 $("#id").parents()  // 查找當前元素的所有的父輩元素
 $("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為`止既穆。

兒子和兄弟元素：

 $("#id").children();// 兒子們
 $("#id").siblings();// 兄弟們，同級別上下所有

查找

搜索所有與指定表達式匹配的元素雀鹃。這個函數(shù)是找出正在處理的元素的后代元素的好方法幻工。

 $("div").find("p") # find從某個區(qū)域內(nèi)篩選出想要的標簽 
 #等價于
 $("div p")
 ?
 $('div span:first')
 #等價于
 $('div span').first()
 ?
 $('div span:last')
 #等價于
 $('div span').last()
 ?
 $('div span:not("#d3")')
 #等價于
 $('div span').not('#d3')

篩選

篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍黎茎。用逗號分隔多個表達式囊颅。

 $("div").filter(".c1")  // 從結果集中過濾出有c1樣式類的
 #等價于 
 $("div.c1")

補充：

.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素傅瞻。
.eq() // 索引值等于指定值的元素

7.jQuery練習題

  1. 找到本頁面中id是i1的標簽

  2. 找到本頁面中所有的h2標簽

  3. 找到本頁面中所有的input標簽

  4. 找到本頁面所有樣式類中有c1的標簽

  5. 找到本頁面所有樣式類中有btn-default的標簽

  6. 找到本頁面所有樣式類中有c1的標簽和所有h2標簽

  7. 找到本頁面所有樣式類中有c1的標簽和id是p3的標簽

  8. 找到本頁面所有樣式類中有c1的標簽和所有樣式類中有btn的標簽

  9. 找到本頁面中form標簽中的所有input標簽

  10. 找到本頁面中被包裹在label標簽內(nèi)的input標簽

  11. 找到本頁面中緊挨在label標簽后面的input標簽

  12. 找到本頁面中id為p2的標簽后面所有和它同級的li標簽

  13. 找到id值為f1的標簽內(nèi)部的第一個input標簽

  14. 找到id值為my-checkbox的標簽內(nèi)部最后一個input標簽

  15. 找到id值為my-checkbox的標簽內(nèi)部沒有被選中的那個input標簽

  16. 找到所有含有input標簽的label標簽

    $('#il')
$('h2')
$('input')
$('.c1')
$('.btn-defult')
$('.c1,h2')
$('.c1,#p3')
$('.c1,.btn')
$('form').find('input')
$('label input')
$('label+input')
$('#p2~li')
$('#f1 input').first()
$('#my-checkbox input').last()
$('#my-checkbox input[checked!="checked"]')
$('label:has("input")')

9.操作標簽

1.樣式操作

樣式類

js版本 jQuery版本
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()

addClass();// 添加指定的CSS類名踢代。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名嗅骄，如果有就移除胳挎，如果沒有就添加。

css操作

<p>111</p>
<p>222</p>
"""一行代碼將第一個p標簽變成紅色第二個p標簽變成綠色"""
$('p').first().css('color','red').next().css('color','green')

jQuery的鏈式操作 使用jQuery可以做到一行代碼操作很多標簽

jQuery對象調(diào)用jQuery方法之后返回的還是當前jQuery對象 也就可以繼續(xù)調(diào)用其他方法

類似于python

class MyClass(object):
    def func1(self):
        print('func1')
        return self

    def func2(self):
        print('func2')
        return self
obj = MyClass()
obj.func1().func2()

2.位置操作

offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()// 獲取匹配元素相對父元素的偏移
scrollTop()// 獲取匹配元素相對滾動條頂部的偏移(需要了解)
scrollLeft()// 獲取匹配元素相對滾動條左側的偏移

$(window).scrollTop()
0
$(window).scrollTop()
969
$(window).scrollTop()  # 括號內(nèi)不加參數(shù)就是獲取
1733
$(window).scrollTop(0)  # 加了參數(shù)就是設置
n.fn.init [Window]  $(window).scrollTop(500)
n.fn.init [Window]

.offset()方法允許我們檢索一個元素相對于文檔（document）的當前位置溺森。

和 .position()的差別在于： .position()是相對于相對于父級元素的位移慕爬。

3.尺寸

height() #文本
width()
innerHeight() #文本+padding
innerWidth()
outerHeight() #文本+padding+border 
outerWidth()

$('p').height()  # 文本
20
$('p').width()
1670
$('p').innerHeight()  # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight()  # 文本+padding+border
26
$('p').outerWidth()
1674

4.文本操作

操作標簽內(nèi)部文本
js jQuery
innerText text() 括號內(nèi)不加參數(shù)就是獲取加了就是設置
innerHTML html()

$('div').text() #獲取
"
  有些人走著走著就散了
"
$('div').html() #獲取
"
  <p>有些人走著走著就散了</p>
"
$('div').text('無所謂') #設置
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').text('<h1>無所謂<\h1>')
S.fn.init [div, prevObject: S.fn.init(1)]
$('div').html('<h1>無所謂<\h1>')#可以識別標簽
S.fn.init [div, prevObject: S.fn.init(1)]

5.獲取值操作

js jQuery
.value .val()

$('#d1').val() #括號內(nèi)不加參數(shù)就是獲取
"111"
$('#d1').val('520快樂')  # 括號內(nèi)加了就是設置

$('#d2').val()
"C:\fakepath\01_測試路由.png"

$('#d2')[0].files[0]  # 牢記兩個對象之間的轉換
File {name: "01_測試路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中國標準時間), webkitRelativePath: "", size: 28733, …}

$(':checkbox')
S.fn.init(3) [input, input, input, prevObject: S.fn.init(1)]
$(':checkbox').val()
"111"
$(':checkbox').val(666)
S.fn.init(3) [input, input, input, prevObject: S.fn.init(1)]

6.屬性操作

js中 jQuery
setAttribute() attr(name,value)設置
getAttribute() attr(name)獲取
removeAttribute() removeAttr(name)移除

在用變量存儲對象的時候 js中推薦使用 (XXXEle) 標簽對象
jQuery中推薦使用 ($XXXEle) jQuery對象

let $pEle = $('p')
undefined
$pEle.attr('id')
"d1"
$pEle.attr('class')
undefined
$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]

對于標簽上有的能夠看到的屬性和自定義屬性用attr
對于返回布爾值比如checkbox radio option是否被選中用prop

$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked')  # 無效
w.fn.init [input#d3]
           
           
$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]

7.文檔處理

js jQuery
createElement('p') $('<p>')
appendChild() append()

添加到指定元素內(nèi)部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素內(nèi)部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 從DOM中刪除所有匹配的元素。
empty()// 刪除匹配的元素集合中所有的子節(jié)點屏积。

let $pEle = $('<p>')
$pEle.text('你好,小哥哥')
$pEle.attr('id','d1')          
$('#d1').append($pEle)  # 內(nèi)部尾部追加
$pEle.appendTo($('#d1')) 
           
$('#d1').prepend($pEle)  # 內(nèi)部頭部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]
         
$('#d2').after($pEle)  # 放在某個標簽后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))
        
$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))

$('#d1').remove()  # 將標簽從DOM樹中刪除
w.fn.init [div#d1]
           
$('#d1').empty()  # 清空標簽內(nèi)部所有的內(nèi)容
w.fn.init [div#d1]

10.事件

綁定事件的兩種方式：

#第一種
$('#d1').click(function(){
        alert('123')
});
#第二種（功能強大医窿，支持事件委托）
$('#d2').on('click',function(){
        alert('555')
})
  • 克隆事件

克隆

clone()// 參數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
      <style>
            #d1{
                height:100px;
                width:100px;
                background-color: yellow;
                border: 1px solid blue;
            }
        </style>
</head>
<button id="d1">點我復制</button>
<script>
    $('#d1').on('click',function(){
        // console.log(this) //this指代是當前被操作的標簽對象
        // $(this).clone().insertAfter($('body'))// clone默認情況下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))
    })
</script>
</body>
</html>
  • 自定義模態(tài)框

模態(tài)框內(nèi)部本質就是給標簽移除或者添加上hide屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style>
        .cover{
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: rgba(0,0,0,0.3);
            z-index: 99;
        }
        .model{
            position: fixed;
            height:400px;
            width:600px;
            background-color: #eeeeee;
            top:50%;
            left: 50%;
            margin-left:-300px;
            margin-top: -200px;
            z-index: 99;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
<div>我是最下面的</div>
<button id="d1">彈</button>
<div class="cover hide"></div>
<div class="model hide">
    <p>username:<input type="text"></p>
    <p>password:<input type="text"></p>
    <input type="button" value="確認">
    <input type="button" value="取消" id="d2">

</div>
<script>
    $('#d1').click(function(){
        var coverEle=$('.cover')[0];
        var modelEle=$('.model')[0];
        $(coverEle).removeClass('hide');
        $(modelEle).removeClass('hide')
    })
    $('#d2').on('click',function(){
        var coverEle=$('.cover')[0];
        var modelEle=$('.model')[0];
        $(coverEle).addClass('hide');
        $(modelEle).addClass('hide')
    })
</script>
</body>
</html>
  • 左側菜單
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style>
        .left{
            float:left;
            background-color: peachpuff;
            width: 20%;
            height: 100%;
            position: fixed;
        }
        .title{
            font-size: 24px;
            color: black;
            text-align: center;
        }
        .items{
            border:solid 1px aliceblue;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="left">
    <div class="title">菜單1
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
    </div>
    <div class="title">菜單2
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
    </div>
    <div class="title">菜單3
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
    </div>
</div>
<script>
    $('.title').click(function(){
        // 先給所有的items加hide
        // $('.items').addClass('hide')
        // //然后將被點擊標簽內(nèi)部的hide移除
        // $(this).children().removeClass('hide')
        $(this).find('.items').addClass('hide').parsent().find('.title').children.removeClass('hide')
    })
</script>
</body>
</html>
  • 返回頂部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
<div style="height:500px;background-color: red" id="d1"></div>
<div style="height:500px;background-color: yellow"></div>
<div style="height:500px;background-color: green"></div>
<a href="#d1" class="hide">回到頂部</a>
<script>
    $(window).scroll(function(){
        if($(window).scrollTop()>300){
         $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }

    })
</script>
</body>
</html>
  • 自定義登陸校驗
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 獲取用戶輸入的用戶名和密碼 做校驗
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用戶名不能為空")
        }
        if (!passWord){
            $passWord.next().text('密碼不能為空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>
  • input實時監(jiān)控
<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)
    })
</script>
  • hover事件
<script>
    // $("#d1").hover(function () {  // 鼠標懸浮 + 鼠標移開
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
            alert('我來了')  // 懸浮
    },
        function () {
            alert('我溜了')  // 移開
        }
    )
</script>
  • 鍵盤按鍵按下事件
<script>
    $(window).keydown(function (event) {
        console.log(event.keyCode)
        if (event.keyCode === 16){
            alert('你按了shift鍵')
        }
    })
</script>

?

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市炊林，隨后出現(xiàn)的幾起案子姥卢，更是在濱河造成了極大的恐慌，老刑警劉巖渣聚，帶你破解...
    沈念sama閱讀 206,723評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件独榴，死亡現(xiàn)場離奇詭異，居然都是意外死亡奕枝，警方通過查閱死者的電腦和手機括眠，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來倍权，“玉大人掷豺，你說我怎么就攤上這事捞烟。” “怎么了当船？”我有些...
    開封第一講書人閱讀 152,998評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵题画，是天一觀的道長。 經(jīng)常有香客問我德频，道長苍息，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,323評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任壹置，我火速辦了婚禮竞思，結果婚禮上，老公的妹妹穿的比我還像新娘钞护。我一直安慰自己盖喷，他們只是感情好，可當我...
    茶點故事閱讀 64,355評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布难咕。 她就那樣靜靜地躺著课梳，像睡著了一般。 火紅的嫁衣襯著肌膚如雪余佃。 梳的紋絲不亂的頭發(fā)上暮刃，一...
    開封第一講書人閱讀 49,079評論 1贊 285
  • 城市分裂傳說
    那天，我揣著相機與錄音爆土，去河邊找鬼椭懊。 笑死，一個胖子當著我的面吹牛步势，可吹牛的內(nèi)容都是我干的灾搏。 我是一名探鬼主播，決...
    沈念sama閱讀 38,389評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼立润，長吁一口氣：“原來是場噩夢啊……” “哼狂窑！你這毒婦竟也來了？” 一聲冷哼從身側響起桑腮，我...
    開封第一講書人閱讀 37,019評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤泉哈，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后破讨，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丛晦，經(jīng)...
    沈念sama閱讀 43,519評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年提陶，在試婚紗的時候發(fā)現(xiàn)自己被綠了烫沙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,100評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡隙笆，死狀恐怖锌蓄，靈堂內(nèi)的尸體忽然破棺而出升筏，到底是詐尸還是另有隱情，我是刑警寧澤瘸爽，帶...
    沈念sama閱讀 33,738評論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布您访，位于F島的核電站，受9級特大地震影響剪决，放射性物質發(fā)生泄漏灵汪。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一柑潦、第九天 我趴在偏房一處隱蔽的房頂上張望享言。 院中可真熱鬧，春花似錦渗鬼、人聲如沸览露。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0贊 19
  • 一樁弒父案乍钻，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽肛循。三九已至铭腕，卻和暖如春银择，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背累舷。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工浩考， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人被盈。 一個月前我還...
    沈念sama閱讀 45,547評論 2贊 354
  • 代替公主和親
    正文 我出身青樓析孽，卻偏偏與公主長得像，于是被迫代替她去往敵國和親只怎。 傳聞我的和親對象是個殘疾皇子袜瞬，可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2贊 345