JS學習筆記(一)

来源:https://www.cnblogs.com/aidian/archive/2018/04/11/8794855.html
-Advertisement-
Play Games

js編寫流程、數據類型、變數的命名、變數應用、數組、定時器、子節點和父節點、、、、 ...


第一章:

         編寫JS流程:

    1、  佈局:HTML和CSS

    2、  樣式:修改頁面元素樣式,div的display樣式

    3、  事件:確定用戶做什麼操作,onclick(滑鼠點擊事件)、onmouseover(滑鼠懸停)、onmouseout(滑鼠移出)

    4、  編寫JS:在事件中,用JS來修改頁面元素樣式

    5、  原理:響應用戶的操作,對頁面元素進行樣式修改

第二章:

            Javascript基礎:

                    JS代碼的引入:

                           外部鏈入式:

                                   <script type=”text/javascript” src=”js文件路徑”></script>

                            內部js:

                                     <script>js代碼</script>

                          數據類型:

                                                var a=12;

                                               數值類型number

                                               alert(typeof a);

 

                                               字元串string

                                               a="hello";

                                               alert(typeof a);

 

                                               布爾類型boolean

                                              a=true;

                                               alert(typeof a);

 

                                               函數類型function

                                               a=function(){};

                                               alert(typeof a);

 

                                               對象object

                                               a=document;

                                               alert(typeof a);

 

                                               沒有定義的類型undefined

                                               alert(typeof a);

                   

  •   變數名的命名規則:不以數字開頭大小寫字母、數字、下劃線命名;(區分大小寫);常用命名規則:駝峰命名法,首字母小寫後面單詞首字母大寫開頭;如:getDingShiQi
  •   變數的轉換:

                               parseInt(值);   將一個值轉換為Int數據類型

                               parseFloat(值); 將一個值轉換為float數據類型

 

                                  隱式轉換:

                                                                 Var a=5, b=”5”, c=”2”;

                                                                 先轉換類型,再比較:

                                                                         a==b;

                                                                不轉換類型,直接比較

                                                                           a===b;

                                                                 不轉換類型,+為連接符

                                                                         a+b;                   

                                                                 先轉換類型,再進行運算,+為運算符

                                                                           a+b;

  •     變數的作用域:

      1、  全局變數:位於函數體外部的變數,所有函數均可調用與賦值;

      2、  局部變數:位於函數體中的變數,僅僅為其所在函數體中使用,其他函數定義相同的變數名不會衝突;

 

  • 閉包:子函數可以使用父函數里定義的函數

        

  •  求餘運算符:%                var a=34; var c = a%10;  c為4;

        

  • 判斷語句   Switch 語句:

                語法:

                  switch(值或者變數)

                  {

                   case 值:

                            語句塊;

                            break;

                   case 值:

                            語句塊;

                            break;

                   default:

                            語句塊;

                  }

         判斷switch括弧裡面的值與case的值是否相等、相等則執行case 里的語句塊,遇到break;則結束,否則繼續執行下麵的其他case裡面的語句塊直至遇到break; 跳出。若判斷case裡面沒有相符合的,則執行default 下的語句塊,這裡的default相當於else

 

  • break,continue的區別: 一般在迴圈體中使用這兩;break;跳出全部迴圈;continue; 跳出本次迴圈
  • 真假:為boolean數據類型;

    1、  非0的數字為真,0為假;

    2、  非空字元串為真,空字元串為假;

    3、  非空對象為真,空對象為假;

    4、  Undefined為假;

  • 可變參arguments 調用函數時傳遞多個參數形成一個arguments數組;可以直接用下標調用

         它,如arguments[0];

  • 提取非行間樣式[只能用id的方式]:currentStyle為ie裡面的

                                               語法:document.getElementById("div1").currentStyle.width;

                                     getComputedStyle 為firefox裡面的

                                               語法:window.getComputedStyle(oBj,null).width;

  • 數組基礎:

                   聲明一個數組:var Arr = new Array();

                   聲明並初始化:var Arr = [1,2,3,4,5];

                            Arr.push();        在數組尾部添加一個或者多個元素,並返回一個新的長度;

                            Arr.pop();          在數組尾部刪除並返回最後一個元素;

 

                            Arr.unshift();    在數組頭部添加一個或者多個元素,並返回一個新的長度;

                            Arr.shift();         在數組頭部刪除並返回第一個元素;

                           

                            Arr.sort();           對數組進行排序;按照預設順序排序;

                            Arr.join(“,”);      在數組原有元素間插入元素”,”

                            Arr.concat(Brr);        連接Arr和Brr數組返回新的數組

