写给自己的js知识点小结 - 润新知

写给自己的js知识点小结
2、获取元素　　

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

　　obj.getElementsByTagName();

　　obj.getElementsByClassName();

　　obj.children

　　　　var aLi=oUl.children //获取所有子级

3、判断/流程控制语句

A:

　　if(){}
　　if(){}else{}
　　if(){}else if(){}
　　if(){}else if(){}else{}

B:

　　switch(变量){
　　　　case '条件':
　　　　　　语句
　　　　　　break; //跳出

　　　　default: 默认
　　　　　　break;
　　　　}

C:

　　true&&语句；

4、循环

　　初始化条件语句自增

　　

　　while(){} 不确定次数的循环

　　for(){} 有固定次数的循环性能高

　　for in ：

　　　　 for( 变量 in 对象) {代码}；用于遍历数组或对象的属性

　　　　　　可以循环json和数组（arr），所以性能低

5、数据类型

　　检测数据类型：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);

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

为什么要转换

　　　　比如一些数字，可能被识别成字符串，转成数字方便使用

　　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
点击查看例子
7、隐式类型转换（无序人工转换，自动转换）

　　-减 *乘 /除 %模
1 var a='12'; 2 var b=5; 3 4 alert(a*b);
点击查看例子
8、运算符

　　+ 　　-　　 * 　　/　　 %

　　+=　　 -= 　　*=　　 /= 　　%=

8.2比较运算符　　

　　< 　　>　　 <=　　 >= 　　!=　　 ==

　　=== 　　!==

8.3逻辑运算符 　　

　　! 非取反

　　&& 与并且

　　|| 或或者

9、查找某个数 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>
这是一个重要的例子
10、随机数（封装）
```
1 function rnd(n,m){
2     return parseInt(Math.random()*(m-n)+n);   //固定的写法
3 }
4 
5 alert(rnd(1,34));
```
11、真假的判断

　　真：true 非零数字都是真非空字符串非空对象

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

12、字符串操作和数组操作

13、时间对象

　　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　　时间戳

14、Math对象

　　random

　　floor

　　ceil

　　round

　　abs

　　sqrt

　　pow

　　max

　　min

　　sin

　　cos

　　atan2

　　PI

15、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练习：简易留言板

16、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];

17、事件　　

　　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　　鼠标滚轮（苹果电脑没有）

1、事件对象

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

穿墙

　
相关阅读:
python和搜索
 Flask---ajax(jquery)交互
 Flask--修改默认的static文件夹的方法
 Flask设计带认证token的RESTful API接口[翻译]
Python 和 Flask实现RESTful services
等差数列偶数被除2删除后的恢复问题（2018小马智行秋招计算机视觉第三道编程题）
Leetcode 140 单词拆分II：字符串s在字典wordDict中有多少种拆分方法。
LeetCode 139 单词拆分：字符串s能否分割为字符串数组words（wordDict）中字符串的组合？（某未来公司面试题目）
ROS时间概念总结：ros::Time、ros::Duration、定时器ros::Timer&ros::Rate
++i、i++、i+=1、i=i+1的区别
原文地址：https://www.cnblogs.com/cnyaokai/p/6761342.html

Copyright © 2020-2023 润新知