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()
- 行内绑定事件
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()