写给本身的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>

附：获取非行间样式

　　高版本浏览器　　getComputedStyle(obj,false)[sName];　　sName就是style name

　　　　　　　　　　false是兼容低版本（3.x）火狐用的，也能够不写

　　IE8兼容写法： obj.currentStyle[sName];

1七、事件　　

　　onload　　加载

　　window.onload 页面加载完成

　　obj.onclick 点击

　　obj.onmouseover 鼠标移入

　　obj.onmouseout 鼠标移出

　　obj.onmousedown 鼠标按下

　　obj.onmousemove　鼠标移动

　　obj.onmouseup　鼠标抬起　　　　　

　　obj.onfocus 得到焦点

　　obj.onblur 失去焦点

　　ondblclick 双击

　　onchange 改变

　　oninput　　输入

　　onkeydown　　键盘按下

　　onkeyup　　键盘抬起

　　oncontextmenu　　鼠标右键

　　onmousewheel　　鼠标滚轮（苹果电脑没有）

一、事件对象

function （ev）{

　　ev.clientX　　鼠标x轴距离

　　ev.clientY　　鼠标Y轴距离

}

滚动距离

　　低版本浏览器

　　高版本浏览器

　　兼容写法

IE9一下不兼容：pageX pageY 自带的滚动距离

获取可视区宽高：document.documentElement.clientWidth/Height

例子：div拖拽

事件绑定

　　obj.addEventListener('click',fn,false);

　　obj.removeEventListener('click',fn,false);解除绑定

事件冒泡

　　cancelBubble=true;阻止冒泡

事件委托

　　加给父级

　　事件源ev.srcElement

　　省性能

　　给将来元素加事件

运动

　　var start=0;

　　var iTarget

穿墙

写给本身的js知识点小结

二、获取元素

三、判断/流程控制语句

四、循环

五、数据类型

六、显式数据类型转换/强制类型转换

七、隐式类型转换（ 无序人工转换，自动转换 ）

八、运算符

8.2比较运算符

8.3逻辑运算符

九、查找某个数 findArr(n)

十、随机数（封装）

十一、真假的判断

十二、字符串操做和数组操做

1三、时间对象

1四、Math对象

1五、DOM操做

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

附：获取非行间样式

1七、事件

一、事件对象

二、获取元素　　

七、隐式类型转换（无序人工转换，自动转换）

8.2比较运算符　　

8.3逻辑运算符　　

1七、事件　　