ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2022-08-24 第二组刘禹彤 学习笔记

2022-08-24 19:05:39  阅读:148  来源: 互联网

标签:24 console log 08 JS let 刘禹彤 div document


打卡39天

 

 

###学习内容

JavaScript

脚本语言,解释型,主要用来给HTML网页增加动态功能,通常的JS是运行在浏览器环境下的

JS的两种模型

DOM

文档对象模型(document)

BOM

浏览器对象模型(window)

  • nodejs运行在计算机环境下,服务器技术,不能操作BOM和DOM,但是他可以操作文件,能操作数据库,实际上是一门后端技术

JS解释器

  • 火狐:spidermonkey
  • Chrom:v8
  • node:v8
  • safari:JavaScriptCore

script

  • 向body打印输出,建议放在body结尾上方-------页面的加载顺序是从上而下的,JS是用来控制页面的显示方式,需要等页面加载完成,再执行JS
  • ECMAScript ES-------一套规范

JavaScript JS-------具体的实现

ES6 ES5 ES7------------语法

JS基本上是web前端的核心------JS使用,JS底层,JS解析过程,JS优化

数据类型

自动类型推断(弱类型)

  • 数字(number):整数,小数,正数,负数
  • 字符串(string):a,中文,@
  • 布尔型(boolean):true(1),false(0)

强类型

  • 空(hull):相当于声明了值为空
  • undefined:未定义,没有声明过,没有值
  • NaN:非数字
  • 数组
  • 对象

变量的声明

            var v1 = 10;
            var v2 = 1.5;
            var v3 = "你好";
            var v4 = '我好';
            var v5 = true;
            var v6 = null;
            // document.write(v7);

ES6声明变量语法

新的声明变量的关键字

  • let-------不能够重复定义
let num = 1;
 num = 2;
 document.writeln(num);
//结果为2
  • const----------不能够重复定义,也不能重新赋值
            const num = 1;
            // num = 2;不能重新赋值
            document.write(num);
//结果为1

数组

let arr = Array[1,2,3,4,5];
arr = [100] = 10;
  • Array()是一个函数,返回值是一个空数组
  • JS里“没有”方法的概念-----称为函数,JS里方法不是Java里方法,JS里的函数相当于Java里的方法
  • Array(),在JS中函数可以当作使用
  • 可以理解为JS中的数组就是java里的集合

函数

  • 相当于Java的方法
  • 可以有参数列表,参数可以有多个
  • return的作用-----终止函数的执行

对象

  • Arraty()返回一个空数组

Object()返回一个空对象

构造器

let obj = new Object;
function User(name){
    this.name = name;
}
//创建了一个user对象
//我们之前定义的this.name就是这个对象的属性
//现在的user对象中有一个name属性,值是张三
let user = new User("张三");
console.log(user.name);

调对象

let obj = new Object;
//JS对象的属性
obj.name = "李四";
obj.age = 30;
//JS对象的方法
obj.eat = function(){
console.log("hi")
}
//对象调方法
obj.eat();

json串

let teacher = {
    name = "王五";
    age = 35;
    drank:function(){
        console.log("我正在喝酒。。")
}
}
teacher.drank();
console.log(teacher['drank']())

判断和循环

在JS中,if(条件)--------规定:0,null,undefined为false,其余为true

      let arr = [1,2,3,4,5];
            for(let i = 0;i < arr.length;i++) {
                console.log(arr[i]);
            }
            for(i in arr){
                console.log(arr[i]);
            }

              let student = {
                name: "小明",
                age: 10
            }
             // 遍历对象
            // console.log(student.length);
            for(attr in student) {
                console.log(attr);
                console.log(student[attr]);
            }
            /*
                中间省略了运算符 ===
            */

常用api(常用工具对象)

Array()

  • concat-----连接
  • push----添加
  • pop---删除数组中最后一个元素
  • shift----删除数组中第一个元素
  let arr1 = [1,2,3];
           let arr2 = [9,8,7];
        //    console.log(arr1.concat(arr2));
           arr1.push(10);
           // 移除数组中的最后一个元素
           arr1.pop();
           // 移除数组中的第一个元素
           arr1.shift();
           console.log(arr1);

eval

把一个字符串解析成JS代码执行

            let name = "你好";
            // 对字符串进行编码
            document.write(escape(name));

 

 let js = "alert('哈哈哈')";
            js = "1+1";
            // 把一个字符串解析成js代码执行
            document.writeln(eval(js));
            document.write(js);

isNaN

判断一个值是不是数字,是---false;不是---true

parseInt

转成整数:parseInt()

parseFloat

转成小数:parseFloat()

Number

转成数字:Number("xxxx")

String

转成字符串:String()

DOM编程(Document Object Model)

文档本身就是一个文档对象document

节点

所有的HTML元素都是元素节点

所有的HTML属性都是属性节点

元素的文本是文本节点

注释节点(一般不用)

