前端知識體系
什么是JavaScript
快速入門
- 引入JavaScript
- 基本語法入門
- 資料型別
  - Number 數字
  - String 字串
  - Boolean 布爾
  - Null 對空
  - Undefined 未定義
  - Symbol 獨一無二的值
  - Array 陣列
  - Object 物件
  - Function 函式
- 嚴格檢查模式strict
資料型別
- 字串
- 陣列
- 物件
- 流程控制
- Map和Set ES6新特性
函式
- 定義函式
- arguments
- rest
- 變數的作用域
- let 區域變數宣告
- const 常量宣告只讀變數
- 方法
內部物件
- Date
- Json
面向物件編程
- 原型繼承
- class繼承
操作BOM物件
操作DOM物件
操作表單（MD5加密密碼）
jQuery
- 下載參考jQuery庫
- 公式 $(selector).action()
- jQuery與JavaScript對比
- 事件
- 操作DOM元素
小技巧
- 鞏固JS 看jQuery原始碼，看小游戲原始碼-原始碼之家
- 鞏固HTML/CSS 扒網站，down下來，對應修改看效果

前端知識體系

什么是JavaScript

JavaScript是一門世界上最流行的腳本語言，
ECMAScript可以理解為是JavaScript的一個標準，
最新版本es6，
但是大部分瀏覽器還只停留在支持es5代碼上，
開發環境和生產環境版本不一致，

快速入門

引入JavaScript

內部標簽
外部引入

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

    <!--內部標簽-->
    <script>
        // alert('hello,world');
    </script>
    <!--外部引入-->
    <script src="https://www.cnblogs.com/wl3pb/p/js/main.js"></script>
</head>
<body>

</body>
</html>

alert('hello,world');

基本語法入門

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

    <script>
        // 1.定義變數 變數型別 變數名 = 變數值;
        var num = 1;
        // 2.條件控制
        alert(num);
        if (2>1) {
            alert("true");
        }
        // 3.在瀏覽器控制臺列印變數
        console.log(num);
    </script>
</head>
<body>

</body>
</html>

資料型別

Number 數字

js不區分整數和小數

 123 // 整數
123
123.1 // 浮點數
123.1
1.231e2 // 科學計數法
123.1
-123 // 負數
-123
NaN // not a number
NaN
Infinity // 表示無限大
Infinity

String 字串

'abc'
"abc"
"abc"
"abc"

Boolean 布爾

console.log(2>1)
VM520:1 true
console.log(2<1)
VM568:1 false

Null 對空

Undefined 未定義

Symbol 獨一無二的值

Symbol 是 ES6 引入了一種新的原始資料型別，表示獨一無二的值，

Array 陣列

var arr = [1,2,3,4,'ab',null,true];
new Array(1,2,3,4,'ab',null,true);
console.log(arr[2]);

Object 物件

var person = {
  name:'zhangyq',
  age:18,
  tags:['java','js','web']
}
console.log(person.age);

Function 函式

嚴格檢查模式strict

/*
前提：IDEA需要設定支持ES6語法
'use strict';嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
必須寫在JavaScript的第一行
區域變數建議都使用let去定義，如：let i = 1;
*/
//嚴格檢查模式strict，嚴格加成模式下，i = 1報錯
'use strict';
//全域變數
//i = 1;

IDEA設定支持ES6語法

資料型別

字串

'use strict';
// 1.正常字串使用單引號或雙引號包裹
console.log('a');
console.log("a");
// 2.注意轉義字符
console.log('a\'');
console.log("a\'");
console.log('a\nb');
console.log('\u4e2d'); // Unicode
console.log('\x41'); // Ascll
// 3.多行字串撰寫，使用反引號`
var msg = `hello
world
你好`;
console.log(msg);
// 4.模板字串，使用反引號`和$
let name='zhangyq';
console.log(`nihao,${name}`);

陣列

