day54 js基础语法,函数,事件

day54 js基础语法

1.运算符

• 算数运算符

加+ 减- 乘* 除/ 取余% 自增++ 自减--

console.log(a1);

++ 在前优先级最高,++在后优先级最低(比赋值符= 还低)

res = a1++;

先将a1的值赋值给res,自己在增1

res = ++a1;

先自己自增1,再将a1的值赋值给rse

console.log(res,a1);

• 赋值运算符

赋值= 加等+= 减等-= 乘等 *= 除等/= 取余等%=

• 比较运算符

等于== 绝对等于=== 不等于 != 不绝对等于!== 大于> 小于< 大于等于>= 小于等于<=

• 逻辑运算符

与&& 或|| 非!

• 三目运算符

条件 ? 结果1:结果2

res = 10 == '10' ? '相等':'不等';

console.log(res);

 

2.流程控制

• if语法

if(条件){

}else if (条件) {

}else {

};

• if嵌套

if (表达式1){

if (表达式2){

}

};

例子:

let num = console.log(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 循环

while (条件表达式){
        代码块;
}
条件满足执行代码块,条件不满足跳出循环
​
// 案例：
var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

• for 循环

for (循环变量初始化1;循环条件2,循环增量3){
    循环体4;
}
例子:
for (let i = 1; i <= 10; i ++){
        if (i % 11 == 0){
            console.log(i)
        }
}

• do . while

do {
​
}   while (条件);
​
count = 0;
do {
    console.log('循环体一定会执行');
    count ++;
} while (count < 3);

3.函数

函数的定义
    function 函数名(参数列表) {
        函数体;
        return 返回值
    }
​
    function：定义函数的关键字
    函数名：使用函数的依据，就是一个变量，可以赋值给其他变量，也可以存储在容器中，也可以作为函数的参数与返回值
    参数列表：都是按位置传，形参与实参个数不需要统一，但是一定是按位赋值 (你传你的，我收我的)
    函数体：完成功能的主体代码
    返回值：只能返回一个值

例子

function fn() {
    console.log('fn.run');
    return [1,2]
}
let res = fn();
console.log(res);
let func = fn;
func();

传参数

function f1(a,b) {
    console.log('参数',a,b)
}
f1();      //你收到了,但是我不传参数
f1(1);      //你收到了,我只传了一个参数
f1(1,2,3,4,5,); // 你收到了,我传多了

4.匿名函数

function () {
    // 没有名字的函数就是匿名函数
}

1. 需求需要一个函数地址，就可以传入一个匿名函数 例子

function f110(fn) {
    fn()
}
f110(function () {
    console.log('传进去的匿名参数')
});

2.用变量接收匿名函数：第二种声明函数的方式

let a = function (a,b) {
    console.log('aaa')
};
f()

3.为事件提供方法体

a.onclick = function () {
    console.log('a 被点击了')
};

4.匿名函数自调用：一次性使用

(function (a, b) {
    console.log('匿名函数自调用:', a, b)
})(10, 20, 30);
​
let abc = 10;
​
hhh.onclick = function () {
    console.log(abc);
};

5.四种变量

• let

• const

• var

• d

if (true) { 
    let a = 10;
    const b = 20;
    var c = 30;
    d = 40;
}

1.let和const有块级作用域，不允许重复定义
2.var没有块级作用域, 但有局部作用域，可以重复定义
3.d 没有关键字声明的变量是全局变量，在函数内部声明的外部也可以用

{
    let a = 10;
    const b = 20;
    var c = 30;
    d = 40;
}          有{}就不能被外界访问

例子
(function () {
    let aa = 100;
    const bb = 200;
    var cc = 300;
    dd = 400;
})();
console.log(dd);

6.数据类型的应用

• 字符串

// 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);
  }

7.js 与页面交互

• 鼠标事件

onclick：鼠标点击 ondblclick：鼠标双击 onmousedown：鼠标按下 onmousemove：鼠标移动 onmouseup：鼠标抬起 onmouseover：鼠标悬浮 onmouseout：鼠标移开 oncontextmenu：鼠标右键

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就代表自身）

• 键盘事件

只要在窗口下，点击鼠标就可以触发
 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');
let h22 = document.querySelector('h2:nth-of-type(2)');
// onchange当input失去焦点才会触发  oninput 内容改变时触发
inp.oninput = function () {
    h22.innerText = this.value;
};

8.事件的绑定

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')
};

9.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);