js知識點總結

来源:https://www.cnblogs.com/weigaojie/archive/2019/03/07/10491085.html
-Advertisement-
Play Games

組成 作用:(運營在用戶端瀏覽器) 特征:面向對象 BOM: 瀏覽器對象模型 完成視窗與視窗之間的通信,window對象是其核心對象, history【前進,後退,刷新】 是一個對象 使用【window.history】 location【地址】 DOM【】 screen【屏幕】 frames[真窗 ...


組成

ECMAscript  基礎語法 
    變數 數據類型 運算符 數組 函數 對象
BOM 瀏覽器對象模型
    window對象(獲取瀏覽器寬高)
    history對象
    location對象
DOM 文檔對象模型   輪播圖
  元素獲取 操作屬性   操作樣式 節點   事件 時間對象

作用:(運營在用戶端瀏覽器)


1. 數據驗證
2. 動態創建和刪除元素
3. 操作元素的內容和樣式
4. 模擬動畫
5. 創建cookie
6. ajax 請求數據
  。。。。。。
7. JSON格式的數據處理 *

特征:面向對象


1. 基於[對象]和[事件驅動]的鬆散型 解釋型語言
2. 客戶端腳本語言,實現用戶交互

BOM: 瀏覽器對象模型

完成視窗與視窗之間的通信,window對象是其核心對象,

  • history【前進,後退,刷新】 是一個對象 使用【window.history】
  • location【地址】
  • DOM【】
  • screen【屏幕】
  • frames[真視窗]
  • navigation

window對象:

屬性

1-1:獲取瀏覽器寬高

a.ie8及以上
   window.innerWidth   [獲取瀏覽器寬度]
   window.innerHeight [獲取瀏覽器高度]
b.ie8以下
   document.documentElement.ClientWidth [寬度]
   document.documentElement.ClientHeight 【高度】

1-2: 重新獲取瀏覽器寬高


window.onreset=function () {
  NewW=window.innerWidth;
  NewH=window.innerHeight;
}

1-3:重新設置瀏覽器大小

​ window.onresize=function(){

​ }

1-4:瀏覽器滾動事件

​ window.onscroll=function (){

​ }

2.瀏覽器左上角距離屏幕左上角的偏移量


window.screenTop   [垂直偏移量]
window.screenLeft   [水平偏移量]

註意:

因為window是核心,可以省略window不寫

方法

alert() 彈出框

prompt() 輸入框

confirm() 提示框,返回true或flase

close() 關閉頁面

open(“url”) 打開頁面(“打開的頁面的路徑【根據本html位置的相對路徑】”)


open("url","","width=300,height=200");

setInterval(fn,毫秒數):隔毫秒數重覆不斷的執行一個函數fn

方法1
   let t =setInterval(fn,3000)
   function fn(){

  }
方法2
   setInterval(function(){

  },1000)

clearInterval(t):清除setInterval的時間函數


let t =setInterval(fn,3000)
function fn(){
   
}
clearInterval(t)

setTimeout(fn,1000) 隔一定的時間只執行一次函數

cleanTimeout(t) 清除時間函數 【用法同上】

獲取表單的值


對象.value=

清空=“”

history對象

屬性:

history.length 用來顯示歷史記錄的長度

方法

history.forward() 前進

history.back()後退

history.go(0) 刷新 【1 前進,-1後退;不常用】

location對象

屬性:設計獲取當前頁面的地址

location.href=“ ” 設置或獲取頁面地址 設置新值

location.host:主機名+埠號

location.hostname:主機名

location.port:埠號

location.protocol:協議

location.pathname: 路徑

location.search: ?後面的查詢【搜索】欄位

方法

location.reload( ) 重新載入

location.replace("網頁.html") 頁面替換,不會增加歷史記錄

location.assign(“網頁.html”) 頁面替換, 能夠增加歷史記錄



DOM(文檔對象模型)document object model

獲取元素

獲取body:document.body

獲取html:document.documentElement

1. 獲取id名的元素:

let 變數=document.getElementById("id名")
例子: let box=document.getElementById("id名")

2.獲取class名的元素[得到的是集合,可以通過鍵名訪問]


let 對象=document.getElementsByClassName(“class名”)
  通過遍歷改變樣式
集合通過單個下表改變,不能全部用class名同時改變

3. 獲取標簽名的元素[得到的是集合,可以通過鍵名訪問]


let 對象=document.getElementsByTagName(“標簽名”)

4.給對象加類


標簽加1個類名
對象.className=“類名”
div加多個類名
對象.className=“類名1 類名2 ”

5.指定範圍的多層級獲取【集合】

<div class="box">
  <div class="box1">
      <div class="box2"></div>
  </div>
</div>

多樓層獲取
let box=document.getElementClassName("box");
let box1=box.getElementClassName("box1");
let box2=box1.getElementClassName("box2")

6.獲取選擇器選中的元素


let liss=document.querySelector("【選擇器】");   獲取選擇器選中的第一個元素
let lis=document.querySelectorAll("【選擇器】"); 獲取選擇器選中的全部元素【集合】【下標或者foreach遍歷】

7.屬性選擇器


<textarea name="con" id="text" cols="30" rows="10"></textarea>
let con = document.querySelector("[name=con]")

操作樣式

獲取樣式

獲取行內樣式


對象.style.樣式名

獲取通用的樣式【css和行內】


getComputedStyle(對象,null).樣式名

設置行內樣式


對象.style.樣式名=“樣式值”
對象.style=“background:red;border-radius:50%”

批量操作類名


對象.className="class類名"
對象.className=“ ”;
對象.classList.add(“”) 添加類
對象.classList.remove(“”) 刪除類
對象.classList.toggle(“”) 切換類

對象.id="id名"

外部定義一個樣式,加到對象身上,參考第四點

操作屬性

操作標準屬性

已知的,系統自帶


對象.屬性
例子 : img.src

自定義屬性

獲取


對象.getAttrbutte("name")

設置


對象.setAttrbutte("name","value")

操作內容

innerText:不能識別html的標簽對

innerHTML: 可以識別html的標簽對


對象.innerText=“內容”
對象.innerHTML=“內容”

添加事件

對象.對象事件=function(){

}

元素的尺寸和位置

對象.offsetWidth:獲取元素的真實寬度

對象.offsetHeight:獲取元素的真實高度

對象.offsetTop:對象的上邊框距離具有定位的父元素的內邊框的垂直距離

對象.offsetLeft:對象的左邊框距離具有定位的父元素的內邊框的水平距離

對象.scrollTop:有滾動條的元素,瀏覽器滾動時在垂直方向的拉動距離


body的相容
document.body.scrollTop || document.documentElement.scrollTop

 

對象.scrollLeft:有滾動條的元素,瀏覽器在滾動時在水平方向的拉動距離

動態創建標簽

let div=document.createElement(“標簽名”)

創建的元素放到也面中:

document.body.appendChild(div)

父元素.appendChild(子元素)

 

 




引入JS

1. 外部引入方式
<head>
<script src='路徑'></script>
</head>
2. 內部引入方式(在html頁面中放入srcipt標簽,和body同級)
<script>
       
</script>
3. 放在事件後
<div onclick="alert(1)">文字等或事件</div>

註意:
  ~js的幾種引入方式是相互關聯的,可以相互操作與訪問
  ~外部js中不能添加srcipt標簽對
  ~嵌入式的js中不能添加src屬性

引入js的執行


1. 將srcipt標簽對放最最後
2.在.js文檔中加入
   window.onload=function(){
      需要執行的js代碼塊
  }

輸出工具


彈出框:alter(' '); 數字可加可不加' ';
輸出到控制台:console.log('輸出到控制台');
輸出到html頁面中[可以識別html的標簽對,即解釋為html語言]:document.write('<h1>輸出到html頁面中 </h1>');

輸入工具


彈出框輸入:var num=prompt("提示文本",[預設值]);

提示工具


confirm("提示內容");
confirm返回值為true和false

註釋


單行註釋: ctrl+?或者/     //
塊註釋: ctrl+shift+/或者?        /*   塊   */

拼接


1. 用“+”拼接
2. 模板字元串(es6):
`<td>${i}-${j}</td>`;   拼接部分用``括起來,變數用 ${變數}  
識別空格,換行等

變數

一個容器,存儲數據

變數的聲明:

var:

let:

let命令,用來聲明變數。它的用法類似於var,但是所聲明的變數,只在let命令所在的代碼塊內有效


1. 適用於for迴圈
2. 先聲明,在使用
3. 不允許在相同作用域內重覆聲明同一個變數。
4. let可以識別塊級作用域
5. 不存在變數提升(先訪問後聲明) 報錯:沒有定義

const

聲明一個只讀的常量。一旦聲明,常量的值就不能改變。

聲明常量的同時進行賦值,不賦值就會報錯

可以識別塊級作用域

不能重覆聲明

不存在變數提升【先訪問在聲明】


PI;

命名規範:

  • 數字。字母。下劃線組成

  • 不能以數字開頭

  • 區分大小寫

  • 不能以關鍵字(js中已經用到的)命名

  • 不能以保留字(js中將來會用到的)命名

  • 有意義

  • 遵循的規則:首字母大寫 (Array String Obiect) ;駝峰命名法 (getElementByld)

賦值

  • 先聲明再賦值


    var num;
    num=10;
  • 聲明的同時賦值


    var num=10;
  • 一次性聲明多個變數,再賦值


    var a,b,c;
    a=1,b=2;
    c=3;
  • 一次性聲明多個變數同時複製


    var a=1,b=2,c=3;

註意事項:

  • 變數要先聲明再訪問,變數的預設值是undefined

  • 新值可以覆蓋舊值

  • 變數可以用var關鍵字重新聲明

  • 不用var關鍵字聲明時必須給變數賦值,並且為全局變數,先訪問後聲明變數,值為undefined:js執行時先預解析(即識別var 和function聲明的變數,不賦值),在解析,一句一句執行。

數據類型

根據在記憶體中的存儲位置劃分。基本數據類型存放在棧中,引用數據類型存放在堆中(指針存放在棧中,內容存放在堆中 )

基本數據類型

  • undefined

  • null 【空占位符】

  • string 【也是對象】

    模板字元串 字元編碼 ASCII utf-8 unicode【萬國碼】 gb2312

    ​ 轉義字元: \ \n[換行] \r \t[製表符] \' \ ""


    let 對象=new String(“ ”);
    編碼
    對象.charCodeAt(2) 返回第2個位置的字元編碼
    String.fromCharCode(字元編碼) 解碼

    查找元素
    對象.charAt(0) 字元串的第0個位置的元素【查找字元】

    查找下標
    對象.indexOf(“ ”)   查找對應字元的下標,如果有返回下標,如果沒有,返回-1【第一個字元開始的下標】
    對象.lastIndexOf(“”) 倒著看查找,倒序看如果有返回下標,如果沒有,返回-1【第一個字元開始的下標】

    對象.search(“”) 正則:有返回0;沒有返回-1;
    對象.match(“”) 有的話,返回數組【返回值,下標,包含返回值的數組,】
    沒有 返回null

    字元串的截取:【返回新值,不改變原內容】
    對象.substr(開始下標,【截取的長度】)
    對象.substring(開始下標,結束的下標),從開始下標開始到結束下標之前,不取到結束的下標
    對象.slice(開始下標,結束的下標),從開始下標開始到結束下標之前,不取到結束的下標【數組的方法】

    字元串大小寫【轉換】
    let str="AbCdEf";
    str.toLowerCase() 轉換為小寫
    str.toUpperCase() 轉換為大寫

    替換:
    str.replace(“山”,“閃”);

    轉換【字元串轉換數組】
    let str=“1,2,3,4,5,6”;
    arr2=str.split(“,”);
  • boolean

  • number 2e3=2*10^3


    二進位: 0b開頭
    八進位:以0o{0+字母o}開頭,後跟0-7的數
    十六進位:以0x開頭,後跟0-9或者a-f
    NaN:not a number 本來期望返回數值的操作,但並未返回數值的操作

引用數據類型

  • object(屬性與方法的集合)數組,函數,對象

  • 深拷貝


    let arr=【1,2,3,4】

    let  arr1;

    arr1=arr; :傳址

    arr1 和 arr具有相同地址
  • 淺拷貝:


    let arr=【1,2,3,4】

    let arr1=【】

    arr.foreach(function(value){
    arr1.push(value)
    })

判斷變數的數據類型 ,其結果為字元串


typeof用法:  
var num="5555";
typeof num;
數據類型情況typeof 的結果【看返回0 1代碼的前三位】
undefined undefined   undefined
null null(空占位符)   object
boolean 布爾型 true false   boolean
string 字元串型 帶" "或者' '   string
number 數值型 整數,小數,八進位,十六進位,十進位    
object      

運算符

表達式:能夠求值的語句

算術運算符


+ - * / % ++var   var++  --var   var --

+的特殊性


計算:操作對象是數值型
拼接:操作對象含有字元串,字元串中進行運算時,用()括起來

自增與自減


++var: ++在前,先算++,在執行本行的其他語句
var++:++在後,先執行本行的其他語句,在算++

關係運算符

返回值為布爾值 ,即true或者false


> < >=   <=   ==[等於] ===[全等於]--> 數值和數據類型相同   !=[不等於]   !==[不全等]
  • 如果比較的兩個對象都是字元串[數字型,字元],按照ASCII表對應的ASCII碼比較,逐位相比

  • 如果比較的兩個對象都是數值,直接比大小

  • 如果一個操作對象是字元串,另一個是操作對象是數值,先嘗試將字元串轉換為數字,如果轉換成功,按照數字比較大小;如果轉換不成,則返回false

  • 1==true; 0==false ; ==數值相同

  • === 數值和數據類型相同

  • undefined=null

賦值運算符


= +=[num+=10 等價於  num=num+10]   -= *= /=   %=

邏輯運算符[與或非]

測量值與變數之間的邏輯關係

假:0、false undefined null NaN “ ”【空字元串】

真:其餘為真

  • &&與

  • ||或

  • !非【用來取反】

    ABA && BA || B!A
    true true true true false
    true false false true false
    false true false true true
    false false false false true

返回值:

第一步:先看與或非兩邊的真假

第二步:在看返回的真假的內容

&& 同真為真,返回第一個假值 【遵循短路原則:看到假值,後邊的不看了】;全為真,返回最後一個真值

|| 同假為假,返回第一個真值 【遵循短路原則:看到真值,後邊的不看了】;全為假,返回最後一個假值

! 取反;返回值只有ture或false

運算符的優先順序

算術>關係運算符>邏輯運算符

 

三元運算符:


表達式?為真的執行語句:為假的執行語句       【類似if  else】

一元運算符: typeof + - new

特殊運算符: () .

流程式控制制

代碼按照指定條件的執行順序

  • 順序結構

  • 分支結構

  • 迴圈結構

順序結構

語句按照從上到下的順序進行執行

迴圈結構

當滿足條件時,重覆不斷的執行一段代碼

for迴圈:明確知道次數


for(初始條件;終止條件;步進值){
   
}

swith迴圈


switch(表達式【能夠求值的語句】){
case 值1【表達式能取到的值】:語句1;break;
   case 值2【表達式能取到的值】:語句2;break;
  ...
   default: 語句;
}

while迴圈


while(條件){
  滿足條件時,執行語句;
}

例子:
   var j=0;
   while(j<5){
       console.log(1);
       j++;
  }

do while迴圈

執行順序先執行迴圈體,在執行判斷語句


do{
  迴圈體;
}while(條件)

例子:
var i=0;
do{
   console.log(1);
   i++;
}(i<5)

迴圈結束

continue

滿足條件終止本次迴圈


break

滿足條件,終止整個迴圈


分支結構

當條件成立時執行相應的語句

  • 單分支結構


    if條件:
    if(表達式){
      為真的執行語句【返回值為true執行的語句】
    }
  • 雙分支


    if條件:
    if(表達式){
      為真的執行語句
    }
    else{
    為假的執行語句
    }
  • 多分支


    if條件:
    if(表達式1){
      表達式1成立時執行語句
    }
    else if(表達式2){
    表達式1不成立 但 表達式2成立時執行語句
    }
    else if(表達式3){
    表達式1不成立且表達式2不成立【但】表達式3成立時執行語句
    }
    else{
      以上表達式都不成立時執行的語句
    }
  • 嵌套分支


    if(){
       if(){
           
      }
       else{
           
      }
    }
    else{

    }

數學方法

取隨機數


Math.random() ;   (0-1)

取整


向下取整【向左取整】: rgb=Math.floor(Math.random());
向上取整【向右取整】: rgb=Math.ceil(Math.random());

次冪[x的y次冪]


Math.pow(x,y)

一維數組

按照順序排列的一組相關數據。

特點:每一個數組元素都有一個特定的鍵名(即俗稱的下標)[字元串類型]

數組元素的預設值時undefined

數組的聲明[初始化數組]

  • 先聲明後賦值


    var arr=[];
    arr[0]=89,arr[0]="adc",....;
  • 聲明的同時賦值


    var arr=[90,89,88,76,56];

數組下標的範圍

訪問數組元素,範圍【0,n-1】

數組的長度

數組名.length; 例子: arr.length

註意:

數組的長度可變


arr=[90,89,88,76,56];
  可以隨時添加元素,可跳著添加。如:
       arr[6]="aaa";

數組元素可以時任意的數據類型


arr=[true,null,{name:},[1,2,3]]

遍曆數組元素

訪問數組的每一個元素

1. 用for迴圈遍曆數組


for(var i=0;i<arr.length;i++){
   arr.[i];   即可訪問arr的每個元素
}

2. 用for in迴圈遍曆數組


for(var i in arr){
   i; //代表arr的鍵名(下標)
   arr[i]; //元素
}

3.for of遍歷元素


for(item of arr1){
   arr2.push(item)
}

4.foreach遍曆數組


用法:
arr.forEach(function (value,index){

})
value[名字隨便起]:數組中的當前元素【必須有】
index[名字隨便起]:數組當前元素的下標【鍵名】【可選】

清空數組

arr.length=0

二維數組

聲明:


var arr=[[1,2.3],["a","b"],[78,89];

訪問:


arr[行][列]

遍歷


for(var i=0;i<arr.length;i++){
   for(var j=0;j<arr[i].length;j++){
       arr[i][j]
  }
}

數組身上的方法

向數組的後面插入一個或多個元素(.push)


arr.push(需要插入的內容);

刪除數組最後一位:.pop


arr
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • addGestureRecognizer(_:) 一個手勢對象只綁定一個view// 只有最後一個imgv有點擊事件 let tap = UITapGestureRecognizer(target: self, action: #selector(selectedItem(_:))) for img... ...
  • Javascript中有六種數據類型 1、undefined:這個值未定義 2、boolean:這個值是布爾值 3、number:這個值是數值 4、function:這個值是函數 5、object:這個值是對象或者null,數組也可以(var e=[.......]) 6、string:這個值是字元 ...
  • 2019,不管是不是VR元年,VR行業確實在這一年勢頭凶猛,VR設備跨越式發展,然而VR內容確相對滯後。強調獨占性的各大VR內容平臺,更是將開發商分割成了不同的陣營。 ...
  • electron-vue 開發環境搭建(Windows環境) ...
  • 標題寫的全面一些,方便其他人檢索,我就是找了半天找不到資料,最後自己搞定了。 原理: 每次監聽到輸入值變化,就打一個時間戳,然後暫停2秒再去提交post驗證。 但是每次提交前,判斷一下之前打的時間戳和現在時間是否大於2秒,如果大於,則真去提交post,否則return掉不執行。 以下是代碼片段: ...
  • HTML: JS: start:就為你選擇的開始日期; end:就為你選擇的結束日期 此方式可選擇任意範圍的時間,時間格式可任意修改。 註:如果照片看不清,可以將網頁適當放大,以便觀看—謝謝。 ...
  • npm是Node Package Manager,也就是長說的NPM包管理器. 一般安裝node.js就會一起安裝. npm install npm install XXX //表示安裝模塊, 預設會安裝最新的安裝包 npm install [email protected] //表示安裝指定版本的安裝包,安裝完成 ...
  • jQuery概述 js與jQuery 獲取的對象 jQuery獲取的是jquery對象,js獲取的是js對象(dom對象),dom對象不能調用jquery的方法,jquery對象也不能調用dom對象的方法 dom對象轉換為jQuery對象:$(dom對象) 層級選擇器 子代選擇器 $("ul>li" ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...