JavaScript學習筆記（八）—— 補

来源:https://www.cnblogs.com/weimingai/archive/2019/02/09/10357671.html
-Advertisement-
Play Games

第九章 最後的補充 一、Jquery簡單闡述 JQuery是一個JavaScript庫，旨在減少和簡化處理DOM和添加視覺效果的JavaScript代碼；使用時必須得添加庫路徑；學習路徑：http://jquery.com/ 例1： 1 window.onload=function(){ 2 3 a ...


第九章 最後的補充

一、Jquery簡單闡述

JQuery是一個JavaScript庫，旨在減少和簡化處理DOM和添加視覺效果的JavaScript代碼；使用時必須得添加庫路徑；學習路徑：http://jquery.com/

例1：

 1 window.onload=function(){ 2 3 alert("the page is loaded!"); 4 5 } 

Jqery:

1 $(document).ready(function(){                //在網頁載入完調用的函數
2 
3 alert("the page is loaded!");
4 
5 });

 

進一步簡化：

1 $(function(){
2 
3 alert("the page is loaded!");
4 
5 });

 

例2：id為buynow的元素添加單擊事件

1 $(function(){
2 
3 $("$buynow").click(function(){
4 
5 alert("I want to buy now!");
6 
7 });
8 
9 });

 

//要給網頁所有a元素添加單擊事件就將上述     buynow改成a  即可

二、補充的DOM獲取元素的方法

document.getElementsByClassName      //返回一個NodeList其中包含所有class指定的元素

document.getElementsByName              //返回name特性的所有元素

document.querySelector                          //將一個選擇器作為參數並返回匹配的第一個元素

document.querySelectorAll                      //選擇器為參數，返回NodeList所有元素

如：var li=document.querySelector ("#playlist  .song");//先查id為playlist元素再查找第一個class特性為song的元素

三、補充對象window的屬性方法

window.innerWidth //瀏覽器寬度  單位px

window.innerHeight //瀏覽器高度  單位px

window.close();      //關閉瀏覽器視窗

window.print();      //使用印表機列印網頁

window.confirm();      //提供Okand Cancle

window.history;      //瀏覽器歷史記錄

window.location;      //當前網頁的URl，可以設置載入新的網頁

四、arguments

在每個函數中都有一個名為arguments的對象可供使用；以數組形式返回函數的所有參數

 1 <script>
 2 
 3 function printArgs(){
 4 
 5 for(var i=0;i<arguments.length;i++){
 6 
 7 console.log(arguments[i]);
 8 
 9 }
10 
11 }
12 
13  
14 
15 printArgs("one",1,1+5,"five");
16 
17 </script>

 

五、處理異常

網頁控制器視窗可以報錯，也可以使用try/catch

 1 <!doctype html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7 <meta charset="utf-8">
 8 
 9 <title>Show dogs</title>
10 
11 <script>
12 
13  window.onload=function(){
14 
15 try{
16 
17 var message=document.getElementById("messge");
18 
19 message.innerHTML="Here's the message!";
20 
21 }catch(error){
22 
23 console.log("Erroe! "+error.messsge);
24 
25 }
26 
27 };
28 
29 </script>
30 
31 </head>
32 
33 <body>
34 
35 <div id="message"></div>
36 
37 </body>
38 
39 </html>

 

六、addEventListener添加事件處理程式

給一個事件添加多個處理程式，使用方法addEventListener

例：

 1 <!doctype html>
 2 
 3 <html lang="en">
 4 
 5 <head>
 6 
 7 <meta charset="utf-8">
 8 
 9 <title>clickme</title>
10 
11 <script>
12 
13 window.onload=function(){
14 
15 var div=document.getElementById("clickme");
16 
17 if(div.addEventListener){//如果瀏覽器支持該方法
18 
19 div.addEventListener("click",handleClick,false);
20 
21 //參數：事件名稱，程式名稱，是否向上傳遞的標誌
22 
23 }else if(div.attachEvent){//瀏覽器不支持addaddEventListener換方法
24 
25 div.attachEvent("onclick",hanleClick);//參數稍有不同且以onclick代click
26 
27 }
28 
29 };
30 
31  
32 
33 function handleClick(){
34 
35 var evt=window.event;//瀏覽器是否支持e
36 
37 var target;
38 
39 if(evt.target){//檢查瀏覽器是否支持
40 
41 target=evt.target;
42 
43 }else{
44 
45 target=evt.srcElement;
46 
47 }
48 
49 alert("You Clicked on "+target.id);
50 
51 }
52 
53 </script>
54 
55 </head>
56 
57 <body>
58 
59 <div id="clickme">dianwo</div>
60 
61 </body>
62 
63 </html>

 

