6.js02

最新推荐文章于 2022-05-22 19:23:18 发布

开局签到Python基础

最新推荐文章于 2022-05-22 19:23:18 发布

阅读量232

点赞数

风

本文链接：https://blog.csdn.net/qq_46137324/article/details/119573923

版权

1.json对象

序列化    JSON.stringify()
反序列化  JSON.parse()

let d7 = {'name': 'kid', 'age': 18};
res = JSON.stringify(d7);
res;
"{\"name\":\"kid\",\"age\":18}"

res = JSON.parse(res);
res;
{name: "kid", age: 18}

2.ReGxp对象

 在js中使用正则表达式，需要创建正则对象。

1. let reg1 = new RegExp('^[a-zA-Z][a-aA-Z0-9]{5,11}');  // 麻烦
a-zA-Z  
a-aA-Z0-9
5,11    5-11位

2. let reg2 = /^[a-zA-Z][a-aA-Z0-9]{5,11}/g         // 简单

let reg1 = new RegExp('^[a-zA-Z][a-aA-Z0-9]{5,11}');
reg1.test('aaaaaa');
true

/* 获取字符中某个字符所有字母 */
let sss = 'asasasdasdasda';
sss.math(/s/);     // 获取一个就停止
sss.match(/s/g)    // g 全局匹配

let sss = 'asasasdasdasda';

sss.match(/s/g);
(5) ["s", "s", "s", "s", "s"]

2.1吐槽点

全局模式有一个lastindex属性。

let reg2 = /^[a-zA-Z][a-aA-Z0-9]{5,11}/g;
reg2.test('aaaaaaa');
true

reg2.test('aaaaaaa');
false
reg2.lastIndex;
0

reg2.test('aaaaaaa');
true
reg2.lastIndex;
7
/* 在全局匹配，匹配第一个aaaaa，匹配成功在为真，指针停止在最后一个a的位置后面， 下次匹配还是从这个位置开始匹配，a后面为空，所以为false
下次才会匹配才跳出这个到下一个匹配开头的位置*/

/* 案列是2020年的 在2021年测就不同了  */
let reg3 = /^[a-zA-Z][a-aA-Z0-9]{5,11}/;
reg3.test();
true       /* 测试是false */
reg3.test(undefined);
true      /* 测试是false */

let reg4 = /undefined/;
reg4.test();
true

在用js书写上需要注意这类问题。

3.BOM操作

BOM (Browser Objeck Model):浏览器对象模型，js代码操作浏览器。

// window对象指代的是浏览器窗口。
window.innerHeight;   // 获取窗口的高
729
window.innerWidth;    // 获取窗口的宽
193

window.open('https://wwww.baidu.com', '', 'height=800px, width=800px');
window.open('https://wwww.baidu.com', '', 'height=800px, width=800px, top=100px, left=400px');
window.close()

open  新建页面
close 关闭当前页面，不是页面。
新建页面 打开的网址， ''  窗口的大小 和 位置。
在一个页面打开一个新的页面，这个被打开的就是子页面，子页面可以调用父页面的属性。

3.1window子对象

window.navigator.appName;    /* 浏览器名字 */
"Netscape"
window.navigator.appVersion; /*  浏览器名称 */
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36"
window.navigator.userAgent;  /* 标识当前是否是一个浏览器 */
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36"
window.navigator.platform;   /* 平台*/
"Win32"

都是window的子对象，那么window可以省略不写。

防爬机制：
最简单的常用的一个就是校验当前发起请求的是不是一个浏览器。
window.navigator.userAgent; 的内容。
在写爬虫程序是加这个内容，就被认为是正常的浏览器访问。

3.2history对象

window.history.back();     网页后退到上一页
window.history.forward();  网页前进

3.3location对象

window.location; 
window.location.href;   // 拿url的地址
window.location.href = 'https://www.hao123.com';  // 网页跳转到xxx
window.location.reload; //刷新页面

window.location;
Location {ancestorOrigins: DOMStringList, href: "http://www.baid.com/", origin: "http://www.baid.com", protocol: "http:", host: "www.baid.com", …}

