JavaScript(跟着pink老师学js)(上半部分)

JavaScript(JS)

这里写目录标题

    • JavaScript(JS)
      • 一、JavaScript是什么
      • 二、JavaScript作用
      • 三、JS(ECMAScript)基础语法
          • 1.js分类
          • 2.注释
          • 3.输入输出语句
          • 4.变量
          • 5.数据类型
          • 6.arguments使用
          • 7.预解析
          • 8.创建对象的三种方式
          • 9.内置对象的一些常用的知识
            • 1.随机点名功能实现
            • 2.输出日期
            • 3.Date注意:
            • 4.日期(时间)格式化
            • 5.获得Date总的毫秒数,距离1970年1月1日的毫秒数
            • 6.时间戳转化为年月日时分秒
            • 7.倒计时制作
      • 四、Web Apis阶段--DOM(js页面应用,**实现页面交互效果**)
          • 1.DOM是什么
          • 2.getElementById获取元素
          • 3.getElementsByTagId获取元素
          • 4.事件三要素
          • 5.操作元素----修改元素的内容
          • 6.操作元素-----改变元素属性
          • 7.操作元素---密码明文功能实现
          • 8.操作元素---修改元素样式--小广告实现
          • 9.操作元素---密码框验证信息
          • 10.操作元素---排他思想(算法)(轮播图小圆圈)
          • 11.操作元素--页面换肤效果
          • 12.操作元素---表格隔行变色效果
          • 13.操作元素--全选
          • 14.操作元素---get.set元素的值,属性
          • 15.操作元素----tab栏切换效果
          • 16.操作元素---H5新增的自定义属性
          • 17.节点操作---父节点、子节点
          • 18.兄弟节点
          • 19.节点操作---创建添加节点
          • 20.节点操作--删除节点
          • 21.节点操作---复制节点
          • 22.动态生成表格
          • 23.注册事件(绑定事件)(监听器)(addEventListener)
          • 24.删除事件(解绑事件)(removeEventListener)
          • 25.事件对象(event)
          • 26.target 和this区别
          • 27.跟随鼠标的天使
          • 28.键盘事件
          • 29.按下s键输入内容
      • 五、webapi---BOM
          • 1.BOM
          • 2.window load窗口加载事件
          • 3.调整窗口大小事件
          • 4.定时器之setTimeout
          • 5.停止定时器clearTimeout
          • 6.每隔多长时间调用一次setInterval
          • 7.倒计时案例
          • 8.清除定时器
          • 9.发送短信等待几秒案例
          • 10.location对象常见属性
          • 11.2秒后跳转页面
          • 12.获取url参数
          • 13.location一些常见方法![在这里插入图片描述](https://img-blog.csdnimg.cn/d4cc7ac74e174f22bb7266e04613aded.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5qCX5a2QKExpWmkp,size_20,color_FFFFFF,t_70,g_se,x_16)
          • 14.history

一、JavaScript是什么

  • 运行在客户端脚本语言
  • 脚本语言:不需要编译,由Js解释器逐行进行解释并执行
  • 现在也可基于Node.js技术进行服务器端编译(后台)

二、JavaScript作用

  • 表单动态校验(比如:长度不够、不合格,就不用把数据送到数据库后台)
  • 网页特效
  • 桌面程序(比如:日历–)
  • 服务器开发(Node.js)

三、JS(ECMAScript)基础语法

1.js分类

(1).行内式的js直接写到原html代码中

<input type="button" value="未来" onclick="alert('可期')">

(2).内嵌式

   <script>
        alert('wei');
    script>

(3).外部式

在head中引用
<script src="my.js">script>
2.注释

(1)单行注释

// ctrl+/

(2)多行注释

/*
*/shift+alt+a
3.输入输出语句

(1)alert(msg):浏览器弹出警示框

   <script>
        alert('wei');
    script>

(2)console.log(msg):浏览器控制台打印输出信息

<script>
   // prompt('你的年龄:');
    console.log('程序员看的');
script>

(3)prompt(info):浏览器弹出输入框,用户可以输入

  <script>
        prompt('你的年龄:');
    script>
4.变量
  • 变量是程序在内存中申请的一块用来存放数据的空间
  • 使用:1.声明变量 2.赋值
    var xiao; xiao = 3;
    或者直接声明并赋值(变量的初始化)
    var xiao = 'xiaojinling';
  • 如果声明几个变量,可以只写一个var,并且用逗号隔开
    var name='xiao',qw=‘123’;
  • 只声明不赋值,结果是undefined
  • 不声明不赋值,报错
  • 不声明赋值,其实也可以–
  • 变量区分大小写
  • 命名遵守驼峰命名法
5.数据类型
  • 都用var定义
  • 前面加0:八进制,前面加0x:十六进制
  • Infinity:无穷大,-Infinity:无穷小
  • NaN:非数字 isNaN()可以判断是不是数字
  • 字符串转义字符都要用\开头,写到引号里面,最后会实现换行等功能
    typeof可以查看变量数据类型 var num=10; console.log(typeof num);
6.arguments使用
1.当我们不确定函数有多少个参数传递时,可用arguments获取,
2.它是一个当前函数的一个内置对象,所有函数都内置了一个arguments对象。
3.arguments对象中存储了传递的所有实参。
4.arguments展示形式是一个伪数组。即:具有length属性、安索引方式存储数据、但是不具有数组的push、pop等方法。
    <script>
        function cook() {
            console.log(arguments);
        }
        cook(1, 2, 3, 4);
    script>
7.预解析

1.js引擎运行js分为两部分:预解析 与 代码执行
2.预解析js引擎会把js里面所有的var还有funcation提升到当前作用域的最前面
3.代码执行:按照代码书写的顺序从上往下依次执行
4.预解析分为变量预解析(变量提升)和函数预解析(函数提升)

5.变量提升:就是把所有的变量声明提升到当前作用域的最前面,不提升赋值操作

8.创建对象的三种方式

1.利用对象字面量创建对象{}

   <script>
    var obj={
        name: '张三丰',
        age: 18,
        sayHello: function(){
            console.log('hi');
        }

    }
    注意:调用对象属性的两种方法
    obj.name
    obj['name']
    script>

2.利用new object 创建对象

<script>
var obja = new Object();
obja.name='qwqw';
obj.age=19;
obj.say=function(){
    console.log('hi');
}
script>

3.利用构造函数创建对象 (前面两种创建对象的方式一次只能创建一个对象)

   <script>
        function Star(uname,age,sex){
            //构造函数首字母要大写
            this.name=uname;
            this.age=age;
            this,sex=sex;

        }
        new Star('liu',18,'nan');
    script>
9.内置对象的一些常用的知识

自己查文档:MDN:https://developer.mozilla.org/zh-CN/

1.随机点名功能实现
   <script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var arr = ['长', '一', '去', '求'];
        console.log(arr[getRandom(0, arr.length - 1)]);
    script>

2.输出日期
<script>
//1.当前日期
        var date = new Date();
        console.log(date);
//2.自己写的日期字符串型(常用)
        var date1 = new Date('2021-10-11 8:8:8');
        console.log(date1);
//3.自己写的日期数字型(月份比实际大一)
        var date2 = new Date(2021, 10, 1);
        console.log(date2);
 script>
 
3.Date注意:

JavaScript(跟着pink老师学js)(上半部分)_第1张图片

注意:

  • 月份最后要加1!!!!!!!
  • 周日返回0!!!!!!!
  • 周一返回1!!!!!!
4.日期(时间)格式化
<script>
    var date = new Date();
    console.log(date.getFullYear());
    console.log(date.getMonth());
    console.log(date.getDate());
    console.log(date.getDay());
    console.log(date.getHours());
    console.log(date.getMinutes());
    console.log(date.getSeconds());

    function getTime() {
        var time = new Date();
        var h = time.getHours();
        h = h < 10 ? '0' + h : h;
        var m = time.getMinutes();
        m = m < 10 ? '0' + m : m;
        var s = time.getSeconds();
        s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s
        }
    console.log(getTime());
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dates = date.getDate();
    var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var day = date.getDay();
    console.log('今天是' + year + '年' + month + '月' + dates + '日' + arr[day]);
        script>
        

JavaScript(跟着pink老师学js)(上半部分)_第2张图片

5.获得Date总的毫秒数,距离1970年1月1日的毫秒数
<script>
    var date = new Date();
    //1通过valueOf()  getTimme()
    console.log(date.valueOf());
    console.log(date.getTime());
    //2.简单的写法(常用)
    var date1=+new Date();
    console.log(date1);
    //3.H5新增的
    console.log(Date.now());
 script>

JavaScript(跟着pink老师学js)(上半部分)_第3张图片

6.时间戳转化为年月日时分秒
<script>
function changeTime(timestamp) {
    var date = new Date(timestamp * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
    Y = date.getFullYear() + '-';
    M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    D = date.getDate() + ' ';
    h = date.getHours() + ':';
    m = date.getMinutes() + ':';
    s = date.getSeconds();
    return Y + M + D + h + m + s;
}
script>
7.倒计时制作

用时间戳计算更简单(前后端传时间戳方便)
思路:略

 <script>
        

        function countTime(time) {
            var nowTime = +new Date();
            var inputTime = +new Date(time);
            var times = (inputTime - nowTime) / 1000;
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countTime('2021-10-1 19:00:00'));
        script>

在这里插入图片描述

=============================================================================================================

四、Web Apis阶段–DOM(js页面应用,实现页面交互效果

  • WebAPI是浏览器提供的一套操作浏览器功能页面元素的API(BOM+DOM部分)
  • MDN详细的API:https://developer.mozilla.org/zh-CN/docs/Web/API
1.DOM是什么

文档对象模型(DOM),是W3C组织推荐的处理可拓展标记语言(html或者XML)的标准编程接口。 可以改变网页的内容、结构、样式

2.getElementById获取元素
<body>
    <input id="aa" type="button" value="未来" onclick="alert('可期')">
    <script>
        //1.文档从上往下加载,所以写在下面
        //2.返回的是一个元素对象
        //3.console.dir打印我们返回的元素对象,可以更好地查看属性和方法
        var a = document.getElementById('aa');
        console.log(a);
        console.dir(a);
    script>

body>
3.getElementsByTagId获取元素
<ul id="qw">
    <li>12121li>
    <li>12121li>
    <li>12121li>
    <li>12121li>
ul>

<script>
    //返回的是获取过来的元素对象的集合,一位数组的形式存储
    var a = document.getElementsByTagName('li');或者qw
    console.log(a);
    console.dir(a[0]);
script>
    <script>
        //返回的是获取过来的元素对象的集合,一位数组的形式存储
        var a = ul.getElementsByTagName('li');
        console.log(a);
        console.dir(a[0]);
    script>
4.事件三要素
  • 事件是由三部分组成:事件源、事件类型、事件处理程序
  • 事件源:时间被触发的对象(按钮)
<button id="xiao">123button>
<script>
    var btn = document.getElementById('xiao');

script>
  • 事件类型:如何触发,比如:鼠标点击(onclick)
  • 时间处理程序:通过一个函数完成
  btn.onclick = function() {
            alert('技能');
        }
  • 常见的鼠标事件:
    JavaScript(跟着pink老师学js)(上半部分)_第4张图片
5.操作元素----修改元素的内容

1.innerText

<button id="xiao">123button>
<div>事件div>
<script>
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.onclick = function() {
        div.innerText = '2021-9-4';
    }
script>

2.innerText与innerHtml区别

innerText不识别标签
innerHtml识别标签
二者除了可以修改元素内容,都可以获得元素里面的内容
获得元素内容innerText不保留空格和换行
innerHtml保留空格和换行

6.操作元素-----改变元素属性
<button id="123">张子枫1button>
<button id="234">张子枫2button>
<img src="1.jpg" title="1">
<script>
    var btn1 = document.getElementById('123');
    var btn2 = document.getElementById('234');
    var img = document.querySelector('img');
    btn1.onclick = function() {
        img.src = '1.jpg';
        img.title = '1';
    }
    btn2.onclick = function() {
        img.src = '2.jpg';
        img.title = '2';
    }
script>
7.操作元素—密码明文功能实现
html
  <div class="login_user">
        <input id="name" type="text" placeholder="请输入姓名" value=""><br>

        <input id="password" type="password" placeholder="请输入密码" value="">
        <label for="">
            <img src="img/eyeclose.png" id="eye">
        label>
    div>

js

<script>
var eye = document.getElementById('eye');
var pwd = document.getElementById('password');
var flag = 0;
eye.onclick = function() {
    if (flag == 0) {
        pwd.type = 'text';
        eye.src = 'img/eyeon.png';
        flag = 1;
    } else {
        pwd.type = 'password';
        eye.src = pwd.type = 'text';
        eye.src = 'img/eyeclose.png';
        flag = 0;
    }

}
script>

结果:JavaScript(跟着pink老师学js)(上半部分)_第5张图片

8.操作元素—修改元素样式–小广告实现

注意:如果样式修改过多也可以用修改类名的方法实现className。略

<div class="box">
    <i class="closebtn">xi>
    <img src="1.jpg">

div>
<style>
    .box {
        position: absolute;
        top: 1000px;
    }
    
    .closebtn {
        position: absolute;
        top: 6px;
        left: 5px;
        width: 14px;
        border: 1px solid #ccc;
        line-height: 14px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;
    }
style>
<script>
    var btn = document.querySelector('.closebtn');
    var box = document.querySelector('.box');
    btn.onclick = function() {
        box.style.display = 'none';

    }
script>

结果(好喜欢这图~~~~):
JavaScript(跟着pink老师学js)(上半部分)_第6张图片

9.操作元素—密码框验证信息
<div class="register">
    <input type="password" class="ipt">
    <p class="message">请输入6~16位密码p>

div>
<style>
    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(img/提示.png) no-repeat left center;
        padding-left: 50px;
    }
    
    .wrong {
        color: red;
        background-image: url(img/错误.png)
    }
    
    .right {
        color: green;
        background-image: url(img/对勾.png);
    }
style>
<script>
    var ipt = document.querySelector('.ipt');
    var mes = document.querySelector('.message');
    ipt.onblur = function() {
        if (ipt.value.length < 6 || ipt.value.length > 16) {
            mes.className = 'message wrong';
            mes.innerHTML = '您输入的位数不对,要求6~16位';
        } else {
            mes.className = 'message right';
            mes.innerHTML = '输入正确';
        }
    }
script>

结果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10.操作元素—排他思想(算法)(轮播图小圆圈)
<button>1button>
<button>2button>
<button>3button>
<button>4button>
<button>5button>
<script>
    var btns = document.getElementsByTagName('button');
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
        //所有元素清除样式,排除其他人的样式
            for (i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            //本身设置样式
            this.style.backgroundColor = 'pink';
        }
    }
script>

结果:
在这里插入图片描述

11.操作元素–页面换肤效果
 <body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        .huanfu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 310px;
            padding-top: 3px;
        }
        
        .huanfu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .huanfu img {
            width: 100px;
        }
        
        body {
            background: url(img/3.jpg) no-repeat center top;
        }
    style>
    <ul class="huanfu">
        <li><img src="img/1.jpg">li>
        <li><img src="img/2.jpg">li>
        <li><img src="img/3.jpg">li>
    ul>
    <script>
        var imgs = document.querySelector('.huanfu').querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    script>




