标签：24 console log 08 let querySelector 第五组 document 节点

JavaScript

• JavaScript脚本语言，解释型，主要用来给HTML网页增加动态功能
• 通常的js是运行在浏览器环境下的
• JS的两种模型
  • DOM：文档对象模型 document
  • BOM：浏览器对象模型 window
• nodejs运行在计算机环境下，服务器技术。不能操作BOM和DOM，但是它可以操作文件，实际上是一门后端技术
• JS解释器（不同浏览器，Js的解释器不一样）
  • Chrome---->v8
  • node---->v8
  • safari---->JavaScriptCore
• ECMAScript ES ---->一套规范
• JavaScript JS ---->具体的实现
• JS基本上是web前端的核心
• 从外部引入js----->
• JS放在HTML的位置
  • js建议放在body结束标签上面--->网页的执行顺序是自上而下的，JS是用来控制页面的显示方式，需要等待网页加载完成，再执行JS

JS的数据类型

数据类型
数字	number	自动类型推断 弱类型
字符串	string	自动类型推断 弱类型
布尔型	boolean	自动类型推断 弱类型
空	null	定义了，但值为空
未定义	undefined	没有声明过
非数字	NaN
数组		var v7 = [1, 2, 3, 4];
对象		var v8 = {"username": "admin","password": "123456"};

		var v1 = 10;
        var v2 = 1.5;
        var v3 = "你好";
        var v4 = "好";
        var v5 = true;
        var v6 = null;
        //数组
        var v7 = [1, 2, 3, 4];
		//向body打印输出
        document.write(v7[2]);
        //对象
        var v8 = {
            "username": "admin",
            "password": "123456",
            "id": 1001
        };
		document.write("<br>");//换行
        document.write(v8.password);

声明变量语法

• var：可以重新声明和修改

var num = 1;
var num = 2;

• let(ES6新增)：可以修改但是不能重新声明

let num = 1;
num = 2;

• const(ES6新增)：不可以修改并且不能重新声明

const a = 1;
a = 2;--->×

数组

//Array()是一个函数，返回一个空数组
let arr = [1, 2, 3, 4, 5];
arr[100] = 10;
document.write(arr);//1,2,3,4,5,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,10  中间的数字都是未定义(undefined)

• 可以理解为JS中的数组就是java中的集合
• js数组和java集合的不同处
  • 没有下标越界
  • 可以给任意位置赋值

函数(相当于java的方法)

/*
    可以有参数列表
    参数可以有多个
*/
function plus(a, b) {
    // let a = 1;
    // let b = 2;
    /*
        return的作用：return可以终止函数的执行
    */
    return a + b;
}
//调用函数
console.log(plus(111, 555));
console.log(plus(111, 555，1，2,3,67,7456));//不会报错，依然输出前两个数之和

对象

        //Object()返回一个空对象
        function User(name) {
            this.name = name;
        }
        //创建了一个user对象
        let user = new User("张三");
        console.log(user.name);

        let obj = Object();
        //JS对象的属性
        obj.name = "李四";
        obj.age = 30;
		//JS对象的方法
        obj.eat = function () {
            console.log("我正在吃东西...");
        }
        //对象调用方法
        obj.eat();

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

判断和循环

在JS中，if（条件）-------> 规定 0,null,undefined为false，剩下的都是true

		let s = 2;
        if (null) {
            console.log("abc");
        } else {
            console.log("cba"); //输出cba
        }

        //遍历输出数组
		let arr = [1, 2, 3, 4, 5];
        // for (let i = 0; i < arr1.length; i++) {
        //     console.log(arr[i]);
        // }
        for (i in arr) {
            console.log(arr[i]);
        }

		//遍历输出对象
		let student = {
            name: "小明",
            age: 22
        }-
        //遍历对象
        // console.log(student.length);
        for (stu in student) {
            console.log(stu); //依次输出 name,age
            console.log(student[stu]);//依次输出 小明,22
        }

常见工具对象

	let arr1 = [1,2,3];
	let arr2 = [9,8,7];
    console.log(arr1.concat(arr2)); //拼接
    // 在数组最后的位置添加一个元素
    arr1.push(10);
    //移除数组中的最后一个元素
    arr1.pop();
    //移除数组中的第一个元素
    arr1.shift();
	
	let name = "你好";
    // 对字符串进行编码
    document.write(escape(name)); //%u4F60%u597DtrueNaN

 	//isNaN  判断是不是数字，是返回false，不是返回true
    document.write(isNaN("哈哈")); //true

    //Number() 将字符串转换成数字，如果里面是数字，返回该数字，否则，返回NaN 
    document.write(Number("哈哈")); //NaN

    //String() 将一个值转成字符串
    document.write(String(123));

    // parseInt(); 转整数
    // parseFloat(); 转小数

 String：
     charAt，indexOf，lastIndexOf，
     replace，concat，match，
     substring，substr，toUpperCase
     toLowerCase
 Math：
     random，ceil，
     floor，round
 Date：
     getDate，getDay
     getMonth，getYear
     getHours，getMinutes
     
     let js = "alert('哈哈哈')"
    //把一个字符串解析成js代码执行
    eval(js);

