1、变量修饰符
(1)var
作用域:全局
嵌套定义,会覆盖原有的变量,并且在函数中定义函数外的变量,会导致函数中声明前的所有同名变量undefined
(2)let
作用域:声明所在的块,及子块,不可提升
(3)const:常量
作用域:声明所在的块,及子块,不可提升
2、if判断
var w = '阴天';
if (w === "晴天") {
console.log('心情好')
} else {
console.log("888")
}
== 表示相等 (值相等),===表示恒等(类型和值都要相等),js在比较的时候如果是 == 会先做类型转换,再判断值得大小,如果是===类型和值必须都相等。
3、switch判断
switch (w) {
case "晴天":
console.log('qingt');
break
case '阴天':
console.log('yintian');
break
default:
console.log('默认');
break
}
4、while循环
var i = 0;
while (i <= 10) {
i++;
if (i % 2 === 0) {
continue
}
console.log(i)
if (i > 2) {
break
}
}
5、方法调用
//方法一:
function f() {
alert('f调用了')
}
f()
//方法二
const b = function () {
alert('b调用了')
};
b()
6、对象
/**
* 对象
* @type {{}}
*/
//方法一
var beyond = {}
beyond.name = 'zhangsan';
beyond.age = 18;
console.log(beyond)
console.log("-----------")
//方法二
var beyonds = {};
beyonds['name'] = '李四';
beyonds['age'] = 88
console.log(beyonds)
console.log("-----------")
//方法三
var be = {
name: '啦咔咔',
age: 20,
list: ['微信', 'qq', '朋友圈'],
show: function (text) {
console.log(text)
}
}
console.log(be)
console.log("-----------")
console.log(be.list[0])
console.log("-----------")
console.log(be.show('添加函数'))
console.log("-----------")
//循环输出属性
var s;
for (s in be) {
if (typeof be[s] !== 'function') {
console.log(s + "---" + be[s])
}
}
7、dom
/**
* dom
*
* <ui>
<li id = "id">内容</li>
</ui>
*/
//根据ID获取对象
var id = document.getElementById("id");
var list = document.getElementsByTagName("li");
//所以元素
var query = document.querySelectorAll("")
//第一个元素
var query = document.querySelector("")
//节点名称:li
let nodeName = id.nodeName;
//节点文字:内容
let innerText = id.innerText;
//父节点:ui
let parentNode = id.parentNode;
//上一个兄弟元素
let previousElementSibling = id.previousElementSibling;
//下一个兄弟元素
let nextElementSibling = id.nextElementSibling;
8、dom操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<h1>哈哈哈</h1>
<p id="content">内容</p>
<ul class="ceshi">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ul>
<script>
//获取标签属性
var cot = document.getElementById('content');
console.log(cot.nodeName)
console.log(cot.innerText)
console.log(cot.parentNode)
console.log(cot.previousElementSibling)
console.log(cot.nextElementSibling)
//查找标签属性
var selectorAll = document.querySelectorAll('.ceshi li');
for (let i = 0; i < selectorAll.length; i++) {
console.log(selectorAll[i].className)
console.log(selectorAll[i].innerText)
}
//追加元素
let element = document.createElement('h1');
let text = document.createTextNode('我的这里');
element.append(text)
cot.parentNode.append(element)
//插入元素
let ele = document.createElement('h3');
ele.innerText = '777';
cot.parentNode.insertBefore(ele, cot.previousElementSibling)
window.onload = function () {
let id = document.getElementById('btn');
// id.onclick = function () {
// console.log('onclick')
// }
// id.onmouseover = function () {
// console.log('onmouseover')
// }
id.addEventListener('click', function () {
console.log('addEventListener——>click')
//event事件的相关属性
console.log(event)
//停止事件
event.stopPropagation()
}, false)
}
</script>
<!--事件-->
<a href="#" onclick="console.log('被点击了')" onmouseover="console.log('鼠标划过了')">事件测试</a>
<a href="#" id="btn">事件测试2</a>
</body>
</html>
9、==和===
1 == '1':true
1 === '1':false
if(obj.name == null){
}
相当于
obj.name === null并且obj.name === undefined
程序中所有的等于都需要使用===,obj == null除外
总结:
(1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等
(2)同类型比较,直接进行“值”比较,两者结果一样
(3)对于Array,Object等高级类型,==和===是没有区别的