MDN 文档搜索方便的程序代码
Ctrl + f 在软件里面搜索元素类名等等
js中赋值的数前加“0”的是八进制，加0x是十六进制。
prompt 弹窗的提示
parseInt 将字符串转换为整数类型
console.log(Number.MAX_VALUE); 数字类型最大值
console.log(Number.MIN_VALUE); 数字类型最小值
console.log(isNaN(1)) 判断这是不是一个数字
var shuzi = 21
document.write(typeof shuzi) 数字类型 typeof 判断类型
button.onclick = function (){#onclick 是指事件会在对象被点击时候发生}
prompty 输入框
confrim 确认框
return 函数返回值后面的代码不会执行 还可以 退出循环
continue 跳出这次循环
break 停止循环
=== 称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；
== 称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；
"=” 是赋值操作符。
“==” 是判断值是否相等操作符
“===” 是判断是否完全相等操作符。
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
parseInt 将字符串转化为整数
arguments.length 查看里面存储了所有传递过来的实参
reverse 翻转
this 当前的意思 属性
str.indexOf （'要查找的字符'，[起始位置]）
charAt（''） 根据位置返回字符
charCodeAt（) 返回相应索引号的字符ASCII值目的:判断用户按下了那个键
str[index] 获取指定位置处字符
no-repe 不平铺
center top 居中对齐
checked 选定状态
childern 孩子们（全部li）
appendchild [ ] 添加孩子
createElement 建立子节点
cloneNode 克隆
onmouseover 鼠标经过
onmouseout 鼠标离开
mousemove 鼠标移动
mousedown 鼠标按下
mouseup 鼠标松开
offsetLeft 元素左边
offsetTop 元素上边
this . disabled = true; 按钮禁用
createElement 创建元素
div . addEventListener 绑定事件（div创建元素的名）
document.querySelectorAll （' 获取全部 scall,id 的元素 '）
stopPropagation stop 停止 propagation 传播
cancelBubble cancel 取消 bubble 泡泡
innerHTML 在JS是双向功能：获取对象的内容 或 想对象插入内容
setAttribute() 方法添加新属性
contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
preventDefault (' ') 禁止组织事件
blur 失去焦点
focus 获得焦点
document.addEventListener ("事件名称", 函数, false); 捕获绑定事件
document.removeEventListener （'事件名称'，函数） 删除绑定事件
addEventListener里最后一个参数决定该事件的响应顺序；
如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick
如果为false事件的顺序为 标签的onclick事件 ---- document.onclick ---- addEventListener
搜索框获取焦点： 使用js里面的focus（）方法
window. onresize 是调整窗口大小加载事件，当触发时就调用的处理函数。
window .setTimeout (调用函数，[延迟的毫秒数]);
clearTimeout（定时器ID） 关闭定时器
clearInterval 停止定时器
setInterval 时间间隔（想倒计时一样）
null 空对象
按钮点击之后，会禁用 disabled 为 true
this 指向问题一般情况下this的最终指向的是那个调用它的对象
location 对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性
substr （'起始的位置'，截取几个字符） 截取字符串
split (' = ') 利用 = 把字符串分割为数组
第二个页面使用第一个页面的数据，是利用了URL里面的 location.search 参数
单写js时候需要写：
window.addEventListener('load',function(){undefined
//页面的全部资源加载完后才会执行 包括 图片 视频等
})
JsDom节点
DOM树
DOM节点：
元素节点：
属性节点：
文本节点：
js操作节点（增删改查）
一、获取节点：
1、通过id获取
document.getElementById("id")
节点.getElementById("id值")
！返回的是一个具体的节点
2、通过标签名来获取节点
getElementsByTagName("div")
！返回的是一个节点数组,即使只有一个
3、通过标签的Name值来获取
getElementsByName("标签的name值")
!返回的是一个节点数组
4、通过class值来获取节点
getElementsByClassName("类名")
!返回的是一个节点数组
*5、querySelector('选择器')//根据我选择器的结果集返回第一个
*6、querySelectorAll('选择器')//根据我选择器的结果集返回
!!!getElementsByClassName在IE9以下无效的
7、获取节点.parentNode-->获取到节点的父节点
8、获取节点.children-->获取到节点的子节点集合
获取节点.childNodes-->获取到节点的子节点集合（带有前后两个空白的文本节点）
二、创建插入节点
1、document.createElement("div")//创建一个元素节点
2、document.createTextNode("文本文本")//创建一个文本节点
被插入的节点.appendChild(创建的节点)//在节点后面添加
父节点.insertBefore(创建的节点，被插入的节点)//在已知父节点的某个孩子前面添加内容
改变文本内容：
选中的元素.innerText='';//直接将HTML代码当做字符来处理
选中的元素.innerHTML='';//可以识别HTML代码
删除：直接设置为空（""）
替换节点：
父节点.replaceChild(新节点,老节点)
克隆(复制节点)
选中的元素.cloneNode(true/false):
当clone参数为true的时候：选中元素里面所有懂得内容克隆
当clone参数为false的时候：选中元素本身克隆
删除节点：
父节点.removeChild(子节点)
节点的属性操作
如何来获取属性：
选中的元素.getAttribute("属性名")
更改属性：
选中的元素.setAttribute("属性名","新的属性值")
新增属性
选中的元素.setAttribute("原本没有的属性名","属性值")
删除属性
选中的元素.removeAttribute("属性名");
js对象及数组
js对象的分类：
内置对象
js已经提供好的对象，这些对象它有自己的方法和属性。如：
Number，String，Boolean，Date，Math，Array，window，location......
自定义对象
开发人员自己去定义的一个对象
1、如何来定义对象：
1)语法：var obj={};
2)使用我们的new关键字来创建
var obj=new Object()//创建一个空对象
var arr = new Array()//创建一个空的数组对象
var time = new Date()//创建一个初始化的日期对象
3)通过构造函数的形式来创建对象
var obj = new Test();
function Test(num1,num2){
this.number1 = num1;
this.number2 = num2
}
4)通过Object.create()创建对象
var obj = Object.create(null)
var obj = Object.create({"name":"tom","age"："3"})
2、对象的属性
1、对象.属性名 = 属性值
2、对象属性值可以是任何一种js的数据类型 包括对象
3、获取对象的属性
1、对象.属性名
2、对象[属性名]
4、遍历对象（for in循环）
for(var 变量 in 对象){
// 属性名：变量
// 属性值: 对象[变量]
}
二、数组
1、数组内可以存放任意数据类型的数据（本质上它也是对象）
2、数组元素不赋值的情况下 值为undefined
3、如果数组打印的时候，元素不赋值""
4、访问数组范围之外的元素，不会出现越界的问题，undefined
5、定义数组大小，照样可以添加更多元素
定义数组的方法：
1、var arr=[]//定义一个空数组
2、var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的同时赋值
3、var arr=new Array();//定义一个空数组
4、var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])//定义的同时赋值
5、var arr=new Array(10)//定义一个长度为10的数组
赋值：
数组名[下标] = 值
取值：
数组名[下标]
更改值：
数组名[下标] = 值
数组的分类：
索引数组：下标是数字
关联数组：下标是可以是自定义的字符
一维数组
二维数组:数组里面的元素还是数组
var arr = [["id","aaa",10],[1,1,2,3],[1,1,1]]
循环二维数组
var arr = [["id","aaa",10],[1,1,2,3],[["a","b","c"],1,1]]
多维数组
js 操作数组的api
！1）concat():连接两个或更多的数组的方法(不修改原数组)
var arr1 = [1,2,3];
var arr2 = [7,8,9];
var newArr = arr1.concat(arr2)
！2）join()：将数组转成字符串，并通过指定的字符分割(未指定默认使用逗号“，”)
var arr=[1,2,3]
var str=arr.join("")
3）toString():吧数组转成字符串然后通过,隔开
var arr=["a","b","c","d"];
var string = arr.toString()
console.log(string)
！4）slice():从已有的数组中返回指定的元素
语法：
var string = arr.slice(start,end)//start==>开始位置下标 end==>结束位置下标
var Arr = [1,2,3,4,5,6,7,8,9,10]
var subArr = Arr.slice(2,4)
console.log(Arr)
5）splice():删除 插入 会修改原数组
var arr=[]
语法：var temp = arr.splice(num1,num2)
arr:被切割数组
temp：切割完获取数组元素的数组
num1：切割开始的下标
num2：切割多少位
var del = [1,2,3,4,5,6,7,8,9]
var delected = del.splice(3,5)
console.log(delected)
console.log(del)
!6）push：向数组的末尾添加一个或多个的新元素
var arr=[1,2,3,4,5,6,7,8,9]
arr.push(10)
!7) pop:删除并返回最后一个元素(直接修改原数组)
var arr=[1,2,3,4,5,6,7,8,9]
var a = arr.pop()
!8) shift:删除并返回第一个元素
var arr=[1,2,3,4,5,6,7,8,9]
var a = arr.shift()
!9) sort:排序
var arr=[9,1,3,6,7,2,8,5,4]
var a = arr.sort()
10）reverse:颠倒的数组顺序
var arr=[1,2,3,4,5,6,7,8,9]
var a = arr.reverse()
鼠标坐标
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click',function(e){
//1. client 鼠标在可视区的x和y坐标
console.log(e.clientX)
console.log(e.clientY)
console.log('--------------------')
//2.page 鼠标在页面文档的x和y坐标
console.log(e.pageX)
console.log(e.pageY)
console.log('-----------------')
// 3.screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX)
console.log(e.screenY)
})
</script>
根据不同的flag值，执行相应的程序：
var flag =true;
if(flag){
//当为真时，执行下面的代码
console.log('执行程序1')
}
else{
//当为假时，执行下面的代码
console.log('执行程序2')
}
上面的flag值默认是'true'，所以执行‘程序1’，如果flag的默认值为'false',那么执行‘程序2’
ASCII表按钮判断
<body>
<script>
// 按键事件对象中的keyCode属性可以得到相应键的ASCII码值
// 1.我们的keyup 和 keydown事件不区分字母大小写 a 和 A 得到的都是65
// 2.我们的Keypress 事件 区分字母大小写 a 97 和 A 得到的是65
document.addEventListener('keyup',function(e){
console.log('up:'+e.keyCode)
// 我问可以利用keycode返回的ASCII码值来判断用户按下了那个键
if(e.keyCode === 65){
alert('你按下的a键');
}else{
alert('你没有按下a键')
}
})
document.addEventListener('keypress',function(e){
console.log('press:'+ e.keyCode);
})
</script>
</body>
<body>
禁止文字复制
<script>
// 1.禁止鼠标右键菜单
// contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(w){
w.preventDefault();
})
// 2.禁止鼠标选中(selectstart 开始选中)
document.addEventListener('selectstart',function(e){
e.preventDefault()
})
</script>
</body>
var flag =true;
if(flag){
//当为真时，执行下面的代码
console.log('执行程序1')
}
else{
//当为假时，执行下面的代码
console.log('执行程序2')
}
var flag =true;
if(flag){
//当为真时，执行下面的代码
console.log('执行程序1')
}
else{
//当为假时，执行下面的代码
console.log('执行程序2')
}
<script>
var li = document.querySelectorAll("li");
var li1= document.querySelectorAll("#wuchang");
console.log(li,li1)
</script>
————————————————
body{
background: url(/金润泽老师/img/背景1.jpg) no-repeat center top;
//图片不重复，中心对上
}
onfocus 获取焦点
onblur 失去焦点
局部作用域（函数作用域)在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
全局作用域:整个script标签或者是一个单独的js文件
注意如果在函数内部没有声明直接赋值的变量也属于全局变量
以0x开头 16进制
以0开头 8进制
以0b开头 2进制
onclick 点击属性
var num = 100 var表示一个容器 num是var的名的名字 100是赋值给num num是一个变量
=1= 等于（只比较内容） === 恒等于（比较内容的同时还要比较数据类型）
&&and 与(x < 10 && y > 1) 为 true||or 或(x==5 || y==5) 为 false!not 非!(x==y) 为 true
break outer 是指结束外层循环
for(var i=0; i<5; i++){
if(i==3){
continue; 跳过当次循环
}
document.write(i)
}
continue 跳过当次循环只会对他最近的循环起作用
outer:
for(let i=0;i<10;i++){
console.log(i);
for(let j=0;j<3;j++){
break outer 结束外层循环
}
}
querySelectorAll根据指定选择器返回全部元素对象
querySelector根据指定选择器返回第一个元素对象
getElementsByClassName根据类名返回元素对象集合
排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var bts = document.getElementsByTagName('button')
for (var i = 0; i < bts.length; i++){
bts[i].onclick = function(){
for (var i = 0; i < bts.length; i++){
bts[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
</html>
创建节点和添加节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建节点</title>
</head>
<body>
<ul>
<li>1</li>
<li></li>
<li></li>
</ul>
<script>
//1.创建节点元素
var lis = document.createElement('li');
//2.添加节点 node.appendElement(chil) none 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(lis);
//3. 添加节点 node.insertBefore(child)
var liss = document.createElement('li');
ul.insertBefore(liss, ul.children[0]);
</script>
</body>
</html>
06-11
4029
4029
06-06
1106
1106
11-08
585
585
05-01
3581
3581
12-20
1万+
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
