2022-07-12 第三小组 高佳誉 学习笔记

JS基础技术（2）

重点

  1. 系统函数。
  2. 循环结构。
  3. 循环和判断的嵌套使用。

知识点

1. 系统函数。

1、parseInt，从一个字符串中提取整数；
2、parseFloat，从一个字符串中提取小数；
3、isNaN，用来判断一个变量是不是数字；
4、window.prompt，用来想浏览器中弹出一个用户输入对话框。
点击查看代码 
<!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>
    <style>
        .div1{
            width: 400px;
            height: 400px;
            background-color: blue;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: rgb(218, 114, 17);
        }
    </style>
</head>
<body>
    <div class="div1" id="div1">
        <div class="div2" id="div2">
            我是DIV2
        </div>
    </div>
    <script>
        // let div1 = document.getElementById("div1");
        // console.log(div1);
        // let divs = document.getElementsByClassName("div1");
        // console.log(divs[0]);
        // let divs = document.getElementsByTagName("div");
        // console.log(divs[0]); 

        // let div = document.querySelector("#div2");
        // console.log(div2);

        // let divs = document.querySelectorAll("div");
        // console.log(divs[1]);

        let div = document.querySelector("div");
        // console.log(div.innerText);
        // div.innerHTML = "<b>我是通过DIV来的</b>";

        
    </script>
</body>
</html>

2. 循环。

for - 循环代码块⼀定的次数
for/in - 循环遍在这里插入代码片历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
           循环中的 break break 和 continue continue 语句
break 语句⽤于跳出循环。
continue ⽤于跳过循环中的⼀个迭代。
点击查看代码 
<!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>
    <script>
        // 今天我们公司有10个人，每年公司会以10%的比重招人
        // 今年是2022年
        // 哪一年人数突破100人
        let num=10;
        for (let i = 1; i < 50; i++) {
            num=num*1.1
            if (num>=100) {
                console.log(i+2022);
                console.log(num);
                break;
            }
        }
    </script>
</body>
</html>

3. 元素节点

（1）获取节点
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
获取html的方法（document.documentElement）
获取body的方法（document.body）
（2）创建节点：createElement('')
（3）插入节点：insertBefore()
（4）删除节点：removeChild
（5）克隆节点：parent.cloneNode() false 或者true
（6）替换节点：node.replace(new,old)
点击查看代码 
// 创建元素，只是创建出来并未添加到html中，需要与appendChild 配合使用
    var elem = document.createElement('p');
    elem.id = 'test';
    elem.style = 'color: red';
    elem.innerHTML = '我是新创建的节点';
    document.body.appendChild(elem);
var oNewp=document.createElement("p");
      var oText=document.createTextNode("World Hello");
      oNewp.appendChild(oText);
var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);
var op=document.body.getElementsByTagName("p")[0];
         op.parentNode.removeChild(op);
// 克隆节点（需要接受一个参数来表示是否复制元素）
    var form =  document.getElementById('test');
    var clone = form.cloneNode(true);
    clone.id = 'test2';
    document.body.appendChild(clone);
var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);
(function()
    {
        var start = Date.now();
        var str = '', li;
        var ul = document.getElementById('ul');
        var fragment = document.createDocumentFragment();
        for(var i=0; i<10000; i++)
        {
            li = document.createElement('li');
            li.textContent = '第'+i+'个子节点';
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        console.log('耗时：'+(Date.now()-start)+'毫秒'); // 63毫秒
    })();

掌握程度

大部分的知识点都已经掌握，但是由于元素节点的种类和作用实在太多，所以应用的还是很费力气。自我建议：重新看一遍元素节点的获取和录入。

收获

纸上得来终觉浅，绝知此事要躬行。软件开发是一门工程学科，注重的就是实践，"君子动口不动手"对软件开发人员来讲根本就是错误的，我们提倡"动手至上"，但别害怕，我们大多温文尔雅，没有暴力倾向，虽然有时候蓬头垢面的一副"比尔盖茨"样。有前辈高人认为，学习编程的秘诀是:编程、编程、再编程，本人深表赞同。不仅要多实践，而且要快实践。我们在看书的时候，不要等到你完全理解了才动手敲代码，而是应该在看书的同时敲代码，程序运行的各种情况可以让你更快更牢固的掌握知识点。

学习效果展示

posted @ 2022-07-12 22:45  憨憨的时倾  阅读(46)  评论(0)    收藏  举报