HTML（超文本标記語言）

一些基礎标簽

标題标簽：
<h1></h1>~<h6></h6>

段落标簽：
<p></p>

換行标簽:
<br/>

水準線标簽：
<hr/>

字型樣式标簽：

- 粗體：<strong></strong>
- 斜體：<em></em>

一些常用特殊符号（IDEA一般有提示）：
- 空格：&nbsp;
- 引号：&quot;
- 版權号：&copy;

圖像标簽：<img src="" alt="" title="" width="" height="">
- src：圖檔路徑
- alt：找不到圖檔資源的時候的文字描述
- title：滑鼠移動到圖檔上的文字提示
- width/height：寬度和高度

連結标簽：
連結标簽--文本連結其它頁面
<a href="" target=""> 文本 </a>
- href：連結的路徑
- target：新視窗一什麼方式打開（_self / _blank）

連結标簽--圖檔連結其它頁面
<a href="" target="">
   <img src="" alt="" title=""/>
</a>

連結标簽--功能連結
<a href="mailto:[email protected]">聯系我們</a>

連結标簽--錨連結
标記位置<a name="mark"></a>
連結<a href="#mark">到mark位置</a>

清單

無序（一般用于導航、側邊欄、有規律的圖文組合）
<ul>
	<li>可以包含圖檔、文本、清單</li>
	<li></li>
	<li></li>
</ul>

有序（一般用于題目的選項）
<ol>
	<li>可以包含圖檔、文本、清單</li>
	<li></li>
	<li></li>
</ol>
自定義清單（一般用于成組分類）
<dl>
	<dt>标題</dt>
	<dd></dd>
	<dd></dd>
	<dd></dd>
</dl>

表格

<table bored="1px">
   	<tr>
   			<td>第一行-第一列<td>	
   			<td>第一行-第二列<td>	
   			<td>第一行-第三列<td>
   	</tr>
   	<tr>
   			<td>第二行-第一列<td>	
   			<td>第二行-第二列<td>	
   			<td>第二行-第三列<td>
   	</tr>
</table>
合并行與列
合并行-跨n行合并，使得框子變高。
步驟--》删掉對應的n-1行--》在對應的列（<td>）加上rowspan="n",
<td rowspan="n"></td>

合并列-跨n列合并，使得框子變長。
步驟--》删掉對應的n-1列--》在對應的列（<td>）加上colspan="n",
<td colspan="n"></td>

音頻/視訊

音頻：
	<audio src="" controls autoplay></audio>
	視訊：
	<video src="" controls autoplay loop></video>
	 
	 - src:資源路徑
     - controls:控制播放暫停的控件
     - autoplay:自動播放
     - loop:循環播放

結構元素（标記-給程式員看的）

<header>頭部</header>
<footer>尾部</footer>
<section>主體</section>
<article>文章</artical>
<aside>側邊欄</aside>
<nav>導航欄</nav>

内聯

單頁面内聯
<iframe src="" name=""></iframe>
頁面間互相跳轉
<iframe name="mainiframe"></iframe>

表單

<form action="" method="">
   <p>昵稱：<input type="text" name="name"></p>
   <p>密碼：<input type="password" name="password"></p>
   <p>性别
   		<select>
   			<option name="girl">女</option>
   			<option name="boy">男</option>
   		</select>
   </p>
   <p>最高學曆
   		<input type="radio" name="study" checked/>無
           <input type="radio" name="study"/>國小
           <input type="radio" name="study"/>國中
           <input type="radio" name="study"/>高中
           <input type="radio" name="study"/>大學
           <input type="radio" name="study"/>研究所學生
           <input type="radio" name="study"/>博士
   </p>
   <p>愛好
           <input type="checkbox" name="hobby" />抽煙
           <input type="checkbox" name="hobby" checked/>喝酒
           <input type="checkbox" name="hobby" />燙頭
           <input type="checkbox" name="hobby"  disabled/>打遊戲
   </p>
   <p>
   		<input type="submit" name="Button" value="送出"/>
   		<input type="reset" name="Reset" value="重填"/>
   		<a href="" target="">
   				<img src="" alt="" title=""/>
   		</a>
   </p>
