javaScript筆記

来源:https://www.cnblogs.com/hujingnb/archive/2019/01/06/10228437.html
-Advertisement-
Play Games

1、js和html的結合方式 (1)在html文件中寫js代碼: - <script type="text/javascript"> js代碼; </script> (2)引入外部文件 - <script type="text/javascript" src="js文件路徑"></script> - ...


1、js和html的結合方式

  • (1)在html文件中寫js代碼:
    • - <script type="text/javascript"> js代碼; </script>  
  • (2)引入外部文件
    • - <script type="text/javascript" src="js文件路徑"></script>  

2、js的原始類型和聲明變數

  • js的原始類型: string, number, boolean, null, undifined
  • js在定義變數時只有var
  • 查看當前變數的數據類型:typeof();

2.1、比較

  • ==: 會將兩邊轉換成相同類型,然後進行比較
  • ===: 不會進行類型轉換,直接比較

3、js的數組

  • 直接定義:
    • - var arr = [1, 2, 3];  
  • 使用內置對象Array
    • 創捷對象是可以指定大小,也可直接賦值  

4、js的函數

  • 定義函數(傳遞的參數保存到arguments數組裡面,即使函數的參數列表不指定,也可在 arguments 中拿到參數)
    • 使用function關鍵字:  
      • function 方法名(參數列表){方法體; [return 返回值;]}    
    • 匿名函數:  
      • var 函數名 = function(參數列表){方法體; [return 返回值;]}    
    • 使用Function內置對象:  
      • var 函數名 = new Function("參數列表", "方法體和返回值");    

4.1、js類
定義類

function Person(name, age){        // 定義構造函數,一般構造函數首字母大寫
    this.name = name;
    this.age = age;
}
Person.prototype.getName = function(){    // 使用原型可以使所有對象共用一個方法,避免浪費記憶體
        return this.name;
};
var p = new Person('hujing', 20);    // 創建定義的類
p.a = 10;    // 給p對象添加屬性
delete p.a;        // 將已添加的屬性刪除

實現繼承: 

function Worker(name, age, sex){
    Person.call(this, name, age);    // 調用父類構造方法,就是為了繼承父類的屬性
    this.sex = sex;
}
for(var i in Person.prototype){    // 通過原型繼承父類方法
    Worker.prototype[i] = Person.prototype[i];
}
Worker.prototype.getSex = function(){
    return this.sex;
};

 


4.2、js類原型

  • prototype: 每個類的這個屬性為類的原型
    • 添加變數/方法會影響所有創建的對象  
    • Array.prototype.sum = function(){};  

4.3、js 實現方法分開管理

var a={};
a.abc = {    // 定義方法
    aa: function(){}, 
    bb: function(){}
}
a.abc.aa();        // 調用方法

 

5、js的全局變數和局部變數

  • 全局變數:在script標簽裡面定義一個變數,在本頁面的js部分都可以使用
  • 局部變數:在方法內部定義一個變數,只能在方法內部使用