获取元素结点

 <div class="div1" id="div1">我是div</div>

根据id属性获取对应的元素节点(通过id获取到的是唯一一个节点)

     let div = document.getElementById("div1"); 

根据标签名获取对应的元素节点(通过标签名获取到的是一堆标签元素节点)

      let div = document.getElementsByTagName("div");

根据iclass样式获取对应的元素节点(通过class样式获取到的是一堆标签元素节点)

   let div = document.getElementsByClassName("div1");
           console.log(div[0]);

新方式---querySelector---找到和传入的选择器匹配的第一个元素(返回值是一个元素节点)

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

新方式---querySelectorAll---找到和传入的选择器匹配的所有元素(返回值是一堆元素节点)

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

获取内容

 <div>
            <p>我是div</p>
        </div>


        <div class="div2">


        </div>


        <script>
            let div = document.querySelector("div");
            // innerHTML可以获取到HTML标签
            console.log(div.innerHTML);
            // innerText只能获取到文本
            console.log(div.innerText);


            let div2 = document.querySelector(".div2");
            div2.innerHTML = "<h1>我是div2里面的h1</h1>";
            div2.innerText = "<h1>我是div2里面的h1</h1

事件

新建元素节点

<style>
            .mydiv {
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <button onclick="fun()">点我!!!</button>
        <div id="container"></div>
        <script>
            function fun(){
                // 新建一个元素节点
                let myDiv = document.createElement("div");


                // 给我们自己新建的div加样式
                myDiv.setAttribute("class","mydiv");


                // 如果有id,尽量使用id
                let container = document.querySelector("#container");
                // innerHTML或innerText赋值只能附字符串
                // container.innerHTML = myDiv;
                container.append(myDiv);
                /*
                    每次点击=号,在下方显示计算的历史记录!
                */
            }  
        </script

删除某一个子元素

<button onclick="delOne()">删除某一个子元素</button>

 

  function delOne() {
                let ul = document.querySelector("ul");
                let lis = document.querySelectorAll("li");
                ul.removeChild(lis[2]);
            }

删除自己

<button onclick="del(this)">删除自己</button>

 

 function del(obj) {
                // console.log(obj);
                // 找到要删除的元素
                // let btn = document.querySelector("button");
                // console.log(btn)
                // 元素.remove方法直接删除
                // btn.remove();
                obj.remove();
            }

清空

  <button onclick="delAll()">清空</button>

 

 function delAll() {
               // 清空ul
               let ul = document.querySelector("ul");
               ul.innerHTML = ""; 
            }

以下所用代码

<ul>
            <li><a href="#">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

获取当前节点所有子节点

  let uls = document.querySelector("ul");

获取html节点

console.log(uls.children);

全text和li节点

console.log(uls.childNodes);

从某个角度来说,子节点是相对的状态

###学习心得

今天学习了Javascript脚本语言,知识点有点多,需要多敲代码强化理解

###掌握情况:一般

###课上练习

<!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>
        <input type="text" class="num1">
        <select class="oper">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" class="num2">
        <button onclick="calc()">=</button>
        <input type="text" readonly class="result">
        <hr>
        <button onclick="cls()">清空历史记录</button>
        <ol id="history"></ol>

        <script>
            /* 定义一个不重复的变量,用它来当做
                button和li共同的id
            */
            let r = 1;
            function calc() {

                // 获取第一个数
                let num1 = document.querySelector(".num1").value;
                // 获取第二个数
                let num2 = document.querySelector(".num2").value;
                let result = document.querySelector(".result");
                /* 
                    下拉菜单我们要找的元素是select,选择的是哪一个
                    选项,这个select的value值就是哪一个选项的value值
                */
                let oper = document.querySelector(".oper");

                result.value = eval(num1 + oper.value + num2);

                let li = document.createElement("li");
                // 生成历史记录的时候,加上按钮
                /*
                    并且处理id的问题,加单击事件
                */
                li.innerHTML = num1 + oper.value + num2 + "=" + eval(num1 + oper.value + num2) + "<button id=b" + r +" onclick='remself(this)'>删除</button>";

                // 自我删除
                /*
                    li按照自定义的规则,li处理id的问题
                */
                li.setAttribute("id","l"+r);
                // 标记自增
                r++;

                let ol = document.querySelector("#history");
                ol.append(li);

                document.querySelector(".num1").value = "";
                document.querySelector(".num2").value = "";
                
            }  
            
            function cls() {
                // 拿到历史记录的ol
                let ol = document.querySelector("#history");
                ol.innerHTML = "";
            }

            function remself(obj) {
                // 把拿到的b1转换成li
                let li = document.getElementById(String(obj.id).replace("b","l"));
                // 删除自己
                li.remove();
            }

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

###运行结果

 

标签:24,console,log,08,JS,let,刘禹彤,div,document
来源: https://www.cnblogs.com/lyt0612/p/16621233.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有