JavaScript（独有的）

DOM编程 Document Object Model

• 文档本身就是一个文档对象document
• 所有的HTML元素都是元素节点
• 所有的HTML属性都是属性节点
• 元素的文本都是文本节点
• 注释节点(一点不用)

获取元素节点

<body>
    <div id="div1" class="div1">我是div</div>
    <script>
        //根据id属性获取对应的元素节点
        //通过id获取到的是唯一的一个节点
         let div1 = document.getElementById("div1");
		console.log(div1);
        //根据标签名获取对应的元素节点
        //通过标签名获取到的是一堆标签元素节点
         let div2 = document.getElementsByTagName("div");   
		console.log(div2[0]);
        //根据class样式获取对应的元素节点
        //通过class样式获取到的是一堆标签元素节点
        let div3 = document.getElementsByClassName("div1");
        console.log(div3[0]);

		// 新方式
        // querySelector找到和传入的选择器匹配的第一个元素
        // 返回值是一个元素节点
        let div = document.querySelector("#div1")
        let div = document.querySelector("div")
        let div = document.querySelector(".div1")
        // querySelectorAll找到和传入的选择器匹配的所有元素，返回值是一个数组
        let divs = document.querySelectorAll("div")
        console.log(divs[0]);
    </script>
</body>

innerHTML和innerText

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

        let div2 = document.querySelector(".div2");
        // innerHTML：可以实现值内的标签效果
        div2.innerHTML = "<h1>我是div2里的内容</h1>";
        //innerText：把值当字符串输出
        div2.innerText = "<h1>我是div2里的内容</h1>";

函数

    <button onclick="fun()">按钮</button>
    <!-- 文本框内输入的内容是文本框的value值 -->
    <input type="text" id="username">

    <script>
        function fun() {
            let input = document.querySelector("#username");
            alert(input.value)//通过弹窗输出文本框内输入的值
        }
    </script>

新增元素节点

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        .mydiv {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </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赋值只能赋字符串
            // ccontainer.innerHTML = myDiv;
            container.append(myDiv);
        }
    </script>
</body>
</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>
        <button onclick="delOne()">删除某一个子元素</button>
        <button onclick="del(this)">删除自己</button>
        <button onclick="delAll()">清空</button>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>

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

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

            function del(obj) {
                // console.log(obj);
                // 找到要删除的元素
                // let btn = document.querySelector("button");
                // console.log(btn)
                // 元素.remove方法直接删除
                // btn.remove();
                obj.remove();
            }
        </script>
    </body>
</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>
        <ul>
            <li><a href="#">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            // 获取当前节点的所有子节点
            let uls = document.querySelector("ul");
            // 只拿html节点
            console.log(uls.children);

            // 全text和li节点
            console.log(uls.childNodes);
            /*
                从某一个角度来说。
                字节点相对的状态
            */
            console.log(uls.children[0].children);
        </script>
    </body>
</html>

练习

写一个简易的计算器

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        .myli {
            color: aquamarine;
        }
    </style>
</head>
<body>
    <input type="text">
    <select>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text">
    <button onclick="fun()">=</button>
    <input type="text" id="count" readonly>
    <button onclick="delAll()">清除所有</button>
    <ol id="myol"></ol>
    <script>
        let r = 1;
        function fun() {
            let arr = document.querySelectorAll("input");
            /* 
                   下拉菜单我们要找的元素是select，选择的是哪一个
                   选项，这个select的value值就是哪一个选项的value值
               */
            let str = document.querySelector("select");
            let count = document.querySelector("#count");

            let num1 = parseInt(arr[0].value);
            let num2 = parseInt(arr[1].value);
            let str1 = str.value;

            count.value = eval(num1 + str1 + num2);


            let myli = document.createElement("li");
            myli.setAttribute("class", "myli");

            // 生成历史记录的时候，加上按钮
            /*
                并且处理id的问题，加单击事件
            */
            myli.innerHTML = num1 + str1 + num2 + "=" + count.value + "<button id=a" + r + " onclick='del(this)'>删除</button>";

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

            let myol = document.querySelector("#myol");
            myol.append(myli);
            // myli.append(del);
            arr[0].value = null;
            arr[1].value = null;
        }

        function delAll() {
            // 拿到历史记录的ol
            let myol = document.querySelector("#myol");
            myol.innerHTML = "";
        }

        function del(obj) {
            //获取按钮的id值，转换成li列表的id值
            let myli = document.querySelector("#" + obj.id);
            myli.remove();
        }
    </script>
</body>
</html>

标签：24,console,log,08,let,querySelector,第五组,document,节点
来源： https://www.cnblogs.com/laizhedong/p/16623024.html

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