近期學習的原生JS知識以及jQuery框架

来源:http://www.cnblogs.com/sunlizheng/archive/2017/09/10/7500583.html
-Advertisement-
Play Games

【正則表達式】1、正則表達式包括兩部分： ① 定義正則表達式的規則 ② 定義正則表達式的模式（i/g/m)2、聲明正則表達式： ① 字面聲明 ： var reg = /表達式規則/表達式模式 ② 使用new關鍵字： var reg = new RegExp("表達式規則","表達式模式") eg: ...


【正則表達式】
1、正則表達式包括兩部分：
① 定義正則表達式的規則 ② 定義正則表達式的模式（i/g/m)
2、聲明正則表達式：
① 字面聲明 ： var reg = /表達式規則/表達式模式
② 使用new關鍵字： var reg = new RegExp("表達式規則","表達式模式")
eg: var reg = new RegExp("white","g");
3、正則表達式的常用模式：
① g:全局匹配。不加g為預設為費全局匹配，只匹配第一個符合要求的字元串
"www".replace(/w/,"#"); -> #ww
"www".replace(/w/g,"#"); -> ###
② i：忽略大小寫。不加i預設要求大寫也匹配
"aAa".replace(/A/,"#"); -> a#a
"aAa".replace(/A/i,"#"); -> #Aa
"aAa".replace(/A/gi,"#"); -> ###
③ m: 多行匹配模式。不帶m，則一個字元串只有一個開頭，一個結尾。帶m後，如果字元串分為多行，則每行都有一個開頭、一個結尾。
`abc #bc
abc`.replace(/^a/g,"#") ->abc`

`abc` `#bc
abc`.replace(/^a/m,"#") ->#bc`