</form>

總結表單元素

文本框
<input type="text" name="username" value="使用者名" size="30" maxlenth="20"/>

密碼框
<input type="password" name="password" size="20"/>

單選按鈕
<input type="radio" name="sex" value="boy" checked>男
<input type="radio" name="sex" value="girl">女

複選框
<input type="checkbox" name="hooby" value="code"/>代碼
<input type="checkbox" name="hooby" value="girl"/>女孩
<input type="checkbox" name="hooby" value="game"/>遊戲
<input type="checkbox" name="hooby" value="movie"/>電影

下拉框
<select name="清單名稱" size="行數">
	<option value="選項值" selected="selected"></option>
	<option value="選項值"></option>
	<option value="選項值"></option>
</select>

按鈕
(重置按鈕)
<input type="reset" name="btnReset" value="重置"/>
(送出按鈕)
<input type="submit" name="btnSubmit" value="送出"/>
(普通按鈕)
<input type="button" name="btn" value="按鈕"/>
(圖檔按鈕)
<a href="" target="">
	<input type="image" src=""/>
</a>

多行文本
<textarea name="text" cols="x" rows="y">文本内容</textarea>

檔案域
<form action="" method="post" enctype="multipart/form-data">
	<p>
		<input type="file" name="files"/>
		<input type="submit name="upload" value="上傳"/>
	</p>
<form>

郵箱(帶驗證，但是不好)
<input type="email name="email"/>
數字
<input type="number" name="num" min="0" max="100" step="1"/>

滑塊
<input type="range" name="range" min="0" max="100" step="1"/>

搜尋框
<input type="search" name="search"/>

進階應用

隐藏域
<input type="hidden" name="id" value="1"/>

隻讀與禁用
<input type="text" name="name" value="admin" readonly/>
<input type="submit" value="儲存" disable/>

自動聚焦
<p>
	<label for="xingming">昵稱</lable>
	<input type="text" name="username" id="xingming"/>
</p>

表單驗證

輸入框提示（placeholder="提示語句"）
<input type="text" name="username" placeholder="請輸入使用者名"/>

輸入框不能為空（required）
<input type="text" name="username" required/>

正規表達式（pattern）
<input type="text" name="email" required pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"/>

CSS（層疊樣式表）

1. CSS的三個位置

優先級的高低是就近原則

行内樣式—在标簽内部加style=""

内部樣式—在head裡加style

<head>
	<style>
		p{color:gray;}
	</style>
</head>

外部樣式引入

<link type="text/css" rel="stylesheet" href="path/name.css"/>
type：檔案類型
rel：使用外部樣式表
href：資源路徑

CSS2.1
<style>
	@import url("css/style.css");
</style>

2. 選擇器

選擇器優先級：id選擇器 > class選擇器 > 标簽選擇器

基本選擇器

/*标簽選擇器，會選擇頁面上所有的标簽*/
h1{
	color:red;/*字型色*/
	background:gray;/*背景色*/
	border-radius:10px;/*圓角*/
}
p{     }

/*類選擇器--可以弄一類*/
.title1{
}
.title2{
}
/*
<body>
	<h1 class="title1">标題1</h1>
	<h1 class="title2">标題2</h1>
</body>
*/

/*id選擇器---唯一,多個标簽使用會報錯*/
#id1{
}
/*
<body>
	<h1 id="name">id隻能給一個标簽用</h1>
	<h1 id="name">會報錯</h1>
</body>
*/

進階選擇器

/* 層次選擇器*/
/*1.後代選擇器---會一層層下去 p1 p2 p3 p4 p5 p6 p7 p8*/
body p{
}