3.4.弹出框

1.警告框 alert
2.确定宽 confirm
3.提示框 prompt
需在在自己的网页写这些代码，别人的网页会禁止这些命令。

alert('你好！');

confirm('确定？');  // 有两个按键 确定和取消
true               // 点确定返回true 取消 false

prompt('请输入密码')       // 输入什么显示什么
"123"
prompt('请输入密码', '123') // 第二个参书为默认值
"123"

3.5计数器相关

1.过一段时间触发一次，单次触发。
2.每过一段时间触发一次，循环循环。

<script> 
    funcyion func1(){alert(123)};
    seTimeout(func1,3000)    // 毫秒为单位， 3秒后自动指定func1函数
</script>

/* 不会执行定时任务，异步执行的，程序不等待就往下执行。*/
<script> 
    funcyion func1(){alert(123)}
    let t1 = seTimeout(func1,3000)    /* 毫秒为单位， 3秒后自动指定func1函数 */
    clearTimeout(t1)                  /* 取消定时任务，需要提现使用变量指代定时任务 */
</script>

<script> 
	function func2(){alert(123)}
	seTnterval(func2, 3000)
</script>

/* 循环定时器 */
<script> 

	function func2(){alert(123)}

	function show(){
        let t1 = srtInter(func2,3000);          /* 3秒执行一次 */
        function inner(){clearInterval(t1)}    /* 清楚定时器 */
        setTimeout(inner,9000)                 /* 9秒后执行清除器 */
}
show()
</script>

4.DOM操作

DOM (ocument  Model ):文档对象模型，js代码操作标签。

BOM树概念
所有的标签都可以称之为结点
js可以：
通过DOM创建动态的HTML;
能够改变页面中所有的HTML元素、属性、css样式;
能够对页面中的所有事件做出反应。

DOM操作的就是标签，需要关键字document起手。

3.1查找标签

1.直接查找
2.间接查找
在获取值得时候一定要知道值是什么类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>

</head>

<body>
    <div id="d1">
        <div>div>div</div>
        <p class="c1">div>p
            <span>div>p>span

            </span>
        </p>
        <p>div>p

        </p>
    </div>
    <div>div+div</div>
</body>

</html>

3.2直接查找

元素查找，类查找标签查找。

document.getElementById('d1');        // d1获取元素

document.getElementsByClassName('c1'); // 返回的是数组

document.getElementsByTagName('div');

在获取值得时候一定要知道值是什么类型。

document.getElementById('d1');                            /* id查找 */
<div id="d1">…</div><div>div>div</div><p class="c1">"div>p "<span>div>p>span </span></p><p>div>p </p></div>

document.getElementsByClassName('c1');                   /* 类查找 */
HTMLCollection [p.c1]0: p.c1length: 1[[Prototype]]: HTMLCollection