6、js對象

  • String:字元串
    • length: 長度  
    • bold():加粗  
    • fontcolor(): 設置字元串顏色  
    • fontsize(): 設置字體大小  
    • link(): 將字元串顯示成超鏈接  
    • sub(): 下標  
    • sup(): 上標  
    • concat(): 連接字元串  
    • charAt(): 返回指定位置的字元  
    • indexOf(): 返回指定字元串值在字元串中首次出現的位置  
    • split(): 把一個字元串分割成字元串數組  
    • splice(): 刪除/插入/替換元素  
    • replace(rep, str): 在字元串中查找匹配的子串, 並替換與正則表達式匹配的子串  
    • substr(): 抽取指定位置開始的指定數量的字元串  
    • substring(): 用於提取字元串中介於兩個指定下標之間的字元(前閉後開)  
  • Array:數組
    • concat(): 連接數組  
    • sort(): 排序  
    • join(): 把數組元素放入一個字元串  
    • push(): 向數組末尾添加元素  
    • pop(): 刪除最後一個元素  
    • reverse(): 顛倒數組中元素順序  
  • Date:時間
    • toLocaleString(): 根據本地時間格式,把 Date 對象轉換為字元串  
    • getFullYear(): 獲取年  
    • getMonth(): 獲取月  
    • getDay(): 獲取星期  
    • getDate(): 獲取日  
    • getHours(): 獲取時  
    • getMinutes(): 獲取分  
    • getSeconds(): 獲取秒  
    • getTime(): 獲取1970年1月1日至今的毫秒數。  
  • Math:數學運算(都是靜態方法)
    • ceil(): 向上舍入  
    • floor(): 向下舍入  
    • round(): 四捨五入  
    • abs(): 返回絕對值  
    • max(): 返回最大值  
    • min(): 返回最小值  
    • random(): 得到隨機數  
    • submit(): 提交表單  
  • bom: 瀏覽器對象模型  
    • Navigator:獲取客戶端信息  
      • appName: 瀏覽器名字    
      • userAgent: 獲取發送的 user-agent    
    • screen:獲取屏幕的信息  
      • width:顯示器屏幕的寬度    
    • location: 頁面url地址    
      • href: 設置或返回完整的URL    
      • hostname: 設置或返回web主機功能變數名稱    
      • pathname: 設置或返回當前URL的路徑部分    
      • port: 設置或返回當前URL埠    
      • protocol: 設置或返回使用的web協議    
    • history: 請求的url歷史記錄  
      • back(): 載入前一個url    
      • forward(): 載入下一個url    
      • go(): 載入到某個url    
    • window: 視窗對象,頂層對象(這些方法可以直接使用)(js代碼中的全局變數和函數也在 window 對象中保存)  
      • document: 標簽樹    
      • alert(): 頁面彈框    
      • open(): 打開一個新的視窗, 返回新視窗的 window 對象    
      • close(): 關閉視窗(相容性差)    
      • setInterval(): 每次指定時間後執行js代碼    
      • setTimeout(): 指定時間後執行js代碼(一次)    
      • clearInterval(): 清除 setInterval 定時器    
      • clearTimeout(): 清除 setTimeout 定時器    
      • opener: 創建此視窗的視窗引用    
      • innerHeight: 瀏覽器視窗的內部高度    
      • innerWidth: 瀏覽器視窗的內部寬度    
  • dom:文檔對象模型(對標記型文檔進行操作)(都是內置對象)
    • Document:標簽樹(像是所有標簽的父節點)  
      • documentElement: 文檔對象根元素    
      • cookie: 設置或返回當前的cookie    
      • write():可以輸出變數,固定值和html代碼(會清空當前頁面)    
        • 裡面是雙引號,如果設置標簽屬性使用單引號      
      • getElementById("id"): 返回指定id的標簽對象    
      • getElementsByName("name"): 返回指定名稱的對象集合    
      • getElementsByTagName("tagName"): 返回指定標簽名的對象集合    
      • createElement("tagName"): 為指定標簽創建一個元素的實例    
      • createTextNode("str"): 創建一個指定值的文本字元串    
    • Event: 事件對象  
      • 事件:    
        • onclick: 滑鼠點擊      
        • onmouseover: 滑鼠經過      
        • onmouseout: 滑鼠移出      
        • onchange: 內容改變      
        • onfocus: 得到焦點      
        • onblur: 失去焦點      
        • onkeyup: 某個鍵盤按鍵鬆開      
        • oncopy: 複製      
        • onpaste: 粘貼      
        • onload: 頁面或圖像載入完成的事件      
        • onresize: 視窗被重新調整大小      
        • onunload: 關閉網頁事件      
      • 方法屬性:    
        • type: 事件類型      
        • ctrlKey: 事件發生時,Ctrl 是否被按下      
        • shiftKey: 事件發生時,Shift 是否被按下      
        • altKey: 事件發生時,Alt 是否被按下      
        • stopPropagation(): 阻止事件冒泡,即不再向上層傳遞      
        • preventDefault(): 阻止預設事件執行(阻止超鏈接跳轉,表單提交等)(需要在調用時傳遞 event)      
    • Element: 元素對象,即通過 document.getElement*方法得到的對象(node)    
      • 屬性:  
        • value: 存儲的值(id等其他屬性相同)      
        • ['value']: 像數組一樣使用,也可以獲取與設置屬性值      
        • nodeName: 名稱      
        • nodeType: 類型      
        • nodeValue: 值        
        • parentNode: 父節點        
        • childNodes: 子節點集合      
        • firstChild: 第一個子節點      
        • lastChild: 最後一個子節點      
        • nextSiBling: 下一個兄弟節點      
        • previousSiBing: 上一個兄弟節點      
        • innerHTML:獲取節點的文本內容,也可以向標簽裡面添加內容(可以是html代碼)      
        • offsetLeft: 返回元素的水平偏移位置(相對父元素)      
        • offsetTop: 返回元素垂直偏移位置(相對父元素)      
        • offsetHeight: 返回元素高度      
        • offsetWidth: 返回元素寬度      
        • offsetParent: 返回偏移父節點(即相對於哪個父節點定位)      
        • scrollTop: 元素垂直滾動的像素(document.documentElement.scrollTop: 頁面向下滾動的距離)    
        • scrollLeft: 元素水平滾動的像素      
        • scrollHeight: 元素的整體高度(包括隱藏部分)      
        • scrollWidth: 元素整體寬度(包括隱藏部分)      
        • style: 設置或返回元素的 style 屬性      
      • 方法:  
        • getAttribute(): 通過名稱獲取屬性值    
        • setAttribute(): 設置屬性的值      
        • removeAttribute(): 刪除屬性(不能刪除value)      
        • getElementsByTagName(): 返回指定標簽名的對象集合      
        • appendChild(): 添加子節點到末尾,類似於剪切      
        • insertBefore(): 在某個節點之前插入一個新節點      
        • removeChild(): 刪除節點,只能刪除子節點,不能刪除自己      
        • replaceChild(): 替換節點,只能替換子節點,不能替換自己        
        • cloneNode(): 複製節點(參數為boolen,是否複製子節點)      
        • addEventListener('click', function, false): 添加事件綁定(綁定匿名函數會無法解除綁定)    
        • removeEventListener('click', function, false): 解除事件綁定      
    • Attribute: 屬性對象    
  • 全局函數:
    • Infinity: 正無窮大數  
    • NaN: 非數字  
    • eval(): 執行js代碼,將字元串作為js代碼執行  
    • encodeURI(): 對字元進行編碼  
    • decodeURI(): 對字元進行解碼  
    • isNaN(): 判斷字元串是否為非數字  
    • isFinite(): 判斷是否為又窮大的數  
    • parseInt(): 將字元串轉換成整數  
    • parseFloat(): 將字元串轉換成浮點數  
    • typeof(): 查看當前變數的數據類型  
    • Number(): 將對象轉換成數字  
    • getComputedStyle(element): 拿到元素最終的style(不能設置)
  • console: 瀏覽器控制台操作  
    • log(str): 輸出普通消息  
    • info(str): 輸出提示信息  
    • error(str): 輸出錯誤信息  
    • warn(str): 輸出警告信息  
    • debug(str): 輸出調試信息  
    • count(str): 統計本行代碼被執行的次數,str為要顯示的信息
    • time(str): 開始計時器  
    • timeEnd(str): 結束計時器  
    • clear(): 清空控制台  

