JavaScript简单介绍
一.JS介绍
1.什么是JavaScript
js 是一门基于对象和事件驱动的脚本语言
专门为网页交换而设计
主要应用在客户端浏览器
2.JS的特点和优势
直译式（一边解释一边执行，不需要提前编译）
基于对象（不能称之为面向对象，通过某些机制可以模拟面向对象）
弱类型的语言：
JS中声明变量：var i = * ；*可以是任意类型，二次声明var i 无效，依然运用第一次声名的i
交互性
安全性（强制的限制只能访问浏览器内部的资源，不能访问硬盘）
跨平台性（只要有在浏览器的地方都能运行 JS）
3.JS的引入
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JStitle>
<script>
alert("引入JS的第一种方式");
script>
<script src="01-引入JS.js">script>
head>
<body>
body>
html>
alert("引入JS的第二种方式");
注意：
1、引入js文件的 script 标签内部不要写代码，写了也不会运行
2、引入js文件的 script 标签不能写成自闭的
3、js的注释跟Java一致
4.JS的语法
1.数据类型
-
数值类型 – number
在 JS 底层数值类型只有一种，就是浮点型。但是在显示和处理的工程中，会在整型和浮点型之间自动转换（例如：6.2显示出来的是是6，但是实际还是6.2（可能会出现））
-
字符串类型 – String
在 JS 中，字符串也是基本数据类型，字符串常量可以用单引号或者双引号引起来。
-
布尔类型 – boolean
true 和 false
-
undefined
nudefined 类型的值只有一个，就是 undefined ，表示声明了变量但是没有为变量赋值，该变量的值就是 undefined ；
-
null
null数据的值只有一个 null
null 可以作为函数的返回值
-
复杂数据类型（数组、函数、对象）
2.变量的定义
- 在 JS 中通过 var 关键字声明一个变量，变量本身不区分类型，可以指向任意的数据类型，因此 JS 是一门弱类型语言。
3.运算符
JS 和 Java 运算符基本相同（有一些不同的）
4.语句
JS 中的语句和 Java 中的语句大致相同（JS 没有 foreach）
5.数组
var arr1 = new array(); //创建一个长度为0的空数组
var arr2 = new array(10); //(长度其实无法指定，可以随时改变)
var arr3 = new array(10,a,"aa");//创建一个有初始值的数组
var arr4 = []; //创建一个长度为0的空数组
var arr5 = [10,a,"aa"]; //创建一个有初始值的数组
arr5 [6] = "abc"; //在下标为 6 的地方赋值
1. 创建：
1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];
2. 方法
join(参数):将数组中的元素按照指定的分隔符拼接为字符串
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
pop() 删除数组最后一个元素
splice(x,y,z) 只有xy时是指从下标为x的元素开始向后（包含下标为x的元素）删除y个元素，有z时，从下标x开始向后（包含下标为x的元素）y个元素看成一个整体替换成一个元素z
indexOf(x,y) 判断数组中是否存在x（从第y个元素之后是否存在x，y可以不写）（存在返回找到的第一个元素的下标，不存在返回 -1）
3. 属性
length:数组的长度
4. 特点：
1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。
6.函数/方法
函数（或方法）就是一个具有功能的代码块，可以反复调用执行
函数的声明方式一：（可以没有参数，严格区分大小写）
function 函数名（[参数]）{
函数体...
}
调用函数： 函数名（[参数]）;
案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS方法title>
<script>
/* 创建函数 */
function f(x, y) {
var arr=[];
var j=0;
for (var i=x;i <= y;i++){
if (i%3==0){
arr[j]=i;
j++;
}
}
return arr;
}
/* 提示用户并接收用户输入 */
var x = prompt("请输入x的初始值：");
x = parseInt(x);/* 将值转型为 int 类型 */
var y = prompt("请输入结束值值：");
y = parseInt(y);/* 将值转型为 int 类型 */
/* 调用函数 */
var arr = f(x,y);
/* 让结果在网页上输出 */
document.write(arr);
script>
head>
<body>
<h1>JS方法练习...h1>
body>
html>
函数的声明方式二：
var 变量名/函数名 = function ([参数]){
函数体...
}
调用函数：函数名([参数])；
7.对象
声明对象的三种方式:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
/* 对象的声明方式一： */
function Person(name,age) {
this.name = name;
this.age = age;
this.hs2 = function () {
console.log(this.name+":"+this.age);
}
}
// 通过 new 函数创建对象
var p1 = new Person("阿辉",20);
console.log(p1.name);
console.log(p1.age);
p1.hs2();
var p2 = new Person("前康",22);
console.log(p2.name);
console.log(p2.age);
p2.hs2();
/* 对象的声明方式二： */
//通过对象直接声明对象
var p3 = {
"name" : "啊giao",
"age" : 18,
"hs3" : function () {
console.log(this.name+":"+this.age);
}
}
console.log(p3.name);
console.log(p3.age);
p3.hs3();
/* 对象的声明方式三： */
var p4 = function (name,age) {
this.name = name;
this.age = age;
this.hs4 = function () {
console.log(this.name+":"+this.age);
}
}
var p5 =new p4("薇薇",20);
console.log(p5.name);
console.log(p5.age);
p5.hs4();
script>
head>
<body>
body>
html>
二.练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
style>
head>
<script>
/* 1.点击div获取当前时间 */
function ffDiv() {
//1.获取表示div元素的JS对象
var div = document.getElementById("div1");
//2.通过div的js对象调用innerHTML属性改变div的内容
div.innerHTML = new Date().toLocaleString();
}
/* 2.点击按钮,换一张图片 */
var flag = false;
function ffImg() {
var img1 = document.getElementById("img1");
if (flag){
img1.src = "img/icon_5.jpg";
flag = false;
}else {
img1.src = "img/icon_6.jpg";
flag = true;
}
}
script>
<body>
<div id="div1" onclick="ffDiv()" title="点击获取当前时间">点击获取当前时间div>
<hr/>
<input type="button" value="换图片" onclick="ffImg()"><br/><br/>
<img id="img1" src="img/icon_5.jpg" alt="">
body>
html>
JavaScript高级
一. 案例引入
1. dom简介
* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
* document.getElementById("id值"):通过元素的id获取元素对象
* 操作Element对象：
1. 修改属性值：
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
* 属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
innerHTML获取div标签中的所有东西
innerText只获取标签中的文本文字
/*
＊ javascript的style属性只能获取内联样式，
＊ 对于外部样式和嵌入式样式*需要用currentStyle属性。
＊ 但这种方法有兼容性（FF和Chrome不支持)
*/
HTMLElement.prototype.__defineGetter__("currentStyle", function() {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
//再用 currentStyle 获取 backgroundColor
2. 事件简介
* 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
* 造句： xxx被xxx,我就xxx
* 我方水晶被摧毁后，我就责备对友。
* 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick--- 单击事件
2. 通过js获取元素对象，指定事件属性，设置一个函数
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light2" src="img/off.gif">
<script>
function fun(){
alert('我被点了');
alert('我又被点了');
}
function fun2(){
alert('咋老点我？');
}
//1.获取light2对象
var light2 = document.getElementById("light2");
//2.绑定事件
script>
body>
3. 案例
- 电灯开关
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关title>
head>
<body>
<img id="light" src="img/off.gif">
<script>
/*
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
*/
//1.获取图片对象
var light = document.getElementById("light");
var flag = false;//代表灯是灭的。 off图片
//2.绑定单击事件
light.onclick = function(){
if(flag){
//判断如果灯是开的，则灭掉
light.src = "img/off.gif";
flag = false;
}else{
//如果灯是灭的，则打开
light.src = "img/on.gif";
flag = true;
}
}
script>
body>
html>
二. BOM
1. 概念
Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象
* Document:文档对象
3. window 窗口对象
1.创建
- 最顶层对象，直接使用，无需创建
2.方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口（_bla）
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
3.属性
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4.特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
4. Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
5. History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
二. BOM
1. 概念
Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象
* Document:文档对象
3. window 窗口对象
1.创建
- 最顶层对象，直接使用，无需创建
2.方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
3.属性
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4.特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
4. Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
5. History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
三. DOM
1.概念
* 概念： Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
* W3C DOM 标准被分为 3 个不同的部分：
* 核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment:注释对象
* Node：节点对象，其他5个的父对象
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型
2.核心DOM模型
1. Document–文档对象（文档树）
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
3.元素对象.append（需要添加的东西:创建的文本对象/创建的子元素节点对象）（添加在最后面）
//把创建的子元素节点对象放在，X元素对象前面（新节点放在某节点前面）
元素对象.insertBefore（创建的子元素节点对象,X元素对象）（指定元素前插入节点）
2. Element–元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：（只能对标签上设置的属性进行删除和设置）
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 200px;
height: 200px;
background-color: #8768ff;
}
style>
head>
<body>
<div id="aa">div>
<div id="bb" >div>
<input type="button" value="删颜色" onclick="cc()">
<input type="button" value="改颜色" onclick="xg()">
body>
<script>
let div1 = document.getElementById("aa");
let div2 = document.getElementById("bb");
let div3 = document.getElementsByTagName("div");
function cc() {
div1.removeAttribute("style");
}
function xg() {
div1.setAttribute("style","background-color:#33FF2B")
}
script>
html>
3. Node–节点对象
* 特点：所有dom对象都可以被认为是一个节点,是其他5个的父对象
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 元素对象.insertBefore（创建的子元素节点对象,X元素对象）（指定元素前插入节点）
* 属性：
* parentNode 返回节点的父节点。
* parent
3. HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式
1. 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
4.事件监听机制
4.1 概念
某些组件被执行了某些操作后，触发某些代码的执行。
* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
* 事件源：组件。如： 按钮 文本输入框...
* 监听器：代码。
* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
4.2 常见事件
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。(下拉框事件)
2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。
选择和改变事件案例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#aa{
width: 200px;
height: 200px;
}
style>
head>
<body>
<textarea name="" id="aa" cols="30" rows="10" placeholder="请输入自我介绍...">
textarea>
<input id="bb" type="text" placeholder="请输入自我介绍...">
<select name="" id="cc">
<option value="AA">AAoption>
<option value="BB">BBoption>
<option value="CC">CCoption>
<option value="DD">DDoption>
<option value="EE">EEoption>
select>
body>
<script>
let aa = document.getElementById('aa');
let bb = document.getElementById('bb');
//文本框中选中文本触发事件
aa.onselect=function () {
//aa.style.color='#f42b0b'
console.log(this.value);
aa.style.color="#f42b0b";
}
//输入框失去焦点也可以触发 onchange 事件
bb.onchange=function () {
bb.value=bb.value.toUpperCase();
}
//下拉框选择后触发函数
let cc = document.getElementById('cc');
cc.onchange=function () {
console.log(cc.value);
}
script>
html>
表单事件案例：
4.3 案例
1. 表格全选
- js中循环遍历的常见方式
var arr=[1,2,3,'a','b','c'];
//1. 传统 for
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
//2. for in (i是下标)
for (var i in arr) {
console.log(arr[i]);
}
//3. for of (e代表数组的每个元素)
for (var e of arr) {
console.log(e);
}
//4.1 foreach (e代表数组的每个元素，i表示下标)
arr.forEach(function (e,i) {
console.log(e);
console.log(i);
})
//4.2 foreach简化版 (e代表数组的每个元素)
arr.forEach( e =>{
console.log(e);
})
- 功能分析：
1.三个按钮：全选 全不选 反选
2.第一个复选框：全选和全不选
3.鼠标移入变色，移出复原
- 代码展示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.over{
background-color:deeppink;
}
.out{
background-color:white;
}
style>
<script>
/*功能分析：
* 1.三个按钮：全选 全不选 反选
* 2.第一个复选框：全选和全不选
* 3.鼠标移入变色，移出复原
* */
//窗口加载完毕事件
window.onload=function () {
/*按钮全选实现步骤：
* 1.获取“全选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，给所有复选框元素的checked属性赋值true
*/
document.getElementById("selectAll").onclick=function () {
var cbs=document.getElementsByName("cb");
cbs.forEach(function (e) {
e.checked=true;
})
}
/*按钮全不选实现步骤：
* 1.获取“全不选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，给所有复选框元素的checked属性赋值false
*/
document.getElementById("unSelectAll").onclick=function () {
var cbs=document.getElementsByName("cb");
cbs.forEach(function (e) {
e.checked=false;
})
}
/*按钮反选实现步骤：
* 1.获取“反选按钮”这个元素
* 2.给按钮元素绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，给所有复选框元素的checked属性 取非
*/
document.getElementById("selectRev").onclick=function () {
var cbs=document.getElementsByName("cb");
cbs.forEach(function (e) {
e.checked=!e.checked;
})
}
/*第一个复选框带动其它复选框全选和全不选实现步骤：
* 1.获取“第一个复选框”这个元素 firstCheckBox
* 2.给 firstCheckBox 绑定一个点击事件
* 3.在点击事件的实现中，获取所有的复选框元素
* 4.使用循环遍历，让所有复选框元素的checked属性 和 第一个复选框的 checked属性相同
*/
document.getElementById("firstCb").onclick=function () {
var cbs=document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked=this.checked;
}
}
/*鼠标移入移出变色功能实现步骤：
1.获取table中所有的tr元素
2.使用循环遍历给每一个tr元素绑定onmouseover和onmouseout事件
3.在style标签中事先写好.over和.out的背景颜色样式，分别是粉红色和白色
4.在鼠标移入和移出事件实现中，分别让tr元素的class值分别为over和out
*/
var trs=document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover=function () {
this.className="over";
}
trs[i].onmouseout=function () {
this.className="out";
}
}
/* 不可行 trs是nodeList类型，不是简单的数组 ，因此不能调用forEach函数
trs.forEach(function (tr) {
tr.οnmοuseοver=function () {
this.className="over";
}
tr.οnmοuseοut=function () {
this.className="out";
}
})*/
/*
非要用forEach ,可以使用call函数(看看即可)
Array.prototype.forEach.call(trs, function(tr) {
tr.οnmοuseοver=function () {
this.className="over";
}
tr.οnmοuseοut=function () {
this.className="out";
}
});*/
}
script>
head>
<body>
<table border="1" cellpadding="10" cellspacing="0">
<caption>学生信息表caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb">th>
<th>编号th>
<th>姓名th>
<th>性别th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox" name="cb" >td>
<td>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb" >td>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb" >td>
<td>3td>
<td>岳不群td>
<td>?td>
<td><a href="javascript:void(0);">删除a>td>
tr>
table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
div>
body>
html>