document.getElementsByTagName('div');                   /* 标签查找 */
HTMLCollection(3) [div#d1, div, div, d1: div#d1]

document.getElementsByTagName('div')[0];               /* 通过索引取值 */
<div id="d1">…</div>

let divEle = document.getElementsByTagName('div')[1];  /* 索引取值在赋值 */
divEle;
<div>div>div</div>

在使用变量名指代标签对象的时候一帮情况下都书写成：
xxxEle  Ele --> Element的缩写
divEle
aELe
pEle

3.3间接查找

let pEle = document.getElementsByClassName('c1')[0]; 
/*获取的值是一个数组，注意索引取值不然会报错*/

let pEle = document.getElementsByClassName('c1')[0];  /* 获取的值是一个数组 */
pEle.parentElement.parentElement;                     /* 查找父标 */

let divEle = document.getElementById('d1');        
divEle.children;                                    /* 获取所有的子标签 */
divEle.firstElementChild;                           /* 第一个元素 */
divEle.lastElementChild;                            /* 最后一个元素 */
divEle.nextElementSibling;                          /* 它弟，同级别下面的标签 */
divEle.previousElementSibling;                      /* 它哥，同级别上面的标签 */

let pEle = document.getElementsByClassName('c1')[0];  /* 获取的值是一个数组*/
pEle;
<p class="c1">…</p>
pEle.parentElement.parentElement;                     /* 查找父标 */
<body>…</body>

let divEle = document.getElementById('d1');          /* 获取的值是一个数组 */
divEle.children;
HTMLCollection(3) [div, p.c1, p]

divEle.firstElementChild;                           /* 第一个元素 */
<div>div>div</div>
divEle.lastElementChild;                            /* 最后一个元素 */
<p>div>p </p>

divEle.nextElementSibling;                         /* 它弟，同级别下面的标签 */
<div>div下面的div</div>
divEle.previousElementSibling;                     /* 它哥，同级别上面的标签*/
<div>div上面的div</div>

3.3结点操作

1.案例1

0.准备一张图片复制到存放HTML文件的文件夹中。
1.通过DOM操作动态标签创建img标签
2.给标签加属性
3.最后将标签加到文本中
效果刷新就不存在了临时生效的

let imgEle = document.createElement("img");   // 创建标签
imgEle                                
<img>

imgEle.src='123.png';                       // 设置img的属性值，添加同级目录下的图片
"123.png"

imgEle                                   
<img src="123.png">


imgEle.name='哆啦A梦';         // 为标准设置自定义的属性西药使用下面的方式


imgEle.setAttribute('username', '哆啦A梦'); // 创建自定义的属性

imgEle
<img src="123.png" username="哆啦A梦">

 // 设置title
imgEle
<img src="123.png" username="哆啦A梦" title="我是哆啦A梦">

可以通过点 . 内置属性操作内置属性。自定义的属性没法使用.方法。
setAttribute 可以操作自动新的属性也可以操作内置属性。

let divEle = document.getElementById('d1');    // 获取标签d1
divEle.appendChild(imgEle);                    // 在标签内末尾添加图片
<img src="123.png" username="哆啦A梦" title="我是哆啦A梦">

2.案例2

1.创建a标签
2.设置属性
3.设置文本
4.添加到标签内部

let aEle = document.createElement('a');
aEle;
<a></a>
aEle.href="https://www.baidu.com/";
"https://www.baidu.com/"
aEle.innerText="点我！";    // 给标签设置文本内容
"点我！"
aEle;
<a href="https://www.baidu.com/">点我！</a>

let divEle = document.getElementById('d1');   
let pEle = document.getElementById('d2');

divEle.insertBefore(aEle,pEle);   // 将a标签插入div的里面  p 的前面
<a href="https://www.baidu.com/">点我！</a>

3.额外补充

setAtterbute();  设置属性
getAtterbute(); 获取属性
removeAtterbute(); 移除属性

appendChild(); 尾部添加
removeChild(); 移除
replaceChild(); 替换

.innerText;  获取内部标签内部所有的文本。
.innerHTML;  获取内部文本和标签。

divEle.innerText;
"div 点我！\n\ndiv>p\n\ndiv>span"

divEle.innerHTML;
"div\n        <a href=\"https://www.baidu.com/\">点我！</a><p id=\"d2\">div&gt;p </p>\n        <span>div&gt;span</span>\n  

divEle.innerText = "<h1>你好</h1>";  // 不识别heml标签
"<h1>你好</h1>"
divEle.innerHTML = "<h1>你好</h1>";  // 识别html标签
"<h1>你好</h1>"

3.4获取值操作

1.获取输入数据

标签的值都是以键值对方式存储的。
通过.Value获取值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>

</head>

<body>
    <input type="text" id="d1">
</body>

</html>

let inputEle = document.getElementById('d1');
inpetEle.value;  /* 获取框内的数据 */

2.获取选项框数据

  <select name="" id="d2">
        <option value="vip1">vip1</option> </select>  /* 设置value值 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>

</head>

<body>
    <input type="text" id="d1">
    <select name="" id="d2">
        <option value="vip1">vip1</option>
        <option value="vip2">vip2</option>
        <option value="vip3">vip3</option>

    </select>
</body>

</html>

let seEle = document.getElementById('d2');
undefined
seEle.value;
"vip1"

3.获取文件数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>

</head>

<body>
    <input type="file" id="d1">

</body>

</html>

let fileEle = document.getElementById('d1');
undefined
fileEle.value;              // .value只能获取文件的路径
"C:\\fakepath\\新建 BMP 图像.bmp"
fileEle.files;              // .files 获取文件，是一个数组
FileList {0: File, length: 1}
fileEle.files[0];           // 图片在索引0中。
File {name: "新建 BMP 图像.bmp", lastModified: 1628495481396, lastModifiedDate: Mon Aug 09 2021 15:51:21 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 0, …}

3.5class操作

一个400*400的圆
一个背景色 绿色
一个备背景色红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>

    <style>
        .c1 {
            height: 400px;
            width:400px;
            border-radius: 50%;
        }
        .bg_green{
            background-color: greenyellow;
        }

        .bg_red{
            background-color: red;
        }
    </style>

</head>

<body>
    <div id="d1" class="c1 bg_green bg_red"></div>

</body>

</html>

let divEle = document.getElementById('d1');
divEle.classList;  /* 列出所有的类 */
DOMTokenList(3) ["c1", "bg_green", "bg_red", value: "c1 bg_green bg_red"]

divEle.classList.remove("bg_red");  /* 移除某个类 */
divEle.classList.add("bg_red");     /*添加属性*/
divEle.classList.contains('c1');   /* 判断是否有某个属性 */
true
divEle.classList.toggle('bg_red'); /* 有就移除，没有就添加 */
false
divEle.classList.toggle('bg_red');
true

3.6css操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>
    
</head>

<body>
    <div id="d1" class="c1 bg_green bg_red"></div>
    <p>上面是一个圆</p>
</body>

</html>

DOM操作标签样式，统一使用style方法。
css中的-,js没有。
如 background-color -js中的写法为-> backgroundColor
驼峰体的形式。

let pEle = document.getElementsByTagName('p')[0];
/* 获取p便签，是一个数据组，只有一个p 为索引0 */
pEle.style.color='red';  /* 设置字体为红色  */
"red"
pEle.style.backgroundColor='orange';
"orange"
pEle.style.border='3px solid red';
"3px solid red"

4.事件

满足某个条件自动触发的动作称为事件。

4.1绑定事件的两种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>

</head>

<body>
    <button onclick="func1()">我是一个弹框</button>
    <button id="d1">我是第二个弹框</button>

    <script>
        /* 第一种绑定方式 */
        function func1(){
             alert(123)
        }
        /* 第二种绑定方式 */
        let btnEle = document.getElementById('d1')
        btnEle.onclick = function (){
            alert('abc')
        }
    </script>
</body>

</html>

 <script>标签可以放在head内可以放在body，在body内通常放在最后面。
 文档是至上往下运行的，d1的标签创建必须在getxxx查找之前，否则就报错，未定义。
 所有之间放在最后面就可以了。
 let btnEle = document.getElementById('d1');

在head中有一种，等待页面加载之后在执行的代码。
window.onload等待浏览器窗口加载之后执行什么工作。

    <script>
        window.onload = function () {
            /* 第二种绑定方式 */
            let btnEle = document.getElementById('d1')
            btnEle.onclick = function () {
                alert('abc')
            }
        }
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>

    <script>
        window.onload = function () {
            /* 第二种绑定方式 */
            let btnEle = document.getElementById('d1')
            btnEle.onclick = function () {
                alert('abc')
            }
        }
    </script>
</head>

<body>

    <button id="d1">我是第二个弹框</button>

</body>

</html>

4.2原生js事件绑定

1.开关灯案例

两个样式的切换，模拟开关灯。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>
    <style>
        body{
            background-color: aqua;
        }
        #d1{
            height:400px;
            width:400px;
            border-radius: 50%;   /* 400*400的圆 */
        }
        .bg_white{
            background-color: white;  /* 圆的背景色为白色的 */
        }
        .bg_black{
            background-color: black; /* 圆的背景色为黑色的 */
        }
    </style>
