跳转
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
1、数组的两个方法形成栈结构
2、队列结构
3、concat()
4、slice()
5、splice()
6、join()
7、reverse():逆序
8、sort():数组排序。默认是从小到大排序,按照字符串排序
9、concat(),将原数组复制一份,然后赋值给另一个变量时,另外一个变量更改元素,不会影响原数组。这就是引用类型的变量;
10、声明提升
在当前作用域,声明变量和函数,会直接提升在整个代码的最前面
11、省略var声明变量,会被js强制声明为全局变量
12、严格模式:
“use strict”
声明使用严格模式后行为变更
//没加严格模式之前
function f(n1, n2) {
n1 = "hello";
console.log(arguments[0] + "," + arguments[1]); //输出hello,2
}
f(1, 2);
//加严格模式
function f(n1, n2) {
"use strict"
n1 = "hello";
console.log(arguments[0] + "," + arguments[1]); //输出1,2
}
严格模式的目的:
1、消除js语法的一些不合理,不严谨之处,减少一些怪异行为;
2、消除代码运行的一些不安全之处,保证代码运行的安全。
3、提高编译器效率,增加运行速度
4、为未来新版本的js做铺垫
注:“严格模式”体现了js更合理、更安全、更严谨的发展方向,包括ie10在内的主流浏览器,都支持它。
13、indexOf(item,start):在数组中查找第一次出现item元素的下标,从start开始查
14、map:将数组中的元素进行特定的操作,并返回新的数组,原数组不变
15、filter():过滤
var arr = [1,2,3];
var newArr = arr.filter(function(item,index,arr){
return item > 2;
})
console.log(newArr); // 3
console.log(arr); // 1,2,3
16、some():判断数组里面有不有符合条件的,用法与filter一样
17、every():判断数组里面所有元素是否符合条件,用法与上面一样
18、reduce():
1、字符串声明
2、访问单个字符:charAt(下标,从0开始)
注意:字符串是只读,不可变的,既是基本数据类型又是对象类型
3、typeof:判断指定变量是什么类型的
4、charCodeAt():访问字符串对应下标下的ASCII码值
5、fromCharCode()将传入的 ASCII码转成字符
。。。。
详情
1、confirm():弹出一个对话话,点确定返回ture,取消返回false
2、alert()
3、prompt():弹出一带输入框的提示框
4、open()
5、history对象
6、location(地址栏)的属性
URL:统一资源定位符
协议://ip(域名)/:端口号/路径/?查询字符串#锚点
方法:
location.assign(url),在当前窗口跳转到这个url
location.replace(rul),在当前窗口替换成新的url,不会产生历史记录
location.reload(),刷新当前窗口,传入ture,不经过浏览器缓存强制从服务器加载
获取元素节点的方法:
document.getElementById(id):通过id获取到节点对象
设置行间属性的值:.id,.title,.className
设置样式:.style.width,.style.height 。。。(只能访问标签行间的样式)
document.querySelector():
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
document.querySelectorAll:
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素,返回 NodeList 对象。
NodeList 对象表示节点的集合。可以通过索引访问,索引值从 0 开始。
提示: 你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性,然后你可以遍历所有元素,从而获取你想要的信息。
获取当前有效元素:
/**
* 根据传入的结点对象和样式,分别对浏览器兼容进行判断后,选择对应的兼容方法
* currentStyle[]对象:返回所有样式声明包括外部、内部、内联,按照css层叠规则作用于元素的最终样式
* getComputedStyle(node)[cssStyle]:可以获取当前元素所使用的css属性值。
* @param {需要获取有效样式的结点对象} node
* @param {要获取的样式属性名} cssStyle
*/
function getStyle(node, cssStyle) {
return node.currentStyle //踩坑点:没有()
? node.currentStyle[cssStyle]
: getComputedStyle(node)[cssStyle];
}
练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定时器</title>
<style>
#div1 {
width: 400px;
height: 200px;
background-color: white;
border: 1px solid black;
margin: 100px auto;
text-align: center;
line-height: 200px;
font-size: 18px;
}
</style>
<script>
/*写一个定时器,每个一秒修改一次div内文本颜色和文字大小,最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
文字大小开始缩小,缩小6次,文字再开始增大。*/
//定义一个方法,生成随机的颜色范围:0-255
function randomRgba() {
/* let r = parseInt(Math.random()*256); //random生成0.1-0.9之间的随机数,不是整数,所以需要强制类型转换,后面乘n就是生成0-n-1之间的数
console.log(r); */
let str =
"rgba(" +
parseInt(Math.random() * 256) +
"," +
parseInt(Math.random() * 256) +
"," +
parseInt(Math.random() * 256) +
"," +
1 +
")";
return str;
}
onload = function () {
let node = document.getElementById("div1");
let speed = 5;//每次增大的范围
let count = 0; //计数
setInterval(() => {
node.style.color = randomRgba();
//获取字体大小
let size = parseInt(getStyle(node,"font-size"));
//将字体逐渐放大
node.style.fontSize = (size+speed)+"px"
count ++;
if(count % 6 == 0) {
speed *= -1;
}
}, 1000);
};
/**
* 根据传入的结点对象和样式,分别对浏览器兼容进行判断后,选择对应的兼容方法
* currentStyle[]对象:返回所有样式声明包括外部、内部、内联,按照css层叠规则作用于元素的最终样式
* getComputedStyle(node)[cssStyle]:可以获取当前元素所使用的css属性值。
* @param {需要获取有效样式的结点对象} node
* @param {要获取的样式属性名} cssStyle
*/
function getStyle(node, cssStyle) {
return node.currentStyle //踩坑点:没有()
? node.currentStyle[cssStyle]
: getComputedStyle(node)[cssStyle];
}
</script>
</head>
<body>
<div id="div1">hello</div>
</body>
</html>
1、setAttribute
2、getAttribute
3、removeAttribute
4、innerHTML:获取标签之间的内容,可以赋值,会解析HTML标签
5、innerText:获取标签之间的纯文本,可以赋值
6、outerHTML:从外标签开始到外标签结束
7、childNodes:访问当前节点下所有的子节点
8、firstChild:访问子节点中的首位
9、lastChild:访问子节点中的最后一位
10、nextSibling:访问当前节点兄弟节点中的下一个节点
11、previousSibling:访问当前节点兄弟节点中的上一个节点
下面这些方法IE8一下不兼容
12、节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>节点操作</title>
<style>
#div1 {
background-color: orange;
width: 300px;
height: 70px;
}
#i1 {
width: 290px;
height: 30px;
margin-left: 1px;
}
.b {
margin-top: 5px;
margin-left: 40px;
color: white;
background-color: black;
}
#div2 {
width: 300px;
height: 600px;
background-color: rgba(255, 238, 0, 0.377);
}
</style>
<script>
//定义一个方法,生成随机的颜色范围:0-255
function randomRgba() {
let str =
"rgba(" +
parseInt(Math.random() * 256) +
"," +
parseInt(Math.random() * 256) +
"," +
parseInt(Math.random() * 256) +
"," +
1 +
")";
return str;
}
window.onload = function () {
//获取div1节点
let div1 = document.getElementById("div1");
//获取输入框
let input = document.getElementById("i1");
//获取所有的按钮
let buttons = document.getElementsByClassName("b");
//获取div2
let div2 = document.getElementById("div2");
//设置第一个按钮的操作
buttons[0].onclick = function () {
//创建一个元素节点div
let newdiv = document.createElement("div");
//创建一个文本节点,并将输入框的值添加到文本节点
let text = document.createTextNode(input.value);
//将文本节点添加到div节点下
newdiv.appendChild(text);
//将新div添加颜色样式
newdiv.style.backgroundColor = randomRgba();
//将新的div添加到div2节点的末尾
div2.appendChild(newdiv);
//添加完将输入框清空
input.value = "";
//创建一个按钮节点
let b = document.createElement("button");
b.innerText = "删除";
b.style.marginLeft = "10px";
b.onclick = function () {
div2.removeChild(newdiv);
};
newdiv.appendChild(b);
};
//设置第二个按钮的操作
buttons[1].onclick = function () {
//删除最后一个节点
div2.removeChild(div2.lastChild);
};
//克隆最后一个节点
buttons[2].onclick = function () {
let divlast = div2.lastChild.cloneNode(true);
div2.appendChild(divlast);
};
};
</script>
</head>
<body>
<div id="div1">
<input type="text" id="i1" />
<button type="button" class="b">添加</button>
<button type="button" class="b">删除</button>
<button type="button" class="b">复制</button>
</div>
<div id="div2"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>选项卡操作</title>
<style>
#div1 {
width: 300px;
height: 330px;
background-color: antiquewhite;
}
#div1 .activity {
background-color: orange;
color: blue;
}
#div1 div {
width: 295px;
height: 300px;
border: 1px solid black;
display: none;
}
</style>
<script>
onload = function () {
//获取div1
let div1 = document.getElementById("div1");
//获取div1下所有的按钮和div
let buttons = div1.getElementsByTagName("button");
let divs = div1.getElementsByTagName("div");
let index = 0;
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
for (let j = 0; j < buttons.length; j++) {
buttons[j].className = "";
divs[j].style.display = "none";
}
this.className = "activity";
divs[i].style.display = "block";
};
}
};
</script>
</head>
<body>
<div id="div1">
<button class="activity">JavaScript</button>
<button>Java</button>
<button>Python</button>
<div style="display: block">
JavaScript是世界上最流行的脚本语言,因为你在电脑、手机、平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱动的。
简单地说,JavaScript是一种运行在浏览器中的解释型的编程语言。
</div>
<div>
JavaScript一度被认为是一种玩具编程语言,它有很多缺陷,所以不被大多数后端开发人员所重视。很多人认为,写JavaScript代码很简单,并且JavaScript只是为了在网页上添加一点交互和动画效果。
</div>
<div>
但这是完全错误的理解。JavaScript确实很容易上手,但其精髓却不为大多数开发人员所熟知。编写高质量的JavaScript代码更是难上加难。
</div>
</div>
</body>
</html>
<script>
onload = function () {
let div1 = document.getElementById("div1");
/* console.time("test1"); //计时开始
for (let i = 0; i < 100000; i++) {
let newdiv = document.createElement("div");
div1.appendChild(newdiv);
}
console.timeEnd("test1"); //计时结束test1: 112.801025390625 ms */
//使用文档碎片方式:现将全部的节点创建出来,添加到一个节点里面,然后在插入div
console.time("test1");
let node = document.createElement("div");
for (let i = 0; i < 100000; i++) {
let newdiv = document.createElement("div");
node.appendChild(newdiv);
}
div1.appendChild(node);
console.timeEnd("test1");//test1: 84.226806640625 ms
};
</script>
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
2、for…in快速遍历
for (const key in object) {
if (object.hasOwnProperty(key)) {
const element = object[key];
}
}
3、foreach
array.forEach(element => {
});
4、for…of
for (const iterator of object) {
}
javascript原生遍历方法的建议用法:
用for循环遍历数组
用for-in遍历对象
用for-of遍历类数组对象(ES6)
用Object.keys()获取对象属性名的集合
事件是发生并得到处理的
绑定事件:1、内联模式 2、外联模式(脚本模式)
绑定事件格式:
元素节点.on + 事件类型 = 匿名函数
click 事件类型 onclick:事件处理的函数
1、鼠标事件
2、键盘事件(表单元素,全局Window)
3、HTML事件
window事件
表单事件
事件绑定:
1、事件对象:
2、获取当前鼠标位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>跟随鼠标移动提示框</title>
<style>
a {
display: block;
font-size: 20px;
margin: 20px;
width: 130px;
}
#msg {
width: 150px;
height: 30px;
background-color: gray;
color: white;
display: none;
position: absolute;
}
</style>
<script>
//创建一个数组,用于存放div标签的内容
let mgs = [
'唐太宗:哈哈哈',
'唐高宗:呵呵呵',
'唐玄宗:嘻嘻嘻',
'武则天:哈啊哈',
];
onload = function () {
//获取a标签对象
let a = document.getElementsByTagName('a');
//获取div
let div = document.getElementById('msg');
//遍历a标签给所有a标签添加鼠标移入时间
for (let i = 0; i < a.length; i++) {
//添加鼠标移入事件
a[i].onmouseover = function () {
div.style.display = 'block';
};
//添加移出事件
a[i].onmouseout = function () {
div.style.display = 'none';
};
//添加div跟随鼠标移动事件
a[i].onmousemove = function (ev) {
//获取事件对象
let e = ev || event;
div.style.left = e.clientX + 5 + 'px';
div.style.top = e.clientY + 5 + 'px';
div.innerText = mgs[i];
};
}
};
</script>
</head>
<body>
<a href="#">唐太宗</a>
<a href="#">唐高宗</a>
<a href="#">唐玄宗</a>
<a href="#">武则天</a>
<div id="msg"></div>
</body>
</html>
this和baievent.target的区别:
this返回的是绑定事件的对象(元素);e.target返回的是触发事件的对象(元素)。
简单来说,this:哪个元素绑定了这个点击事件,就返回哪个元素;e.target:点击了哪个元素,就返回哪个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>跟随鼠标移动</title>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}
</style>
<script>
onload = function () {
//获取到所有的div
var divs = document.getElementsByTagName('div');
//添加鼠标移动事件
document.onmousemove = function (ev) {
let e = ev || event;
for (let i = divs.length - 1; i > 0; i--) {
divs[i].style.left = divs[i - 1].offsetLeft + 'px';
divs[i].style.top = divs[i - 1].offsetTop +'px';
}
divs[0].style.left = e.clientX + 'px';
divs[0].style.top = e.clientY +'px';
};
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
/**
* 元素节点跟着鼠标拖动(可以越界)
* @param {拖拽的节点} node
*/
function drag(node) {
node.onmousedown = function (ev) {
let e = ev || event;
var omlift = e.clientX - node.offsetLeft;
var omtop = e.clientY - node.offsetTop;
//鼠标移动事件
document.onmousemove = function (ev) {
let e = ev || event;
node.style.left = e.clientX - omlift + 'px';
node.style.top = e.clientY - omtop + 'px';
};
};
document.onmouseup = function() {
document.onmousemove = null;
}
}
不可越界
/**
* 元素节点跟着鼠标移动(不能越界)
* @param {拖拽的结点} node
*/
function drag(node) {
node.onmousedown = function (ev) {
let e = ev || event;
var omlift = e.clientX - node.offsetLeft;
var omtop = e.clientY - node.offsetTop;
//鼠标移动事件
document.onmousemove = function (ev) {
let e = ev || event;
//拖拽后div的坐标
let l = e.clientX - omlift;
let t = e.clientY - omtop;
//出界控制
if(l <= 0) {
l = 0;
}
let windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
if(l >= windowWidth - node.offsetWidth) {
l = windowWidth - node.offsetWidth
}
if(t <= 0) {
t = 0;
}
let windowHeight = document.documentElement.clientHeight || documetn.body.clientHeight;
if(t >= windowHeight - node.offsetHeight) {
t = windowHeight - node.offsetHeight;
}
node.style.left = l + 'px';
node.style.top = t + 'px';
};
};
document.onmouseup = function() {
document.onmousemove = null;
}
}
实现步骤:
每一个函数内部都有一个arguments,系统内置的。
1、用来存储实参
属性 :arguments.length输出当前里面存储的参数个数
访问某一个数据:arguments[下标]: 从零开始