// 陣列可以包含任意的資料型別
var arr=[0,1,2,3,4,5];
// slice() 截取陣列的一部分，回傳一個新的陣列
var arr1=arr.slice(3);
// push() 壓入到尾部
arr.push('a','b');
// pop() 彈出最后一個
arr.pop();
// unshift() 壓入到頭部
arr.unshift('a','b');
// shift(); 彈出第一個
arr.shift();
// sort() 排序
var arr=['B','C','A'];
arr.sort();
console.log(arr);
// reverse() 反轉
arr.reverse();
console.log(arr);
// concat() 拼接，回傳新的陣列，不改變原來的陣列
var arr2=arr.concat([1,2,3]);
console.log(arr2);
console.log(arr);
// join() 列印拼接陣列，使用特定的字串連接
console.log(arr.join('-'));
// 多維陣列
var arr=[[1,2],[3,4],['a','b']];

物件

var person={
  name:"zhangyq",
  age:18,
  phone:"13299998888"
}
person.name="zhangsf";
//洗掉物件屬性
delete person.name
//添加物件屬性
person.email="[email protected]"
//判斷屬性是否在這個物件中
'age' in person
//判斷方法是否在這個物件中
'toString' in person
判斷屬性或方法是否是自身擁有的
person.hasOwnProperty('age');
person.hasOwnProperty('toString');

流程控制

if判斷
while回圈
for回圈
forEach回圈
for...in
for...of

//forEach回圈
var arr=[1,2,2,3,4,5];
arr.forEach(function(value){
  console.log(value);
});
//for...in的值是索引
for(var index in arr){
  console.log(arr[index]);
}
//for...of回圈的是具體的值
for(var v of arr){
  console.log(v);
}

Map和Set ES6新特性

//Map
var map=new Map([['tom',100],['jack',90],['join',80]]);
var name=map.get('tom');
map.set('admin',123);
map.delete('admin');
//Set 無序不重復集合
var set=new Set([1,2,2,3,3]); // set可以去重
set.add(4);
set.delete(1);
console.log(set.has(2)); // 是否包含某個元素

函式

定義函式

定義方式一

// 一旦執行到return代表函式結束，回傳結果！
// 如果沒有執行return，函式執行完也會回傳結果，結果就是undefined，
function abs(x){
  if(x>=0){
    return x;
  }else{
    return -x;
  }
}
abs(-10);

定義方式二

// function(x){...}是匿名函式，通過abs就可以呼叫函式！
var abs=function(x){
  if(x>=0){
    return x;
  }else{
    return -x;
  }
}
abs(-10);

JavaScript可以傳任意個引數，也可以不傳遞引數！

var abs=function(x){
  //手動拋出例外
  if(typeof x !== 'number'){
    throw 'Not a Number';
  }
  if(x>=0){
    return x;
  }else{
    return -x;
  }
}

arguments

arguments代表所有的引數，是一個陣列

var abs=function(x){
  if(arguments.length=1){
    return x;
  }else if(arguments.length>1){
    return arguments.length;
  }
}

rest

ES6引入的新特性，獲取除了已經定義的引數之外的所有引數
rest引數只能寫在最后面，必須用...標識

function fun(a,b,...rest){
  console.log("a->"+a);
  console.log("b->"+b);
  console.log(rest);
}

變數的作用域

函式體中宣告的變數，函式體外不可以使用（非要實作的話，可以研究下閉包）

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

內部函式可以訪問外部函式的變數，反之則不行

function funA(){
  var x=1;
  function funB(){
    var y=x+1;
  }
  var z=y+1; // Uncaught ReferenceError: y is not defined
}

全域變數：定義在函式外部

var x=1;
function f(){
  console.log(x);
}
console.log(x);

全域物件window：默認所有的全域變數，都會自動系結在window物件下

var x=1;
console.log("x->"+x);
console.log("window.x->"+window.x);

JavaScript實際只有一個全域作用域，任何變數（函式也可以視為變數），假設沒有在函式作用范圍內找到，就會向外查找，直到全域作用域window也沒有找到，就會報錯
由于所有的全域變數都會系結在window上，如果不同的js檔案，使用了相同的全域變數，會沖突，如何減少沖突？把自己的代碼全部放入自己定義的唯一空間名字中，降低全域命名沖突的問題

// 唯一全域變數
var main={};

//定義全域變數
main.name='zhangyq';
main.add=function(a,b){
  return a+b;
}

let 區域變數宣告

function f(){
  for(var i=0;i<100;i++){
    console.log(i);
  }
  console.log(i+1); // 101 問題？i出了作用域還可以使用
}

