AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript （二）

2023-09-26 38
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript 对象可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。

JavaScript HTML DOM 元素 (节点)


创建新的 HTML 元素 (节点) - appendChild()


要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。


如下在  刘牌 ，你好 的后面添加  你好帅


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <p id="app1">你好</p>
    <p id="app2">刘牌</p>
</div>
</body>
<script>
    var para = document.createElement("p");
    var textNode = document.createTextNode("你好帅");
    para.appendChild(textNode);
    var element = document.getElementById("app");
    element.appendChild(para);
</script>
</html>


创建新的 HTML 元素 (节点) - insertBefore()


以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。


如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <p id="app1">你好</p>
    <p id="app2">刘牌</p>
</div>
</body>
<script>
    var para = document.createElement("p");
    var textNode = document.createTextNode("你好帅");
    para.appendChild(textNode);
    var element = document.getElementById("app");
    var child = document.getElementById("app1");
    element.insertBefore(para,child);
</script>
</html>


移除已存在的元素


要移除一个元素，你需要知道该元素的父元素。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <p id="app1">你好</p>
    <p id="app2">刘牌</p>
</div>
</body>
<script>
    var element = document.getElementById("app");
    var child = document.getElementById("app1");
    element.removeChild(child);
</script>
</html>


替换 HTML 元素 - replaceChild()


我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <p id="app1">你好</p>
    <p id="app2">刘牌</p>
</div>
</body>
<script>
    var para = document.createElement("p");//新添的段落
    var newNode = document.createTextNode("你很帅");//内容
    para.appendChild(newNode);
    var perent = document.getElementById("app");//父元素
    var text = document.getElementById("app1");//要替换的段落
    perent.replaceChild(para,text);
</script>
</html>


JavaScript HTML DOM 集合(Collection)


HTMLCollection 对象 length 属性


HTMLCollection 对象的 length 属性定义了集合中元素的数量。


例：修改所有 <p> 元素的背景颜色:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <p id="app1">你好</p>
    <p id="app2">刘牌</p>
    <button onclick="myFunction()">click</button>
</div>
</body>
<script>
    function myFunction() {
        var myCollections = document.getElementsByTagName("p");
        for (var i=0 ; i<myCollections.length ; i++) {
            myCollections[i].style.color = "red";
        }
    }
</script>
</html>


注意


HTMLCollection 不是一个数组！


HTMLCollection 看起来可能是一个数组，但其实不是。


你可以像数组一样，使用索引来获取元素。


HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。


JavaScript HTML DOM 节点列表


NodeList 对象是一个从文档中获取的节点列表 (集合) 。


NodeList 对象类似 HTMLCollection 对象。


一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。


所有浏览器的 childNodes 属性返回的是 NodeList 对象。


大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <p id="app1">你好</p>
    <p id="app2">刘牌</p>
    <button onclick="myFunction()">click</button>
</div>
</body>
<script>
    function myFunction() {
        var myNodeList = document.querySelectorAll("p");
        for (var i=0 ; i<myNodeList.length ; i++){
            myNodeList[i].style.color="red";
        }
    }
</script>
</html>


HTMLCollection 与 NodeList 的区别


HTMLCollection 是 HTML 元素的集合。


NodeList 是一个文档节点的集合。


NodeList 与 HTMLCollection 有很多类似的地方。


NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。


NodeList 与 HTMLCollection 都有 length 属性。


HTMLCollection 元素可以通过 name，id 或索引来获取。


NodeList 只能通过索引来获取。


只有 NodeList 对象有包含属性节点和文本节点。


JavaScript 对象


JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...


此外，JavaScript 允许自定义对象。


创建直接的实例


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
<script>
    var student = new Object();
    student.name = "刘牌";
    student.age = 21;
    student.home = "贵州";
    document.write(student.name+" "+"来自"+" "+student.home );
</script>
</html>