七、遞歸

 1 <script>
 2 
 3 function fibonacci(n){
 4 
 5 if(n==0||n==1){
 6 
 7 return 1;
 8 
 9 }else{
10 
11 return (fibonacci(n-1)+fibonacci(n-2));
12 
13 }
14 
15 }
16 
17 for(var i=0;i<10;i++){
18 
19 console.log("The fibonacci of "+i+" is "+fibonacci(i));
20 
21 }
22 
23 </script>

 

八、JSON

JavaScript不僅是一種Web編程語言，還正在逐漸成為一種常用的對象存儲和傳輸格式，JSON是JavaScript Object Notation的縮寫；

例1

1 var fidoString='{"name":"Fido","breed":"Mixed","weight":38}';//單引號為JSON語句，即對象字元串
2 
3 var fido=JSON.parse(fidoString);//將字元串轉換為對象

 

例2：

 1 var fido={
 2 
 3 name:Fido,
 4 
 5 breed:"Mixed",
 6 
 7 weight:38
 8 
 9 };
10 
11 var fidoString=JSON.stringify(fido);//將對象轉換成字元串

 

九 、伺服器端JavaScript

Node.js是當前流行的一種JavaScript伺服器端技術，包含自己的運行環境和庫。也是單線程；

學習路徑：http://node.js.org/

 

十、正則表達式

“+”元字元規定其前導字元必須在目標對象中連續出現一次或多次。

“*”元字元規定其前導字元必須在目標對象中出現零次或連續多次。

“?”元字元規定其前導對象必須在目標對象中連續出現零次或一次。

\s：用於匹配單個空格符，包括tab鍵和換行符；  

\S：用於匹配除單個空格符之外的所有字元；  

\d：用於匹配從0到9的數字；

\w：用於匹配字母，數字或下劃線字元；  

\W：用於匹配所有與\w不匹配的字元；  

. ：用於匹配除換行符之外的所有字元。 

“^”定位符規定匹配模式必須出現在目標字元串的開頭 

“$”定位符規定匹配模式必須出現在目標對象的結尾 

“\b”定位符規定匹配模式必須出現在目標字元串的開頭或結尾的兩個

“\B”定位符則規定匹配對象必須位於目標字元串的開頭和結尾兩個邊界之內， 

即匹配對象既不能作為目標字元串的開頭，也不能作為目標字元串的結尾。

 

/[A-Z]/上述正則表達式將會與從A到Z範圍內任何一個大寫字母相匹配。 

/[a-z]/上述正則表達式將會與從a到z範圍內任何一個小寫字母相匹配。  

/[0-9]/ 上述正則表達式將會與從0到9範圍內任何一個數字相匹配。  

 /([a-z][A-Z][0-9])+/上述正則表達式將會與任何由字母和數字組成的字元串，如 “aB0” 等相匹配。 

 

{n} n 是一個非負整數。匹配確定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的兩個 o。

{n,} n 是一個非負整數。至少匹配 n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等價於 'o+'。'o{0,}' 則等價於 'o*'。

{n,m} m 和 n 均為非負整數，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 將匹配 "fooooood" 中的前三個 o。'o{0,1}' 等價於 'o?'。請註意在逗號和兩個數之間不能有空格。

 