/*2.子選擇器---不會更進一層 p1 p2 p3 p7 p8*/
body>p{
}
/*3.相鄰兄弟選擇器---在同一級别相鄰的弟弟(向下)p2 p8*/
.active + p{
}
/*4.通用兄弟選擇器---在同一級别相鄰的所有弟弟（向下衍生）p2 p3 p7 p8*/
.active~p{
}
/*注：倆個兄弟選擇器，有就近覆寫的關系，最靠下面越近*/
/*
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
	<li><p>p4</p></li>
	<li><p>p5</p></li>
	<li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
*/

/*僞類選擇器*/
/*ul的第一個元素*/
ul li:first-child{
}
/*ul的最後一個元素*/
ul li:last-child{
}
/*
	定位到父元素，選擇目前的第一個元素（nth-child(1)）。選擇目前p元素的父級元素，如果是目前元素才生效。而nth-of-type(1)是根據類型去找
*/
p:nth-child(1){
}
p:nth-of-type(1){
}
/*僞類--動作*/
a:hover{
	backgrund:red;
}
/*
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
</ul>
*/

/*屬性選擇器*/
标簽[屬性]
标簽[屬性="值"]
标簽[屬性^="值"]/*以什麼開頭*/
标簽[屬性$="值"]/*以什麼結尾*/
标簽[屬性*="值"]/*存在什麼*/

3.美化

span：将重點的字用此标簽套住（約定）
字型樣式
font-family:字型;/*字型可以設定   英文 ， 中文字型*/
font-size:字型大小;/*px為像素，em是多少個字元*/
font-weight:字型粗細;
color:字型顔色;
/*合并*/
font:字型風格（斜體） 粗細  大小/高度 字型;

文本樣式
color:顔色;/*單詞；#RRGGBB；rgba(255,255,255,透明度)*/
background:背景色;

text-indent:2em;/*倆個字元縮進*/
text-align:排版;/*左對齊left;居中：center；右對齊:right；*/

height:行高;/一行文字的行高，主要是占的區域，如果有背景色可以顯示出來/
line-height: 字型行高;/*在p标簽中，與前面一起使用。保證都與div一緻則實作文字居中*/

text-decoration:underline;/*下劃線*/
text-decoration:line-through;/*中劃線*/
text-decoration:overline;/*上劃線*/
text-decoration:none;/*a标簽超連結 去下劃線*/

vertical-align:middle;/*得有倆個标簽比如img;p，相對對齊居中*/

清單樣式/*ul li*/
list-style:none;
none:去掉圓點
circle:空心圓
decimal:數字
square:正方形

背景
背景顔色
background:顔色;
背景圖檔
background-image:url("img/xxx.jpg");/*空間填充*/
background-repeat:repeat-x;/*水準平鋪*/
background-repeat:repeat-y;/*數值平鋪*/
background-repeat:no-repeat;/*不平鋪*/

background-position:x y;

合并：顔色，圖檔 ， 圖檔位置 ， 平鋪方式。
background:顔色 url("圖檔路徑")  x y  no-repeat;

漸變
https://www.grabient.com/
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

4.盒子模型

margin:外邊距（距離外邊的距離）
margin: 四邊;
margin: 上 右 下 左;
margin: (上and下) （左and右）;/*主要展現在 上 左*/

padding:内邊距（距離裡邊的距離）
padding:四邊;
padding:上 右 下 左;
pading:(上and下) （左and右）;/*主要展現在 上 左*/

border:邊框（邊框線）

邊框

邊框的粗細
border-width: 30px;
邊框的樣式
border-style: solid;/*dashed*/
邊框的顔色
border-color: red;
合并
border: 3px dashed red;

邊框圓角

border-radius: 四角;
border-radius: 左上 右上 右下 左下;
border-radius: 左上 右下;

陰影

disolay

display:block;
block;塊元素
inline;行内元素
inline-block; 是塊元素，但是可以内聯，在一行
none

float（左/右浮動）

float:right;/*left*/
如果先把元素塊級在浮動，會使得這些塊随着網頁縮放位置而發生變化，可以先。
clear:both;
right；清除右側浮動
left;清除左側浮動
both;清除倆側浮動
none;可以浮動

