打卡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 From: https://www.cnblogs.com/lyt0612/p/16621233.html