js基礎內容

1.方法

Math數學物件

Date物件

String物件

Array物件

arr.sort(function(a,b){
    return a - b;
})

2. 函式及其他

1. isNaN(變數) 檢測數字是不是非數字，也可以檢測字符是否是純數字字符

2. 用于轉換以數字開頭的字串

parseInt(字串)

parseFloat(字串)

3. typeof 變數，檢測變數型別，它不是函式
4. Array.isArray() 主要用于檢測是否是陣列，回傳真或者假
5. instanceof 檢測物件是由哪種建構式實體化所得，也可以檢測復制型別，
6. typeof 變數 === ‘object’ && !(Array.isArray(變數)）
7. valueOf

webAPI內容

1.方法

DOM

獲取元素方法：

修改樣式

修改屬性

表單元素的屬性

獲取節點方法

JSON格式化

元素操作

文字相關

BOM

?坐標相關

event物件

瀏覽器存盤

2.事件

滑鼠事件

拖拽事件，盒子需要加draggable=“true”,img默認有

滑鼠相關事件

鍵盤事件:

其他事件：

3.函式及其他：

js高級內容

1.方法：

2.函式及其他：

? 判斷基本資料型別用typeof，復雜型別用instanceof

語法：

? 資料 instanceof 建構式名

類和繼承：

class 類名 {

? constructor (形參串列) {
? //定義屬性的地方

? }
? // 方法串列（定義方法的地方）

}

class 類名 extends 父類名 {
constructor (引數串列) {
super(傳引數)
this.xxx
}
// 方法串列
}

正則物件：

正則元字符與一些其他

g 全域匹配 i 忽略大小寫

Jquery內容：

1.方法：

jQuery里的篩選方法

jQuery中的寬高

菜鳥教程

• 按 ctrl + 滑鼠左鍵點擊，就可以打開這個超鏈接
• [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Q0TQGitR-1632750857494)(D:\Da\自己總結\圖片\jQuery中的寬高.png)]
• width() 和 height()
  • 常用
  • 獲取的就是寬和高
• innerWidth() 和 innerHeight()
  • 獲取的是寬+左右padding、 高+上下paading
• outerWidth() 和 outerHeight()
  • 獲取的是 寬 + 左右padding + 左右border 、 高 + 上下padding + 上下border
• outerWidth(true) 和 outerHeight(true)
  • 獲取的是 寬 + 左右padding + 左右border + 左右margin、 高 + 上下padding + 上下border + 上下margin

jquery中的offset和position

• offset 獲取的是相對于檔案的位置
• position 獲取的是相對于自身定位所參照的父級元素的位置

scrollLeft() 和 scrollTop()

• scrollLeft獲取往左邊滾出去的距離，scrollTop獲取往上邊滾出去的距離
• 但是要注意原生都是屬性，jQuery都是方法,所以記得是 scrollLeft() 和 scrollTop()

2.事件：

Ajax內容：

jQuery里的方法：

原生：

原生ajax使用:

var xhr = new XMLHttpRequest(); //1.創建一個Ajax物件

