JS自訂對象，Regex，JQuery中的一些知識點

標籤：屬性   操作   結構   迴圈嵌套   src   姓名   style   person   oat   

一：自訂對象

1.基本概念：
①對象：包含一系列無序屬性和方法的集合。
②索引值對：對象中的資料是以索引值對的形式存在的，以鍵取值。
③屬性：描述對象特徵的一系列變數。[對象中的變數]
④方法：描述對象行為的一系列方法。[對象中的函數]

2. 對象的聲明：

①字面量聲明：var obj={}；

②new 關鍵字：var lisi = new Object();

 3.對象中屬性和方法的讀寫方式：

①通過.運算子：對象內部：this.屬性名稱 this.方法名();
　　　　　　對象外部：對象名.屬性名稱 對象名.方法名。

②通過["key"]調用：對象名["屬性名稱"]; 對象名["方法名"]();

③刪除對象的屬性和方法：delete 對象名.屬性/方法名。

例：建立一個對象包括一個人員的姓名，數學，語文，英語成績（鍵盤輸入）

本題將一個人的姓名，成績當作一個對象的元素，每個人當作一個數組的元素來做

var classes= {
　　person:[],  包含學生1，2，3的數組
　　addPerson:function(){        選擇輸入學生資訊選項時調用的函數
　　　　newName=prompt("請輸入學員姓名：");  輸入資訊
　　　　newMeth=prompt("請輸入數學成績：");
　　　　newChinese=prompt("請輸入語文成績：");
　　　　newEnglish=prompt("請輸入英語成績：");

　　　　if((parseFloat(newMeth)||parseFloat(newMeth)==0)&&
　　　　(parseFloat(newChinese)||parseFloat(newChinese)==0)&&
　　　　(parseFloat(newEnglish)||parseFloat(newEnglish)==0)){     判斷輸入是否合法

　　　　　　var student=new Object();     建立一個新對象，用student.name=newName等將newName等放入這一對象中。
　　　　　　student.name=newName;
　　　　　　student.meth=newMeth;
　　　　　　student.chinese=newChinese;
　　　　　　student.english=newEnglish;

　　　　　　newSum=parseFloat(newMeth)+parseFloat(newChinese)+parseFloat(newEnglish);

　　　　　　student.sum=newSum;

　　　　　　this.person.push(student);   用this.person.push(student)的方式將每一個student依次添加到person[]數組中
　　　　　　this.person.sort(function(a,b){ 
　　　　　　　　return a.sum-b.sum;   用student的sum的值的大小來排序
　　　　　　});
　　　　　　console.log("成績錄入成功");
　　　　}else{
　　　　　　console.log("成績錄入失敗，輸入不可為空白。")
　　　　}
　　},
　　showPerson:function(){         選擇列印學生資訊選項時調用的函數
　　　　console.log("\t\t傑瑞教育學員成績展示");
　　　　console.log("序號\t姓名\t語文\t數學\t英語\t總成績");
　　　　for(var i=0;i<this.person.length;i++){     依次列印出person數組中第i個元素的全部內容
console.log((i+1)+"\t"+this.person[i].name+"\t"+this.person[i].meth+"\t"+this.person[i].chinese+"\t"+this.person[i].english+"\t"+this.person[i].sum);
　　　　}
　　},

}

console.log("傑瑞教育成績管理系統");

while(true){
　　console.log("1.學員成績錄入 2.展示所有學員成績");
　　var num = prompt("請選擇操作序號");
　　switch(num){   通過switch判斷輸入的選項來決定調用哪個函數
　　　　case "1":
　　　　　　classes.addPerson();
　　　　break;
　　　　case "2":
　　　　　　classes.showPerson();
　　　　break;
　　}
　　console.log("是否繼續(y/n)");
　　var isGo=prompt("y繼續，其他字元取消");  
　　if(isGo=="Y"||isGo=="y"){    通過if判斷輸入的選項來決定是否結束while迴圈
　　　　continue;
　　}else{
　　　　break;
　　}
}

console.log("退出系統，感謝使用");

例二：楊輝三角的應用

[
  [1],
  [1,1],
  [1,2,1],
  [1,3,3,1],        i=4-1 j0=1+j1=3
  [1,4,6,4,1],        4: i=4 j1=4
  ]

如所示先將楊輝三角寫成直角三角形，再將它變成二維數組的結構

