慧河第三周大作业

于 2022-10-30 20:46:56 发布
阅读量95 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bsjmxg/article/details/127600886
版权

1.了解js为什么叫脚本语言

2.浏览器执行与浏览器解析的区别

3.js的基本语句

4.js的数据类型

字符串值，数值，布尔值，数组，对象。

5.字符串

1.length可返回字符串的长度

<!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="box"></div>
   <script>
    var txt="ABCEISKXJSLLLLWOXJSH";
    document.getElementById("box").innerHTML = txt.length;
   </script>
</body>
<style>

</style>
</html>

2.在引号中还有引号

用 \" 代替 "

用 \' 代替 '

用 \\ 代替 \

3.在字符串中换行用反斜杠'\'

5.js中的字符串方法

1.查找字符串中的字符串

 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="box"></div>
   <script>
    var txt = "The full name of China is the People's Republic of China.";
    var pos = txt.indexOf("China");
    document.getElementById("box").innerHTML = pos;
  
   </script>
</body>
<style>

</style>
</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="box"></div>
   <script>
    var txt = "The full name of China is the People's Republic of China.";
    var pos = txt.lastIndexOf("China",40);
    document.getElementById("box").innerHTML = pos;
  
   </script>
</body>
<style>

</style>
</html>

2.检索字符串中的字符

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="box"></div>
   <script>
    var txt = "The full name of China is the People's Republic of China.";
    var pos = txt.search("of");
    document.getElementById("box").innerHTML = pos;
  
   </script>
</body>
<style>

</style>
</html>

与indexOf()有区别

search无法设置第二个开始位置参数

3.提取部分字符串

    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="box"></div>
   <script>
    var txt = "Apple, Banana, Mango";
     var pos = txt.slice(7,13);
    //  区间左闭右开
    document.getElementById("box").innerHTML = pos;
  
   </script>
</body>
<style>

</style>
</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="box"></div>
   <script>
    var txt = "Apple, Banana, Mango";
     var pos = txt.slice(5);
    //  区间左闭右开
    document.getElementById("box").innerHTML = pos;
  
   </script>
</body>
<style>

</style>
</html>

    substring()

与slice()用法相同但是不能接受负索引

    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="box"></div>
   <script>
    var txt = "Apple, Banana, Mango";
     var pos = txt.substr(6,8);
    //  区间左闭右开
    document.getElementById("box").innerHTML = pos;
  
   </script>
</body>
<style>

</style>
</html>

4.替换字符串

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="box"></div>
   <script>
    var txt = "Apple, Banana, Mango";
     var pos = txt.replace("anana","ccccc");
    
    document.getElementById("box").innerHTML = pos;
    console.log(pos);
  
   </script>
</body>
<style>

</style>
</html>

如果有很多空格用   / /g

var txt = "Apple,        Banana, Mango";
     var pos = txt.replace(/ /g,"");
    
    document.getElementById("box").innerHTML = pos;
    console.log(pos);

5.大小写转换

toUpperCase(）转换成大写

toLowerCase()  转换成小写

<!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="box"></div>
   <script>
    var txt = "Apple,        Banana, Mango";
     var pos = txt.toUpperCase();
    
    document.getElementById("box").innerHTML = pos;
    console.log(pos);
  
   </script>
</body>
<style>

</style>
</html>

6.连接两个字符

concat

7.删除空白字符

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="box"></div>
   <script>
    var txt = "Apple,   Banana,    Mango            ";
     var pos = txt.trim();
    
    document.getElementById("box").innerHTML = pos;
    console.log(pos);
  
   </script>
</body>
<style>

</style>
</html>

8.提取字符串

charAt()

<!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="box"></div>
   <script>
    var txt = "Apple,   Banana,    Mango            ";
     var pos = txt.charAt(3); //返回l 
    document.getElementById("box").innerHTML = pos;
    console.log(pos);
  
   </script>
</body>
<style>

</style>
</html>

charCodeAt()

返回字符串中指定索引的字符 unicode 编码

<!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="box"></div>
   <script>
    var txt = "Apple,   Banana,    Mango            ";
      var pos = txt.charCodeAt(3); 
    //   返回108
    document.getElementById("box").innerHTML = pos;
    console.log(pos);
  
   </script>
</body>
<style>

</style>
</html>

9.字符串转换为数组

<!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="box"></div>
   <script>
    var txt = "a,b,c,d,e";   // 字符串
     var pos = txt.split(",");          // 用逗号分隔
//  var pos = txt.split(" ");          // 用空格分隔
//  var pos = txt.split("|");          // 用竖线分隔
    document.getElementById("box").innerHTML = pos;
    console.log(pos);
  
   </script>
</body>
<style>

</style>
</html>

6.js中的字符串搜索

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="box"></div>
   <script>
    let txt = "Please locate where 'locate' occurs!";   
    
    document.getElementById("box").innerHTML = txt.indexOf("locate");
    // 返回7
    console.log(txt);
  
   </script>
</body>
<style>

</style>
</html>

都接受第二个参数作为索引开始的位置

    let txt = "Please locate where 'locate' occurs!";   
    
    document.getElementById("box").innerHTML = txt.indexOf("locate",15);
    // 返回21
    console.log(txt);

secrch()同理

但search不能接受第二个起始位置参数

match()

搜索输出所有匹配项

    let txt = "The rain in SPAIN stays mainly in the plain!";   
    
    document.getElementById("box").innerHTML = txt.match(/ain/g);
    // 返回数组[ain,ain,ain]
    console.log(txt);

如果是"/ /gi"则大写小写都会输出

includes()

如果字符串中有指定值 会输出true 反之输出false

    let txt = "The rain in SPAIN stays mainly in the plain!";   
    
    document.getElementById("box").innerHTML = txt.includes("rain");
//    输出true
    
    console.log(txt);

startsWith()

如果字符串以指定值开头 输出true 反之输出false

    let txt = "The rain in SPAIN stays mainly in the plain!";   
    
    document.getElementById("box").innerHTML = txt.includes("rain");
//    输出true
    
    console.log(txt);

endsWith() 同理

7.js字符串模板

模板自变量用反引号定义字符(``)，可以在字符串内使用单引号双引号，允许多行字符串

插值  ${...}

let firstName = "Bill";
let lastName = "Gates";

let text = `Welcome ${firstName}, ${lastName}!`;
    
console.log(text);

8.html补充

1.插入emoji字符

<p>&#128517</p>

 2.背景图像

body {
  background-image: url("paper.gif");
}

3.css设置圆角效果

<!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="box"></div>
</body>
<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
        border-radius: 25px;
    }
</style>
</html>

bsjmxg
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值