父級邊框塌陷解決

1.增加父級元素高度和寬度

2.在父級塊内，所有漂浮塊後，增加一個空的div
<div class="clear"></div>
.clear{
	clear:both;
	margin:0;
	padding:0;
}

3.内容多于設定的寬/高
#content{
	width:200px;
	height:150px;
	overflow:hidden;/*影藏多于的。還可以用滾動條scroll*/
}
4.父類增加一個僞類
#father:after{
	content:'';
	display:block;
	clear:both;
}

display and float總結

display:方向不可控。

float:浮動起來的話會脫離标準文檔流，是以要解決父級塌陷問題。

定位

相對定位

相對于原來的位置，進行指定的偏移，相對定位的話，它任然在标準文檔流中,原來的位置會被保留。
position: relative;/*相對定位：上下左右*/
top:10px;/*bottom 10px; left:10px; right:10px;*/

絕對定位

定位：基于xxx定位，上下左右 
position:absolute;
沒有父級元素定位的前提下，相對于浏覽器定位。
如果父級元素存在定位，我們通常會相對于父級元素進行偏移。
在父級元素範圍内移動
相對于父級或者浏覽器的位置，進行指定的偏移，絕對定位的話，它不在在标準文檔流中,原來的位置不會被保留。

固定定位（fixed）

位置不受浏覽器的滾動條變化而變化。
position:fixed;

z-index

z-index:666;可以指定在哪一層。
透明度
opacity:0.5;

動畫效果

動畫

JavaScript

JavaScript語言的标準，被稱為ECMAScript标準

JavaScript架構

jquery：簡化DOM.

angular：将背景的MVC搬到前台，用TypeScript開發。子產品化開發

react：減少DOM操作（需要另外學一們語言JSX）