body>

结果:

12.操作元素—表格隔行变色效果
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
            height: 30px;
        }

        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

        .bg {
            background-color: pink;
        }
    style>
head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码th>
                <th>名称th>
                <th>最新公布净值th>
                <th>累计净值th>
                <th>前单位净值th>
                <th>净值增长率th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>003526td>
                <td>农银金穗3个月定期开放债券td>
                <td>1.075td>
                <td>1.079td>
                <td>1.074td>
                <td>+0.047%td>
            tr>
            <tr>
                <td>003526td>
                <td>农银金穗3个月定期开放债券td>
                <td>1.075td>
                <td>1.079td>
                <td>1.074td>
                <td>+0.047%td>
            tr>
            <tr>
                <td>003526td>
                <td>农银金穗3个月定期开放债券td>
                <td>1.075td>
                <td>1.079td>
                <td>1.074td>
                <td>+0.047%td>
            tr>
            <tr>
                <td>003526td>
                <td>农银金穗3个月定期开放债券td>
                <td>1.075td>
                <td>1.079td>
                <td>1.074td>
                <td>+0.047%td>
            tr>
            <tr>
                <td>003526td>
                <td>农银金穗3个月定期开放债券td>
                <td>1.075td>
                <td>1.079td>
                <td>1.074td>
                <td>+0.047%td>
            tr>
            <tr>
                <td>003526td>
                <td>农银金穗3个月定期开放债券td>
                <td>1.075td>
                <td>1.079td>
                <td>1.074td>
                <td>+0.047%td>
            tr>
        tbody>
    table>
    <script>
        var tbody = document.querySelector('tbody').querySelectorAll('tr');
        

        for (var i = 0; i < tbody.length; i++) {

            tbody[i].addEventListener('mouseenter', function () {
                console.log('onmouseover');
                this.style.backgroundColor = 'pink'
            })
            tbody[i].onmouseout = function () {
                console.log('onmouseout');
                this.style.backgroundColor = ''
            }


        }
    script>
