行业知识
JavaScript快速入门+文档查询【详解】
目录
1. js简介
2.js引入方式
3. JS基础语法(ECMAScript)
4. js函数和事件【js的核心】
5.js对象
6.BOM对象
7.DOM对象
8.案例全选全消
1. js简介
1.什么是js
JavaScript，简称js，是web开发中不可缺少的脚本语言，不需要编译就能运行（解释型语言）。在传统的web开发里，它“寄生”在html体内放在服务器上，随网络传输到客户端，在浏览器里运行
2.js作用
监听用户的动作：使用的是js的事件监听机制
可以操作浏览器的行为：比如让浏览器弹窗、历史记录的前进、后退等等
可以改变网页的内容：可以修改html标签、标签的属性、标签的样式，然后页面显示的效果就会随之改变
2.js引入方式
内部js：在html里任意位置添加 在这里写js代码 标签，在标签内部写js代码
外部js：把js代码写到单独的js文件里，html中使用引入js文件
引入js alert("内部js"); 3. JS基础语法(ECMAScript)
1.基础语法
区分大小写
每行结尾的分号可有可无
注释的写法：
单行注释：// 注释内容
多行注释：/* 注释内容 */
js常用的打印输出语句有：
js基础语法 hello, javascript //1. js区分大小写 //2. 每行结尾的分号可写可不写 //3. 注释的写法和Java一样 // 使用浏览器弹窗 window.alert("JavaScript简称js"); // 把内容输出到页面上 document.write("JavaScript借鉴了Java，但两者没有关系"); // 把内容打印到浏览器控制台。 // 使用浏览器打开此页面后，按F12，找到“Console”或者“控制台”就能看到输出的内容 console.log("布兰登·艾克用了10多天就创建了JavaScript语言");
2.变量和常量定义
在js中，变量的声明和java中还是不同的。首先js中主要通过如下3个关键字来声明变量的：
命名规范：和Java相似
组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名
js变量定义 //js中一切变量定义都使用：let，无论是什么类型的变量 // 老版本的js(ECMAScript5)中，使用var定义变量。从ECMAScript6开始，建议使用let定义变量 let v1 = 3; let v2 = "hello"; let v3 = true; let v4 = new Date(); //js中的常量定义使用：const // 常量不允许修改值，执行代码时会报错（打开浏览器的F12，控制台里可看到报错信息） const PI = 3.14; PI = 3.1415;
3.数据类型和运算符
虽然js是弱类型语言，但是也有数据类型，分为 ：原始类型 和 引用类型
js的数据类型 //使用`typeof`函数判断变量的类型 console.log(typeof 3); //number console.log(typeof "3") //string console.log(typeof true) //boolean console.log(typeof null) //object console.log(typeof undefined) //undefined let v; console.log(typeof v) //undefined。声明变量但未初始化，是undefined
js的运算符：绝大多数还是和java中一致
运算符 //算术运算符：+, -, *, /, %, ++, -- //赋值运算符：+=, -=, *=, /=, %=, = //比较运算符：>, =, 5){ filename = 1; } image.src = "./image/" + filename + ".jpg"; }, 2000); 3.js事件
事件：用户的一些动作，或者浏览器的一些状态变化。js提供了监听事件的一些属性
事件源：事件发生在哪。通常是html标签上
响应行为：事件发生后，要执行的代码、实现的功能
常见事件：
绑定语法：
普通函数方式绑定，语法：
匿名函数方式绑定，纯js方式绑定，
语法：document.getElementById("事件源标签id").onclick= function(){}
事件绑定1 function show(){ alert("点我干嘛1"); } document.getElementById("btn2").onclick = function(){ alert("点我干嘛2"); }; 案例：鼠标控制轮播图
轮播图//定义一个变量，用于存储定时器的id；在清除定时器时要使用 let timer; //直接调用一次start方法，页面一打开就开始 start(); //开始轮播方法 function start(){ let image = document.getElementById("image"); let filename = 1; timer = setInterval(function() { if(++filename > 5){ filename = 1; } image.src = "./image/" + filename + ".jpg"; }, 2000); } //停止轮播方法 function stop(){ clearInterval(timer) } 5.js对象
1.Array对象
js的数组，更加类似于Java的集合，因为js数组的长度可变
定义数组：
let 变量名 = new Array(元素1, 元素2, 元素3, ...);
let 变量名 = [ 元素1, 元素2, 元素3, ... ];
遍历于存储：
arr[索引] = 值;
let v = arr[索引];
常用属性名与方法：
js数组 //1. 定义数组 // new Array(元素1,元素2,...) let arr1 = new Array("A", 1, true); console.log(arr1) // [元素1,元素2,...] let arr2 = ["B", 2, false]; console.log(arr2) //2. 循环遍历 let arr = ["A", "B", "C", "D", "E"]; for (let i = 0; i 2.String对象
定义字符串：
let 变量名 = new String("hello");
var 变量名 = "hello";
js字符串 //定义字符串： let str = " hello, world "; console.log("str字符串的长度：", str.length) console.log("从str中查找wo：", str.indexOf("wo")) console.log(str.trim()) console.log("从str中截取索引3到索引5的子串：", str.substring(3,5)) 3.JSON对象【重点】
JSON对象：JavaScript Object Notation，JavaScript对象标记法，是通过JavaScript标记法书写的文本，通常作为数据传输的格式。
json使用场景
可以作为配置文件的格式。例如我们的讲义所用的typora软件，其配置文件就是json格式的
可以作为前后台交互的数据载体。前后台交互时，我们需要传输数据，为了方便双方解析数据，可以采用json格式
json常用方法：
JS-对象-JSON // json格式的字符串 ==> json对象 let jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; let obj = JSON.parse(jsonstr); console.log(obj.name); // json对象 ==> json格式的字符串 console.log(JSON.stringify(obj)); 6.BOM对象
BOM：Broswer Object Model，浏览器对象模型。BOM对象提供了操作浏览器的方法，我们通过BOM对象可以让浏览器弹窗、切换历史记录等等。
1.window对象
window对象是所有bom对象的顶级对象，可以通过window.来获取其它4个bom对象，只是window.通常省略不写
2.location对象
location是指代浏览器的地址栏对象，常用于获取或者设置浏览器的地址信息：
location对象 //获取浏览器地址栏信息 alert(location.href); //设置浏览器地址栏信息 location.href = "https://www.itcast.cn";
7.DOM对象
1.DOM：Document Object Model 文档对象模型。JavaScript 将 HTML 文档的各个组成部分封装为对象，通过这些对象我们可以操作HTML的标签、属性、样式等等。
-
Document：整个文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment：注释对象
2.DOM操作的API
要想通过DOM操作网页，主要有两个步骤：
-
想操作哪个标签，就获取哪个标签对象：Element
-
通过Element对象，操作标签的属性、内容、或样式
操作标签的属性
操作标签的属性很简单，通常是：
-
获取属性值：let v = 标签对象.属性名
-
设置属性值：标签对象.属性名 = 值
操作标签的内容
所谓标签的内容，就是开始标签和结束标签中间的部分。例如： 这里是标签的内容
-
获取标签内容：let v = 标签对象.innerHTML
-
设置标签内容：标签对象.innerHTML = "新内容"，会把标签里旧内容覆盖掉
获取标签 帐号：
密码：
性别：男 女
//根据id获取标签： let usernameInput = document.getElementById("username"); console.log(usernameInput); //根据tagName获取标签： let inputArray = document.getElementsByTagName("input"); console.log(inputArray); //根据name属性值获取标签： let genderRadios = document.getElementsByName("gender"); console.log(genderRadios); //根据class属性值获取标签： let items = document.getElementsByClassName("item"); console.log(items); -------------------- 操作属性 function showPwd(){ document.getElementById("pwd").type="text"; } function hidePwd(){ document.getElementById("pwd").type="password"; } ---------------------- 操作标签内容 hello let d1 = document.getElementById("d1"); console.log(d1.innerHTML); d1.innerHTML = "JavaScript";8.案例全选全消
table { width: 500px; margin: 0 auto; border-collapse: collapse; } td, th { border: 1px solid blue; text-align: center; }
function check(){ //checked是一个true或fasle状态，v是true或false //1. 先获取checkall的状态：选中、取消 let v = document.getElementById("checkall").checked; //2. 把checkall的状态设置给所有的item let items = document.getElementsByClassName("item"); for(let i=0; i学号 姓名 年龄 1 2 3 4 5 6
-
-
-
上一篇：租了服务器怎么登录?
下一篇：大众服务器异常怎么回事?