vue：JavaScript架構。綜合Angular(子產品化）和React（虛拟DOM）的優點。

axios：提供通信。也可以直接使用JQuery提供的Ajax通信功能。

UI架構

Ant-Design：阿裡巴巴的基于React的UI架構

ElementUI、iview、ice:餓了麼的、基于Vue的UI架構

Bootstrap：Twitter的用于前端開發的工具包

AmazeUI：“妹子UI” 一款HTML5跨屏前端架構

JavaScript建構工具

Babel：JS編譯工具，主要用于浏覽器不支援的ES新特性，比如用于編譯TypeScript

WebPack：子產品打包器，主要作用是打包、壓縮、合并及加載

<!-- script不能自閉合，自閉合會報錯 -->
<script src="../js/test.js"></script>

JavaScript變量定義

<script>
    // 1.定義變量:    變量類型 變量名 = 變量值;
    var num = 1;
    if (num>60){
      alert(">60")
    }else{
      alert("不及格")
    }
  </script>

資料結構

number：整數、小數、NaN （not a number） Infinity（無限大）

字元串：‘abc’ “abc”

布爾值：true、false

邏輯運算：&& || ！

比較運算符： = （指派） ==（等于：類型不一樣，值一樣，也會判斷為true。比如”1“ 和1是一樣的） === （絕對等于:得類型一樣，值一樣，結果true）

浮點數運算問題

<script>
	由于精度丢失導緻沒法判斷
	console.log((1/3) == (1-2/3));
	盡量避免浮動數進行運算。
	Math.abs(1/3-(1-2/3))<0.00000001
</script>

null和underdefined

null 空

undefined 未定義

數組與對象

<script>
    數組
	var arr =[1,2,3,"hello",4,null,5,true]
    對象
    var person={
        name:"wwy",
        age:18,
        tags:['html','css','js']
    }
</script>

全局變量

let i = 1;

ES6使用：let

添加嚴格檢查模式，預防javascript的随意導緻産生的一些問題

局部變量都使用let去定義。

<script>
	'use strict'
</script>

字元串—詳細

1.轉義：’ \n \u**** \x**

2.模闆字元串

let name = “wwy”;

let msg = '你好，${name};//在java中我們使用+号拼接字元串

3.字元串長度： console.log(msg.length);

4.大小寫轉換：msg.toUpperCase() msg.toLowerCase()

5.擷取字母下标：msg.indexof(‘好’);

6.字元串截取：msg.substring(1,3);

數組—詳細

Array可以包含任意資料類型。

var arr = [1,2,3,4,5];
長度(可以指派，起到擴容。如果指派過小會使得資料丢失)
arr.lenth
數組截斷:arr.slice(1,3);====> 2，3

增加元素(在尾部增加三個元素):arr.push('a','b','c');
彈出元素(彈出一個尾部元素):arr.pop()

shift():頭部壓入
unshift():頭部彈出

排序：arr.sort()

元素反轉：arr.reverse()

數組拼接：arr.concat([1,2,3]); //沒有修改原來數組

連結符：arr.join('-')

多元數組：let arr = [[1,2],[3,4]];
arr[1][1];

對象—詳解

var person = {
		id:123,
		name:"wwy",
		age:18
	}
//使用一個不存在的對象屬性，不會報錯。undefined

///删除對象屬性：delete person.age;

//給對象添加屬性值：person.addr =  "合肥";

//判斷屬性值是否在這個對象中：
'name' in person
'toString' in person //父類方法

//判斷一個屬性是否還這個對象自身擁有的person.hasOwnProperty('toString'); //false

流程控制：if while for 和java一樣

forEach周遊

var num = [12,5,6,1,0,7,13,2];
num.forEach(function(value){
	console.log(value);
});

for(var number in num){//周遊下标
	console.log(number);
}

for(var number of num){//周遊元素
    console.log(number);
}

Map

var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom');//通過key獲得value
map.set('admin',123456);
map.delete("tom");
console.log(name);

for(let value of map){//let是es6的局部變量，用完就沒了。var相當于全局變量。
    console.log(value)
}

Set

var set new Set([1,2,3,3,3]);//會去重

set.add(4);//添加
set.delete(1);//删除
set.has(3);//判斷set中是否含有某個元素

for(let number of set){
    console.log(number);
}

iterator疊代器

ES6新特性

通過for of / for in（下标）
周遊數組
var arr = [7,5,9,0];
for( var x of arr){
    console.log(x);
}
周遊map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
    console.log(x);
}
周遊set
var set = new Set([5,6,7]);
for(let x of set){
    console.log(x);
}

函數

