寫給本身的js知識點小結

時間 2019-11-29

標籤寫給本身知識小結欄目 JavaScript 简体版

原文原文鏈接

二、獲取元素　　

　　document.getElmentById('id');　　只能在document下獲取json

　　obj.getElementsByTagName();數組

　　obj.getElementsByClassName();瀏覽器

　　obj.childrenapp

　　　　var aLi=oUl.children //獲取全部子級dom

三、判斷/流程控制語句

A:ide

　　if(){}
　　if(){}else{}
　　if(){}else if(){}
　　if(){}else if(){}else{}函數

B:性能

　　switch(變量){
　　　　case '條件':
　　　　　　語句
　　　　　　break; //跳出

　　　　default: 默認
　　　　　　break;
　　　　}spa

C:3d

　　true&&語句；

四、循環

　　初始化條件語句自增

　　while(){} 不肯定次數的循環

　　for(){} 有固定次數的循環性能高

　　for in ：

　　　　 for( 變量 in 對象) {代碼}；用於遍歷數組或對象的屬性

　　　　　　能夠循環json和數組（arr），因此性能低

五、數據類型

　　檢測數據類型：typeof

　　
　　1）基本類型

　　　　string 字符串

　　　　number 數字（ NaN屬於number類型，非數字（只是一個標識）。特色：本身不等於本身）

　　　　　　　　　　　　alert(isNaN(oT.value)); //判斷是否是NaN

　　　　boolean 布爾值

　　　　undefined 未定義

　　　　

　　2）複合類型
　　　　object 對象（ Object本質上是由一組無序的名值對組成的，如object、array、data等）

　　　　　　alert(typeof null);//object 空對象也是對象

　　3）function 函數

　　　　附tips:數組的兩種寫法：

　　　　　　var arr=[1,2,3,4];
　　　　　　var Array(1,2,3,4);

六、顯式數據類型轉換/強制類型轉換

爲何要轉換

　　　　好比一些數字，可能被識別成字符串，轉成數字方便使用

　　parseInt 整數（捨棄小數和數字後面的非數字部分）

1 var a='aa12abc';        //NaN     非數字
2 var a='12abc';
3 alert(parseInt(a));

點擊查看例子

 1 <script>
 2 window.onload=function (){
 3     var oTxt1=document.getElementById('txt1');
 4     var oTxt2=document.getElementById('txt2');
 5     var oBtn=document.getElementById('btn');
 6     
 7     oBtn.onclick=function (){
 8         var oT1=parseInt(oTxt1.value);
 9         var oT2=parseInt(oTxt2.value);
10         
11         alert(oT1+oT2);
12     };
13 };
14 </script>
15 </head>
16 
17 <body>
18     <input id="txt1" type="text" />
19     +
20     <input id="txt2" type="text" />
21     =
22     <input id="btn" type="button" value="結果" />
23 </body>

計算器的小例子

 1 <script>
 2 window.onload=function (){
 3     var oTxt1=document.getElementById('txt1');
 4     var oTxt2=document.getElementById('txt2');
 5     var oBtn=document.getElementById('btn');
 6     var oS=document.getElementById('s1');
 7     
 8     oBtn.onclick=function (){
 9         alert(oS.value);
10         
11         var oT1=parseInt(oTxt1.value);
12         var oT2=parseInt(oTxt2.value);
13         
14         alert(oT1+oT2);
15     };
16 };
17 </script>
18 </head>
19 
20 <body>
21     <input id="txt1" type="text" />
22     <select id="s1">
23         <option>+</option>
24         <option>-</option>
25         <option>*</option>
26         <option>/</option>
27     </select>
28     <input id="txt2" type="text" />
29     =
30     <input id="btn" type="button" value="結果" />
31 </body>

計算器的小例子2

　　parseFloat 整數、小數/浮點數

1 var a='12.13abc';
2 alert(parseFloat(a));   //12.13

點擊查看例子

　　Number 純數字

1 var a='123abc';
2 alert(Number(a));   //NaN

點擊查看例子

七、隱式類型轉換（無序人工轉換，自動轉換）

　　-減 *乘 /除 %模

1 var a='12';
2 var b=5;
3 
4 alert(a*b);

