JavaScript 函数 是对象
函数提升 提升作用域
在声明前调用。
自调用 （不能自调用声明的函数）
表达式后紧跟()
(function () {
var x = "Hello!!"; // 我将调用自己
})();
箭头函数
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
//当只有一个参数时，圆括号是可选的
(单一参数) => {函数声明}
单一参数 => {函数声明}
//没有参数的函数应该写成一对圆括号
() => {函数声明}
函数参数
arguments对象 包含了函数调用的参数数组。相当于数组名
JavaScript 函数调用
全局对象 当函数没有被自身的对象调用时 this 的值就会变成全局对象。
函数作为对象方法调用，会使得 this 的值成为对象本身。
call() apply() 预定义的函数方法。 方法第一个参数必须是对象本身。
call() 传的是每个参 apply() 传的是参数数组的名字
闭包
私有变量可以用到闭包
计数器
<button type="button" onclick="myFunction()">计数</button>
<p id="demo">0</p>
<script>
var add=( function(){
var counter =0;
return function () {return counter +=1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML=add();
}
</script>
JavaScript 类（class） 类似java
类声明和类表达式主体都执行在严格模式下。
构造方法名为 constructor();
JavaScript HTML DOM (文档对象模型)
动态改变元素
document代表当前界面
1.查找HTML元素
Id查找
标签名查找
类名查找
改变HTML内容 使用innerHTML属性
改变HTML属性
使用document.getElementById(id).attribute=新属性值
改变CSS
document.getElementById(id).style.property=新样式
HTML DOM事件
addEventListener() 用于向指定元素添加事件，可以向一个元素添加多个事件。
removeEventListener() 移除事件监听
语法
element.addEventListener("event", function, useCapture);
第一个参数是事件类型 不要使用on前缀 ，click而不是onclick
第二个参数是事件触发后调用的函数
第三个参数布尔值，用来描述事件是冒泡还是捕获。该参数可选 false 冒泡传递 true 捕获传递
冒泡 内部元素事件先触发
捕获 外部元素事件先触发
JavaScript HTML DOM元素（节点） 重点
2.创建新的HTML元素
appendChild() 用于添加新元素到尾部
insertBefore() 用于将新元素添加到开始位置
//创建<p>元素
var para = document.createElement("p");
//为<p>元素创建一个新的文本节点
var node = document.createTextNode("这是一个新的段落。");
//将文本节点添加到<p>元素中
para.appendChild(node);
//在一个已存在的元素中添加p元素
var element = document.getElementById("div1");
//添加到已存在的元素
element.appendChild(para);
3.移除已存在的元素，必须知道该元素的父元素
需要查找父元素，子元素，然后从父元素中移除子元素
4.替换HTML元素 replaceChild(新的,要替换的)
JavaScript HTML DOM 集合 Collection
HTMLCollection 对象 length 像数组的长度, 但是无法使用数组的方法
NodeList 对象 getElementsByClassName() 返回的是NodeList对象，不是Collection对象
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
HTMLCollection 与 NodeList 的区别
HTMLCollection 元素可以通过 name，id 或索引来获取。
NodeList 只能通过索引来获取。
JavaScript 对象
创建js对象
使用Object定义并创建对象实例
使用函数来定义对象，然后创建新的对象实例
JavaScript 对象可变，拷贝的对象改变，原始的也会跟着变化
JavaScript prototype (原型对象)
添加一个新的属性需要在构造器函数中添加
prototype 继承
使用prototype属性就可以给对象的构造函数添加新的属性和方法
JavaScript Number对象
整数 精度 15位
小数 最大位数17位
如果前缀为0， 会解释为八进制数
如果前缀为0x，会解释为十六进制数
默认 十进制
toString() 方法完成进制转换
无穷大 Infinity 负无穷大 -Infinity
数字可以是数字或对象
JavaScript Array 对象
Javascript Window 对象
浏览器BOM
windows 尺寸
window.innerHeight 浏览器窗口的内部高度 包括滚动条
window.innerWidth 浏览器窗口的内部宽度 包括滚动条
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window 前缀可不写
window Location（重要）
window Location Pathname 返回URL的路径名
location.assign(url) 方法加载新的页面
location.replace(url) 方法用覆盖原来界面
window.history 对象包含浏览器的历史记录
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
window.navigator 对象包含有关访问者浏览器的信息
JavaScript 弹窗
警告框 alert() 当警告框出现后，用户需要点击确定按钮才能继续
确认框 confim() 点击 确认返回true 或 取消返回false 来确定操作
提示框 prompt("提示","缺省输入")
换行使用 \n
JavaScript 计时事件
setlnterval(function(){函数},间隔毫秒数) 间隔指定的毫秒数不停的执行指定的代码
clearInterval() 停止setInterval()方法执行
setTimeout(function(){函数},间隔毫秒数) 在指定的毫秒数后执行指定代码
clearTimeout() 停止执行
Javascript Cookie
用于存储Web 页面的用户信息
Cookie 以名/值对形式存储
username=John Doe
document.cookie 来创建，读取，删除cookie
创建Cookie
expires 添加过期时间
path 告诉浏览器cookie的路径 默认情况 cookie属于当前页面
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
修改Cookie 类似于创建Cookie
删除Cookie 把expires设置为以前的时间即可
设置cookie 值的函数
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
获取cookie 值的函数
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
检测cookie 值的函数
function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Welcome again " + username);
}
else
{
username = prompt("Please enter your name:","");
if (username!="" && username!=null)
{
setCookie("username",username,365);
}
}
}
获得和设置表单的值
var input-text =document.getElementById('username');
input-text.value='123'; 修改输入框的值
对于单选框 多选框等固定的值， .value只能取到当前的值
.checked //查看返回的结果是否为true，为true则被选中
.checked =true 赋值
网友评论