近期學習的原生JS知識以及jQuery框架
【正則表達式】
一、正則表達式包括兩部分：
① 定義正則表達式的規則 ② 定義正則表達式的模式（i/g/m)
二、聲明正則表達式：
① 字面聲明 ： var reg = /表達式規則/表達式模式
② 使用new關鍵字： var reg = new RegExp("表達式規則","表達式模式")
eg: var reg = new RegExp("white","g");
三、正則表達式的經常使用模式：
① 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`html
四、正則表達式的經常使用方法：
① 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 =不含小數點的全部位數的和
ide
字符串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"
this
事件綁定快捷方式
$("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元素時，沒法綁定到新元素上
使用事件委派方式，當頁面 添加新元素時，能夠爲頁面全部新元素綁定事件
spa
off取消事件綁定
1 $("p").off():取消全部事件
2 $("p").off("click"):取消點擊事件
3 $("p").off("click mouseover")：取消多個事件
4 $(document).off("click""p"):取消事件委派 3d
使用.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"） ② 只有數值類型的屬性可以使用動畫，非數值類型的屬性不能應用動畫
- 1. 近期學習的原生JS知識以及jQuery框架
- 2. 框架二：SpringMVC 以及小知識
- 3. js知識框架圖
- 4. node js框架知識
- 5. jQuery框架學習
- 6. 框架學習：框架是什麼以及框架怎麼學
- 7. 原生js，jquery ajax請求以及jsonp的調用
- 8. Jquery與js原生
- 9. js和jQuery以及ajax的小練習
- 10. 從js實例學習jQuery———js中的foreach,map以及jQuery中的each和map
- 更多相關文章...
- • Spring Bean的生命週期 - Spring教程
- • Rust 生命週期 - RUST 教程
- • 適用於PHP初學者的學習線路和建議
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。