7、AJAX
ajax發送非同步請求(四步操作)
第一步(得到XMLHttpRequest)
得到XMLHttpRequest

// 大多數瀏覽器都支持
var xmlHttp = new XMLHttpRequest();
// IE6.0
var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
// IE5.5以更早版本的IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

第二步(打開與伺服器的連接)

xmlHttp.open():用來打開與伺服器的連接,它需要三個參數:

  • 請求方式:可以是GET或POST
  • 請求的URL:指定伺服器端資源,例如;/day23_1/AServlet
  • 請求是否為非同步:如果為true表示發送非同步請求,否則同步請求!

例如: xmlHttp.open("GET", "/day23_1/AServlet", true);
如果是POST請求,需要設置Content-Type請求頭:

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

 

第三步(發送請求)
xmlHttp.send(null):如果不給可能會造成部份瀏覽器無法發送!
參數:就是請求體內容!如果是GET請求,必須給出null。POST請求為參數,如: "name=hu&age=2"
第四步()
在xmlHttp對象的一個事件上註冊監聽器: onreadystatechange
xmlHttp對象一共有5個狀態:

  • 0狀態:剛創建,還沒有調用open()方法;
  • 1狀態:請求開始:調用了open()方法,但還沒有調用send()方法
  • 2狀態:調用完了send()方法了;
  • 3狀態:伺服器已經開始響應,但不表示響應結束了!
  • 4狀態:伺服器響應結束!(通常我們只關心這個狀態!!!)