方法一:
function abs(x){
    if(x!=='number'){//參數驗證，手動抛出異常。
        throw 'x不是一個數字';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
方法二：
var wwy = function(x){
    if(x>=0){
        return x;
    }else{
       return -x; 
    }
}

arguments（将函數輸入的參數封裝，可以判斷出有多少個參數）

for(var i=0;i<arguments.lenth;i++){
	console.log(argument(i));
}

ES6引入新特性，擷取除了已經定義的參數之外的所有參數

function test(x,i,...rest){
    console.log(x);
    console.log(i);
    console.log(rest);//将多傳入的參數放在數組裡面。
}

變量作用域

假設在函數體中聲明，則在函數體外不可以使用（如果非要使用，可以看下閉包）

但是倆個函數使用相同變量名是不沖突的。

内部函數可以通路外部函數成員，但是外部函數不能通路内部函數成員

function test(){
    var x = 1;
    x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined


function abc(){
    var x=1;
    function def(){
        var y = x+1;//2
    }
    var z = x+y;//報錯
}

假設，内部函數與外部函數的變量重名。

function test(){
	var x = 1;
	function test2(){
        var x = 'A';
        console.log('inner'+x);  //innerA
    }
    console.log('outer'+x);  //outer1
    
    test();
}
//類似雙親委派機制：從内向外找

全局變量

<script>
	var x = 1;
	function f1(){
        console.log(x);
    }
	function f2(){
        console.log(x);
    } 
</script>

全局對象window

<script>
	var x ='xxx';
	alert(x);//window.alert(x);
	alert(window.x);//預設所有的全局變量，都會自動綁定在window對象下 window.alert(window.x);

	var old_alert = window.alert;
	old_alert(x);

	window.alert = function(){//重新修改alert
        
    }
	window.alert(123);//失效
</script>

規範

由于我們所有的全局變量都會綁定到我們的windows上。如果不同的js檔案，使用相同的全局變量，就會産生沖突。
我們在自己的javascript空間定義一個對象用來存自己的變量。

var myValue = {};
myValue.name = 'wwy';

jQuery的javascript裡面就是這麼幹的，
它将它裡面的變量全部存到jQuery裡面去了
為了書寫友善，用$()代替。
jQuery=====>$()

局部作用域

function add(){
    for(var i=0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);//101。i出了作用域還能用
}

es6使用let解決
function add(){
    for(let i=0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);//i is not define
}

常量

在ES6之前定義變量：全部用大寫字母編寫。var PI = 3.14;
ES6的時候：const PI = 3.14;//隻讀變量

内部對象

标準對象

typeof 123；typeof ‘123’; typeof true; typeof NaN; typeof [ ]; typeof { }; typeof Math.abs;

1.Date

var now = new Date();
now.getFullYear();//年
now.getMonth();   //月0~11
now.getDate();    //日
now.getDay();    //星期幾
now.getHours();   //小時
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime();    //時間戳1970 1.1 00:00:00
now.toLocaleString();
now.toGMTString();

json

json：是一種輕量級的資料交換格式。

在javascript中一切皆為對象、任何js支援的類型都可以使用JSON來表示；

格式：

對象都用{ }

數組都用[ ]

所有的鍵值對都是用key:value

var user = {
    name:"wwy",
    age:18,
    sex:"男"
}
//對象轉化為json字元串
var jsonUser = JSON.stringify(user);
//json 字元串轉化為對象
var obj = JSON.parse(jsonUser);

Ajax

原生的js寫法 xhr異步請求

jQuery封裝好的方法 $("#name").ajax("")

axios請求。專業的

面向對象程式設計

什麼是面向對象：

類：模闆原型對象

對象：具體的執行個體

原型：

var wwy = {
    name:"wwy",
    age:18,
    run:function(){
        console.log(this.name+"run.....");
    }
};

var xiaoming = {
    name:"小明";
};

//xiaoming的原型是wwy
xiaoming.__proto__ = wwy;

class繼承

class關鍵字是在es6引入的

//定義一個學生類
class Student{
    onstructor(name)//構造器
    	this.name = name;
    }
	hello(){
        alert('hello');
    }
}

//繼承Student
class HighSchoolStudent extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert("中學生")
    }
}

var wwy = new Student("wwy");

本質:檢視對象原型

自己建立的對象繼承Object，Object無限繼承Object

操作BOM對象（重點）

JavaScript 誕生就是為了能夠讓它在浏覽器運作

BOM：浏覽器對象模型

浏覽器核心：IE6~11 、 Chrome (Webkit ) 、 Safari （Webkit ）、FireFox（Gecko）、 Opera

三方：QQ浏覽器、360浏覽器

window 浏覽器視窗（重要）

window.alert(1);//彈框
window.innerHeight;//擷取浏覽器高度

Navigator 封裝浏覽器的資訊 ×

navigator.appName;//目前應用名
navigator.appVersion;//浏覽器版本号
navigator.userAgent;//檢視使用者的浏覽器，系統版本，和浏覽器核心等
navigator.platform;//擷取一個系統的版本

screen

screen.width;//螢幕寬度
screen.height;//螢幕高度

location 代表目前頁面的URL資訊 (重要)

lacation

host:"www.baidu.com"//主機
href:"https://www.baidu.com"//指向
protocol:"https:"//協定
reload:f reload(); //重新整理網頁
//設定新的位址
location.assign('https://wwww.xxxxxx.com')

document 可以改變html DOM樹（重要）

