JavaScript笔记

J s

html是超文本标记语言

css层叠样式表

js脚本语言，轻量型（弱类型），面向对象的语言

变量  var

;(英文分号)分号表示结束当前代码

变量命名时会区分大小写

通常多个单词之间使用驼峰命名法（userName）

变量命名时首字母不要使用数字,首字母可以使用下划线（_）,$符,大小写字母

变量命名时不要使用关键字，如var

字符串需要添加""

是单行注释，快捷键ctrl+/,取消注释再来一次ctrl+/

多行注释,快捷键ctrl+shift+/,取消注释再来一次ctrl+shift+/

类型

使用typeof可以检测当前为什么类型

数字 number类型

字符串 string类型

未定义 undefined

null  object  对象

true真false假  boolean布尔类

{}对象  object类型

[]数组  object类型

function函数类型

undefined与null有什么区别

1.undefined未定义，null定义了

2.类型不一样，undefined   undefined类型 ,null   object类型

=赋值

==值的比较

===全等，值的比较，类型比较

+ - * / %取余 ++自增 --自减

永远记住后增或后减，只有做运算才会执行上一次的a++或a--,+1或减1

NaN非数字值

string+number = string

string-number=NaN

运算符

= += -= *=

>   <   <=   >=   ==  !=  (不等于)

&& 并且 俗称 与  (需要所有条件都为真，整体才会为真)

|| 或者 或  (只需满足一个条件就可以为真)

！ 取反 非  (通常用于布尔类型做判断)

string+number = string;

string+boolean = string;

true与number计算时为1，false为0

number+boolean = number

boolean+boolean = number

强制类型转换

Number()将其他类型转换为数字类型,NaN非数字值

Boolean()将其他类型转换为布尔类型

特殊值：0，null,undefined,"",NaN转换后为false

String()将其他类型转换为字符串类型

判断

if（条件）{

执行代码

}else{

执行代码

}

switch(条件){

case 常量 var 的变量值:

break;  结束case代码

case 常量:

break;

default:   不满足以上任何条件才执行default

break;

}

循环

for(初始化变量; 条件表达式; 操作表达式 ){

循环体

}

数组

两种创建数组的写法|方式

创建数组

new Array()关键字语法，不允许修改

创建新的数组

var array = new Array(38,69,86,"hello",false);

数

组的下标|索引

原素组[下标]  获取到对于的值

下标从0开始

最后一个下标会比长度-1

创建数组

var arr = ["zs",18,"男"];

var arr = [];

获取数组的长度

console.log(arr.length);

函数

 function 函数名(形参数1,形参数2,形参数3) {

函数体代码|任意的代码

}

函数名(实参)

return 值，将值返回给上一层,可以结束当前代码块return下所有代码

命名函数

function func1(){

}

匿名函数

var func2 = function(){

}

对象

键值对的形式就是对象

var obj = {

键值对

键名:键值

};

对象使用for循环拿取不到每一个值,

对象使用for...in拿取对象每一个值  ，对象名[键名]

new Object({键:值})创建新的对象

第二种循环for...(变量 in 循环对象)

for(var a in obj){

                         console.log(a)

                         console.log(obj[a]);

                 }

时间

new Date()获取当前时间

new Date(字符串日期)设置时间

new Date(数字)设置毫秒

但凡以后见到get就是获取，但凡见到set就是设置

获取年份

var fullYear = date.getFullYear();

获取月，0-11，获取到月份后需+1

var month = date.getMonth();

获取日

var dated = date.getDate();

获取星期几

var day = date.getDay();

获取时

var h = date.getHours();

获取分

var m = date.getMinutes();

获取秒

var s = date.getSeconds();

字符串

toUpperCase()转大写==toLocaleUpperCase()

toLowerCase()转小写==toLocaleLowerCase()

concat("连接的字符串")连接字符串

indexOf()查询某个字符串在原字符串中首次出现的位置(下标)

如果查询不到值是否存在返回-1

charAt(下标)查找下标所在位置对应的字符

lastIndexOf(查询的字符)查询最后字符的下标

查询不到返回-1

replace(原字符串需要替换的值,新的值)

替换字符串首次出现的字符，不会修改原字符串