</head>

<body>  /* 两个属性，后一个样式覆盖钱一个样式  黑的覆盖白的*/
    <div id="d1" class="bg_white bg_black"></div>
    <button id="d2">开关灯</button>  

    <script>
        let divEle = document.getElementById('d1')
        let btnEle = document.getElementById('d2')

        btnEle.onclick = function (){   /* 绑定点击事件*/
            divEle.classList.toggle('bg_black')
        }
    </script>
</body>

</html>

2.input框

获取焦点和失去焦点的模拟。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>
    <style>

    </style>
</head>

<body>
    <input type="text" value="no.1xxx" id="d1">

    <script>
        let iEle = document.getElementById('d1')
        /* 获取焦点事件 将框内的值清空 */
        iEle.onfocus=function(){
            /* 将input框内信息移除  */
            iEle.value=''    /* 将值设为空 */

         iEle.onblur=function(){
             /* input框内t添加信息  */
             iEle.value='no.1xxx'
         }
        }
    </script>
</body>

</html>

3.实时时间展示

在input款内显示时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>
    <style>

    </style>
</head>

<body>
    <input type="text" id="d1">

    <script>
        /* 1.访问页面之后，将访问的事件展示到input框中 */
        let inputEle = document.getElementById('d1')
        function showTime(){
            let currentTime = new Date();
            inputEle.value=currentTime.toLocaleString()
        }
        /* showTime() 每次打开页面才会更新时间 */
        /* 设置一秒显示一次 */
        setInterval(showTime, 1000)
    </script>