優先順序如下：

   1. 1．\ 轉義符 

   2. 2．(), (?, (?=), [] 圓括弧和方括弧 

   3. 3．*, +, ?, {n}, {n,}, {n,m} 限定符 

   4. 4．^, $, \anymetacharacter 位置和順序 

   5. 5．|“或”操作 

 

JavaScript 1.2中帶有一個功能強大的RegExp()對象，可以用來進行正則表達式的匹配操作。其中的test()方法可以檢驗目標對象中是否包含匹配模式，並相應的返回true或false。

例：

 1 var email = obj.email.value;  
 2 
 3 var pattern =  
 4 
 5 /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;  
 6 
 7 flag = pattern.test(email);  
 8 
 9 if(flag)  
10 
11 {  
12 
13 alert(“Your email address is correct!”);  
14 
15 return true;  
16 
17 }

 

例:

1 在字元串中執行查找

 exec 方法：exec(String source)

 例如：

 1 function isDigit(s){
 2 
 3 var reg = /^[0-9]{1,20}$/;
 4 
 5 var result = reg.exec(s);
 6 
 7 //如果格式正確，返回原字元串，否則返回null
 8 
 9 alert(result);
10 
11 }

 

2 在字元串中執行查找

 match 方法：match(reg)

 例如：

1 function matchDemo(source){
2 
3 var reg = /^[a-z]/;
4 
5 var result = source.match(reg);
6 
7 alert(result);
8 
9 }

 

//註意與exec的區別

3 執行模式判定

test 方法：Boolean test(source)

例如：

 1 function isDigit(s){
 2 
 3 var reg = /^[0-9]{1,20}$/;
 4 
 5 var flag = reg.test(s);
 6 
 7 //如果格式正確，返回true，否則返回false
 8 
 9 if(flag){
10 
11 return true;
12 
13 }else{
14 
15 return false;
16 
17 }
18 
19 }

 

4 執行字元串位置查詢

search 方法：int search(String reg)

例如：

 1 function seachString(){
 2 
 3 var r, re; // 聲明變數
 4 
 5 var s = "The rain in Spain falls mainly in the plain.";
 6 
 7 re = /falls/; // 創建正則表達式模式
 8 
 9 r = s.search(re); // 查找字元串
10 
11 alert(r); // 返回 int 結果表示出現位置
12 
13 }

 

5 執行字元串分割

split 方法：String[ ] split(String reg)

例如：

 1 function splitString( ){
 2 
 3 var r, reg; // 聲明變數
 4 
 5 reg = /abc/; // 創建正則表達式模式
 6 
 7 var s = “IcansaymyabcIcansaymyabcIcan…";
 8 
 9 r = s.split(reg); // 分割字元串
10 
11 for(var p in r){    // 返回 String 數組
12 
13 alert(r[p]);
14 
15 }
16 
17 }

 


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

-Advertisement-
Play Games
更多相關文章
  • 糧草先行——Android摺疊屏開發技術點（一）
    最近有關摺疊屏產品的新聞層出不窮，各家手機廠商也分別慢慢地亮出了自家的產品。然而市場上的一些APP仍然沒有很好地適配這樣的設備，顯示不正常和應用重啟的狀況時有發生。因此，我會用接下來的幾篇文章來點出有關摺疊屏開發中的一些需要註意的地方。 今天我們先來說一下 生命周期 ，這是廣大開發者特別需要註意的一 ...
  • 斷言NSAssert的使用
    1. NSAssert 斷言（NSAssert）是一個巨集，在開發過程中使用NSAssert可以及時發現程式中的問題。 NSAssert聲明如下： #define NSAssert(condition, desc, ...) condition：條件表達式。條件成立時，運行後面程式；不成立時，拋出帶有 ...
  • Android應用跳轉到微信和支付寶掃一掃
    新版的微信已經把微信功能的schema都禁掉了，意味著我們無法打開微信的掃一掃等功能，目前正常的只能先進入微信（我測試的時候是微信版本7.0.3）已經是很新的版本了 具體調起微信掃一掃代碼如下，測試後確實是可以使用的 具體調起支付寶掃一掃代碼如下，測試後確實是可以使用的 也歡迎大家一起交流andro ...
  • Android Studio Error:Execution failed for task ':app:preDebugAndroidTestBuild'.徹底解決的方法以及修改AScompileSDKVersion
    Error Error:Execution failed for task ':app:preDebugAndroidTestBuild'. Conflict with dependency 'com.android.support:support annotations' in project ' ...
  • 如何在Android studio上運行從github上下載的RN項目
    想要編譯別人的RN項目，還是要踩踩坑才能走上正軌啊，分享下我試過多種方法後最喜歡的方法（其實是因為我多次用VS Code編譯都是以失敗而告終，所以才選擇的studio） 註意：這一步是你的開發環境都安裝配置好了，RN項目可以正常創建啦 1，從GitHub上下載一個RN項目，解壓到文件夾 2，用And ...
  • 調用系統相機導致照片旋轉問題的修複
    如題，相信很多開發者在調用系統照相機接收拍好的照片時，發現照片被無故旋轉了90度。這一問題反映在大部分的三星手機上，當然其他的機器還沒試完全，總之是有問題。 於是乎想到如下的解決辦法： 1. 識別機型，獲取手機型號，然後判斷是否需要旋轉； 2. 通過獲取照片寬度和高度判斷是否需要旋轉； 3. 自己動 ...
  • 提升應用崩潰時的用戶體驗——去掉煩人的“很抱歉”提示框
    相信很多在用或者用過Android系統的的手機的朋友都有過這樣的經歷：自己玩著玩著某個程式，突然屏幕一黑，然後出現一個對話框，提示很抱歉，應用程式已經停止工作。這意味著程式已然崩潰了，用戶唯一要做的就是接下來重新運行這個程式，或者去幹些別的。我個人推測，前者占大多數。 當然，一些比較健壯的程式是一般 ...
  • Activity與DialogFragment交互的方法
    今天我們來討論一下如何在Activity與DialogFragment交互的方法，這裡包括了DialogFragment的啟動以及Activity方法的調用。 DialogFragment與Dialog相比類似，是官方現在更建議使用的Dialog。 DialogFragment的定義 新建一個Dia ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類