JS学习笔记一-CSDN博客

本文链接：https://blog.csdn.net/Etherege_x/article/details/103211460

JS基础学习

js数据类型

String - - -字符串
Number - - - 数值
Boolean - - - 布尔值两个取值（true | false）
Undefined - - - 未定义（声明变量，未赋值）

Object - - -对象

        - typeof + 变量名 - - - 返回：数据类型
        - isNaN()   - - - 判断一个数是否为数字（是：false ; 不是：true）

强制转换类型

转换为String:

1.变量名.toString(进制数); -赋值给新的变量 null和undifined不行
String(变量名)
隐式转换：语法数据 + ’ ’

转换为Number:

1.Number();
- 纯数字直接转换
- true=1;fales=0;
- 非数字和Undefinde：NaN null=0；
2.parseInt();
- 把其他字符串转化为整数
- 可在parseInt()中传递一个第二参数，来指定数字的进制；
3.parseFloat();
- 把其他字符串转化为浮点数(只识别一次小数点)
4.隐式转换
- 除了 + 以外的数学运算符[ - * / %]

转换为Boolean

Boolean();
– 除了“ ”0和null,NaN,Undefinde,其他都是true

数字比较

【1】纯数字与纯数字比较
【2】纯数字与字符串数字比较，统一转成数字比较
【3】纯数字与非数字的字符串比较，会将非数字的字符串转 - NaN 和数字比较，无论怎样都会返回false
【4】字符串数字与字符串数字比较，会把两个数字字符 - ASCLL 值来比较
【5】非数字字符串与非数字字符串比较，也是转为 ASCLL比较
其它进制：16进制：以0x开头； 8进制：0o开头；2进制：0b开头

一元运算符：
– 自增：前++（++a）先自增再赋值后++（a++）先赋值再自增

三元运算符:
– 语法：条件？值一 (true)：值二(false)
– – 判断语句？true->执行语句1：false->执行语句2；

逻辑运算符：！ && ||
– ！：对布尔值进行取反操作；true <===>false （！！则不变）
– &&：两个为true才为true，第一个为false则不看第二个
– ||：一个为true则为true，第一个为true则不看第二个

取反：元素.属性 = ！元素.属性

网页中使用Unicode编码：
– &#编码；编码需是十进制（控制器："\u编码"）

选择

选择结构
– 单分支：if()…
– 双分支：if()…else()…
– 多分支 : if()…else if()…else()…
– 多值选择器（switch(值){
- case: 条件
- 执行语句
- braek;
- }）

循环

while循环结构
- 语法：1.初始化
- while(2.条件){
- 3.满足条件执行语句
- 4.变量更新
- }
do … while 循环
- 注意：不管条件是否成立，代码都会被执行一次
for循环
- 语法： for(1.初始化;2.条件;3.变量更新){4.满足条件执行语句 }
break :终止循环
continue:结束本次循环

添加标识：outer（外层循环）；inner（内层循环） - - - 标识名可更改

         -outer：for(){
  		         inner：for(){
  		            .......
  		          break/continue  inner；---- 跳出内层循环-
  		          break/continue  outer；---- 跳出外层循环
  		         }
  		}

注意：for循环会在页面加载完成后立即执行
响应函数会在超链接被点击后才执行（如点击事件函数）
当响应函数执行时，for循环早已执行 ----因此不能直接使用循环数字，用this关键字

事件