上面的写法有点复杂，下面更加简单


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
<script>
    student={name:"刘牌",home:"贵州"}
    document.write(student.name+" 来自"+" "+student.home);
</script>
</html>


使用对象构造器


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
<script>
    function person(firstname,lastname,age,eyecolor){
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;
    }
    myFather=new person("John","Doe",50,"blue");
    document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</html>


在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时


JavaScript prototype（原型对象）


所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="demo"></p>
</body>
<script>
    function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }
    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");
    document.getElementById("demo").innerHTML =
        "我的父亲年龄是 " + myFather.age + "。我的母亲年龄是 " + myMother.age;
</script>
</html>


JavaScript Number 对象


八进制和十六进制


如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。


默认情况下，JavaScript 数字为十进制显示。


但是你可以使用 toString() 方法 输出16进制、8进制、2进制。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="demo"></p>
</body>
<script>
    var number = 128;
    document.write("十进制："+number+"<br>");
    document.write("八进制："+number.toString(8)+"<br>");
    document.write("二进制："+number.toString(2)+"<br>");
</script>
</html>


在字符串中查找字符串


字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：


如果没找到对应的字符函数返回-1


lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="demo"></p>
</body>
<script>
    var string = "I love you love is better more than 100 times";
    var n = string.indexOf("you");
    document.write(n);
</script>
</html>


lastIndexOf()


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="demo"></p>
</body>
<script>
    var string = "I love you love is better more than 100 times";
    var n = string.lastIndexOf("l");//此时"l"的索引为2，使用lastIndexOf然后就从"l"处往后查找下一个"l",下一个"l"的索引为11
    document.write(n);
</script>
</html>


内容匹配


match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符，不存在返回null


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="demo"></p>
</body>
<script>
   var str = "I love you";
   document.write(str.match("love")+"<br>");
   document.write(str.match("Love"));
</script>
</html>


替换内容


replace() 方法在字符串中用某些字符替换另一些字符。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p id="demo">我叫刘牌，是一个帅哥</p>
<button onclick="changeName()">把帅哥替换为傻逼</button>
</body>
<script>
    function changeName() {
        var str = document.getElementById("demo").innerHTML;
        var changeText = str.replace("帅哥","傻逼");
        document.getElementById("demo").innerHTML = changeText;
    }
</script>
</html>


字符串大小写转换


字符串大小写转换使用函数 toUpperCase() / toLowerCase():

 

字符串转为数组


字符串使用split()函数转为数组:

 

特殊字符


Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号。


JavaScript Math（算数） 对象


random()

如何使用 random() 来返回 0 到 1 之间的随机数。


max()

如何使用 max() 来返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）


min()

如何使用 min() 来返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。）


JavaScript RegExp 对象


RegExp：是正则表达式（regular expression）的简写。


语法


var patt=/pattern/modifiers;


  • 模式描述了一个表达式模型。

  • 修饰符(modifiers)描述了检索是否是全局，区分大小写等。


RegExp 修饰符


修饰符用于执行不区分大小写和全文的搜索。


i - 修饰符是用来执行不区分大小写的匹配。


g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
<script>
    var str = "I love you Love Is better more Than";
    var queryText = /love/gi;//g代表全文查找，i代表不分大小写
    document.write(str.match(queryText));
</script>
</html>


test()


test()方法搜索字符串指定的值，根据结果并返回真或假。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
<script>
   var str = new RegExp("Love");
   document.write(str.test("I Love You"));
</script>
</html>


exec()


exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
<script>
   var str = new RegExp("Love");
   document.write(str.exec("I Love You"));
</script>
</html>


JavaScript 弹窗


警告框


警告框经常用于确保用户可以得到某些信息。


当警告框出现后，用户需要点击确定按钮才能继续进行操作。


alert


确认框


确认框通常用于验证是否接受用户操作。


当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。


当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button onclick="myFunction()">确认框</button>
    <p id="app"></p>