</body>

</html>

添加开始个暂停按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS练习</title>
    <style>

    </style>
</head>

<body>
    <input type="text" id="d1">
    <button id="d2">开始</button>
    <button id="d3">停止</button>
    <script>
        /*先定义全局变量存储定时器的变量*/
        let t = null
        let inputEle = document.getElementById('d1')
        let startEle = document.getElementById('d2')
        let stopEle = document.getElementById('d3')

        function showTime(){
            let currentTime = new Date();
            inputEle.value=currentTime.toLocaleString()
        }
        startEle.onclick = function(){
            /*限制定时器只开一个*/
            if(!t) {
                t = setInterval(showTime, 1000)
            }
            /* 每点击一级就开设一个定时器，而t只是指代最后一个 */
        }

        stopEle.onclick = function(){
            clearInterval(t)
            /* 重置值 */
            t=null
        }
    </script>
</body>

</html>

4.省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
    // 选for循环获取省
    for(let key in data){
        // 将省信息做成一个个option标签 添加到第一个select框中
        // 1 创建option标签
        let opEle = document.createElement('option')
        // 2 设置文本
        opEle.innerText = key
        // 3 设置value
        opEle.value = key  // <option value="省">省</option>
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        cityEle.innerHTML = ''
        // 自己加一个请选择
        let ss = "<option disabled selected>请选择</option>"
        // let oppEle = document.createElement('option')
        // oppEle.innerText = '请选择'
        // oppEle.setAttribute('selected','selected')
        cityEle.innerHTML = ss

        // for循环所有的市 渲染到第二个select中
        for (let i=0;i<currentCityList.length;i++){
            let currentCity = currentCityList[i]
            // 1 创建option标签
            let opEle = document.createElement('option')
            // 2 设置文本
            opEle.innerText = currentCity
            // 3 设置value
            opEle.value = currentCity  // <option value="省">省</option>
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }

开局签到Python基础

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.js02

文章目录1.json对象2.ReGxp对象2.1吐槽点3.BOM操作3.1window子对象3.2history对象3.3location对象3.4.弹出框3.5计数器相关4.DOM操作3.1查找标签3.2直接查找3.3间接查找3.3结点操作1.案例12.案例23.额外补充3.4获取值操作1.获取输入数据2.获取选项框数据3.获取文件数据3.5class操作3.6css操作4.事件4.1绑定事件的两种方式4.2原生js事件绑定1.开关灯案例2.input框3.实时时间展示4.省市联动1.json对象序列
复制链接

扫一扫