body>

html>

结果:
JavaScript(跟着pink老师学js)(上半部分)_第7张图片

13.操作元素–全选
DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    style>

head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    th>
                    <th>商品th>
                    <th>价钱th>
                tr>
            thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>iPhone8td>
                    <td>8000td>
                tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>iPad Protd>
                    <td>5000td>
                tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>iPad Airtd>
                    <td>2000td>
                tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    td>
                    <td>Apple Watchtd>
                    <td>2000td>
                tr>

            tbody>
        table>
    div>
    <script>
        // 1. 全选和取消全选做法:  让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function () {
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked
            }
        }
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].onclick = function () {
                var isAllChecked = true
                for (var j = 0; j < j_tbs.length; j++) {
                    if (j_tbs[j].checked === false) {
                        isAllChecked = false
                        break
                    }
                }
                j_cbAll.checked = isAllChecked
            }
        }
    script>
body>

html>

结果:
JavaScript(跟着pink老师学js)(上半部分)_第8张图片

14.操作元素—get.set元素的值,属性
 <div id="demo" index="1" class="demodemo">xioadiv>
  <script>
    // 一、 获取元素的属性值
    var demo = document.getElementById('demo');

    // 1. element.属性
    console.log(demo.id); //demo
    // console.log(demo.class); //undefined
    console.log(demo.className); //demodemo

    // 2. element.getAttribute
    console.log(demo.getAttribute('id')); //demo
    console.log(demo.getAttribute('class')); //demodemo

    // 区别:

    // element.属性      获取元素内置的值(元素本身自带的值)
    // element.getAttribute('属性') 主要获得自定义的属性,自定义的属性
    console.log(demo.index); //undefined
    console.log(demo.getAttribute('index')); //1


    // 二、 setAttribute 区别同上
    demo.setAttribute('index', 'new')
    console.log(demo.getAttribute('index')); // new

    // 三、 特殊 class属性
    // 在使用 element.class 时,不管是获取还是设置 都需要加上Name ,因为class是关键字,而[set,get,remove]Attribute则不用加
    demo.className = 'new'
    demo.setAttribute('class', 'new')


    // 四、移除属性
    demo.removeAttribute('class')
    console.log(demo.className) // 空

  script>