點擊查看例子

八、運算符

　　+ 　　-　　 * 　　/　　 %

　　+=　　 -= 　　*=　　 /= 　　%=

8.2比較運算符　　

　　< 　　>　　 <=　　 >= 　　!=　　 ==

　　=== 　　!==

8.3邏輯運算符　　

　　! 非取反

　　&& 與而且

　　|| 或或者

九、查找某個數 findArr(n)

 1 <script>
 2 var arr=[55,63,18,26,99,-100];
 3 
 4 function findArr(n){
 5     //查看全部數字
 6     for(var i=0; i<arr.length; i++){
 7         //判斷數組裏面的某個數是否等於參數n
 8         if(arr[i]==n){
 9             //找到了 返回true
10             return true;
11             //這裏使用return有兩個做用，一個是返回值（至關於alert），第二個是跳出當前的循環或方法，阻止後面的程序的運行。
12         }
13     }
14     //循環結束尚未，證實沒找到 返回false
15     return false;
16 }
17 alert(findArr(88));
18 </script>

這是一個重要的例子

十、隨機數（封裝）

1 function rnd(n,m){
2     return parseInt(Math.random()*(m-n)+n);   //固定的寫法
3 }
4 
5 alert(rnd(1,34));

十一、真假的判斷

　　真：true 非零數字都是真非空字符串非空對象

　　假：false 數字零空字符 undefined null NaN

十二、字符串操做和數組操做

1三、時間對象

　　var oDate=new Date(); 日期對象

　　var y=oDate.getFullYear(); 年

　　var m=oDate.getMonth()+1; 月

　　var d=oDate.getDate(); 日

　　var day=oDate.getDay(); 星期

　　var H=oDate.getHours(); 時

　　var M=oDate.getMinutes(); 分

　　var S=oDate.getSeconds(); 秒

　　var MS=oDate.getMilliseconds() 毫秒

　　oDate.setFullYear

　　oDate.setHours

　　oDate.getTime　　時間戳

1四、Math對象

　　random

　　floor

　　ceil

　　round

　　abs

　　sqrt

　　pow

　　max

　　min

　　sin

　　cos

　　atan2

1五、DOM操做

　　獲取子級　　children

　　獲取父級節點　　parentNode

　　獲取上一個兄弟節點　　obj.previousElementSibling||obj.previousSibling

　　獲取下一個兄弟節點　　obj.nextElementSibling||obj.nextSibling

　　獲取第一個子級

　　　　父級.children[0]

　　　　父級.firstElementChild||父級.firstChild

　　獲取最後一個子級

　　　　父級.children[父級.children.length-1]

　　　　父級.lastElementChild||父級.lastChild

　　建立

　　　　document.createElement();

　　插入（建立完了不會顯示，須要插入以後纔有顯示）

　　　　父級.appendChild();

　　　　父級.insertBefore(obj,obj2);

　　刪除

　　　　父級.removeChild();

DOM練習：簡易留言板

1六、DOM——獲取元素信息

　　obj.offsetLeft/Top　　定位父級的距離

　　obj.offsetWidth/Height　盒子模型大小

　　offsetParent　　　　獲取定位父級

　　obj.getBoundingClientRect().left/top/right/bottom　　絕對距離（自帶的，性能高）

　　　　　絕對距離的數值在IE7下面會多出2像素，若是不想多出2像素，可使用下面的兼容寫法（本身封裝的，性能低）

<style>
    *{ margin:0;padding: 0; }
    #div1{ width:500px; height:500px; background:red; position:absolute; margin:100px; }
    #div2{ width:300px; height:300px; background:yellow; position:absolute; margin:100px; }
    #div3{ width:100px; height:100px; background:green; position:absolute; margin:100px; }
</style>
<script>
function getPos(obj){
    var l=0;
    var t=0;
    
    while(obj){
//        不知道有多少個父級（不固定次數）用while循環
        l+=obj.offsetLeft;
        t+=obj.offsetTop;
        
        obj=obj.offsetParent;  //一直是本身的父級
    }
    
    return {left:l,top:t};
}
window.onload=function (){
    var oDiv=document.getElementById('div3');
    
    alert(getPos(oDiv).left);
};
</script>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>