Window事件
- onload 事件会在整个页面加载完之后才触发
- onscroll 滚动条滚动事件
鼠标事件
- onclick 鼠标单击事件（按下+抬起）
- ondbclick 鼠标双击事件
- onmouseup 鼠标抬起事件
- onmousedown 鼠标按下事件
- onmouseover 鼠标移入事件
- onmouseout 鼠标移出事件
- onmousemove 鼠标移动事件
- oncontextmenu 鼠标右键事件
- onmousewheel 鼠标滚轮事件
- e.wheelDelta (向上滚-正值 | 向下滚-负值）
- DOMMouseScroll 鼠标滚轮事件(火狐)
- e.detail (向上滚-负值 | 向下滚-正值）
键盘事件 - - -绑定在document,或input元素上
- onkeydown 键盘按下事件
- onkeyup 键盘抬起事件
- onkeypress 键盘按下再抬起事件(字符触发事件)
表单事件
- onchange 表单内容改变事件
- oninput 表单输入事件
- onfocus 获取焦点触发
- onblur失去焦点触发
- submit : 表单提交事件
触摸事件 - - -移动端
- ontouchstart 触摸开始事件
- ontouchmove 触摸移动事件
- ontouchend 触摸结束事件

事件组成：
【1】事件源
【2】事件类型
【3】事件处理函数

注意：同一事件源绑定同一事件源，只能触发一次（后面）

监听事件：同一事件源绑定不同事件源，能触发多次

语法：事件源.addEventListener(‘事件类型’,事件处理函数，false) 捕获阶段触发，第三个参数写：true

执行顺序：先监听先执行
eg:transitionend - - - - -过度结束事件

IE语法：事件源.attachEvent(‘on+事件类型’,事件处理函数)

执行顺序：后监听先执行

JS 添加样式

获取元素
添加样式 （样式名-连接改为首字母大写）
- this(元素).className = “class名”
- this(元素).className +=" "+ “class名” - - 不覆盖原来的名
- 移出class名：元素.className = " ";

classList 对象的扩展

          -  length          class类名的个数
          -  add()           添加class方法
          -  remove()        移出class方法
          -  toggle()        切换class方法
          -  contains()      是否包含某个类名

添加CSS样式：元素.style.样式 = “属性值”
- 驼峰命名法，去掉“-”然后字母大写
- 注意：获得的样式是内联样式（不能覆盖！important），读取也只能读取内联样式。
读取元素当前样式：
- 语法【1】window.getComputedStyle(元素).样式名
- 【2】元素.currentStyle.样式名
-可用来读取元素当前样式，如果没有设置样式，则显示默认值。（！！！只有IE能用）

排他思想

清空所有元素标签名
再单独给需要元素添加标签名

console.time(“计时器的名字”)可以开启一个计时器
console.timeEnd(“计时器的名字”)结束一个计时器

创建日期对象

var date = new Date(); - - - 电脑当前日期
- 注意：非字符串-必须有两个参数
- 第一个参数：年-四位数字
- 第二个参数：月 0-一月开始
- 第三个参数：日期，从1开始
- 第四个参数: 小时0-23
- 第五个参数：分钟0-59
- 第六个参数：秒 0-59
-

Date():返回当前日期时间
getSeconds();获取秒钟
getMinutes();获取分钟
getHours();获取小时
getDate():返回对象一个月的某一天
getDay():返回对象一周的某一天 0-6；0—周日
getMonth()+1:获取当前对象月份 0-11；0—1月
getFullYear():获取当前对象年份
getTime():返回当前日期时间戳1970.1.1 0时0分0秒到现在所花费的毫秒数（1秒=1000毫秒）

获取时间戳：time = Date.now();

定时器：setInterval(fn,时间)
延时器：setTimeout(fn,延迟时间) - - - 只执行一次
取消定时器:clearInterval(定时器名字)

字符串的创建

字面量（赋值式），包装数据类型

内置构造函数
- 注意：字符串也有索引 str[索引]，也有长度length (只可读，不可写)
可对字符串进行遍历。

字符串的方法

charAt() - - - 返回指定索引字符
charCodeAt() - - - 返回指定位置字符编码
fromCharCode() - - - 根据编码获取字符
concat() - - -链接两个或多个字符串
indexOf( x , y ） - - - 返回字符串中检索指定字符第一次出现的位置，第二个参数表示开始位置，没有返回-1
lastIndexOf( x , y ) - - - 返回字符串中检索指定字符最后一次出现的位置
substring( x , y ) - - - 截取字符长度:参数一：开始位置索引；参数二：结束位置索引(不包括)；只有一个参数：开始到结束
- 如果第二个参数为负数，参数作用交换顺序
substr( x , y ) - - - 截取字符长度:参数一：开始位置索引；参数二：截取个数
slice( x , y) - - - 提取字符串的某个部分，并以新的字符串返回被提取的部分。(不包括结束位置索引)
- 第二个参数为负数，就从后往前截取
split() - - - 字符串拆分为数组 ,x参数是拆分依据（存在字符串），如果参数为空，则每个字符串都拆分
replace( x , y ) - - - 字符串的替换，x–>y
- - - 不知道替换次数，用while,判断indexOf是否为-1
trim() - - - 移除字符串首尾空白
match - - - 找到一个或多个正则表达式的匹配
toUpperCase() - - - 可将字符串转为大写
toLowerCase() - - - 可将字符串转为小写
拍平数组：
数组转字符串： String（）
字符串转化数组：split(’,’)
字符串转化为数字：map() item*1