15.操作元素----tab栏切换效果
DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    .tab {
      width: 978px;
      margin: 100px auto;
    }

    .tab_list {
      height: 39px;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
    }

    .tab_list li {
      float: left;
      height: 39px;
      line-height: 39px;
      padding: 0 20px;
      text-align: center;
      cursor: pointer;
    }

    .tab_list .current {
      background-color: #c81623;
      color: #fff;
    }

    .item_info {
      padding: 20px 0 0 20px;
    }

    .item {
      display: none;
    }
  style>
head>

<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍li>
        <li>规格与包装li>
        <li>售后保障li>
        <li>商品评价(50000)li>
        <li>手机社区li>
      ul>
    div>
    <div class="tab_con">
      <div class="item" style="display: block;">
        商品介绍模块内容
      div>
      <div class="item">
        规格与包装模块内容
      div>
      <div class="item">
        售后保障模块内容
      div>
      <div class="item">
        商品评价(50000)模块内容
      div>
      <div class="item">
        手机社区模块内容
      div>
    div>
  div>
  <script>
    //所有的li
    var lis = document.querySelectorAll('.tab_list ul li');
    var contentItem = document.querySelectorAll('.tab_con .item')
    console.log('contentItem: ', contentItem);
    for (var i = 0; i < lis.length; i++) {
      // 给五个选项卡 添加一个自定义属性 data-index
      lis[i].setAttribute('data-index', i)

      // 一 选项卡模块
      lis[i].onclick = function () {
        // 干掉所有人
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = ''
        }
        // 留下我自己
        lis[i].className = 'current'

        // 二 内容模块
        var index = this.getAttribute('data-index')
        for(var k=0;k<contentItem.length;k++) {
          contentItem[k].style.display = ''
        } 
        contentItem[index].style.display = 'block'
      }
    }
  script>
