JavaScript基本语法
一.JavaScript的概述
1.1什么是JavaScript
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
JavaScript的组成部分：
- ECMAScript：描述了JS的语法和基本对象
- 文档对象模型（DOM）：描述与处理网页内容的方法和接口。
- 浏览器对象模型（BOM）：描述与浏览器进行交互的方法和接口。
1.2JavaScript的日常用途
- 嵌入动态文本于HTML页面。
- 对浏览器事件做出响应。
- 读写HTML元素
- 在数据被提交到服务器之前验证数据。
- 检测访客的浏览器信息。
- 控制cookies，包括创建和修改等。
- 基于Node.js技术进行服务器端编程。
1.3JavaScript的引入
在HTML文件中引入JavaScript有两种方式
- 一种是在HTML文档直接嵌入JavaScript脚本，称为内嵌式
- 另一种是链接外部JavaScript脚本文件，称为外联式。
内嵌式，在HTML文档中，通过 \<script> 标签引入，如下
<script type="text/javascript">
//此处为JavaScript代码
</script>
外联式，在HTML文档中，通过 \<script src=""> 标签引入.js文件，如下：
<script src="1.js" type="text/javascript" ></script>
注意：如果在script标签,使用src引入了一个文件，那么当前js标签内的代码全部作废 ,不运行
理论上,script标签可以出现在页面上的任意位置在不影响JS的功能, 标签出现的位置越晚越好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 内嵌式 -->
<script type="text/javascript">
alert("内嵌式");
</script>
<!-- 外联式 -->
<script type="text/javascript" src="js/1.js">
<!-- 由于script标签引入了src， 所以，当前script标签中的代码不执行，全部作废 -->
alert("测试");
</script>
</body>
</html>
1.4JavaScript的基本语法
JS的语法规则：
- JS严格区分大小写
- 语句需要使用分号结尾
- JS中的命名规则，按照Java的标识符
- JS中的关键字不能用来命名使用， 如 function
变量
JS是弱类型语言，Java是强制类型语言
弱类型，并不是没有数据类型，而是定义变量时不需要明确类型。
- JS变量定义，关键字var； 格式：
var 变量名 = 值;
var 变量名 = 值;
//JavaScript变量是弱类型，及同一个变量可以存放不同类型的数据
//JavaScript变量可以不声明，直接使用。默认值：undefined
<script type="text/javascript">
var num = 100;
alert(num);
num = "黑马";
alert(num);
num = 3.14;
alert(num);
// 定义变量, 不指定值
var num2;
alert(num2);
</script>
1.5JS的数据类型
- 数字类型 number: 表示任意数字
- 布尔类型 boolean: 有两个值 true 和 false
- 字符串类型 string: 字符串由双引号（"）或单引号（’）声明的。JavaScript 没有字符类型
- 引用类型 object: 表示JS中的引用类型
- 空值 Null ,只有一个专用值 null，表示空，属于object类型。
- 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
- 未初始化 undefined: 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是undefined。
写程序, 使用JS关键字typeof(变量)显示出变量的类型
代码演示:
<script type="text/javascript">
var num = 123;
alert( typeof(num) ); //number
var b = true;
alert( typeof(b) ); //boolean
var str = "hello";
alert( typeof(str) ); //string
1
2
3
4
5
6
7
8
9
10
北京市昌平区建材城西路金燕龙办公楼一层 电话:400-618-9090 author:李科霈
JS的三种输出方式
window.alert(”)，弹框效果，window可省略。弹出比较突然，用户的体验不好，基本用来测试代码使用
console系列，会在控制台（一般使用F12键打开）输出内容，开发时会经常使用
document.write()，直接在页面上输出内容
运算符
var date = new Date();
alert( typeof(date) ); //object
var n = null;
alert( typeof(n)); // objcet
var u;
alert( typeof(u)); //undefined
// 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
alert(undefined == null); // true
</script>
1.5JS的三种输出方式
- window.alert(”)，弹框效果，window可省略。弹出比较突然，用户的体验不好，基本用来测试代码使用
<script type="text/javascript">
/*
* window.alert() 把小括号里的内容，以弹窗的方式显示出来
* window是BOM对象，指的是整个浏览器，可以省略不写
*/
window.alert('浏览器弹框显示');
alert("浏览器弹框显示");
</script>
- console系列，会在控制台（一般使用F12键打开）输出内容，开发时会经常使用
<script>
console.log('控制台.日志()');
console.warn('控制台.警告()');
console.error('控制台.错误()');
</script>
- document.write()，直接在页面上输出内容
<script>
/*
* document 指的是我们所写的HTML文档
* write() 把小括号里的内容输出到页面上
*/
document.write('页面显示内容');
</script>
1.6全局性函数
直接写函数名调用即可
<script type="text/javascript">
/*
* 函数,全局性函数
* 直接写函数名调用即可
* 字符串转成数字
* parseInt("字符串") 返回结果number
* Integer.parseInt
*/
var num = parseInt("5.5");
alert(num+1);
</script>
1.7运算符
算术运算符 | 赋值运算符 | 比较运算符 | 逻辑运算符
JavaScript运算符与Java运算符基本一致。
- 算术运算符：+ ，- ，* ，/ ，% ，++ ，–
- 赋值运算符：= ，+= ，-= ，*= ，/=，%=
- 比较运算符：== ，=== ，!= ，> ，<，>=，<=
- 逻辑运算符：&& ， || ，!
代码演示:
- +字符串连接， 减， 乘，除
==与===的区别
<script type="text/javascript">
//+字符串连接, 减， 乘，除
var num = "5";
console.log(num + "2"); //52
console.log(num - 2); // 3
console.log(num * 2); // 10
console.log(num / 2); // 2.5
/*
==与===的区别
==运算符： 只比较值是否相等，值相等 就为 true
===运算符：比较值与数据类型是否都相等，都相等就为 true
*/
if(5 === "5"){
console.log("相等");
} else {
console.log("不相等");
}
</script>
1.8Boolean布尔类型运算
JS中的布尔类型运算 与 java不同：
- 数字类型：非0 就是true
- 字符串类型：非"" 就是true；长度>0 就是true
<script type="text/javascript">
// var b = 1;
var b = "hello";
if(b){
console.log("真的");
} else {
console.log("假的");
}
</script>
1.9JS的流程控制语句
JS的流程控制语句 与 java一样。
js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致，此处不再一一阐述。
<script type="text/javascript">
//js格式
for(var i=0; i<5; i++){
console.log(i);
}
</script>
2.0函数（重要）
js的函数：就是方法，是js非常重要的组成部分，js最常用的函数的定义方式有两种：
普通函数
//定义函数
/*参数列表,定义变量 var,不要写;
数据类型都是var来表示，所以函数
定义时 没有返回值类型*/
function 函数名(参数列表){
js逻辑代码
//return 函数的返回值,写return就返回,不写就不返回
}
//函数调用：函数名(实际参数);
例如：求和的函数
<script type="text/javascript">
// 定义函数
function sum(a, b){
return a + b;
}
//调用函数
var num = sum(5,3);
console.log(num); //8
</script>
匿名函数
//定义匿名函数也就是没有名字的函数
function(参数列表){
js逻辑代码
}
匿名函数没有办法直接调用，一般情况下赋值使用：
//定义函数并赋值给变量：
var fn = function(参数列表){
js逻辑代码
}
//调用函数：fn(实际参数);
例如：求和输出的函数
<script type="text/javascript">
//定义匿名函数并赋值给变量
var fn = function(a, b){
console.log(a+b);
}
//通过变量名调用函数
fn(5,8);
/*
* JS中的函数,没有重载的概念
* 重载,参数列表(类型,个数,顺序)
*/
</script>
2.1事件（重要）
- 事件概述
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数。事件在 HTML 页面中定义。
事件举例：
- 鼠标点击
- 页面或图像载入
- 鼠标悬浮于页面的某个元素之上
- 在表单中选取输入框
- 提交表单
- 键盘按键
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
- 常用的事件
| 事件名 | 描述 |
|---|---|
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件—注意事件源是表单form |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 用户改变域的内容 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseup | 某个鼠标按键被松开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousemove | 鼠标被移动 |
要学习js的事件，必须要理解如下几个概念：
- 事件源：在页面中,用户可以操作的元素,称为事件源，例如：按钮,文本框, 浏览器窗口
- 事件：用户怎么操作的事件源，例如：鼠标(点击,双击,悬浮,离开), 键盘操作(按下,弹起)
- 监听器：窃听器(声音),针孔摄像头(声音,图像)
- 为事件源 安装监听器, 鼠标监听器、键盘监听器
- 只要有操作,就会被监听器捕获到,有对应的处理方式
- 监听器会自动调用处理方式
- 处理方式： 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function fn(){
alert("按钮点击");
}
function fn_blur(){
alert("失去焦点");
}
</script>
<!--
事件代码编写的步骤：
1. 为标签 绑定事件监听器(鼠标点击)，添加属性 οnclick="函数名()"
2. 编写js函数 fn()
3. 访问浏览器页面，用户点击绑定了事件的标签，进行了事件发送--被监听器捕获--调用JS函数
处理事件
-->
<input type="button" value="按钮" onclick="fn()" />
<!-- 失去焦点事件 -->
<input type="text" onblur="fn_blur()" />
</body>
</html>
二.DOM对象
2.1什么是DOM
DOM：Document Object Model 文档对象模型，定义了访问和处理 HTML 文档的标准方法。。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="#">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
要改变页面的某个元素，就需要获得对 HTML 文档中所有元素进行访问的入口。访问入口 通过文档对象模型（DOM）获得，DOM提供了 HTML 元素进行添加、移动、改变或移除的方法和属性。
2.2DOM文档对象的API
浏览器加载整个HTML文档形成Document 对象，Document 对象可以访问和操作HTML文档中的所有元素。
元素的操作 Document
- 元素的获取
- 根据id获得一个元素：getElementById(id属性值)
- 根据标签名称获得多个元素：getElementsByTagName(标签名称)
- 根据name属性获得多个元素：getElementsByName(name属性值)
- 根据class属性获得多个元素：getElementsByClassName(class属性值)
元素的操作 Element
- 元素的获取
- 获取当前元素父节点元素：属性 parentElement
- 元素的添加、移除、移动(替换)、克隆、
- 判断当前元素是否有子节点元素：hasChildNodes()
- 删除当前元素的子节点元素：removeChild(子元素)
- 替换当前元素的子节点元素：replaceChild(新节点, 旧节点)
- 克隆当前元素节点：cloneNode(boolean值是否同时克隆子节点)
- 创建一个新节点元素：createElement(标签名)
- 添加当前元素的子节点元素(在所有子元素末尾添加)：appendChild(子元素)
- 插入当前元素的新子节点元素(在指定的子元素前面 插入新元素)：insertBefore(原有子元素, 新元素)
属性的操作 Attribute
- 获取某个属性：元素.属性名
- 获得属性的值：getAtrribute(属性名)
- 设置属性的值：setAtrribute(属性名, 属性值)
- 删除某个属性：removeAtrribute(属性名)
- 设置标签样式：属性 style
文本的操作 Text
- 获取某个属性：元素.属性名
- 标签体的获取与设置
- 识别自动解析HTML标签：属性 innerHTML
- 不识别HTML标签，纯文本：属性 innerText
2.3DOM操作练习
getElementById
<script type="text/javascript">
// 需求1：输出 id为tid 标签的value属性值
function fn1() {
//1. 根据id获得一个元素：getElementById(id属性值)
var element = document.getElementById("tid");
//2. 获取value属性值并输出
console.log(element.value);
}
// 需求2：输出 id为tid 标签的type属性值
function fn2() {
//1. 根据id获得一个元素：getElementById(id属性值)
var element = document.getElementById("tid");
//2. 获取value属性值并输出
console.log(element.type);
}
</script>
getElementsByTagName
<script type="text/javascript">
// 需求1：获取所有的input元素,遍历value属性值
function fn1(){
//1. 使用getElementsByTagName() 获取input标签名称的多个元素
var inputs = document.getElementsByTagName("input");
//console.log(inputs);
//2. 遍历每个元素的值
for (var i=0; i<inputs.length; i++) {
var ele = inputs[i];
//console.log(ele);
console.log(ele.value);
}
}
// 需求2：输出type为text的元素的 value属性值,不包含按钮(button)
function fn2(){
//1. 获取所有input元素
var inputs = document.getElementsByTagName("input");
//2. 遍历，获取当前元素type值，判断 type=="text"
for (var i = 0; i < inputs.length; i++) {
var element = inputs[i];
if(element.type == "text"){
//3. 输出符合 type="text"元素的value属性值
console.log(element.value);
}
}
}
// 需求3：输出id为edu的下拉选框中,所有option标签的value属性值
function fn3(){
//1. 获取id为edu的标签元素 getElementById
var eduEle = document.getElementById("edu");
//2. 获取id为edu的标签元素 下 所有option标签 getElementsByTagName
var optionsEle = eduEle.getElementsByTagName("option");
//3. 遍历每个option标签的value属性值
for(var i=0; i<optionsEle.length; i++){
console.log(optionsEle[i].value);
}
}
// 需求4：输出所有下拉选框中,被选中的option标签的value属性值
function fn4(){
//1.获取所有option标签 getElementsByTagName
var optionsEle = document.getElementsByTagName("option");
//2.遍历判断每个option的selected属性是否为true, selected="selected" 代表为true
for(var i=0; i<optionsEle.length; i++){
var optionEle = optionsEle[i]; // 获取每一个option元素
if (optionEle.selected == true) {
//3.打印被选中的option标签的value属性值
console.log(optionEle.value);
}
}
}
</script>
getElementsByName
<script type="text/javascript">
//需求1: 获取所有name为tname元素的value属性值
function fn1() {
//1.获取所有name为tname的元素 getElementsByName
var elements = document.getElementsByName("tname");
//2.打印所有元素的value属性值
for (var i = 0; i < elements.length; i++) {
console.log(elements[i].value);
}
}
//需求2: 为所有name为tname的元素,添加onchange事件, 当值改变时, 输出改变的值
function fn2() {
//1.获取所有name为tname的元素
var elements = document.getElementsByName("tname");
//2.为每个元素添加添加onchange事件, 当值改变时, 输出改变的值
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
//为每个元素添加添加onchange事件
element.onchange = function() {
// this 代表当前对象
alert(this.value);
};
}
}
</script>
getElementsByClassName
<script type="text/javascript">
//需求1：所有的分选框的checked属性值,跟随总选框checked属性值
function selectAll(thisEle){
//参数thisEle用于接收 总选框元素对象。这种方式为参数传递
var fens = document.getElementsByClassName("itemSelect");
for (var i = 0; i < fens.length; i++) {
fens[i].checked = thisEle.checked;
}
}
</script>
getAttribute
<script type="text/javascript">
//需求1: 输出列表项值为吃鸡 标签的value属性值
function fn(){
//1.根据id获取列表项值为吃鸡 标签 getElementById
var element = document.getElementById("cj");
//2.使用getAttribute 获取value属性值
console.log(element.getAttribute("value"));
}
</script>
setAttribute
<script type="text/javascript">
//需求1: 为列表项值为吃鸡标签 添加的name属性值为chiji, 并获取添加后的name属性值
function fn() {
//1. 获取列表项值为吃鸡标签,getElementById
var element = document.getElementById("cj");
//2. 为元素添加name属性值为chiji , setAttribute()
element.setAttribute("name", "chiji");
//3. 获取添加后的name属性值, getAttribute()
console.log(element.getAttribute("name"));
}
</script>
innerHTML
<script type="text/javascript">
//需求1: 将id为city标签的标签体内容设置为 识别HTML标签内容<h1>海马</h1>, 并获取设置后的内容
打印
function fn1(){
//1.获取标签
var element = document.getElementById("city");
//2.为标签体内容设置为 识别HTML标签内容<h1>海马</h1>, innerHTML = 值
element.innerHTML = "<h1>海马</h1>";
//3.获取设置后的内容打印 innerHTML
console.log(element.innerHTML);
}
//需求2: 将id为city2标签的标签体内容设置为 文本内容<h1>海马</h1>, 并获取设置后的内容打印
function fn2(){
//1.获取标签
var element = document.getElementById("city2");
//2.为标签体内容设置为 文本内容<h1>海马</h1>, innerText = 值
element.innerText = "<h1>海马</h1>";
//3.获取设置后的内容打印 innerText
console.log(element.innerText);
}
</script>
hasChildNodes
<script type="text/javascript">
//需求1:查看id为edu的节点,是否含有子节点
function fn1(){
//1.获取id为edu的元素
var element = document.getElementById("edu");
//2.判断是否含有子节点 hasChildNodes()
console.log(element.hasChildNodes());
}
//需求2:查看id为tid_1的节点,是否含有子节点
function fn2(){
//1.获取id为tid_1的元素
var element = document.getElementById("tid_1");
//2.判断是否含有子节点 hasChildNodes()
console.log(element.hasChildNodes());
}
</script>
removeChild
<script type="text/javascript">
//需求1:删除id为bj的节点
function fn1(){
//JS中删除节点的思想: 使用父节点元素来把当前节点删除
//1. 获取当前节点
var bjEle = document.getElementById("bj");
//2. 获取当前节点的父节点元素
var parentElement = bjEle.parentElement;
//3. 使用父节点把当前节点删除
parentElement.removeChild(bjEle);
}
//需求2:删除value为shanghai的节点
function fn2(){
//由于value为shanghai的节点, 不便于直接获取,所以采用父节点的方式获取
//1.获取id为city的节点
var parentEle = document.getElementById("city");
//2.获取value为shanghai的子节点
var lis = parentEle.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
var li = lis[i]; //获取li节点
if(li.getAttribute("value") == "shanghai"){
//3.删除value为shanghai的节点
parentEle.removeChild(li);
// 索引位置-1
i--;
}
}
}
</script>
replaceChild 与 cloneNode
<script type="text/javascript">
//需求1:需求1:使用吃鸡节点 替换 重庆节点, 实现节点的移动
function fn1() {
//替换节点的思想: 通过父节点 来完成指定的子节点替换
//1. 获取替换后的新节点, 吃鸡节点
var cjEle = document.getElementById("cj");
//2. 获取替换前的旧节点, 重庆
var cqEle = document.getElementById("cq");
//3. 获取重庆的父节点
var parent = cqEle.parentElement;
//4. 通过父节点, 使用吃鸡节点 替换 重庆节点 replaceChild(newElement, oldELement)
parent.replaceChild(cjEle, cqEle);
}
//需求2:使用吃鸡节点 替换 重庆节点, 实现节点的克隆
function fn2() {
//替换节点的思想: 通过父节点 来完成指定的子节点替换
//1. 获取替换后的新节点, 吃鸡节点,克隆吃鸡节点
var cjEle = document.getElementById("cj");
var cloneNode = cjEle.cloneNode(true);
//2. 获取替换前的旧节点, 重庆
var cqEle = document.getElementById("cq");
//3. 获取重庆的父节点
var parent = cqEle.parentElement;
console.log(parent);
console.log(cloneNode);
console.log(cqEle);
//4. 通过父节点, 使用克隆的吃鸡节点 替换 重庆节点 replaceChild(newElement,oldELement)
parent.replaceChild(cloneNode, cqEle);
}
</script>
createElement 与 appendChild
<script type="text/javascript">
//需求一: 增加城市节点<li id='tj' value='tianjin'>天津</li>, 放置到city下
function fn() {
//添加新节点的思路: 创建新节点, 找到新节点需要放置的位置，进行添加
//1. 创建新节点添加 createElement(标签名)
var liEle = document.createElement("li"); //<li></li>
//添加节点属性、文本值
liEle.setAttribute("id","tj"); //<li id='tj'></li>
liEle.setAttribute("value","tianjin"); //<li id='tj' value='tianjin'></li>
liEle.innerText = "天津"; //<li id='tj' value='tianjin'>天津</li>
console.log(liEle);
//2. 找到城市下拉选框 city
var cityEle = document.getElementById("city");
//3. 进行新节点添加
cityEle.appendChild(liEle);
}
</script>
insertBefore
<script type="text/javascript">
//需求一: 在重庆节点前面插入新节点 <li id='tj' name=tianjin''>天津</li>
function fn() {
//插入新节点思路: 创建新节点, 找到要被插入的节点 在它位置前面插入新节点
//1.创建新节点
var newEle = document.createElement("li"); //<li></li>
//设置属性和文本
newEle.setAttribute("id","tj");
newEle.setAttribute("name","tianjin");
newEle.innerText = "天津";
//2.找到要被插入的节点
var cqEle = document.getElementById("cq");
var parentElement = cqEle.parentElement;
//3.通过父节点插入节点, 放置到指点节点前面 insertBefore(新节点，指点节点);
parentElement.insertBefore(newEle, cqEle);
}
</script>
2.4案例介绍
表格隔行换色
开发中，需要使用表格陈列数据，数据过多不易查看，通常使用隔行换色进行表示。
相关js函数介绍
- onload()页面加载成功触发
方式1：使用onload属性确定需要执行的函数
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//js代码在<body>之前，不能获得<body>标签体中的内容，还没有加载到
var e01 = document.getElementById("e01");
alert(e01); //打印：null
function init () {
//页面加载成功之后执行
var e02 = document.getElementById("e01");
alert(e02.value); //打印：传智播客
}
</script>
</head>
<body onload="init()">
<input type="text" name="" id="e01" value="传智播客" />
</body>
方式2：通过window.onload 设置匿名函数
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
//页面加载成功之后执行
var e02 = document.getElementById("e01");
alert(e02.value); //打印：传智播客
}
</script>
</head>
<body>
<input type="text" name="" id="e01" value="传智播客" />
</body>
this关键字
- 在函数内部this表示：当前操作的元素
案例实现
在提供html页面的基础上，编写js代码
<script type="text/javascript">
//页面加载完成事件
window.onload = function(){
//获取所有的tr标签
var trs = document.getElementsByTagName("tr");
//从2开始遍历数组
for(var i=2;i<trs.length;i++){
//索引的奇偶数判断
if(i%2==0){
trs[i].style.backgroundColor="#FFFAE8";
}else{
trs[i].style.backgroundColor="#9B70A9";
}
//定义变量,保存变化后的颜色
var color="";
//每行注册鼠标的移入事件
trs[i].onmouseover = function(){
//记录修改后的颜色
color=this.style.backgroundColor;
this.style.backgroundColor="#ccc";
}
//每行注册鼠标移出事件
trs[i].onmouseout = function(){
this.style.backgroundColor=color;
}
}
}
</script>
案例 复选框全选 / 全不选
案例介绍
开发中，经常需要对表格数据进行“批量处理”，就需要快速的对列表项进行操作，本案例我们来完成“全选和全不选”
相关js属性介绍
ele.checked 表示元素是否选中，true表示选中，false表示没有选中
例如：ele.checked = true; //设置元素被选中。
案例实现
步骤1：给复选框添加onclick事件
<input type="checkbox" onclick="selectAll(this)" >
步骤2：编写selectAll(this)处理列表项的复选框是否勾选
<script type="text/javascript">
function selectAll(check){
var checkboxs = document.getElementsByClassName("itemSelect");
var checked = check.checked;
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=checked;
}
}
</script>
案例 表单用户名验证案例
案例介绍
对用户名进行验证，要求必须填写
知识点分析
DOM操作
document.getElementById()获取页面中的标签元素
元素属性: value 表达元素的value属性值
元素属性:innerHTML 向元素体添加内容
元素属性:style 改变元素的样式
案例实现
JavaScript代码
<script type="text/javascript">
function checkForm(){
var flag = true;
var username = document.getElementById("username");
var usernameValue = username.value;
if(!usernameValue){
flag = false;
var usernameSpan = document.getElementById("usernameSpan");
usernameSpan.innerHTML="用户名必须填写";
usernameSpan.style.color="#FF0000";
//alert("用户名必须填写");
}
return flag;
}
</script>
案例 省市二级联动
案例介绍
在日常应用中，我们需要完善个人信息，“所在地”要求选择省市，当选择省时，该省对应的市将自动的更新。
案例实现
步骤1：给注册页面添加select标签
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="cityId" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
步骤2：js实现
<script type="text/javascript">
// 定义二维数组:存储省市信息
var pros = [
["朝阳","海淀","昌平"],["长春市","锦州市","吉林市"],["南京市","苏州市","徐州市"]
];
function selectCity(province){
//获取选中省份的市数组
var cityArr = pros[province];
//获取城市的select标签对象
var cityEle = document.getElementById("cityId");
//添加之前先清空option子标签
cityEle.innerHTML="";
//创建请选择的option子标签
var optionEle = document.createElement("option");
optionEle.innerHTML="----请-选-择-市----";
cityEle.appendChild(optionEle);
//遍历数组,几个元素就创建几个子option标签
for(var i = 0;i < cityArr.length;i++){
//创建子标签
var optionEle = document.createElement("option");
//设置子标签的标签体内容
optionEle.innerHTML=cityArr[i];
//添加子标签
cityEle.appendChild(optionEle);
}
}
</script>
案例 轮播图
第一天完成首页中，“轮播图”只提供一张图片进行显示。现需要编写程序，完成自动切换图片功能。
案例分析
- 编写html页面，为页面设置加载事件onload
- 编写事件触发函数
- 获得轮播图图片
- 开启定时器，2000毫秒重新设置图片的src属性
案例实现
步骤1：为轮播图img标签添加id属性
<div style="width:100%;">
<img id="imgId" src="../img/1.jpg" width="100%" />
</div>
步骤2：编写js代码，页面加载触发指定函数
<script type="text/javascript">
var i = 1;
setInterval(function(){
var imgId=document.getElementById("imgId");
if(i<=3){
i++;
}else{
i=1;
}
imgId.src="img/"+i+".jpg";
},3000);
</script>
案例 定时弹广告
案例需求
在平日浏览网页时，页面一打开5秒后显示广告，然后5秒后再隐藏广告。
案例分析
知识点分析
- 获得或设置样式
obj.style.属性，获得指定“属性”的值。
obj.style.属性=值，给指定“属性”设置内容。
案例实现
<div id="adDiv" style="display: none;">
<img src="img/ad.jpg" />
</div>
<script type="text/javascript">
setTimeout(function(){
var adDiv = document.getElementById("adDiv");
adDiv.style.display="block"; //显示
setTimeout(function(){
adDiv.style.display="none"; //隐藏
},3000);
},3000);
</script>
三. Java加粗样式Script内置对象
JS的对象也分为内置对象和定义对象
- 例如，Java中Object、String、System属于内置对象
- 例如，自定义的Person、Student属于自定义的对象。JS的自定义对象是函数实现的
3.1 JS内置对象 String
String 对象用于处理文本（字符串）。
String 对象属性
| 属性 | 描述 |
|---|---|
| length | 字符串的长度 |
String 对象方法
| 方法 | 描述 |
|---|---|
| charAt(x) | 返回在指定位置的字符。 |
| indexOf(x) | 检索字符串。 |
| lastIndexOf(x) | 从后向前搜索字符串。 |
| split(x) | 把字符串分割为字符串数组。 |
| substring(x, y) | 提取字符串中两个指定的索引号之间的字符。 |
| substr(x) | 从起始索引号提取字符串中指定数目的字符。 |
演示代码
<script type="text/javascript">
/*
String对象
*/
var str = "abc"// typeof 输出string
var str2 = new String(str); //typeof 输出 object
//以上定义方式,都可以使用String对象的方法
var s = "a-b-c-de-FG";
//字符串的长度
//alert(s.length);
//指定索引找字符
//alert(s.charAt(1));
//字符第一次出现的索引
//alert(s.indexOf("c"));
//字符最后一次出现的索引
//alert(s.lastIndexOf("c"));
//切割字符串
/*
var strArr = s.split("-");
for(var i = 0 ; i < strArr.length;i++){
alert(strArr[i]);
} *
/
//获取索引之间的字符
//alert(s.substring(1,3));
//获取索引开始到长度的字符
//alert(s.substr(1,3));
</script>
3.2JS内置对象 Date
Date 对象用于处理日期和时间
创建 Date 对象的语法：
var myDate=new Date()
注释：Date 对象会自动把当前日期和时间保存为其初始值
Date 对象方法
| 方法 | 描述 |
|---|---|
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
演示代码:
<script type="text/javascript">
/*
* Data对象
* 创建方式直接new
*/
var date = new Date();
//拼接年月日
alert(date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日");
//获取毫秒值
alert(date.getTime());
//根据本地时间格式，把 Date 对象转换为字符串。
alert(date.toLocaleString());
</script>
3.3JS内置对象 Math
Math是数学计算的对象,此对象无需创建,直接Math.调用
Math 对象方法
| 方法 | 描述 |
|---|---|
| ceil(x) | 对数进行上舍入 |
| floor(x) | 对数进行下舍入 |
| round(x) | 把数四舍五入为最接近的整数。 |
演示代码
<script type="text/javascript">
/*
Math对象:直接调用
*/
//向上取整
alert(Math.ceil(3.14));
//向下取整
alert(Math.floor(3.14));
//四舍五入取整
alert(Math.round(3.14));
</script>
3.4 JS内置对象 Array
Array 对象，就是JS数组，用于存储多个值，存储的元素类型可以是任意类型。
创建 Array 对象的语法
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);
参数
参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。
参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被
初始化为这些值。它的 length 字段也会被设置为参数的个数。
返回值
返回新创建并被初始化了的数组。
如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。
Array 对象属性
| 属性 | 描述 |
|---|---|
| length | 设置或返回数组中元素的数目。 |
演示代码：
<script type="text/javascript">
//定义数组对象
var arr1 = new Array();
//赋值元素
arr1[0] = 1;
arr1[1] = "a";
arr1[2] = 2.2;
alert(arr1);
//定义数组对象
var arr2 = new Array(3);
//打印数组长度
alert(arr2.length);
//定义数组对象
var arr3 = new Array(3,4,5,"a",true);
alert(arr3);
//开发中最常用方式
var arr4 = [1,2,3,4,"a","b","c"];
for(var i = 0 ; i< arr4.length;i++){
alert(arr4[i]);
} /
/定义二位数组
var arr5 = [
[1,2,3],["a",4,"b"],[true,5,false]
];
//打印3
alert(arr5[0][2]);
//打印a
alert(arr5[1][0]);
//打印false
alert(arr5[2][2]);
</script>
3.5 JS内置对象 RegExp正则表达式
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
创建 RegExp 对象的语法
直接量方式创建RegExp对象语法：
var reg = /pattern/; //返回一个新的 RegExp 对象
var reg = /pattern/; //返回一个新的 RegExp 对象:
var reg = new RegExp(pattern); //返回一个新的 RegExp 对象
方括号
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [a-zA-Z0-9] | 这个字符必须是字母或者是数字 |
| [\d] | 等同于[0-9] |
| [\w] | 等同于[a-zA-Z0-9_] |
| [\D] | 等同于[^0-9] |
| [\W] | 等同于[^a-zA-Z0-9_] |
量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
RegExp 对象方法
| 方法 | 描述 |
|---|---|
| test() | 检索字符串中指定的值。返回 true 或 false。 |
定义方式: 直接定义和创建对象方式
<script type="text/javascript">
/*
正则表达式定义
1. new RegExp对象
2. 正则被定义在俩个//内
[0-9][a-z][A-Z]{5}
^匹配开头
$匹配结尾
*/
var reg = new RegExp("^[0-9]{5}$");
//正则对象方法test,测试与字符串是否匹配
var flag = reg.test("a2345");
alert(flag);
var reg1 = /^[0-9]{5}$/;
flag = reg1.test("6789 ");
alert(flag);
</script>
四.BOM对象
4.1 js的BOM概述
BOM（Browser Object Mode），浏览器对象模型(将客户端的浏览器抽象成一类对象)，是将我们使用的浏览器抽象成对象模型，例如我们打开一个浏览器，会呈现出页面，通过js提供浏览器对象模型对象我们可以模拟浏览器功
能。
例如，在浏览器地址栏输入地址，敲击回车这个过程，我们可以使用location对象进行模拟。在例如，浏览器中的前进和后退按钮，我们可以使用history对象模拟。当然除此之外，BOM对象不仅仅具备这些功能，让我们来学习
吧。
4.2 js的BOM对象
- Screen对象，Screen 对象中存放着有关显示浏览器屏幕的信息。
- Window对象（重点），Window 对象表示一个浏览器窗口或一个框架。
- Navigator对象，包含的属性描述了正在使用的浏览器
- History对象，其实就是来保存浏览器历史记录信息。
- Location对象（重点），Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
4.3 Window对象
所有浏览器都支持 Window对象。Window 对象表示浏览器中打开的窗口。
Window对象此处学习它的两个作用：
- JavaScript 消息框
- 定时器
JavaScript消息框（重点）
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框：
警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("文本")
演示代码
<html>
<head>
<script type="text/javascript">
function disp_alert() {
alert("我是警告框！！");
}
</script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="显示警告框" />
</body>
</html>
确认框:
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm("文本")
演示代码
<html>
<head>
<script type="text/javascript">
function show_confirm() {
var r=confirm("Press a button!");
if (r==true) {
alert("You pressed OK!");
} else {
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法
prompt("文本","默认值")
演示代码
<html>
<head>
<script type="text/javascript">
function disp_prompt() {
var name=prompt("请输入您的名字","Bill Gates")
if (name!=null && name!="") {
document.write("你好！" + name + " 今天过得怎么样？")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value="显示提示框" />
</body>
</html>
定时器（重点）
setTimeout() 方法
用于在指定的毫秒数后调用函数或计算表达式
语法：
var value = setTimeout(code,millisec)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需。在执行代码前需等待的毫秒数。 |
提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用setTimeout()。
演示代码
<html>
<head>
<script type="text/javascript">
function timedMsg() {
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will bedisplayed after 5 seconds.</p>
</body>
</html>
setInterval() 方法
可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
clearInterval(id_of_setinterval)
| 参数 | 描述 |
|---|---|
| id_of_setinterval | 由 setInterval() 返回的 ID 值。 |
演示代码
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var id = window.setInterval(function(){
alert("3秒")
},3000);
function fnClear(){
window.clearInterval(id);
}
</script>
</head>
<body>
<input type="button" value="点我取消定时任务" onclick="fnClear()" />
</body>
</html>
4.4 Location对象（重点）
href 属性
href是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。
因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
演示代码：
假设当前的 URL 是: http://www.baidu.com
<html>
<body>
<script type="text/javascript">
document.write(location.href);
</script>
</body>
</html>
4.5常用的全局方法
parseFloat() 方法
parseFloat 可解析一个字符串，并返回一个浮点数。是全局函数，不属于任何对象。
该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。
语法
var value = parseFloat(string)
| 参数 | 描述 |
|---|---|
| string | 必需。要被解析的字符串。 |
有返回值：返回解析后的数字。如果参数字符串的第一个字符不能被解析成为数字，则 parseFloat 返回 NaN。
提示：开头和结尾的空格是允许的。
提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。
提示：如果只想解析数字的整数部分，请使用 parseInt() 方法。
演示代码：
<script type="text/javascript">
document.write(parseFloat("10"))
document.write(parseFloat("10.00"))
document.write(parseFloat("10.33"))
</script>
parseInt() 方法
parseInt函数可解析一个字符串，并返回一个整数。是全局函数，不属于任何对象。
语法
parseInt(string, radix)
| 参数 | 描述 |
|---|---|
| string | 必需。要被解析的字符串。 |
| radix | 可选。表示要解析的数字的基数。用来完成字符串转换为指定进制的数值 |
有返回值：返回解析后的数字。
提示：只有字符串中的第一个数字会被返回。
提示：开头和结尾的空格是允许的。
演示代码
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)，实现将"19" 转换为 10进制数字
parseInt("11",2); //返回 3 (2+1)，实现将"11" 转换为 2进制数字
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