/***************二維數組結構*************************/
var num =parseInt(prompt("請輸入楊輝三角行數"));
var arr = new Array(num);  建立一個有num個元素的數組arr
for(var i=0;i<num;i++){
　　arr[i]=new Array(i+1);  通過迴圈來將arr的第i個元素定義成數組，每個數組分別有i+1個元素，就得到了基本的二維數組架構。
}

/******************填入資料**************************/

for(var i=0;i<arr.length;i++){       由往二維數組中放入資料需要兩層迴圈嵌套，第一個迴圈的迴圈次數是外層數組的個數，第二個迴圈的迴圈次數是內層數組的個數

　　　　　　　　　　　　　　　　　　用arr[i].length來表示
　　for(var j=0;j<arr[i].length;j++){
　　　　if(j==0||j==i){                楊輝三角的規律：第一個和最後一個都是1，即arr[i][0]==arr[i][i]==1,這裡用if判斷arr[i][j]是否是1
　　　　　　arr[i][j]=1;
　　　　}else{　　　　　　　　　　當不是arr[i]的第一個和最後一個時的規律：每個數都是上一行的同一位置的數和前一位置的數之和，例arr[4][1]=arr[3][1]+arr[3][0];
　　　　　　arr[i][j]=arr[i-1][j]+arr[i-1][j-1];   即執行此算式
　　　　}
　　}
　　console.log(arr[i].toString());   以字串的形式輸出每一個arr[i]
}

二：Regex

1.Regex的聲明： 

①字面量聲明  ：var reg = /運算式規則/運算式模式

②使用new關鍵字聲明： var reg = new RegExp("運算式規則","運算式模式")

2.Regex常用方法：
 .test():方法用於檢測一個字串是否匹配某個正則模式.返回true或false。

3.Regex的常用模式：

g：全域匹配 不加g，預設非全域匹配，只匹配第一個合格字串。

i:忽略大小寫，不加預設為需要匹配大小寫。

m:匹配多行模式（字串分多行顯示，每行都有開頭結尾）。

註：在判斷form表單中input的輸入是否滿足要求時要在Regex開頭結尾分別加上^和$,否則無法正確判斷是否符合規則。

例：判斷郵箱是否符合規則

var regm = /^\[email protected]\w+\.[a-zA-Z]{2,3}(\.[a-zA-Z]{2,3})?$/;

 

　　　判斷Regex的常用網站：https://regexper.com/

三：JQuery

1.JQuery文法

①.通過JQuery("選取器").action();通過選取器呼叫事件函數，但JQuery中，JQuery可用$代替即$("選取器").action()；

　　選取器可以使用css選取器選中元素。

　　.action()表示對元素執行的操作。

②.文檔就緒函數:防止文檔在完全載入之前運行JQuery代碼。

 

$(document).ready(function(){
 　　 //JQuery代碼
 });

簡寫方式
$(function(){
 　　//JQuery代碼
});

文檔就緒函數只需要在網頁dom結構載入完成後就能執行。不需要圖片，視頻等全部載入完成，節約時間。

文檔就緒函數可以寫多個，不會被覆蓋。

③.JQuery對象與原生DOM對象互轉：
原生對象轉JQuery對象：$(DOM對象)；
　　var p=document.getElementsByTagName("p");
　　$(p)；//轉換為JQuery對象

JQuery對象轉原生DOM對象：
　　$("#p").get(0); $("#p")[0];
　　例： $("#p").get(0).style.color = "red";

2.事件委派：

①：使用on進行事件委派
>>>事件委派：將原本需要綁定到某元素上的事件綁定到其父元素
 或根結點上，然後委派給該元素使事件在該元素上生效。

 例：$("p").on(‘click‘,function(){});
　　　　　　　　　　 ↓
 $(document).on("click","p",function(){})；

>>>作用：預設的綁定方式只能綁定到頁面初始時已有的p元素上
　　當頁面新增p元素時無法綁定到新的p上。
　　使用事件委派方式，新增元素也可以綁定上事件。

3.ajax：

JSON對象

①j對象是索引值對的集合，鍵與值之間用"："分隔，多個索引值對之間用 ","分隔
②多個JSON對象可以放到數組中去。JSON對象和數組可以相互嵌套。

③JSON對象的鍵必須是字串。

擷取json的方式$.post("json的url",function(data){});

 

JS自訂對象，Regex，JQuery中的一些知識點