第三章:

              定時器:var 定時器名=setInterval(tick, 1000);      設置定時器,每隔1000毫秒調用tick函數構建圖片的src屬性值

                                   Var 定時器名=setTimeout(tick, 1000);  設置定時器,隔1000毫秒調用tick函數構建圖片的src屬性值

              清除定時器:

                                   clearTimeout(定時器名);

                                   clearInterval(定時器名);

第四章:

      offsetLeft();   語法:oBj.offsetLeft(); 返回當前元素距離父元素左邊緣的距離;

第五章:

              InnerHTML       語法:oBj.innerHTML;     innerHTML具有雙向功能,通過它可以獲取標簽元素內容與設置標簽元素內容;

 

  • 子節點和父節點:

      childNodes獲取子節點   childNodes返回的是子節點的集合,是一個數組的格式。他會把換行和空格也當成是節點信息。childNodes.length獲取長度

           利用children來獲取子元素是最方便的,他也會返回出一個數組。對其獲取子元素的訪問只需按數組的訪問形式即可。

 

               firstChild來獲取第一個子元素

               使用firstElementChild來獲取第一個子元素的時候,會獲取到父元素第一個子元素的節點 這樣就能直接顯示出來文本信息了。他並不會匹配換行和空格信息。

 

          parentNode獲取父節點

    parentElement和parentNode一樣,只是parentElement是ie的標準。

           offsetParent獲取所有父節點

    其實這個是於位置有關的上下級 ,直接能夠獲取到所有父親節點, 這個對應的值是body下的所有節點信息。

 

 

歡迎來指正與提問。

 


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

-Advertisement-
Play Games
更多相關文章
  • var Person = { name : 'alice', say : function(txt1,txt2) { console.info(txt1+txt2); console.info(this.name); }}var Dog = { name : 'tom', say : functio ...
  • 一、工廠模式 工廠模式解決了創建多個相似對象的問題,但沒有解決對象識別的問題(即怎樣知道一個對象的類型)。 二、構造函數模式 主要是利用構造函數創建對象,缺點是當需要定義很多方法是,就要定義很多全局函數,那自定義的引用類型就絲毫沒有封裝性可言了。 三、原型模式 使用原型對象的好處是可以讓所以對象實例 ...
  • 註意:1.預解析相當於函數定義提前,賦值並沒有提前 2.var a = b = c = 9;相當於 var a=9;局部變數 b=9; c=9;b和c是隱式全局變數 ...
  • 這是我的第一個博客 ...
  • 官方說明: jQuery.each(object, [callback]) 概述 通用例遍方法,可用於例遍對象和數組。 不同於例遍 jQuery 對象的 $().each() 方法,此方法可用於例遍任何對象。回調函數擁有兩個參數:第一個為對象的成員或數組的索引,第二個為對應變數或內容。如果需要退出 ...
  • 今天做一個小實戰,需要讓一個登錄框始終保持水平和垂直居中,第一個想到的就是通過定位(要想讓一個div居中,採用定位可以解決,示例), 然後開始接觸flex佈局,學完感覺真的好用,現把知識點記錄一下,以便自己日後查看(學習教程:阮大師的教程),筆記開始: 傳統的佈局:圍繞盒子模型(border、mar ...
  • 查看了ueditor.all.js得源代碼發現單圖片上傳是在選擇文件輸入框change事件執行表單Submit,但是出現一個問題請求頭沒有加入Cookie,導致後端身份認證失敗,上傳最終失敗。 ueditor.all.js 24603行原代碼: 後改為了jquery提交form表單,解決了問題, 不 ...
  • [1]cookie認證 [2]token認證 [3]JWT [4]認證介面 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...