substring(起始下标,结束下标)，截取字符串，[起始下标,结束下标)

substr(起始下标,截取长度)截取字符串

split()切割字符串,会变成数组

trim()清除字符串前后空格

isNaN(检测字符串是否为数字字符串)

判断字符串是否为数字字符串，true表示不是，false表示是

slice(起始下标,结束下标)，截取字符串

charCodeAt(下标)输出ascll码（键盘2进制值）使用很少

数组的方法

join("连接的字符串")将数组中每个字之间使用字符串连接

push()添加，增加在原数组最后

在数组的结尾增加元素，并将数组的长度增加

unshift()添加，增加在原数组最开始

在数组的开头增加元素，并将数组的长度增加；

shift()删除数组第一个元素

pop()删除数组最后一个元素

delete 删除的数组的值 与 delete(删除的数组的值)删除数组值，空间保留

reverse()反转数组

获取元素有6种方式

获取标签元素,数组集合，如果获取一个元素，需要添加下标

document.getElementsByTagName("标签")[下标]

获取id元素，没有获取到元素返回null

document.getElementById("id名称")

获取class元素，数组集合，如果获取一个元素，需要添加下标

document.getElementsByClassName("类名")[下标]

获取属性中name元素，数组集合，如果获取一个元素，需要添加下标

document.getElementsByName("属性name名称")[下标]

获取选择器元素，只获取第一个元素

document.querySelector("选择器")

获取选择器元素,数组集合，如果获取一个元素，需要添加下标

获取body元素

document.body

获取html元素

document.documentElement

获取元素

innerText与innerHTML区别

innerText只会把字符串中所有的进行输出文本

innerHTML会把字符串中有标签的转换输出标签样式

共同特点：会覆盖原文本内容

添加事件有3种方式

Oninput()    onchange()

1. 行内绑定事件

function func(){

           console.log(1111111111111);

      }

2.动态绑定

获取元素.事件 = 事件的处理程序（通常是一个匿名函数）

3.监听事件

获取元素.addEventListener("事件类型",处理函数,boolean)

事件类型在监听事件中不需要加on,on是js的规则，在jq中也不需要on

第三个参数可选，冒泡和捕获的区别

默认值为false,默认冒泡

true为捕获

获取节点信息

节点==元素==标签

nodeName获取元素的标签

childNodes获取元素的所有子集

nodeValue子集的内容

注：通常childNodes与nodeValue会一起使用

元素.属性名    获取属性值

元素.属性名 = 值   设置属性值

设置样式时有-连接，需要删除-,并把-后面大写

获取节点

获取父节点（获取上一级标签）

元素.parentNode

获取所有子元素

元素.childNodes

firstChild获取第一个子元素

lastChild获取最后一个子元素

nextSibling获取下一个兄弟节点（包括空格和回车）

nextElementSibling获取下一个兄弟节点（元素）

previousSibling获取上一个兄弟节点（包括空格和回车）

previousElementSibling获取上一个兄弟节点（元素）

操作节点属性（标签属性）覆盖原属性值

元素.setAttribute("属性名","属性值")  添加元素|修改元素

元素.getAttribute("属性名") 获取属性值

元素.removeAttribute("属性名");删除属性

节点的创建（创建标签）

注：标签不需要加<>

创建标签

向页面添加节点,添加在最后

目标元素.appendChild(node)

创建标签

var a = document.createElement("h1");

创建内容

var b = document.createTextNode("这是我新加的内容");

添加内容到标签

a.appendChild(b);

添加标签到页面

boss1.appendChild(a);

插入元素到XX之前

父元素.insertBefore(新的元素,插入到子元素);

目标元素.appendChild(文本节点|元素节点);

克隆元素.cloneNode(true|false)

true完全克隆

false克隆元素(不包括内容)

父元素.removeChild(需要被删的子元素);

需要被删的元素.remove();

父元素.replaceChild(新元素,需要被替换的旧元素);

获取元素class

目标节点.className = "类样式";

定时器：

setInterval(function(){},time) 

清除：clearInterval()

延时器：

setTimeout      清除: clearTimeout

弹窗

aleart()     confirm()  window.open()

   window.close()  

时间

new Date()