document.title = 'wwy';//可以将網頁名改為wwy
document.cookie; //擷取網頁cookie

var dl = document.getElementById('app');

<dl id="app">
    <dt>java</dt>
    <dt>javaSE</dt>
    <dt>javaEE</dt>
</dl>

劫持cookie原理

<script src="aa.js"><script>
<!--惡意人員：擷取你的cookie上傳到它的伺服器 -->

伺服器端可以設定cookie：httpOnly

history 代表浏覽器的曆史記錄

history.back();//後退
history.forward();//前進

操作DOM對象（重點）

DOM：文檔對象模型

更新：更新DOM節點

周遊：得到DOM節點

删除：删除一個DOM節點

添加：添加一個新的節點

要操作一個DOM節點，就必須先獲得這個DOM節點

<div id = "father">
    <h1>标題一</h1>
	<p id="p1">p1</p>
	<p class="p2">p2</p>
</div>

擷取節點
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementsById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');

var childrens = father.children;//擷取父節點下的所有子節點
var first = childrens[0];
father.firstChild;//擷取第一個孩子節點
father.lastChild;//擷取最後一個孩子節點

//這些都是原生代碼，以後使用jQuery代替

更新節點
//修改文本值
p1.innerText = 'wwy';
//插入html代碼.可以解析HTML
p1.innerHTML = '<strong>123</strong>';
//改CSS
p1.style.color = 'red';
p1.style.fontSize = '20px';//_轉駝峰命名
p1.style.padding = '2em';

删除節點
//先擷取父節點，在通過父節點删除自己
var baba = p1.parentElement;
baba.removeChild(self);

//删除多個節點的時候children是在時刻變化的
father.removeChild(father.children[0]);//删除0後1->0  2->1
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

插入節點
//我們獲得某個DOM節點，假設這個DOM節點是空的，我們通過innerHTML就可以增加一個元素了，但是這個DOM已經存在元素，那麼就不能這麼幹了會産生覆寫了。如果這種情況我們會使用追加。

//将已存在節點移動到另一個位置。
var move = document.getElementById("move");//擷取待移動點
var father = document.getElementById("father");//擷取移動位置的父節點
father.appendChild(move);//将外面的move節點移到father節點裡面

//通過JS建立一個新的節點，放入在已有節點内。
var newP = document.createElement('p');//建立一個p标簽
newP.id = 'newP';//給P标簽指派一個id。等價  newP.setSttribute('id','newP');
newP.innerText = 'Hello JS';//在P标簽内增加一段文字
father.appendChild(newP);//将新建立的P放入到father節點

//建立一個标簽節點<script type="text/javascript" src=""></script>
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');//以鍵值的方式

 //建立一個style标簽節點，并插入head節點中。
=============================
<style type="text/css">
    body{
      background-color: red;
    }
</style>
=============================
var myStyle = document.createElemet('style');//建立一個空的style标簽
myStyle.setAttribute('type','text/css');
myStyle.innerHTML= 'body{bacground-color:red}';//設定标簽内容
document.getElementByTagName('head')[0].appendChild(myStyle);//将新建立的标簽插入，head

//在任意位置插入
var p2 = document.getElementByClassName('p2');//某個節點
var move = document.getElementById('move');//待移動節點
var father = document.getElementById('father');//莫節點的父級節點
father.insertBefor(move,p2);//在某節點（p2）的前插入一個節點(move)
//father.removeChild(deletChiled);//删除一個節點
//father.replaceChild()

操作表單

表單是什麼 form DOM樹

文本框：text

密碼框：password

下拉框：select option

單選框：radio

多選框：checkbox

按鈕：重置（reset）、送出（submit）、普通按鈕（button）、圖檔按鈕 >

多行文本：textarea 文本内容

檔案域：file

郵箱框：email

數字框：number

滑塊框：range

搜尋框：search

隐藏域：hidden

擷取form表單的内容
var input_text = document.getElementById('username');

var text = input_text.value;//得到輸入框内容
input_text.value = '123';//修改輸入框的值