[Tips:如何寫多行字元串]
>>> 普通字元串中，插入\n表示換行。"abc\nabc"
>>>ES6中，允許使用反引號`包裹字元串。反引號包裹的字元串中，會保留空格與回車。 `abc
abc`

4、正則表達式的常用方法：
① test(): 檢測一個字元串,是否符合正則表達式的驗證。返回true或false;
eg ： /white/.test("whitewhite"); ->true
② exec(): 檢測一個字元串，是否符合正則表達式的驗證。如果驗證成功，返回結構數組。如果驗證失敗，返回null；
結構數組中：
index屬性：表示從字元串的第幾個字元，開始符合正則要求
input屬性：返回完整的被檢索的字元串
下標第0個：表示符合正則表達式的那部分字元串
下標的第一個到第n個：表示符合正則的第一個到第n個子表達式的部分。子表達式，就是正則中的()。
也就是正則中有幾個()，結構數組中就有幾個下標。

 

[js中的數組]
              1  數組的概念：可以再記憶體中連續存儲的多個有序元素的結構
                元素的順序：稱為下標，通過下標查找對應元素。
             2 數組的聲明：
                 ①  通過字面量聲明   var arr1 = [,,,,];
                     JS中，同一數組，可以存儲多種不同的數據類型(但，一般同一數組只存放同種數據類型)
                     例如  var arr1 = [1,"2",true,[1,2,3,4],{"name":"aaa"}];
                 ②  new關鍵字聲明   var  arr2 = new Array(參數);
                  >>>  參數可以為；
                       a. 為空；聲明一個沒有指定長度的數組
                       b. 數祖的length：聲明一個指定長度的數祖，但是數祖的長度隨時可變可追加;
                       c. 數祖預設的N個值：new Arry(1,"2",true);相當於[1,"2",true];   
              3 數祖中元素的讀寫
                 ① 讀寫： 通過下標來訪問元素 例如arr[2]
                 ② 增刪：delete arr[n]  刪除數組的第n+1個值   但數組的長度不變，對應位置的值為undefined;
                      arr3.push(值);數祖最後增加一個值，相當於arr3[arr3.length] = 7 ;
                       arr3.unshift(值)：數祖的第0位插入一個值，其餘位數順延;
                       arr3.pop();刪除數祖的最後一位，與delete不同的是  pop執行後數祖的長度也會減少一個 相當於arr.length-=1;
                       arr3.shift():刪除數祖的第0位，長度也會減一
              
              4數祖中其他的常用方法
                   ① join("分隔符")；將數組用指定分隔符分隔，鏈接為字元串，參數為空時，預設用逗號分隔。
                   ②  concat():將數組與多個數組的值鏈接為新的數組
                    [1,2].concat([3,4],[5,6])=[1,2,3,4,5,6]//鏈接時，中括弧最多插一層
                    [1,2].concat([1,2,[3,4]])=[1,2,1,2,[3,4]];多層中括弧，以二維數組的形式存在。
                   ③ push():數組最後增加一個數    unshift():數組開始增加一個數[返回數組新的長度]
                     pop()：刪除數祖的最後一位數   shift():刪除數祖的第0位          [返回被刪除的值]
                     【調用上述方法，原數組均會改變】
                   ④ reverse():【原數組被改變】數組翻轉，逆序排列
                   ⑤ slice(begin,end):[原數組不會被改變]截取數組中的某一部分，成為新數組
                     >>>傳遞一個參數，預設為begin index 從這個開始，截取到最後一個；
                    >>>傳遞兩個參數，截取從begin到end區間，左閉右開  包含begin，不含end; 
                     >>>參數可以為負數，負一為最後一個；至多到負一；
                   ⑥ sort(function)[原數組會被改變]對數組進行排序
                     >>>不指定排序函數，按照數值的ascli碼值進行排序;
                     >>>傳入排列參數，預設兩個參數a b；
                     arr3.sort(function(a,b){
                      return a-b;//b在前 a在後  升序排列
                      return b-a //a在前 b在後  降序排列 
                        });
                        
              5 indexOf(value,index);返回數組中第一個value值所對應的下標位置。若未找到返回-1
                lastIndexOf(value,index); 返回數組中最後一個value值所對應的下標位置。若未找到返回-1
                     >>>  若未指定index參數,預設在數組中所有參數查詢
                     >>>  若指定index參數，則從當前index開始，向後查詢     
                        
              6  二維數組&稀疏數組(瞭解)
                  ① 稀疏數組 ：數組並不含有從0開始到length-1的所有索引(length值比實際個數多)
                  ② 二維數組 ：var  arr = [[1,2],[3,4],[5,6]];//相當於三行兩列的矩陣
                                           取出二維數組元素   arr[行號][列號];   //可使用嵌套迴圈便利     
             7 引用數據類型和基本數據類型 
                引用數據烈性： (數組/對象)賦值時。是將原變數的地址，賦給新變數，兩個變數實際上操作的是同一份數據，所以，修改其中一個變數，另一個跟個變化
                基本數據類型： 賦值時，是將原變數的值，賦值給新變數，兩個變數屬於不同的記憶體空間，修改其中一個，另外一個不變。
             

內置對象

Number對象
              Number.MAX_VALUE  可表示的最大數
              Number.MIN_VALUE  可表示的最小數
              .teString():將數字轉化為字元串    相當於num+""
              .valueOf():返回number對象的基本數字值
              .toFixed(2):將數字轉化為字元串，保留n位小數，四捨五入。
              .toLocaleString():將數字按照本地格式的順序轉化為字元串，一般，三個一組加逗號。
             .toPrecision():將數字格式化為指定長度，n =不含小數點的所有位數的和
             

字元串string
             
              1 屬性：str.length 返回字元串的長度
              2 方法：
                  str.toLowerCase();所有字元轉為小寫；
                  str.toUpperCase();所有字元轉為大寫；
                  str.charAt(n);截取字元串中的第n個字元
                  str.indexOf("查詢子串",index):查詢從index開始的，第一個子串的索引，沒找到的返回-1；通數組的indexOf()方法；
                 str.substring(begin,end)截取子串
                   >>>只寫一個參數：從begin開始，到最後
                   >>>寫兩個參數：從begin開始，到end結束  左閉右開；
                  str.replace("old","new");將字元串中，第一個old  替換為new;  第一個參數可以為普通字元串也可以為正則表達式，(普通字元串只能匹配一個)  正則表達式則根據具體搶礦區分。
                  .split(""):將字元串 通過指定分隔符分為數組，傳入""空字元串，將把單個字元存入數組。

Daste類
             
              1 new Date(""):拿到當前最新時間；
                 new Date("2017,4,,17,17:26:17")  設置指定時間
              2 常用方法：
                  .getFullYear(1992,10,3) 獲取四位年份
                   .getMonth()   獲取月份0~11
                   .getDate()  獲取一個月中的某一天0~31
                   .getDay()   獲取一星期中的某一天0~6
                   .getHours() 返回Date 對象的小時；(0~23);
                   .getMinutes() 返回Date 對象的分鐘；(0~59);
                   .getSeconds() 返回Date 對象的秒數；(0~59);
         

自定義對象
             
              1 基本概念：
              ① 對象：是包含一系列無需屬性和方法的集合
              ② 鍵值對：對象中的數據是以鍵值對的形式存在的，以鍵取值
              ③ 屬性：描述對象特征的一系列變數，【對象中的變數】
              ④ 方法：貓叔對象行為的一系列方法，【對象中的函數】
              2 對象的聲明：
              ① 自變數聲明：
                var obj = {
                     k1:value1,//屬性；
                  k2:value,
                  func: function(){};//方法
              }
              對象中的鍵，可以使任何數據類型，但一般用作普通變數名(不需要"")即可。
              對象中的值，可以使任何數據類型,但，字元串的話必須用""包裹
              多組建值對之間用英文逗號分隔，鍵值對的鍵與值之間用英文冒號分隔；
              
              ② new關鍵字  var list = new Objiect();
                         lisi.name = "李四";
                          lisi.say = function(){
                               console.log("我是"+this.name);
                               }
              
              
              3 對象中屬性和方法的讀寫：
                 ① .運算符：對象內部:this.屬性名  this.方法名()
                          對象外部：對象名.屬性名   對象.方法名()
                 ② 通過["key"]調用， 對象名["屬性名"]  對象名["方法名"]();
                  >>>如果key中包含特殊字元，則無法使用第①種方式，必須使用第②種；
                  >>>對象中：直接寫變數名，預設為調用全局變數，如果需調用對象自身屬性，則需要通過this關鍵字；
                 ③ delete 對象名.屬性名或者方法名;刪除對象的屬性和方法
            

JQuery

JQuery  語法
         
          1 JQuery("選擇器").action();通過選擇器調用事件函數
             但JQuery中，JQurey可以用$代替，即$("選擇器").action();
             ①選擇器可以直接用Css選擇器，選中元素
             ②.action()  表示對元素執行的操作。
          2 文檔就緒函數：防止了文檔在完全載入(就緒)之前運行JQuery代碼；
          $(document).ready(function(){
            $("p").hide(5000);
        
           $("p").fadeIn(5000);
            })
            簡寫：$(function(){});
            
         [文檔就緒函數與window.onload區別]
          ①window.onload需在網頁所有內容載入完成後執行(包括圖片音頻)
          文檔就緒函數，只需要在網頁DOM結構載入以後便執行
          ②window。onload只能寫一個，寫多個只會執行最後一個
           文檔就緒函數 可以寫多個，也絕不會被覆蓋
         3 JQuery對象與源生DOM對象互轉
           ①源生DOM對象轉JQuery對象：$(DOM對象)
            var p =document.getElmentsbytagname("p");
             $(p);//轉換為jquey對象
            ②JQuery對象   $("p")[0]    $("p").get(0)
              $("#p")[0].style.color = "red";
              $("#p").get(0).style.color = "red"
        

事件綁定快捷方式
                $("button:first").click(function(){
                   alert(1)
                 });
                使用on綁定事件
                 
        
                
                ①使用on進行單事件綁定
                $("button").on("click",function(){
                    //$(this) 取到當前調用函數的對象
                    console.log($(this).text());
                })
               
               
                ②使用on同時為多個事件綁定，同一函數
                $("button").on("mouseover click",function(){
                    console.log($(this).html());
                })
               
               
               ③調用函數時傳入自定義參數
               $("button").on("click",{name:"jianghao"},function(event){
                   //使用event.data.屬性名找到傳入的參數
                   console.log(event.data.name);
               })
              
              
               ④使用on進行多事件多函數綁定
              $("button").on({
                 click:function(){
                     console.log("click");
                 },
                 mouseover:function(){
                     console.log("mouseover")
                 }
              })
              ⑤使用on進行事件委派
              >>>將原本需要綁定到某元素上的事件綁定到父元素乃至根節點上，然後委派給當前元素生效。
                  eg:$("p").click(function(){});
                     $(document).on("click","p",function(){});
                >>>作用
                   預設的綁定方式，只能綁定到頁面初始時已有的p元素，當頁面增加新的p元素時，無法綁定到新元素上
                   使用事件委派方式，當頁面 添加新元素時，可以為頁面所有新元素綁定事件
                
              


            off取消事件綁定
            
             1  $("p").off():取消所有事件
             2  $("p").off("click"):取消點擊事件
             3  $("p").off("click mouseover")：取消多個事件
             4  $(document).off("click""p"):取消事件委派  

使用.one()  綁定的事件只能執行一次
             $("button").one("click",function(){
                alert(1)    
             })

  .trigger("event"):自動觸發某元素的事件
           $("p").trigger("click",["haha","hehe"]);
              觸發事件時傳遞參數
             
          

動畫
            .show() 讓隱藏的元素直接顯示，修改元素的寬度，高度，opacity屬性
             ① 不傳參：讓隱藏的元素直接顯示，不進行動畫 
             ② 傳入時間：多少毫秒之內完成動畫。
            ③ 傳入(時間,函數):完成動畫之後回調函數。
               show()動畫執行效果，修改元素的寬度，高度，opacity屬性
              .hide():讓顯示元素隱藏，與show相反。
              
              .slideDown()讓隱藏元素顯示，效果為從上往下，增加高度
              .slideup()讓顯示元素隱藏，效果為從下往上，減少高度
              .slideToggle():讓隱藏的顯示，讓顯示的隱藏
              .fadeOut()讓顯示元素隱藏，淡出
              .fadeIn()讓隱藏元素顯示 淡入
              .fadeToogle()讓隱藏的顯示，讓顯示的隱藏   淡入淡出
              .fadeTo(事件,透明度,函數)同.fadeToogle 但是多了透明度參數，可以指定顯示的最終透明度。
             

　　　　

　　　　.animate({最終的樣式屬性，鍵值對對象}，
　　　　事件動畫，
　　　　動畫效果("linar","swing"),
　　　　動畫執行完成後的回調函數)
　　　　自定義動畫註意事項：
　　　　① 參數一的對象中，鍵必須使用駝峰命名法。（fontSize:"18px"）
　　　　② 只有數值類型的屬性能夠使用動畫，非數值類型的屬性不能應用動畫


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

-Advertisement-
Play Games
更多相關文章
  • Python中numpy.apply_along_axis()函數的用法
    numpy.apply_along_axis(func, axis, arr, *args, **kwargs)： 必選參數：func,axis,arr。其中func是我們自定義的一個函數，函數func(arr)中的arr是一個數組，函數的主要功能就是對數組裡的每一個元素進行變換，得到目標的結果。 ...
  • 課堂練習：Python-三級菜單
    #!/usr/bin/env python # _authon bruce # @date: 2017/09/09 15:47 menu = { "江西":{ "贛州":{ "興國":{}, "於都":{} }, "南昌":{}, "吉安":{} }, "上海"... ...
  • 2.springioc實例化bean的三個方法
    1.構造器 也就是在上一篇講的那個例子，調用預設的無參構造函數 2.靜態工廠方法 1）創建需要執行的方法的類 2)創建靜態工廠 3)編寫applicationContext.xml配置文件 4)啟動容器,創建對象，調用方法 3.實例工廠方法(略) ...
  • 自動化測試：behave
    在系統開發過程中，我們一般個人參與的開發都是局部的，自己負責的一部分與其它團隊成員的成果組合在一起才能實現用戶的完整行為。比如常見的電商系統就有幾個主要的流程 商品搜索 購物車 訂單 支付 物流 這些模塊複雜的足以形成各自的團隊，不同團隊相互之間依據一定的介面來配合協作。在開發階段可以基於介面各自獨 ...
  • 融會貫通——最常用的面向對象設計原則“合成復用原則”
    復用一個類的時候，多使用對象的組合/聚合的關聯關係，而不是繼承。 之前提到的“依賴倒轉原則”，是以里氏代換原則為基礎的實現開閉原則目標的手段，這一條路線涉及到的是類的繼承（包括單繼承和介面實現），他們支撐了Java多態的特性。 但是今天要談一談Java另一個特性——封裝。封裝就是不要暴露過多的基類內 ...
  • 鬥地主3
    #coding=utf8import random,timeendcards=[]cardlist1=[ "spade1", "club1", "heart1", "diamond1", "spade2","club2","heart2","diamond2","spade3","club3","h ...
  • HTML學習筆記 w3sCss盒子模型 第十節 （原創）
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>W3sCSS盒子模型</title> <!--其實就是div加css樣式設計出一些邏輯頁面--> <link rel="stylesheet" href="tzy. ...
  • checkbox：click事件觸發文本框顯示隱藏
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>checkbox</title> <script src="jquery.js"></script> </head> <body> <form action=" ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類