JS学习笔记

鼠标事件

onclick //单击
ondblclick //双击
onmouseover //鼠标移入
onmouseout //鼠标移出
onmousemove //鼠标移动

文档元素加载完毕

onload //元素或文档加载完毕

表单控件状态监听

onfocus //文本杠获取焦点
onblur //文本框推动焦点
oninpu //实时监听输入
onchange //两次输入内容发生变化时触发
onsubmit //form元素监听，点击提交后触发

事件绑定方

<!--1.内联方式：将事件绑定到元素上-->
<button onclick=alert()>点击</button>

<!--2、动态绑定-->
btn.onclick=function(){}

数据类型

var 变量
const 常量

一、number数值类型
整数：
1、10进制
var a=100;
2、八进制，以0为前缀.控制台输出会按十进制
var b=021;

小数
1、小数点
var m=1.2345
2、科学技术法
var n=1.5e3

二、string字符
加双引号
var="100";

三、boolean 布尔
true=1 false=0
var isSave=true;

四、underfined
特殊值，变量声明未赋值
var a;
console.log(a)

五、null 空类型
1、引用数量类型
2、检测数量类型
typeof (变量或者表达式)

类型转化

一、转化为字符串 toString()
eg:
    var a=100;
    a=a.toString();//"100"
    var b=true;
    b=b.toString();//"true"

二、转化为number
1、Number(param)
  成功返回数字，不成功返回NAN
2、parselnt(param)
  依次解析整数值
3、parseFloat(param)
 依次解析整数和小数

三、隐式类型转化
1、字条串+。输出转化后拼接的结果
2、数字+运算符。输出转化后运算的结果。

运算符

1、+-*、%|加减乘除除余
2、累算：+= -= *= 、= %=
3、自增减：++ -- 。也自身基础上+1 或者-1

++在前面，先增加，再赋值。
++在后面，先赋值，再运算

<script type="text/javascript" >
    var a=2;
    console.log("a"+a)
    console.log("a",++a)
    console.log("a"+a)
    var b=2;
    console.log("b:"+b)
    console.log("b",b++)
    console.log("b："+b)
</script>


4、关系运算符/比较运算符
>  <  >=  <= 
==(相等) ！=（不等） ===（全等） !==(不全等)
全等解释：类型相等，值也相等


5、逻辑运算符
&& 逻辑与 同时成立，11则1
|| 逻辑或 只要其中一个成立。有1则1
！ 逻辑非 结果取反。除0以外都为真

6、三目运算
表达式1（A）？表达式2（B）：表达式3（C)
判断1是否成立。成立返回BOLL值。
if A:
    B
else:
    C

条件相关

一、if (条件表达式){
    表达式成立执行
    }

假值 0 0.0 "" underfined Nan null

{}可经省略，一旦省略，则意味只执行第一行代码。也就是只有一句代码的时候可以省略。



二、
if (条件表达式){
    表达式成立执行
    }
else
    {
    表达式成立执行
    }

三、多分支
    if (conditon1){
        //条件1成立时执行
    }
    else if (condition2){
        //条件2成立时执行
        
    }
    else if (condition3){
        //条件3成立时执行
        
    }
    else{
    //条件不成立时执行
    }

四、swich

    switch (value) {
        case 值1:
            //匹配时执行代码
            break;
        case 值2:
            //匹配时执行代码
            break;
        case 值3:
            //匹配时执行代码
            break;
        default:
            //都匹配后执行代码
            break;
    }
五、循环
1、while

while (循环条件){
满足条件的代码
更新变量
}

2、do-while
do {
    循环体;
    更新变量}
while (循环条件);

3、for (定义循环变量;循环条件;更新变量){
    循环体';}
#break强制结束，continue结束当前，开始下一次

函数相关

一、语法：

function 函数名（参数列表）{
    函数体
    return 返回值;   
}
二、匿名函数
(function (形参){

})(实参);

eg:
var fn=function (){};
fn();

三、局部变量
在函数体内使用var定义的变量。取消局的方法，去掉var或者放到函数体外面

内置对象

一、数组
1、格式a=[]
2、属性 length表示长度
3、使用方法：
添加元素到末尾：push(data) 
添加元素到开关：unshift(data)
移除末尾元素：pop()
转成字符串：toString()
转成字符串，指定连接符：join(param)
倒序重排：reverse()
排序：sort()


二、字符串
1、创建 var str="1234"或var str2=new String("1234")
2、属性 length表示长度
3、
toUpperCase()转大写。
toLowerCase()转小写字母。
charAt(index)查看指定下标的字符。
charCodeAt(index) 查看指定下标的字符的编码。
indexOf(str,fromIndex)获取指定字符的下标。
lastIndexOf(str,fromIndex)。获取指定字符的下标，从后向前查找。返回最后一个。
substring(startIndex,endIndex):截取指定位置的字符。
substr(starIndex,len)根据下标截取指定字符串。
split(param)分割字符串

正则

一、基本方法
1、语法
var reg1=/微软/ig;
var reg2=new RegExp("微软","ig");
2、属性
lastIndex：可读可写，表示下一次匹配的起始索引。比如重复使用规则时，下一次不能保证是从0开始匹配。一般用在全局。

3、方法
test(str)

二、其它方法
1、match(regExp/subStr)
查找满足条件的内容，返回数组
2、replace(regExp/subStr,newStr)
查找并替换

Math对象

\\ 圆周率 Math.PI
\\ 自然对数 math.E

方法：
\\随机数生成0-1
Math.random();

\\向上取整，忽略小数，整数位+1
Math.ceil(x);

\\向下取整，忽略小数，整数位不变
Math.floor(x);

\\四舍五入
Math.round(x);

日期对象

\\创建日期对象
var date2=new Date(2011/11/11")
var date3=new Date(2011/11/11 11:11:11")

\\日期对象方法
\\读取毫秒数：getTime()
\\获取年月日
getFullYear()
getMonth()
getDate()

定时器

一、每隔一段时间就执行
开启：
var timerID=setInterval(function,interval);
//function 执行代码
//interval 时间间隔，单位毫秒。1000ms=1s
返回值：定时器ID
关闭：
clearInterval(timeID);

二、超时调用：等待多久之后执行
开启：
var timerid=setTimeout(function,timeout);
关闭：
clearTimeout(timerID);

HISTORY

1、history
length 表示访问过URL的数量
方法：
back()
forward()
go(n)
2、location
当前窗口URL
方法：
href 设置地址栏信息
reload(param) 刷新。param=trun 表示强制刷新

DOM

一、获取属性

\\根据标签名获取节点列表
var elems=document.getElementsByTagName("");

\\根据class属性获取节点列表
var elems=document.getElementsByClassName("");

\\根据ID，返回为节点
var elems=document.getElementsByID("");

\\根据name，返回列表
var elems=document.getElementsByName("");


二、操作元素内容
innerHTML:改变元素内容，可识别标签
innerText:改变元素内容，不可识别标签
value:读取表单控件的值

三、操作元素属性
elem.getAttribute("attrname");获取属性值
elem.setAttribute("attrname","value");变更属性值
elem.removeAttribute("attrname");移除属性值