运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
</head>
<body>
<h1>运算符
</h1>
</body>
<script>
let n1 = 5;
let n2 = 2;
let res = n1 / n2;
console.log(res);
res = parseInt(res);
console.log(res);
console.log(parseInt('12abc'));
console.log(parseInt('12.5abc'));
console.log(parseFloat('12.5.1abc888'));
// 自增自减
console.log(n1);
// ++在前优先级最高，++在后优先级最低(比赋值符=还低)
// res = n1++; // 先将n1的值赋值给res，自己再自增1
// res = ++n1; // 先自己自增1, 再将n1的值赋值给res
console.log(res, n1);
// 逻辑运算符
let x = 10;
res = 0 && ++x;
console.log(res, x);
res = 100 || ++x;
console.log(res, x);
console.log(!!x);
// 三元运算符
// 条件 ? 结果1 : 结果2
res = 10 == '10' ? '相等' : '不等';
console.log(res);
</script>
</html>
View Code
流程控制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
</head>
<body>
<h1>流程控制
</h1>
</body>
<script>
// 顺序、分支、循环
`
if (条件) {
} else if (条件) {
} else {
}
`;
// 随机数 [0, 1) => [m, n]
// [0, 1) * 11 => [0, 11) parseInt() => [0, 10] + 5 => [5, 15]
// [0, 1) * (n - m + 1) => [0, n - m + 1) parseInt() => [0, n - m] + m => [m, n]
// 公式：parseInt(Math.random() * (max - min + 1)) + min
let num = parseInt(Math.random() * (40 - 10 + 1)) + 10;
console.log(num);
if (num >= 30) {
console.log('数字超过30');
} else if (num >= 20) {
console.log('数字超过20');
} else {
console.log('数字超过10');
}
// 循环
`
while (条件) {
循环体
}
`;
let count = 1;
while (count <= 100) {
if (count % 7 == 0) {
console.log(count)
}
count++
};
`
for (循环变量初始化①; 循环条件②; 循环增量③) {
循环体④;
}
① ②④③ ... ②④③ ②
`;
for (let i = 1; i <= 100; i++) {
if (i % 11 == 0) {
console.log(i)
}
}
`
do {
} while (条件);
`;
count = 0;
do {
console.log('循环体一定会执行');
count++;
} while (count < 3);
</script>
</html>
View Code
函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title
</title>
</head>
<body>
<h1 id="hhh">函数
</h1>
</body>
<script>
(function () {
`函数的定义
function 函数名(参数列表) {
函数体;
return 返回值
}
function：定义函数的关键字
函数名：使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值
参数列表：都是按位置传，形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的)
函数体：完成功能的主体代码
返回值：只能返回一个值
`;
function fn() {
console.log('fn run');
return [1, 2]
}
let res = fn();
console.log(res);
let func = fn;
func();
function my_fn(a, b) {
console.log('参数', a, b)
}
my_fn(); // 你收我不传
my_fn(10); // 你收我传不够
my_fn(10, 20, 30); // 你收我传多
`匿名函数
function () {
// 没有名字的函数就是匿名函数
}
`;
// 需求需要一个函数地址，就可以传入一个匿名函数
function fn100(fn) {
fn()
}
fn100( function () { console.log('传进去的匿名函数') } )
// 用变量接收匿名函数：第二种声明函数的方式
let f = function (a, b) {
console.log('ffffffffff')
};
f();
// 为事件提供方法体
hhh.onclick = function () {
console.log('hhh 被点击了')
};
// 匿名函数自调用：一次性使用
(function (a, b) {
console.log('匿名函数自调用:', a, b)
})(10, 20, 30);
let abc = 10;
hhh.onclick = function () {
console.log(abc);
};
})()
</script>
<script>
abc = 20
</script>
</html>
View Code
四种变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>四种变量
</h1>
</body>
<script>
// if (true) { // 块级作用域
// let a = 10;
// const b = 20;
// var c = 30;
// d = 40;
// }
{
let a = 10;
const b = 20;
var c = 30;
d = 40;
}
// console.log(a); // 有{}就不能被外界访问
// console.log(b); // let和const有块级作用域，不允许重复定义
// console.log(c); // var没有块级作用域, 但有局部作用域，可以重复定义
// console.log(d); // 没有关键字声明的变量是全局变量，在函数内部声明的外部也可以用
(function () {
let aa = 100;
const bb = 200;
var cc = 300;
dd = 400;
})();
console.log(dd);
</script>
</html>
View Code
数据类型的运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>数据类型的运用
</h1>
</body>
<script>
// 字符串
// 1）定义：
let ss = '123abc呵呵';
let res;
console.log(ss);
// 2）索引
res = ss[0];
console.log(res);
// 3）切片
res = ss.slice(3, 6);
console.log(res);
// 4）替换
res = ss.replace('abc', 'ABC');
console.log(res);
// 5）拆分: string => array
res = ss.split('');
console.log(res);
// 6) 拼接
res = ss + ss;
console.log(res);
// 7) 迭代
for (s of ss) {
console.log(s);
}
// 数组
// array => string
let arr = [3, 1, 2, 4, 5];
res = arr.join(''); // 默认, | '' | '自定义符合'
console.log(res);
// 迭代
for (a of arr) {
console.log(a);
}
// 排序
// arr.sort();
// arr.reverse();
// console.log(arr);
// 增删改查
console.log(arr[4]);
arr[4] = 555;
console.log(arr[4]);
arr.push(100); // 尾增
arr.unshift(200); // 头增
console.log(arr);
arr.pop(); // 尾删
arr.shift(); // 头增
console.log(arr);
// 重点：增删改
console.log(arr);
// 开始操作的索引 操作的长度 操作后的结果(不定长0~n个)
arr.splice(2, 1, 222, 333, 444);
console.log(arr);
// 不定长参数
function f(...a) {
console.log(a)
}
f(1, 2, 3, 4, 5, 6)
// 字典
// 增删改查
dic = {};
// 增
dic['name'] = 'owen';
dic.age = 18;
// 改
dic.age = 20;
// 对象的删除
delete dic.age;
console.log(dic);
// 查
console.log(dic.name);
// 字典的迭代用 for in
for (k in dic) {
console.log(k);
}
</script>
</html>
View Code
js页面交互
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js页面交互
</title>
<style>
h1 {
background-color: orange;
}
</style>
</head>
<body>
<h1 id="hhh" style="font-size: 30px" owen="Owen">
<i>js页面交互
</i>
</h1>
<h2 class="hh2">副标题1
</h2>
<h2 class="hh2">副标题2
</h2>
<img src="" alt="">
<input type="text" value="12345">
</body>
<script>
// 鼠标事件
let h1 = document.querySelector('h1');
// onclick、ondblclick、onmouseover、onmouseleave、onmousemove、onmousedown、onmouseup
h1.onclick = function (ev) {
console.log(ev); // 包含着鼠标的相关信息
// 鼠标点击点
console.log(ev.clientX, ev.clientY);
// 特殊按键
console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
};
h2 = document.querySelector('h2');
h2.onmouseover = function () {
h1.innerText = 'h2被悬浮了';
h1.style.color = 'green';
};
h2.onmouseleave = function () {
h1.innerText = 'h2被放开了';
h1.style.color = 'red';
};
let count = 1;
h2.onmousemove = function () {
++count;
h1.innerText = '鼠标在h2身上游走' + count + '下';
this.innerText = '鼠标在h2身上游走' + count + '下';
};
// 为某个标签绑定事件，去控制页面中任何一个标签（绑定事件中的this就代表自身）
// 键盘事件
// 只要在窗口下，点击鼠标就可以触发
// onkeydown、onkeyup、onkeypress
document.onkeydown = function (ev) {
console.log(ev.keyCode);
if (ev.keyCode == 37) {
console.log('你按了左键');
} else if (ev.keyCode == 38) {
console.log('你按了上键');
}
console.log(ev.altKey);
if (ev.ctrlKey && ev.keyCode == 13) {
console.log('留言');
}
}
let inp = document.querySelector('input');
inp.onkeydown = function (ev) {
console.log(ev.keyCode)
}
// 表单事件
let inp = document.querySelector('input');
let h22 = document.querySelector('h2:nth-of-type(2)');
// onchange当input失去焦点才会触发 oninput 内容改变时触发
inp.oninput = function () {
h22.innerText = this.value;
};
</script>
<script>
// 表单内容
let inp = document.querySelector('input');
console.log(inp.value);
inp.value = 67890;
//获取属性
console.log(inp.getAttribute('value'));
//设置属性
inp.setAttribute('value', '0000000000000');
</script>
<script>
// 1）找目标标签
let h1 = document.querySelector('h1');
// 2）获取样式、内容、属性
let fontSize = h1.style.fontSize;
console.log(fontSize);
// 标签.style.属性名 只能获取行间式
// getComputedStyle(ele_name, 伪类选择器通常用null填充) 能获取所有方式的样式(内联与外联叫计算后样式)
let bgColor = getComputedStyle(h1, null).backgroundColor;
console.log(bgColor);
console.log(h1.innerText);
console.log(h1.innerHTML);
console.log(h1.getAttribute('id'));
console.log(h1.getAttribute('owen'));
// 3）修改样式、内容、属性
h1.style.color = 'red'; // js可以直接修改样式 - 修改的是行间式
h1.style.borderRadius = '50%'; // css的 - 链接语法对应 js的 小驼峰命名法
h1.innerText = '修改过后的内容';
h1.innerHTML = '<i>修改过后的内容</i>';
h1.setAttribute('owen', 'oooooooooooooooo');
let img = document.querySelector('img');
if (Math.random() > 0.5) {
img.setAttribute('src', 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=255676174,1347478056&fm=26&gp=0.jpg')
} else {
img.setAttribute('src', 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3706411226,1037337437&fm=26&gp=0.jpg')
}
</script>//
<script>
// 一、js选择器：js如何与html标签建立起联系
// 1)
let h1 = document.getElementById('hhh');
console.log(h1);
console.log(hhh); // id是标签的唯一标识，所以js通过id名可以直接拿到标签
// let h2s = document.getElementsByClassName('hh2');
let h2s = document.getElementsByTagName('h2');
console.log(h2s);
console.log(h2s[0]);
// 2) 同css3选择器
// querySelector就是获取一个
// h1 = document.querySelector('#hhh');
h1 = document.querySelector('body h1#hhh');
console.log(h1);
h21 = document.querySelector('#hhh ~ .hh2');
console.log(h21);
// querySelectorAll就是获取多个
h2s = document.querySelectorAll('#hhh ~ .hh2');
console.log(h2s);
// 优势：通过id、class或标签，都可以快速定位到某一个或某几个
h22 = document.querySelector('.hh2:nth-of-type(2)');
console.log(h22);
</script>
</html>
View Code
转载于:https://www.cnblogs.com/HZLS/p/11134410.html