body>

html>

结果:
在这里插入图片描述

16.操作元素—H5新增的自定义属性

data-开头的为自定义属性

17.节点操作—父节点、子节点
<div>我是divdiv>
  <span>我是spanspan>
  <ul>
    <li>我是lili>
    <li>我是lili>
    <li>我是lili>
    <li>我是lili>
  ul>
  <div class="demo">
    <div class="box">
      <span class="erweima">×span>
    div>
  div>
  <script>
    // 1.父节点 parentNode
    var erweima = document.querySelector('.erweima');
    // 得到的是离元素最近的父节点 亲爸爸  找不到返回为 null
    console.log(erweima.parentNode); // 获取到父节点 
...
// 2. childNodes(标准) 会获取到文本节点 var ul = document.querySelector('ul') console.log(ul.childNodes); // [text, li, text, li, text, li, text, li, text] // 3.children(非标准 但各个浏览器都支持) 获取所有的子元素节点 console.log(ul.children); //[li, li, li, li] // 4.第一个和最后一个孩子节点 // 一、firstChild lastChild 会拿到文本节点 let ol = document.querySelector('ol') console.log(ol.firstChild); // #text console.log(ol.lastChild); // #text // 二、firstElementChild lastElementChild 不会拿到文本节点 但是 IE9+ console.log(ol.firstElementChild); //
  • 我是li1
  • console.log(ol.lastElementChild); //
  • 我是li5
  • // 三、实际开发写法,既没有兼容性问题,又返回指定的元素 console.log(ol.children[0]); //
  • 我是li1
  • console.log(ol.children[ol.children.length - 1]); //
  • 我是li5
  • script>
    18.兄弟节点
    DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    <body>
      <div>我是divdiv>
      <span>我是spanspan>
      <script>
        let div = document.querySelector('div');
        let span = document.querySelector('span');
    
        // 1.nextSibling 下一个兄弟节点 包含文本节点
        console.log(div.nextSibling); // #text
        // 2.previousSibling 上一个兄弟节点 包含文本节点
        console.log(span.previousSibling); // #text
    
        // 兼容性问题: IE9+
        // nextElemntSibling 下一个兄弟元素节点 不包含文本节点,找不到返回null
        console.log(div.nextElementSibling); //
    我是div
    // previousElementSibling 下一个兄弟元素节点 不包含文本节点,找不到返回null console.log(span.previousElementSibling); //我是span // 自己封装函数处理 function getNextElemntSibling(element){ let el = element while(el = el.nextSibling){ if(el.nodeType === 1){ return el } } return null }
    script> body> html>
    19.节点操作—创建添加节点
    DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    <body>
      <ul>
        <li>123li>
      ul>
      <script>
        var ul = document.querySelector('ul');
        
        // 一、document.createElement('tagName') 创建节点
        var li = document.createElement('li')
        // 二、node.appendChild(child) 添加节点到末尾 
        ul.appendChild(li)
    
        // 三、node.insertBefore(child,那个元素之前)
        var lili = document.createElement('li')
        ul.insertBefore(lili,ul.children[0])
    
      script>
    body>
    html>
    
    20.节点操作–删除节点
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
    head>
    
    <body>
        <button>删除button>
        <ul>
            <li>熊大li>
            <li>熊二li>
            <li>光头强li>
        ul>
        <script>
            // 1.获取元素
            var ul = document.querySelector('ul')
            var btn = document.querySelector('button')
    
            // 2. 删除元素  node.removeChild(child)
            // ul.removeChild(ul.children[0]);
    
            // 3. 点击按钮依次删除里面的孩子
            btn.onclick = function(){
              ul.removeChild(ul.children[0])
              if(ul.children.length == 0){
                this.disabled = true;
              }
              
            }
        script>
    body>
    
    html>
    
    21.节点操作—复制节点
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
    head>
    
    <body>
        <ul>
            <li>1li>
            <li>2li>
            <li>3li>
        ul>
        <script>
            var ul = document.querySelector('ul');
            // 1. node.cloneNode() 括号内 为空 或者是里边是 false 浅拷贝,不克隆它的任何子节点
            // 1. node.cloneNode(true) 括号内 true 深拷贝,复制整棵DOM子树(包括那些可能存在的Text子节点)
            var cloneLi = ul.children[0].cloneNode(true)
            
            ul.appendChild(cloneLi);
    
        script>
    body>
    
    html>
    
    22.动态生成表格
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
        <style>
            table {
                width: 500px;
                margin: 100px auto;
                border-collapse: collapse;
                text-align: center;
            }
    
            td,
            th {
                border: 1px solid #333;
            }
    
            thead tr {
                height: 40px;
                background-color: #ccc;
            }
        style>
    head>
    
    <body>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>姓名th>
                    <th>科目th>
                    <th>成绩th>
                    <th>操作th>
                tr>
            thead>
            <tbody>
    
            tbody>
        table>
        <script>
            // 1.先去准备好学生的数据
            var datas = [{
                name: '魏璎珞',
                subject: 'JavaScript',
                score: 100
            }, {
                name: '弘历',
                subject: 'JavaScript',
                score: 98
            }, {
                name: '傅恒',
                subject: 'JavaScript',
                score: 99
            }, {
                name: '明玉',
                subject: 'JavaScript',
                score: 88
            }, {
                name: '大猪蹄子',
                subject: 'JavaScript',
                score: 60
            }];
    
            // 2.动态添加数据
            let tbody = document.querySelector('tbody')
            for (let i = 0; i < datas.length; i++) {
                // 2.1 创建行
                let newTr = document.createElement('tr');
                tbody.appendChild(newTr);
    
                // 2.2 创建数据单元格 通过for 循环遍历对象 外边的i管的是第几个,里边的keys管的是每一个属性
                for(var keys in datas[i]) {
                    var newTd = document.createElement('td');
                    newTd.innerHTML = datas[i][keys];
    
                    newTr.appendChild(newTd);
                }
                // 2.3 创建操作单元格
                var editTd = document.createElement('td');
                editTd.innerHTML = "删除"
                newTr.appendChild(editTd)
            }
    
            // 3.删除数据
            var allA = document.querySelectorAll('tbody tr td a')
            for(var i = 0; i < allA.length; i++) {
                allA[i].onclick = function(){
                    // 点击a,删除A所在的行
                    tbody.removeChild(this.parentNode.parentNode)
                }
            }
        script>
    body>
    
    html>
    

    结果:
    JavaScript(跟着pink老师学js)(上半部分)_第9张图片

    23.注册事件(绑定事件)(监听器)(addEventListener)

    传统方式只能能添加一个事件 、、、监听器能添加很多

    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
        <style>
            *{
                box-sizing: border-box;
            }
        style>
    head>
    
    <body>
        <button>传统注册事件button>
        <button>方法监听注册事件button>
        <button>ie9 attachEventbutton>
        <script>
            var btns = document.querySelectorAll('button');
            // 1. 传统方式注册事件 后边的会覆盖前面的
            btns[0].onclick = function () {
                alert('hi');
            }
            btns[0].onclick = function () {
                alert('hao a u');
            }
            // 2. 事件侦听注册事件 addEventListener  兼容性:IE9+
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
            btns[1].addEventListener('click', function () {
                alert(22);
            })
            btns[1].addEventListener('click', function () {
                alert(33);
            })
    
            // 3. attachEvent 需要带on ie9以前的版本支持!!!!!!(不提倡)
            btns[2].attachEvent('onclick', function () {
                alert(11);
            })
            
        script>
    body>
    
    html>
    
    24.删除事件(解绑事件)(removeEventListener)
    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
      <style>
        div {
          width: 200px;
          height: 200px;
          background-color: teal;
          margin: 10px;
        }
      style>
    head>
    
    <body>
      <div>1div>
      <div>2div>
      <div>3div>
      <script>
        let divs = document.querySelectorAll('div');
        divs[0].onclick = function () {
          alert(1);
          // 传统方式
          divs[0].onclick = null;
        }
    
        divs[1].addEventListener('click', div1Click) //里边的函数 不需要加小括号
        function div1Click() {
          alert(2);
          // 标准方式
          divs[1].removeEventListener('click', div1Click)
        }
    
        // IE9 浏览器
        // divs[2].attachEvent('onclick', div2Click)
    
        // function div2Click() {
        //   alert(222);
        //   divs[2].detachEvent('onclick', div2Click)
        // }
      script>
    body>
    
    html>
    
    25.事件对象(event)
    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
      <style>
        div {
          width: 200px;
          height: 200px;
          background-color: teal;
        }
      style>
    head>
    
    <body>
      <div>123div>
      <script>
        var div = document.querySelector('div')
    
        // 1. event 就是事件对象,当形参来看
        // 2.事件对象只有 有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数
        // 3.事件对象可以自己命名 比如 event、evt、e
    
        // 4. IE678 只认识 widow.evenet
    
        div.onclick = function(e) {
          // 兼容性写法   IE678:window.event
          e = e || window.event;
          console.log(e);
        }
    
        // IE9不支持 addEventListenner
        // div.addEventListener('click', function (e) {
        //   console.log(e);
        // })
    
      script>
    body>
    
    html>
    
    26.target 和this区别
    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    
    <body>
      <div>123div>
      <ul>
        <li>1li>
        <li>2li>
        <li>3li>
      ul>
      <script>
        let div = document.querySelector('div');
        let ul = document.querySelector('ul');
    
        // 1. e.target 返回的是触发事件的对象(元素)
        // 2. this 返回的是绑定事件的对象(元素)
        
        // 当我们点击第二个li时:
        ul.addEventListener('click', function (e) {
          console.log(e.target); // 
  • 2
  • console.log(this); //
      ...
    })
    script> body> html>
    27.跟随鼠标的天使
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    
        <style>
            img {
                width: 100px;
                position: absolute;
            }
        style>
    head>
    
    <body>
        <img src="img/天使.jpg" alt="">
        <script>
            var pic = document.querySelector('img');
            document.addEventListener('mousemove', function(e) {
    
                //console.log('1');
                //获取xy坐标
                var x = e.pageX;
                var y = e.pageY;
                //console.log(x, y)
                //千万不要忘记px单位
                pic.style.left = x - 50 + 'px';
                pic.style.top = y - 50 + 'px';
            })
        script>
    body>
    
    html>
    

    结果:
    JavaScript(跟着pink老师学js)(上半部分)_第10张图片

    28.键盘事件

    JavaScript(跟着pink老师学js)(上半部分)_第11张图片

    29.按下s键输入内容
    DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    <body>
      <input type="text">
      <script>
        let serarch = document.querySelector('input')
        document.addEventListener('keyup',function (e){
          console.log(e.keyCode);
          if(e.keyCode === 83){
            serarch.focus();
          }
        })
      script>
    body>
    html>
    

    五、webapi—BOM

    1.BOM

    浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window

    2.window load窗口加载事件

    例如解决以前script只能放在某个div后面,可以把script放在任何地方

    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
      <script>
        // load 当页面内的所有内容都加载完,才进入该函数
        // 触发方式: a标签的超链接,F5或者刷新按钮,前进后退按钮
        // 火狐有个往返缓存,点击后退按钮不会触发该事件,
        // 更为严谨的 pageshow 能监听到 以上所有
        window.addEventListener('load', function () {
          let btn = document.querySelector('button')
          btn.onclick = function () {
            console.log(3);
    
          }
          console.log(2);
        })
    
        // 仅当DOM加载完成时触发,不包含 css,图标,falsh等就可以执行
        // 兼容性:IE9+
        document.addEventListener('DOMContentLoaded', function () {
    
          console.log(1);
        })
      script>
    head>
    
    <body>
      <button>按钮button>
    body>
    
    html>
    
    3.调整窗口大小事件
    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
      <style>
        div {
          width: 200px;
          height: 200px;
          background-color: teal;
        }
      style>
    head>
    
    <body>
      <div>
    
      div>
      <script>
        var div = document.querySelector('div')
        // 浏览器尺寸发生改变就会触发该事件 resize
        window.addEventListener('resize', function () {
          console.log('变化了');
          if (window.innerWidth < 768) {
            div.style.backgroundColor = 'pink'
          } else {
            div.style.backgroundColor = 'teal'
          }
        })
      script>
    body>
    
    html>
    
    4.定时器之setTimeout

    过了多少秒后打印文字

    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    
    <body>
        <script>
            //1.setTimeout 
            //语法规范:window.setTimeout(调用函数,延时时间); 
            //1.windows在调用的时候可以省略 
            //2.这个延时时间单位是毫秒 但是可以省略,如果省略默认的是0
    
            // 3.页面中可能有很多定时器,我们经常给定时器及标识符(名字)
            //第一种方法
            setTimeout(function() {
                console.log('时间到了');
            }, 2000);
    
    
            //第二种方法
            function callback() {
                console.log('爆炸了');
            }
            var timer1 = setTimeout(callback, 3000)
            var timer2 = setTimeout(callback, 10000)
                //第三种方法(不提倡)
            function callback() {
                console.log('爆炸了吗');
            }
            setTimeout('callback()', 3300)
        script>
    body>
    
    html>
    
    5.停止定时器clearTimeout
    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    
    <body>
      <button>buttonbutton>
      <script>
        var btn = document.querySelector('button')
    
       var timer = setTimeout(function () {
          console.log('1');
        }, 2000)
        
        btn.addEventListener('click', function () {
          clearTimeout(timer)
        })
      script>
    body>
    
    html>
    
    6.每隔多长时间调用一次setInterval
    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    
    <body>
      <script>
        // setInterval 反复调用回调函数
         setInterval(function()   {
          console.log('1');
        }, 1000);
    
     
      script>
    body>
    
    html>
    
    7.倒计时案例
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Documenttitle>
        <style>
            div {
                margin: 200px;
            }
            
            span {
                display: inline-block;
                width: 40px;
                height: 40px;
                background-color: #333;
                font-size: 20px;
                color: #fff;
                text-align: center;
                line-height: 40px;
            }
            
            .ms {
                width: fit-content;
                padding: 0 5px;
            }
        style>
    head>
    
    <body>
        <div>
            <span class="hour">span>
            <span class="minutes">span>
            <span class="second">span>
    
        div>
    
        <script>
            // 获取元素
            var hour = document.querySelector('.hour')
            var minutes = document.querySelector('.minutes')
            var second = document.querySelector('.second')
    
            var inputTime = +new Date('2021-9-6 09:19:19');
    
            setInterval(countTime, 1000);
    
            function countTime() {
                var nowTime = +new Date();
    
                var times = (inputTime - nowTime) / 1000;
                var h = parseInt(times / 60 / 60 % 24);
                h = h < 10 ? '0' + h : h;
                hour.innerHTML = h;
                var m = parseInt(times / 60 % 60);
                m = m < 10 ? '0' + m : m;
                minutes.innerHTML = m;
                var s = parseInt(times % 60);
                s = s < 10 ? '0' + s : s;
                second.innerHTML = s;
    
            }
        script>
    body>
    
    html>
    

    结果:

    JavaScript(跟着pink老师学js)(上半部分)_第12张图片

    8.清除定时器
    <button id="start">开始button>
      <button id="stop">停止button>
      <script>
        // 获取元素
        var hours = document.querySelector('.hours')
       var minutes = document.querySelector('.minutes')
        var seconds = document.querySelector('.seconds')
        var ms = document.querySelector('.ms')
    
        var btnStart = document.querySelector('#start')
       var btnStop = document.querySelector('#stop')
    
        var timer = null
        
        btnStop.addEventListener('click',function (){
          clearInterval(timer)
        })
        btnStart.addEventListener('click',function (){
          // 防止直接定时器多开,不管如何都先关闭再开启
          clearInterval(timer)
          timer = setInterval(fn, 0);
        })
        script>
    
    9.发送短信等待几秒案例
    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Documenttitle>
    head>
    
    <body>
      手机号码: <input type="number"> <button>发送button>
      <script>
        // button案例的值是innerHTML 通过value拿不到
    
        let btn = document.querySelector('button')
        let timer = null
    
        btn.addEventListener('click', function () {
          let initTime = 3
          btn.disabled = true
    
          fn()
          timer = setInterval(fn, 1000);
    
          function fn() {
            if (initTime <= 0) {
              clearInterval(timer)
              btn.innerHTML = "发送"
              btn.disabled = false
            } else {
              btn.innerHTML = `请在${initTime}后重试!`
              initTime--
            }
          }
        })
      script>
    body>
    
    html>
    
    10.location对象常见属性
    // location.href 获取或设置 整个url
    // location.host 返回主机(域名)
    // location.port 返回端口号 如果未写,返回空字符串
    // location.pathname 返回路径
    // location.search 返回参数
    // location.hash 返回片段 #后面内容
    
    // 测试链接为:https://www.jd.com/?name=andy&age=18#link
    
    // console.log(location.href); // https://www.jd.com/?name=andy&age=18#link
    // console.log(location.host); // www.jd.com
    // console.log(location.port); // 
    // console.log(location.pathname); // /
    // console.log(location.search); // ?name=andy&age=18
    // console.log(location.hash); //#link
    
    11.2秒后跳转页面
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    
    <body>
      <button> 按钮 button>
    
      <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {
          setTimeout(function () {
            // console.log(location.href);
            location.href = 'https://www.jd.com'
          }, 2000)
        })
      script>
    body>
    
    html>
    
    12.获取url参数

    login.html

    DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    <body>
      <form action="index.html" >
        用户名: <input type="text" name="username" placeholder="请输入用户名">
        <input type="submit" value="提交">
      form>
    body>
    html>
    

    index.html

    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
    head>
    
    <body>
      <div>div>
    
      <script>
        console.log(location.search);
        
        let search = location.search
    
        // 1.先去掉 ?  substr('起始位置','截取长度') 不写长度默认截取全部
        let params = search.substr(1)
    
        // 2. split('=')  根据 =号把数组拆分为字符串
        let result = params.split('=')
    
        let div = document.querySelector('div')
        div.innerHTML = "欢迎:"+ result[1]
      script>
    body>
    
    html>
    

    结果:
    在这里插入图片描述

    13.location一些常见方法JavaScript(跟着pink老师学js)(上半部分)_第13张图片
    14.history

    JavaScript(跟着pink老师学js)(上半部分)_第14张图片

    你可能感兴趣的