JS學習筆記一
阿新 • • 發佈：2020-11-16
| 1、類 |
| 2、原型 |
| 3、陣列和鍵值對 |
| 4、時間物件 |
| 5、型別 |
| 6、判等 |
| 7、定義方法 |
| 8、JS不存在方法過載 |
| 9、定義匿名函式 |
| 10、對話方塊 |
| 11、location頁面跳轉 |
| 12、獲取元素 |
| 13、事件 |
| 14、載入完成事件 |
| 15、定時器 |
| 16、設定style樣式 |
| 17、event |
| 18、動態新增元素 |
| 19、關於滑鼠的事件 |
| 20、innerText和innerHTML |
1、類
functionPerson(name) { this.Name = name;//在類內部宣告一個屬性Name,初始化為name值 this.say = function() { alert(this.Name); }; //類是沒有返回值的，所以如下程式碼可以不寫 //return name; } //使用構造方法建立物件 var p1 = new Person('zhh'); //p1.say();//呼叫 方法 //alert(typeof (p1));//object //alert(typeof (Person('zhh')));//因為Person作為函式時，沒有返回值，所以是undefined //alert(typeof(Person));//Person就是一個函式，型別是function
function Person() { } //為物件增加成員 //var p1 = new Person(); //p1.Name = "zhh";//為物件p1新建了一個屬性Name //p1.say = function() {// alert(p1.Name); //}; //p1.say(); //新建出來的物件，是沒有Name屬性的，因為類Person中沒有Name屬性 //var p2 = new Person(); //alert(p2.Name);
2、原型
//原型：物件的型別 function Person() { this.Age = 100; } var p1 = new Person(); //p1.Title = 'abc'; //訪問原型 p1.__proto__.Title = 'abc';//為原型註釋資料成員 //Person.prototype.Title = 'abc';//功能同上面的程式碼 var p2 = new Person(); alert(p2.Title);
3、陣列和鍵值對
//使用[]定義陣列 var array1 = [123, 'abc']; array1[0]; //鍵值對{鍵:值,...} var array2 = { name: 'zhh', age: 18, gender:'你猜' }; //alert(array2['name']);//將array2認為是集合，通過鍵訪問值 //alert(array2.name);//將array2認為是json，通過屬性訪問值 //定義json陣列 var temp = [{ title: 'zhh', age:18 }, { title: '牛頭', age:20 }, { title: '馬面', age:22 }]; //輸出每個物件的title值 for (var index in temp) {//temp是陣列，所以index是索引 alert(temp[index].title); }
4、時間物件
//建立時間物件 //var date = new Date(); ////獲取世界時間，會提示當前時區 //alert(date.toString()); ////獲取當前時區的當前時間 //alert(date.toLocaleString());
5、型別
//當變數被宣告之後，沒有初始化，則值為undefined var a1; //alert(a1); //輸出型別 //alert(typeof(a1));//返回a1變數的型別對應的字串 //指定null值時，當前變數為null a1 = null; //alert(a1); //alert(typeof(a1));//null是一個object的值 //class Person{} var a2 = '100'; alert(a2 + 1);//字串拼接 alert(parseInt(a2) + 1);//轉成整數後，進行算術加運算
6、判等
//var a1; //var a2 = null; //undefined表示沒有，null表示沒有 //if (a1 == a2) { // alert('ok'); //} else { // alert('no'); //} //三個等號先判斷型別是否相同，再判斷值是否相同 //if (a1 === a2) { // alert('ok'); //} else { // alert('no'); //}
7、定義方法
//function 方法名(引數列表){...} function add(a, b) { //alert(a + b); return a + b;//使用return返回值 } //快捷鍵func,tab function add2(a, b, c) { alert(a + b + c); //return a + b + c; } //呼叫方法 //var sum = add(1, 2);//直接使用變數接收方法的返回值 //alert(sum); //接收沒有返回值的方法 var sum2 = add2(1, 2, 3); alert(sum2);
8、不存在方法過載
//後宣告的函式會將先宣告的函式覆蓋 function add(a, b) { alert(a + b); } function add(a,b,c) { alert(a + b + c); }
9、定義匿名函式
//定義匿名函式，賦值給一個變數 var f1 = function(a, b) { alert(a+b); };
10、對話方塊
//alert('123');//提示框，只有一個“確定”按鈕 //確認框，有“確定”、“取消”兩個按鈕 //點確定返回true,點取消返回false //var result = confirm('確定要刪除嗎？'); //alert(result); //輸入框：有一個文字框，一個“確定”按鈕，一個“取消”按鈕 //點確定則返回文字框中的值，點取消則返回null //var result = prompt('請輸入年齡', '10'); //alert(result);
11、location頁面跳轉
//將位址列的url進行改寫，效果是可以完成頁面跳轉 location.href = '01對話方塊.html';
12、獲取元素
//根據id獲取元素，因為id是唯一的，所以只返回一個dom物件 var temp1 = document.getElementById('btnShow'); //name是可以重複的，所以返回一個dom物件陣列 var temp2 = document.getElementsByName('btnShow');
13、事件
//推薦使用這種方式註冊事件 //好處：實現了程式碼分離（html與js）;可以使用this document.getElementById('btnShow2').onclick= function() { alert(this.value); }
14、載入完成事件
//頁面中的所有節點載入完成後，會觸發此事件 onload = function () { //當節點存在後，找到並註冊點選事件 document.getElementById('span1').onclick = function() { alert('ok'); }; };
15、定時器
setInterval(birdFly1, 100);
16、設定style樣式
var msg = document.getElementById('msg');
msg.style.left = left + 'px';
17、Event
document.getElementById('btnShow').onclick = function(e) {
//event在事件發生時，由瀏覽器創建出來的一個物件，包含了滑鼠的位置等資訊
//alert(event);
//對於早期ie瀏覽器，不支援引數e的形式
//對於ff瀏覽器，不支援event保留關鍵字
//對於最新的ie瀏覽器，兩種方式都支援
alert(e.clientX);
};
18、動態新增元素
//追加圖片 document.getElementById('btnImg').onclick = function() { //建立img物件 var img = document.createElement('img'); //通過屬性src指定要顯示的圖片 img.src = 'images/bird1.png'; //在div中追加圖片物件 document.getElementById('divContainer').appendChild(img); }; //追加文字框 document.getElementById('btnText').onclick = function() { //建立input物件 var input = document.createElement('input'); //設定屬性 input.type = "text"; //加入div中 document.getElementById('divContainer').appendChild(input); }; //追加超連結 document.getElementById('btnA').onclick = function() { //建立a物件 var a = document.createElement('a'); //設定屬性 a.href = '10Event.html'; a.innerHTML = '點選顯示'; //加入div中 document.getElementById('divContainer').appendChild(a); }; //刪除所有元素 document.getElementById('btnRemove').onclick = function() { //獲取所有子元素 var childs = document.getElementById('divContainer').childNodes; //遍歷子元素，逐個刪除 for (var i = childs.length-1; i >=0; i--) { document.getElementById('divContainer').removeChild(childs[i]); } };
19、關於滑鼠的事件
//獲取所有的img標籤 var imgs = document.getElementsByTagName('img'); //遍歷所有的圖片物件 for (var index in imgs) { //為每個圖片物件註冊指向事件 imgs[index].onmouseover = function() { //將當前及之前的圖片變黃，之後的圖片變灰 var id = this.id; for (var i = 0; i < imgs.length; i++) { //當前元素及之前的元素 if (i <= id) { imgs[i].src = 'images/star2.png'; } else { //當前元素之後的元素 imgs[i].src = 'images/star1.png'; } } }; //為每個圖片物件註冊移開事件 imgs[index].onmouseout = function() { //被點選的項及之前的元素是黃色 for (var i = 0; i <= clickIndex; i++) { imgs[i].src = 'images/star2.png'; } //將點選的項之後的元素變成灰色 for (var i = clickIndex+1; i < imgs.length; i++) { imgs[i].src = 'images/star1.png'; } };
20、innerText和innerHTML
document.getElementById('btnShowText').onclick = function() {
//獲取div內的文字
alert(document.getElementById('div1').innerText);
};
document.getElementById('btnShowHTML').onclick = function() {
//獲取div內的html
alert(document.getElementById('div1').innerHTML);
};