ES6 let關鍵字，解決區域作用域問題！

function f(){
  for(let i=0;i<100;i++){
    console.log(i);
  }
  console.log(i+1); // Uncaught ReferenceError: i is not defined
}

建議使用let去定義區域作用域的變數

const 常量宣告只讀變數

const PI=3.14; // 只讀變數
console.log(PI);
pi=3.15; // TypeError: Assignment to constant variable

方法

方法就是把函式放在物件的里面

var qing={
  name:'zhangyq',
  birth:2000,
  age:function(){
    var now=new Date().gerFullYear();
    return now-this.birth;
  }
}
qing.name;
qing.age();

apply指定呼叫方法的物件

內部物件

Date

方法自查

Json

JSON(JavaScript Object Notation, JS 物件簡譜) 是一種輕量級的資料交換格式，

var user={name:"zhangyq",age:18,sex:'男'}
//物件轉化為json字串
var jsonStr=JSON.stringify(user);
//物件{name: "zhangyq", age: 18, sex: "男"}
//json字串{"name":"zhangyq","age":18,"sex":"男"}
//json字串轉化為物件
var obj=JSON.parse(jsonStr);

面向物件編程

原型繼承

var user={name:"zhangyq",age:18,sex:'男'}
var xiaoming={name:"xiaoming"}
//xiaoming的原型是user
xiaoming.__proto__=user
/*xiaoming
{name: "xiaoming"}
name: "xiaoming"
__proto__:
age: 18
name: "zhangyq"
sex: "男"
__proto__: Object
*/

class繼承

class關鍵字是在ES6引入的

//定義一個類，屬性，方法
class Student{
  constructor(name){
    this.name=name;
  }
  hello(){
    alert('hello');
  }
}

var xiaoming=new Student('xiaoming');
var xiaohong=new Student('xiaohong');

//繼承
class XiaoStudent{
  constructor(name,grade){
    super(name);
    this.grade=grade;
  }
  myGrade(){
    alert('我是一名小學生');
  }
}

操作BOM物件

瀏覽器介紹
1. IE6~11
2. Chrome
3. Safari
4. FireFox
window 代表瀏覽器視窗

window.alert(1)
window.innerHeight
window.outerHeight

navigator 封裝了瀏覽器的資訊
screen 代表螢屏

screen.width
screen.height

location 代表當前頁面的URL資訊

location
//重繪頁面
location.reload()
//跳轉頁面
location.assign('www.baidu.com');

document 代表當前的頁面

document.title
document.title='我的頁面'
//獲取cookie
document.cookie

history 代表瀏覽器歷史記錄

history.back()
history.forward()

操作DOM物件

DOM 檔案物件模型
瀏覽器網頁就是一個DOM樹形結構

<div id="div1">
  <h1>標題一</h1>
  <p id="p1">p1</p>
  <p >p2</p>
</div>

//根據標簽名查詢
var h1Array=document.getElementsByTagName('h1');
//根據ID查詢
var p1=document.getElementById('p1');
//根據class名查詢
var p2Array=document.getElementsByClassName('p2');
var div1=document.getElementById('div1');
//獲取子節點
var childrens=div1.children;

//修改文本值
p1.innerText='123';
//修改html
p1.innerHTML='<strong>123</strong>';
//修改css樣式
p1.style.color='red';

//洗掉節點，只能通過父節點洗掉子節點
div1.removeChild(p1);
p1.parentElement.removeChild(p1);
div1.removeChild(div1.children[2]);
div1.removeChild(div1.children[1]);
div1.removeChild(div1.children[0]);

//追加已有標簽
div1.appendChild(p2);
//創建標簽并追加
var p4=document.createElement('p');
p4.id='p4';
p4.innerText='p4';
p4.setAttribute('class','p2');
div1.appendChild(p4);
//插入p2節點到p1前
div1.insertBefore(p2,p1);

操作表單（MD5加密密碼）

<!--MD5工具類-->
<script src="https://www.cnblogs.com/wl3pb/p/https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

<form method="post" action="#">
  <p><span><label>用戶名 </label></span><input type="text" id="username" name="username"></p>
  <p><span><label>密碼 </label></span><input type="password" id="password"></p>
  <input type="hidden" id="md5_password" name="password">
  <p><button type="submit" onclick="submit()">提交</button></p>