xhr.open(‘get’, ‘https://autumnfish.cn/api/joke/list?num=10’) //2.添加open方法

xhr.open(‘post’, ‘http://www.liulongbin.top:3006/api/addbook’)

xhr.onload = function () {} //3.添加回呼函式

? xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); //4.post請求需要加內容型別

xhr.send(‘bookname=nihao&author=xiexie&publisher=asd’) //get里面內容為空，post需要加內容

模板引擎:

創建一個script type=“text/html” id=“tpl-info” 標簽，id隨意，type固定

<div>{{@title}}</div> //變數里有標簽用@才能識

<div>姓名：{{name}}</div> //正常寫法

{{if vip==1}} //判斷寫法

{{else if vip==2}}

{{else}}

{{/if}}

{{each hobby}} //回圈寫法

• {{$index+1}}-{{$value}}

• {{/each}}

  注冊時間: {{regTime | getTime}} //函式寫法，getTime為函式，前面為變數

git內容：

node.js內容：

let obj1={

age:38,

name:“達人”,

gender:“非酋”,

fd:“水”

}

let{age,name,gender,fd}=obj1

console.log(age,name,gender,fd); //38 達人 非酋 水

let {age:ag1,…obj2}=obj1

console.log(ag1,obj2); //38 { name: ‘達人’, gender: ‘非酋’, fd: ‘水’ }

let arr=[1,2,3]

let [n1,n2,n3]=arr

console.log(n1,n2,n3); //1 2 3

let [n4,…arr2]=arr

console.log(n4,arr2); //1 [ 2, 3 ]

console.log(…arr); //1 2 3

Array物件

模塊

fs 檔案系統模塊

path 路徑模塊

npm config set registry https://registry.npm.taobao.org/ 切換淘寶鏡像

http 網路模塊

res.end(‘回傳內容’) 設定回傳內容

res.setHeader(key,value) 設定回傳回應頭

req.url 獲取請求地址的相對路徑

querystring 查詢字串模塊

npm i nodemon -g 安裝nodemon，全域模式-g

npm init -y 初始化npm專案

npm i express 安裝express，非全域模式

npm i multer 安裝multer ，非全域模式

npm i express multer 同時安裝2個

npm i 有package.json的檔案時,可以自動下載所有需要的包

express 網路模塊

multer模塊

app.use((req,res,next)=>{代碼片段1;next()}) 中間件函式,可以對req,res的資料預先處理

next()方法: 會去呼叫堆疊中的下一個中間件

如果沒有呼叫next()方法,則程式執行完中間件的時候程式會停止(卡住)

res.setHeader(‘Access-Control-Allow-Origin’,’*’) // *代表所有的請求路徑 ,解決跨域問題

app.use(cors()) 呼叫cors包里面cors方法,解決跨域問題

jq解決跨域陳述句再AJAX里面加入dataType:‘jsonp’

mySQL指令

所有where都不是必須的, 不加就是對整個表格進行操作

insert into heroinfo (name,title,age) values (‘提莫’,‘迅捷斥候’,‘108’) //插入資料

delete from heroinfo where age>100 //洗掉資料

update heroinfo set name=‘妲己’,title=‘妲己愛主人’ where id=1 //對id=1的資料進行修改

select * from heroinfo //讀取整個表格

select id,name from heroinfo where age>50 //讀取表格中滿足age>50的資料,并只回傳id,name欄位

mysql模塊

crawler 爬蟲模塊

promise物件

vue基礎:

尚硅谷:

vue Vue.config.profuctionTip=false

黑馬:

陣列高階方法

組件

name:’’; 子組件使用name屬性

<style scoped></style> 子組件使用CSS作用域

<slot>我是默認值</slot> //子組件的插槽

<local1>
/<button><a href="#">點擊購買</a> 父組件使用插槽

? </button>
</local1>

import local1 from ‘./local1.vue’ //父組件匯入子組件

components:{local1 } /父組件匯入子組件,步驟2

子組件:

props:[“good-name”,“good-price”], //子組件中宣告props ： 相當于宣告屬性

this.$emit(‘自定義事件名’,引數) //自定義事件名隨意,引數可以多個

父組件 :

@自定義事件名=“函式(引數)”

標簽內使用ref , this.$refs 來獲取元素

給style 添加scope ,css作用域,相當于添加了屬性選擇器

路由傳參,兩種,路徑傳參重繪還在,params傳參重繪不見了,

發送: this.$router.push({ path: ‘路由地址’, query: { key: ‘value’ }})

接收: this.$route.query.key 取值

發送: this.$router.push({ path: ‘路由地址’, params: { key: ‘value’ }})

接收: this.$route.params.key 取值

ton><a href="#">點擊購買</a> 父組件使用插槽

? </button>
</local1>

import local1 from ‘./local1.vue’ //父組件匯入子組件

components:{local1 } /父組件匯入子組件,步驟2

子組件:

props:[“good-name”,“good-price”], //子組件中宣告props ： 相當于宣告屬性

this.$emit(‘自定義事件名’,引數) //自定義事件名隨意,引數可以多個

父組件 :

@自定義事件名=“函式(引數)”

標簽內使用ref , this.$refs 來獲取元素

給style 添加scope ,css作用域,相當于添加了屬性選擇器

路由傳參,兩種,路徑傳參重繪還在,params傳參重繪不見了,

發送: this.$router.push({ path: ‘路由地址’, query: { key: ‘value’ }})

接收: this.$route.query.key 取值

發送: this.$router.push({ path: ‘路由地址’, params: { key: ‘value’ }})

接收: this.$route.params.key 取值