js 相关知识

昨日回顾

1.隐藏:　　
　display:none;
　opacity: 0;
2.阴影:
　　box-shadow: x轴偏移 y轴偏移 虚化 阴影宽度 red;x轴偏移 y轴偏移 虚化 阴影宽度 red;
　　注:可多个阴影
3.过度:
　　transition: 0.2s
4.定位:
　　position: relative| absolute | fixed
　　1.四个定位方位打开
　　2.盒子四边参考参考系四边布局
　　3.上下取上,左右取左
　　4.参考系: 原有位置| 最近的定位父级(父相子绝)|页面窗口 
　　5.z-index 决定上下显示层次
　　注: calc(100%)
5.js: 
　　定义:运行在浏览器上的前端脚本编程语言
　　作用:处理前端数据,渲染页面,修改样式,完成交互,前后台数据通信
　　三种引入:行间式,内联式,外联式
　　基本数据类型:数字,布尔,字符串,未定义,数组,对象,函数,
　　弱语言:会根据当前的实际运行环境,自行决定存储数据类型

今日内容

1.js的运算符, 控制流程,函数,四种变量,数据类型的运用 (***)

2.js的页面交互(*****)

算数运算符: + - * / %(取余) ++(自增) --(自减)  
赋值运算符: =  +=  -=  *=  /=  %=  
比较运算符: ==(等于)  ===(绝对等于)  !=(不等于)  !==(不绝对等于) 
逻辑运算符:&&(与)    ||(或)    !(非)  
三目运算符:   结果 = 条件表达式 ? 结果1 :结果2;
　　语法规则:条件表达式成立,将结果1 赋值给结果;  反之 赋值结果2;
eg:

　　var weather = prompt("天气(晴|雨)"); // 文本输入弹出框
　　var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
　　console.log(res); // 今天天气挺好

 if 结构    

if (条件表达式) {
    代码块;
}
// 1. 当条件表达式结果为true，会执行代码块；反之不执行
// 2. 条件表达式可以为普通表达式
// 3. 0、undefined、null、""、NaN为假，其他均为真

// 1.双分支
if (表达式1) {
    代码块1;
} else {
    代码块2;
}

// 2.多分支
if (表达式1) {
    
} else if (表达式2) {
    
} 
...
else if (表达式2) {
    
} else {
    }

if (表达式1) {
    if (表达式2) {
        
    }
}

for循环

for (循环变量①; 条件表达式②; 循环变量增量③) {
    代码块④;
}
// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程

// 案例：
for (var i = 0; i < 5; i++) {
    console.log(i);
}

// 结果：
0
1
2
3
4

循环while

while (条件表达式) {
    代码块;
}
// 条件满足执行代码块，条件不满足跳出循环

// 案例：
var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// 结果：
0
1
2
3
4

    do {

    } while (条件);
    `;

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

for 迭代

var arr = [1, 2, 3, 4, 5]
for (num in arr) {
    console.log(num);
}

// 结果：
0
1
2
3
4

数据烈性运用

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

四种变量

 {
        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 () {


    `函数的定义
    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);
    };

})() 

 JS选择器

① getElement系列

// 1.通过id名获取唯一满足条件的页面元素
document.getElementById('id名');
// 该方法只能由document调用

// 2、通过class名获取所有满足条件的页面元素
document.getElementsByClassName('class名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

// 3.通过tag名获取所有满足条件的页面元素
document.getElementsByTagName('tag名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空HTMLCollection对象 ([])

eg: getElement系列
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]);

② querySelect系列

// 1.获取第一个匹配到的页面元素
document.querySelector('css3语法选择器');
// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素
document.querySelectorAll('css3语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象，使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])

eg:
    // 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);

页面标签的操作

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

事件

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