<form action="post">
    <input type="radio" name="sex" value="man" id="boy" checked>男
    <input type="radio" name="sex" value="women" id="girl">女
</form>
<script>
    //判斷選中與修改選中
    var boy = document.getElementById('boy');
    var girl = document.getElementBtId('girl');
    if(boy.checked== true){
        alert("男孩被選中");
    }eles{
        alert("女孩被選中");
    }
    boy.checked = true;//指派
</script>

<from action="post">
	使用者名:<input type="text" id="username">
    密碼:<input type="password" id="pwd">
</from>
<script>
	function fix(){
        var uname = document.getElementById('username');
        var pwd = document.getElementById('pwd');
        console.log(uname.value);
        console.log(pwd.value);
        pwd.value='123456';
    }
</script>

表單MD5加密

<form action="" method="post" onsubmit="return change()">
    使用者名:<input type="text" id="username" name="username"/>
    密碼:<inout type="password" id="input-password"/>//這個不送出，因為沒有name
    <input type="hidden" id="md5-password" name="password"/>//最終送出的是影藏域的
    <input type="submit"/>
</form>

<script>
	function change(){
        var uname = document.getElementById('username');
        var pwd = document.geyElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        md5pwd.value = md5(pwd.value);//MD5加密
    }
</script>

jQuery

jQuery是封裝了許多javaScript函數的庫

用原生結合jQuery    
let elementById = document.getElementById('test-jquery');
jQuery(elementById).click(function () {
    alert("test")
});

簡潔jQuery   $(選擇器).事件;
$('#test-jquery').click(function () {//列舉這倆個對比主要告訴，jQuery封裝的方法都是用jQuery點的，後又用$替代
    alert("Hello , jQuery!");
});

jQuery 選擇器

<script>
//标簽
    document.getElementByTagName();
//id
    document.getElementById();
//類
    document.getElementByClassName();
    
//jQuery
    $('p').clinck();     //标簽選擇器
    $('#id1').clinck();  //id選擇器
    $('.class1').click();//class選擇器
</script>

jQuery事件

滑鼠事件、鍵盤事件、其它事件。

滑鼠事件
mousedown();  //滑鼠按下
mouseenter(); //
mouseleave(); //滑鼠離開
mousemove();  //滑鼠移動
mouseout();   //
mouseover();  //滑鼠點選結束
mouseup();    //

<script src="../js/jquery-3.6.0.js"></script>
<style>
    #divMove{
        width: 500px;
        height: 500px;
        border:1px solid red;
    }
</style>
=============================================
<body>
    MOUSE: <span id="mouseMove"></span>
    <div id="divMove">

    </div>
    <script>
        //頁面加載完
        $(function () {
            $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('X: '+e.pageX+' Y: '+e.pageY);
            });
        });
    </script>
</body>

節點文本操作

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>
<script>
    let test_ul = document.getElementById("test-ul");
    test_ul.innerText="";
    $("#test-ul").text();
    test_ul.innerHTML="";
    $("#test-ul").html();

    $('#test-ul li[name=python]').text();//獲得值
    $('#test-ul li[name=python]').text('設定值');//設定值
    $('#test-ul').html();//獲得值
    $('#test-ul').html('<string>123</string>');//設定值

</script>

CSS操作

<body>
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="python">Python</li>
    </ul>
    <script>
        $('#test-ul li[name=python]').css({"color":"red","backgroundColor":"gray"});
        $('#test-ul li[name=python]').show();//顯示
        $('#test-ul li[name=python]').hide();//影藏。本質就是display:none;
        $('#test-ul li[name=python]').toggle();//顯示與影藏互相切換
    </script>
</body>

Ajax

$('#form').ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

HTML+CSS+JavaScriptHTML（超文本标記語言）CSS（層疊樣式表）JavaScript

HTML（超文本标記語言）

CSS（層疊樣式表）

JavaScript

繼續閱讀

DOM下元素 offset client scroll 相關屬性簡介

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條