得到xmlHttp對象的狀態:

var state = xmlHttp.readyState;//可能是0、1、2、3、4
xmlHttp.onreadystatechange // xmlHttp的狀態改變事件

得到伺服器響應的狀態碼

var status = xmlHttp.status;//例如為200、404、500

得到伺服器響應的內容

var content = xmlHttp.responseText;//得到伺服器的響應的文本格式的內容
var content = xmlHttp.responseXML;//得到伺服器的響應的xml響應的內容,它是Document對象!

8、json

json的語法

  • {}:是對象!
    • 屬性名必須使用雙引號括起來!單引不行!!!  
      • 屬性值:    
        • null      
        • 數值      
        • 字元串      
        • 數組:使用[]括起來      
        • boolean值:true和false      
var person = {"name":"zhangSan", "age":18, "sex":"male"};
//將字元串轉換成json對象
var str = "{\"name\":\"zhangSan\", \"age\":18, \"sex\":\"male\"}";
var person = eval("(" + str + ")");

從json中取出屬性:

person.name; person.age; person.sex;

將java對象轉換成json對象

  • JSONObject: 相當於Map
    • toString(): 將對象轉換成json串
    • JSONObject.fromObject(person):把對象轉換成JSONObject對象
    • put("", ): 想map中添加鍵值對
    • toBean(JSONObject, class): 將json串轉換成java對象
  • JSONArray: 相當於List
    • toString(): 將對象轉換成json串
    • JSONArray.fromObject(list):把list轉換成JSONArray對象
    • add(person): 想list中添加對象
    • toList(): json對象轉換成list

js中將對象轉換成json:

  • JSON.stringify(obj[, parame]): 將obj轉成json字元串
    • parame: 數組, 指定將obj中的什麼屬性轉成json字元串  
  • JSON.parse(str): 將str轉成json對象

9、jQuery
基礎語法: $(selector).action()

  • selector: "查詢"和"查找" HTML 元素
    • "p": 所有<p>標簽  
    • "#test": 所有id="test"的標簽  
    • ".test": 所有class="test"的標簽  
    • "*": 所有標簽  
    • this: 當前標簽    
    • "p.first": 第一個<p>標簽  
    • "ul li:first": 選取第一個 <ul> 元素的第一個 <li> 元素  
    • "ul li:first-child": 選取每個 <ul> 元素的第一個 <li> 元素  
    • "[href]": 選取帶有 href 屬性的元素  
    • "a[target='_blank']": 選取所有 target 屬性值等於 "_blank" 的 <a> 元素  
    • "a[target!='_blank']": 選取所有 target 屬性值不等於 "_blank" 的 <a> 元素  
    • ":button": 選取所有 type="button" 的 <input> 元素 和 <button> 元素  
    • "tr:even": 選取偶數位置的 <tr> 元素  
    • "tr:odd": 選取奇數位置的 <tr> 元素  
  • action: 執行對元素的操作
    • 動作;  
      • hide(): 消失    
    • 事件:事件需要傳入觸發後執行的方法    
      • click(): 滑鼠點擊    
      • dblclick(): 滑鼠雙擊    
      • focus(): 獲取焦點時    
      • blur(): 失去焦點時    