</form>

//獲取input
var input_username=document.getElementById('username');
//獲取input的值
var username=input_username.value;
//修改input的值
input_username.value='https://www.cnblogs.com/wl3pb/p/zhangyq';

function submit(){
  var username=document.getElementById('username').value;
  var password=document.getElementById('password').value;
  console.log(username);
  console.log(password);
  //MD5加密密碼
  md5_password=md5(password);
  console.log(md5_password);
  document.getElementById('md5_password').value=https://www.cnblogs.com/wl3pb/p/md5_password;
}

jQuery

jQuery庫封裝了大量JavaScript函式

下載參考jQuery庫

下載：https://jquery.com

<!--參考在線或本地的-->
<!--在線版-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
<!--開發版-->
<script src="https://www.cnblogs.com/wl3pb/p/js/jquery-3.5.1.js"></script>
<!--生產壓縮版-->
<script src="https://www.cnblogs.com/wl3pb/p/js/jquery-3.5.1.min.js"></script>

公式 $(selector).action()

<a id="a1"></a>

$('#a1').click(function(){
  alert('hello');
});

jQuery與JavaScript對比

//JavaScript
document.getElementsByTagName();
document.getElementById();
document.getElementsByClassName();

//jQuery css中的選擇器全部可以使用，如：層級選擇器，偽類選擇器，屬性選擇器等
$('p').click();
$('#id').click();
$('.class').click();

事件

滑鼠事件
鍵盤事件
其他事件

<style>
  #divMove{
    width: 500px;
    height: 500px;
    border: 1px solid red;
  }
</style>
<!--獲取滑鼠當前的坐標-->
mouse: <span id="mouseMove"></span>
<div id="divMove">在這里移動滑鼠</div>

<script>
  //當網頁元素加載完畢后，回應事件
  //$(document).ready(function(){});
  //可簡化為
  $(function(){
    $('#divMove').mousemove(function(e){
      $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
    });
  });
</script>

操作DOM元素

$('#test_ul li[name=python]').text();
$('#test_ul li[name=python]').html();
$('#test_ul li[name=python]').css({"color":"#ff0011","background":"blue"});
$('#test_ul li[name=python]').css("color","#ff0011");
$('#test_ul li[name=python]').css("color");
$('#test_ul li[name=python]').hide();
$('#test_ul li[name=python]').show();
$('#test_ul li[name=python]').toggle();
$(window).width();
$(window).height();

jQuery中文檔案：https://jquery.cuishifeng.cn/

小技巧

鞏固JS 看jQuery原始碼，看小游戲原始碼-原始碼之家

原始碼之家：https://www.mycodes.net/

鞏固HTML/CSS 扒網站，down下來，對應修改看效果

扒網站步驟：

打開網站，選擇Elements，選中代碼，按Delete洗掉，不影響頁面繼續洗掉，影響頁面回退，洗掉下一行，直到沒有洗掉的為止，

右鍵選擇Copy->Copy outerHTML，復制代碼，然后將代碼粘貼到自己的HTML檔案中，修改相應的html和css，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/262011.html

標籤：JavaScript

上一篇：vue中手寫table的升降序

下一篇：原生javascript開發計算器實體

030_JavaScript

前端知識體系

什么是JavaScript

快速入門

引入JavaScript

基本語法入門

資料型別

Number 數字

String 字串

Boolean 布爾

Null 對空

Undefined 未定義

Symbol 獨一無二的值

Array 陣列

Object 物件

Function 函式

嚴格檢查模式strict

資料型別

字串

陣列

物件

流程控制

Map和Set ES6新特性

函式

定義函式

arguments

rest

變數的作用域

let 區域變數宣告

const 常量宣告 只讀變數

方法

內部物件

Date

Json

面向物件編程

原型繼承

class繼承

操作BOM物件

操作DOM物件

操作表單（MD5加密密碼）

jQuery

下載參考jQuery庫

公式 $(selector).action()

jQuery與JavaScript對比

事件

操作DOM元素

小技巧

鞏固JS 看jQuery原始碼，看小游戲原始碼-原始碼之家

鞏固HTML/CSS 扒網站，down下來，對應修改看效果

const 常量宣告只讀變數