</body>
<script>
    function myFunction() {
        var x;
        var a = confirm("你确认要这样吗？");
        if (a==true){
            x = "你已确认";
        }
        else {
            x = "取消";
        }
        document.getElementById("app").innerHTML = x;
    }
</script>
</html>


提示框


提示框经常用于提示用户在进入页面前输入某个值。


当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。


如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。


语法


window.prompt("sometext","defaultvalue");


window.prompt() 方法可以不带上window对象，直接使用prompt()方法。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button onclick="myFunction()">输入</button>
    <p id="app"></p>
</body>
<script>
    function myFunction() {
        var input = prompt("请输入你的名字","name");
        if (input!=null && input!=" "){
            var x = "欢迎您 "+input;
            document.getElementById("app").innerHTML = x;
        }
    }
</script>
</html>


换行


弹窗使用 反斜杠 + "n"  (\n)  来设置换行。

 

JavaScript 计时事件


JavaScript 一个设定的时间间隔之后来执行代码


我们称之为计时事件


JavaScript 计时事件


通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。


在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:


  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

  • setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。


setInterval() 方法


setInterval() 间隔指定的毫秒数不停地执行指定的代码


语法


window.setInterval("javascript function",milliseconds);


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button onclick="myFunction()">输入</button>
</body>
<script>
    function myFunction() {
       setInterval(function () {
           alert("你爱我吗？")},3000)
    }
</script>
</html>


如何停止执行?


clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。


语法


window.clearInterval(intervalVariable)

 

setTimeout() 方法


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button onclick="myFunction()">输入</button>
</body>
<script>
    function myFunction() {
       setTimeout(function () {
           alert("你爱我吗？")},3000)
    }
</script>
</html>


JavaScript Cookie


Cookie 用于存储 web 页面的用户信息。


使用 JavaScript 创建Cookie


JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。


您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：


document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

文章标签：
JavaScript
前端开发
容器
索引
存储
刘牌
目录
相关文章
Li370234940
|
1月前
|
Web App开发 JavaScript 前端开发
javascript主要特点有哪些,简单描述javascript的特点
javascript主要特点有哪些,简单描述javascript的特点
Li370234940
43 0
蓝易云
|
6月前
|
前端开发 JavaScript
实用的JavaScript小技巧
这些JavaScript小技巧可以帮助你更加高效地编写代码，提高代码质量和可读性。
蓝易云
40 1
盒马盒马
|
6月前
|
JavaScript 前端开发
JavaScript：处理this
JavaScript：处理this
盒马盒马
54 1
前端技术栈
|
6月前
|
存储 前端开发 JavaScript
JavaScript中你不知道的数学方法 （非常实用）
JavaScript中你不知道的数学方法 （非常实用）
前端技术栈
45 0
子为时
|
6月前
|
存储 JavaScript 前端开发
Javascript
avaScript 是一种用于在网页上实现交互性和动态功能的脚本语言。
子为时
58 0
晴栀~
|
JavaScript 前端开发
初学JavaScript
JavaScript
晴栀~
76 0
张志凌
|
JavaScript 前端开发 Java
JavaScript的特点
JavaScript的特点
张志凌
96 0
半晴Miko
|
JavaScript 前端开发
Day10 JavaScript
JavaScript
半晴Miko
164 0
游客at5iuxxf3n33o
|
存储 Web App开发 人工智能
JavaScript的使用
JavaScript作为使用得最多的脚本语言，可以说是无处不在。所有主流浏览器都支持JavaScript。目前，全世界大部分网页都使用JavaScript。它可以让网页呈现各种动态效果。 作为后台程序员的我们，JavaScript也是必备的。接下来就一起来学习一下JavaScript，感受它的魅力！
游客at5iuxxf3n33o
1691 0
JavaScript的使用
1759666346247123
|
JavaScript 前端开发
JavaScript 自己实现 new
JavaScript 自己实现 new
1759666346247123
112 0