引用jQuery
本地導入jQuery

<head>
<script type="text/javascript" src="jquery-1.10.2.min.js路徑"></script>
</head>

線上引用jQuery

<!-- 菜鳥教程 -->
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<!-- 百度 -->
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<!-- 新浪 -->
<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>
<!-- Google -->
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<!-- Microsoft -->
<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head> 

保證在文檔載入完成後執行JQuery代碼

$(document).ready(function(){
// 開始寫 jQuery 代碼...
});

10. 其他第三方js

  • chart: 利用h5畫布制作圖表
  • bootstrap-table: 表格, 分頁、獲取數據等
  • bootstrapValidator: 用於表單驗證








































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

-Advertisement-
Play Games
更多相關文章
  • Tasks and Operator Chains(任務及操作鏈) 在分散式環境下,Flink將操作的子任務鏈在一起組成一個任務,每一個任務在一個線程中執行。將操作鏈在一起是一個不錯的優化:它減少了線程間的切換和緩衝,提升了吞吐量同時減低了時延。這些鏈式行為是可配置的,詳情請見: " chainin ...
  • Android遠程桌面助手(B1391),支持到Android9。 ...
  • datagrid combobox輸入框非法輸入判斷與事件總結 by:授客 QQ:1033553122 測試環境 jquery-easyui-1.5.3 常見事件 onSelect // 選擇下拉列表項時觸發的事件 onHidePanel // 收起下拉列表時觸發的事件 onChange // co ...
  • 這種寫法不是對象克隆,就是把obj的記憶體地址賦給obj2 通過 for in 克隆 不管公有還是私有的都克隆成私有的。 js提供了一個克隆方法 objct.create() var obj2=object.create(obj) 將obj的所有屬性克隆到obj2上的所有屬性克隆obj2原型上 對象繼 ...
  • 既然選擇了遠方,便只顧風雨兼程 __ HANS許 系列:零基礎搭建前後端分離項目 系列:零基礎搭建前後端分離項目 創建空項目 使用Less 使用TypeScript 使用WebPack 開始寫項目 總結一下 上篇文章我們講了VsCode的使用以及Node與Npm的使用,並簡單的創建了一個Expres ...
  • js對標簽的操作 創建標簽:document.createElement("tag"); 便簽添加內容 : document.createElement("tag").innerHTML=""; 刪除標簽:找到父標簽再刪除,this.parentNode.removeChild(this)。 js定 ...
  • 如何為你的 Vue 項目添加配置 Stylelint 現在已經是 9102 年了,網上許多教程和分享帖都已經過期,照著他們的步驟來會踩一些坑,如 已經不再維護,以及 之後 文件只剩下 `` 部分等。我在踩完坑跑通出滿意的效果後,維護一份新的指引,以備後續項目使用,順便分享一下。 為什麼選擇用 sty ...
  • 近期ES6標準如火如荼的發展,其中主要還是各大瀏覽器的支持,最重要廠商支付寶,微信的支持,使得國內的發展也很迅猛。 這裡主要是對yield關鍵字的,yield實際上可以看作是一種新的中斷機制,大家都知道javascript函數執行是順序的,中途沒有暫停,等待消息只能通過回調或者settimeout等 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...