慧河第三次培训

于 2022-11-06 00:08:10 发布
阅读量135 收藏
点赞数 1
文章标签： 学习 前端 javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Asitwas/article/details/127702202
版权

慧河第三次培训

上次写这个博客写到两点半，头秃(～￣▽￣)～
这次尝试换个方法写，突出下重点，也便于之后的复习，就是不知道能不能达成预期的效果

JavaScript

JavaScript 字符串方法
1，字符串长度

使用length属性返回字符串的长度
如：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 字符串属性</h1>
<p>length 属性返回字符串的长度：</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>

使用length属性获取txt的长度，再通过document.getElementById("demo").innerHTML 将其在这个块级元素中显示出来。效果我就不截图了，后面也是，到感觉有必要的地方再截图。

2，查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）

代码如下：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.indexOf("I");
</script>
</html>

最后输出结果是0
所以由此我们可以得出一个结论，也就是JavaScript中的位置是从0开始计算的

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引

代码如下：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.lastIndexOf("I");
</script>
</html>

最后输出结果是36

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1

如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.indexOf("me");
</script>
</html>

和

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.lastIndexOf("me");
</script>
</html>

最后的输出结果都是-1
其实这也很好理解嘛，由于JavaScript是从0开始计数的，那么如果找不到，输出的结果就要比找到一个的输出结果小一嘛，那就是-1了

我们还可以通过设置第二参数的方式来改变检索起始位置

如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.indexOf("I",1);
</script>
</html>

结果是11
再如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.lastIndexOf("I",35);
</script>
</html>

结果也是11

3，检索字符串中的字符串

search() 方法搜索特定值的字符串，并返回匹配的位置
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.search("to");
</script>
</html>

结果是为24
要注意的是search() 无法设置第二个开始位置参数

4，提取部分字符串

有三种提取部分字符串的方法：

  1. slice(start, end)
  2. substring(start, end)
  3. substr(start, length)
slice() 方法

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.slice(11,34);
</script>
</html>

输出I don’t want to change
如果将参数改为负数，那么就会从字符串的结尾开始计数
如

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.slice(-34,-11);
</script>
</html>

输出hange , I just want to
我们可以省略第二个参数来裁剪字符串的剩余部分
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.slice(11);
</script>
</html>

输出：I don’t want to change , I just want to be myself .
或是用负数从结尾计数：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.slice(-52);
</script>
</html>

输出：I don’t want to change , I just want to be myself .

5，substring() 方法

substring() 类似于 slice()
不同之处在于 substring() 无法接受负的索引。
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.substring(11,33);
</script>
</html>

同样如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.substring(11);
</script>
</html>
6，substr() 方法

substr() 类似于 slice()
不同之处在于第二个参数规定被提取部分的长度
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.substr(11,22);
</script>
</html>

输出I don’t want to change
如果省略第二个参数，则 substr() 仍旧会裁剪字符串的剩余部分

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.substr(11);
</script>
</html>

输出I don’t want to change , I just want to be myself .

substr() 的裁剪可以使用负数

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.substr(-26);
</script>
</html>

输出I just want to be myself .

6，替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值
replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace() 只替换首个匹配
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.replace("I","Who");
</script>
</html>

输出Who am HXM , I don’t want to change , I just want to be myself .
默认地，replace() 对大小写敏感
如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.replace(/i/i,"Who");
</script>
</html>

最后输出更改成功：Who am HXM , I don’t want to change , I just want to be myself .
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="I am HXM , I don't want to change , I just want to be myself ."
    document.getElementById("As it was").innerHTML = ME.replace(/I/g,"Who");
</script>
</html>

输出Who am HXM , Who don’t want to change , Who just want to be myself .

7，转换为大写和小写

通过 toUpperCase() 把字符串转换为大写
通过 toLowerCase() 把字符串转换为小写
（比较简单就不敲了）

8，concat() 方法

concat() 连接两个或多个字符串
具体大概是text1.concat(" ",text2)这样来写，可以但是没有必要

9，String.trim()

trim() 方法删除字符串两端的空白符
如：

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="          La La La          "
    document.getElementById("As it was").innerHTML = ME.trim();
</script>
</html>

输出La La La

10，提取字符串字符
charAt() 方法

charAt() 方法返回字符串中指定下标（位置）的字符串

charCodeAt() 方法

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

11，把字符串转换为数组

可以通过 split() 将字符串转换为数组

<!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>Document</title>
</head>
<body>
    <div id="As it was"></div>
</body>
<script>
    var ME="Li,La,Lu"
    var YOU=ME.split(",")
    document.getElementById("As it was").innerHTML = YOU[0];
</script>
</html>

输出Li

2，JavaScript HTML DOM

（说实话没看太懂）
通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被结构化为对象树：

在这里插入图片描述通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
3，JS Browser BOM

这个连复制粘贴的余地都没留给我

HTML补充

一，插入emoji字符

在这里插入图片描述就附一张表吧

二，使用背景图像

具体就是在CSS中用 background-image 来实现

三，设置圆角效果

具体用 border-radius 实现
运用得当可以实现圆形背景

今天就这样吧

Asitwas
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值