1.JS概述
JavaScript是啥
JavaScript运行在浏览器上，使网页行为生动，是一种脚步语言。简称JS。
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。
JS与Java的区别
- JS不需要编译，写完源码之后，浏览器直接打开直接解释执行。
- JS的"目标程序"以普通文本形式保存，能使用文本编辑器打开，是“脚本语言”。
- Java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言。
JS与JSP的区别
JS：JavaScript，运行在浏览器上。
JSP：JavaServer Pages,隶属Java语言，运行在JVM（Java虚拟机）中。
2.HTML中嵌入JS代码的三种方式
第一种(事件句柄)
<!--
1.要实现的功能：用户点击以下按钮，弹出消息框
2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
3.事件句柄以HTML标签的属性存在，是在事件单词前添加一个on，例如事件单词：click，事件句
柄：onclick
4.onclick="JS代码"的执行原理：
页面打开的时候，JS代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
等这个按钮发生click事件之后，注册到onclick后面的JS代码会被浏览器自动调用。
5.使用JS代码弹出消息框：
在JS中有一个内置的对象叫作window（全部小写，可以直接拿来使用），代表的是浏览器对象。
window对象有一个函数叫作：alert，用法是：window.alert("消息");这样就可以弹窗了
6.JS中的字符串可使用单引号，也可以使用双引号。
7.JS中的一条语句结束之后分号";"可有可无。
-->
<input type="button" value="hello" onclick="window.alert('hello world')">
<input type="button" value="hello" onclick='window.alert("hello js");'>
<!-- window可以省略 -->
<input type="button" value="hello" onclick="alert('hello zhangsan');alert('hello lisi');"> 第二种（有内容的脚本块）
<!DOCTYPE html>
<html lang="en">
<!--
1.JS的脚本块在一个页面当中可以出现多次
2.JS的脚本块可以出现在任何位置
-->
<script>
window.alert("first....");//alert会阻挡当前页面加载，直到用户点击确定按钮。
</script>
<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 type="text/css">
/* css代码 */
</style>
</head>
<body>
<input type="button" value="我是一个按钮对象1">
<!-- 第二种方式：脚本块的方式 -->
<script type="text/javascript">
/*脚本块当中的程序，在页面打开的时候以自上而下的顺序依次执行
（这个代码的执行不需要事件）*/
window.alert("Hello World!");
window.alert("Hello JavaScript!"); //JS代码的单行注释
/*
JS代码的多行注释（和Java一样）
*/
</script>
<input type="button" value="我是一个按钮对象2">
</body>
</html>
<!--
/**
*
*javadoc注释，这里的注释信息会被javadoc.exe工具解析提取生成帮助文档
*/
-->第三种（无内容但有引入js脚本文件的脚本块）
<!-- 在需要的位置引入js脚本文件 -->
<script type="text/javascript" src="js/1.js"></script>
<!-- 同一个js文件可以被引入多次，但在实际开发中需求很少-->
<script type="text/javascript" src="js/1.js"></script>
<!-- 这种方式不行，不能省略 结束的script标签
<script type="text/javascript" src="js/1.js" />
-->
<!-- 若引入js脚本文件，则脚本块里写的代码(hello world)不会被执行 -->
<script type="text/javascript" src="js/1.js">hello world!</script>// 在页面打开的时候以自上而下的顺序依次执行（这个代码的执行不需要事件）
window.alert("Hello World!");
window.alert("Hello javascript");
window.alert("Hello zhangsan");3.标识符
命名规则
- 可以由字母、数字、下划线、美元符号构成。
- 首字符不能是数字。
- 不能是关键字。
- 长度上无限制。
命名规范
- 类名和接口名：首字母大写
- 变量名和方法名：第一个单词的首字母小写，第二个单词的首字母大写。（驼峰原则）
- 常量名：字母全大写，两个单词之间下划线隔开。
4.JS变量
<!--
java语言是一种强类型语言,存在编译阶段且编译期间强行固定变量的数据类型。
假设有代码：int i;则java程序编译阶段就已经确定了i变量的数据类型，该i变量的数据类型从编译阶段到变量最终释放一直都是int类型，不可能变成其他类型。
-->
<script>
/*
js是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
var 变量名;//声明变量
变量名=值;//给变量赋值
*/
var i;//在JS中，当一个变量没有手动赋值的时候，系统默认赋值undefined（具体存在值）
alert("i=" + i);//i=undefined
alert(undefined)
var k = undefined;
alert("k=" + k);//k=undefined
var a, b = 200;
alert("a=" + a);//a=undefined
alert("b=" + b);//b=200
a = true;
alert(a);//true
//一个变量没有声明/定义，不能直接访问该变量
alert(age);//语法错误：age is not defined（变量age不存在，不能这样写）
</script>按F12键，打开控制台
5.JS函数初步
<body>
<!--
java中的方法：
[修饰符列表] 返回值类型 方法名(形参列表){
方法体;
}
例如：
public static boolean login(String username,String password){
...
return true;
}
boolean loginSuccess=login("admin","123");
-->
<script type="text/javascript">
/*
1.JS中的函数，作用等同于Java语言的方法。
语法格式:
第一种方式：
function 函数名(形参列表){
函数体;
}
第二种方式:
函数名=function(形参列表){
函数体;
}
JS中的函数不需要指定返回值类型，返回什么类型都行。
*/
function sum(a, b) {//a和b都是形参且都是局部变量
alert(a + b);
}
sum(10, 20);//函数必须调用才能执行
//定义函数sayHello
sayHello = function (username) {
alert("hello " + username);
}
sayHello("zhangsan");//调用函数sayHello
</script>
<!-- 点击按钮才能调用函数 -->
<input type="button" value="hello" onclick="sayHello('lisi');">
<input type="button" value="计算10和20的和" onclick="sum(10,20);">
</body><body>
<script type="text/javascript">
/*
重载：方法名相同，形参不同（类型、个数、顺序）
重写：方法头相同，方法体不同
java中的方法有重载机制，JS中的函数能重载吗？
JS中的函数在调用过程中，参数的类型无限制，参数个数无限制，这体现JS的弱类型
*/
function sum(a, b) {
return a + b;
}
var retValue = sum(1, 2);//调用sum
alert(retValue);
var retValue2 = sum("jack");//jack赋值给a变量，b变量没有赋值，系统默认赋值undefined
alert(retValue2);//jackundefined
var retValue3 = sum();
alert(retValue3);//NaN(NaN是一个具体存在的值，该值表示不是数字。Not a Number)
var retValue4 = sum(1, 2, 2);
alert("结果=" + retValue4);//结果=3
function test1(username) {
alert("test1");
}
/*
函数名字不能重名，若函数重名，后声明的函数会覆盖之前声明的同名函数
*/
function test1() {
alert("test1 test1");
}
test1("lisi");//调用test1()函数
</script>
</body>6.全局变量和局部变量
<body>
<script type="text/javascript">
/*
全局变量：
在函数体之外声明的变量属于全局变量。
浏览器打开时声明，关闭时销毁。在这期间，全局变量会一直在浏览器的内存中，耗费内存空间。
全局变量生命周期较长，尽量少用全局变量。
局部变量：
在函数体当中声明的变量、一个函数的形参都属于局部变量。
函数执行，开辟局部变量的内存空间;函数执行结束之后，释放局部变量的内存空间
局部变量生命周期较短，尽量多用局部变量。
*/
var i = 10;//全局变量
function accessI() {
alert("i=" + i);//访问的是全局变量
}
accessI();
var username = "zhangsan";
function accesssUsername() {
var username = "lisi";//局部变量
alert("username=" + username);//就近原则：访问的是局部变量
}
accesssUsername();
alert("username=" + username);//访问的是全局变量
function accessAge() {
var age = 20;
alert("age=" + age);
}
accessAge();//age=20
// alert("age=" + age);//语法错误：age is not defined（变量age不存在，不能这样写）
function setName() {
name = "yidaihao";//当一个变量声明的时候没有使用var关键字，不管这个变量出现在哪里，都是全局变量！
}
setName();//不调用函数也行
alert("name=" + name);//name=yidaihao
</script>
</body>7.JS数据类型
<body>
<script type="text/javascript">
/*
1.JS中，在赋值时，每一个数据都有数据类型。
2.JS中的数据类型：
原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
3.ES规范（ECMAScript规范），在ES6之后，又基于以上的6种类型之外添加了一种新的类型。Symbol
4.JS有一个运算符叫做typeof，可以动态的获取程序在运行阶段变量的数据类型。
typeof运算符的语法格式：
typeof 变量名
typeof运算符的运算结果是以下6个小写字符串之一：
"undefined"
"number"
"string"
"boolean"
"object"
"function"
5.在JS当中比较字符串是否相等使用"=="完成，没有equals
*/
//两个数字求和函数
function sum(a, b) {
if (typeof a == "number" && typeof b == "number") {
return a + b;
}
alert(a + "," + b + "必须都为数字！");
}
var retValue = sum(1, 2);
alert(retValue);//3
var retValue2 = sum(true, "abc");
alert(retValue2);//undefined
var i;
alert(typeof i);//"undefined"
var k = 10;
alert(typeof k);//"number"
var f = "abc";
alert(typeof f);//"string"
var d = null;
alert(typeof d);//"object" null属于Null类型，但是typeof运算符的结果"object"
var flag = false;
alert(typeof flag);//"boolean"
var obj = new Object();
alert(typeof obj);//"object"
function sayHello() {
}
alert(typeof sayHello);//"function"
</script>
</body>Undefined类型
<body>
<script type="text/javascript">
/*
1.Undefined类型只有undefined这一个值
2.系统默认赋值undefined
3.手动赋值undefined
*/
var i;//undefined
var j = undefined;//undefined
var k = "undefined";//"undefined"
alert(i == j);//true
alert(i == k);//false
</script>
</body>Number类型
<body>
<script type="text/javascript">
/*
1.Number类型包括哪些值？
数字(整数、小数、无穷大Infinity)
不是数字(NaN)
2.isNaN()函数
3.parseFloat()函数：转化为数字
4.parseInt()函数:转化为数字，结果取整数部分
5.Math.ceil()函数：Math类下的ceil()函数，向上取整
*/
var v1 = 1;
var v2 = 3.14;
var v3 = -100;
var v4 = NaN;
var v5 = Infinity;
//"number"
alert(typeof v1);
alert(typeof v2);
alert(typeof v3);
alert(typeof v4);
alert(typeof v5);
//NaN(Not a Number,不是一个数字，但属于Number类型)
var a = 100;
var b = "小明";
alert(a / b);//NaN(除法结果应该是数字，但是运算过程导致结果不是一个数字)
alert(a + b);//"100小明"(字符串拼接)
//Infinity(当除数为0的时候，结果为无穷大)
alert(10 / 0);
alert(10 / 3);//3.333333333335
//isNaN函数:is Not a Number
//结果是true表示不是一个数字，结果是false表示是一个数字
function sum(a, b) {
if (isNaN(a) || isNaN(b)) {
alert("参与运算的必须是数字！");
return;
}
return a + b;
}
alert(sum(100, 300));//400
alert(sum(100, "abc"));//参与运算的必须是数字！undefined
alert(parseFloat("3.9999"));//3.9999
alert(parseInt("3.9999"));//3
alert(Math.ceil("2.1"));//3
</script>
</body>Boolean类型
<body>
<script type="text/javascript">
/*
1.JS中的布尔类型只有两个值：true和false(这一点和java相同)
2.Boolean()函数：
语法格式：Boolean(数据)
作用：将非布尔类型转换成布尔类型
*/
var username = "jack";
if (username) {//默认调用Boolean()函数,相当于Boolean(username)
alert("欢迎您" + username);
} else {
alert("用户名不能为空！");
}
//“有”就转换成真，“没有”就转换成假
//true
alert(Boolean(1));
alert(Boolean("abc"));
alert(Boolean(Infinity));
//false
alert(Boolean(0));
alert(Boolean(""));
alert(Boolean(null));
alert(Boolean(NaN));
alert(Boolean(undefined));
for (var i = 0; i < 10; i++) {
alert("i=" + i);
}
//死循环
while (10 / 3) {
alert("hehe");
}
</script>
</body>String类型
<body>
<script type="text/javascript">
/*
1.在JS中字符串可以使用单引号，也可以使用双引号。
var s1='abc';
var s2="abc";
2.在JS中，创建字符串对象：
两种方式：
第一种：var s="abc";
第二种：var s2=new String("abc");//使用JS内置的支持类String
注意：String是一个内置的类，可以直接用，String的父类Object
3.无论小string还是打String，他们的属性和函数都是通用的。
4.JS中字符串的常用属性和方法：
常用属性：
length 获取字符串长度
常用函数：
indexOf 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
replace 替换
substr 截取子字符串
substring 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
split 拆分字符串
*/
//小string(属于原始类型String)
var x = "king";
alert(typeof x);//"string"
//大String(属于Object类型)
var y = new String("abc");
alert(typeof y);//"object"
//获取字符串长度
alert(x.length);//4
alert(y.length);//3
alert("http://www.baidu.com".indexOf("http"));//0
alert("http://www.baidu.com".indexOf("https"));//-1
alert("http://www.baidu.com".lastIndexOf("w"));//9
//判断一个字符串中是否包含某个子字符串？
alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含");//-1
//replace，想要全部替换需要正则表达式
alert("name=value%name=value%name=value%name=value".replace("%", "&"));//name=value&name=value%name=value%name=value
alert("name=value%name=value%name=value%name=value".replace("%", "&").replace("%", "&"));//name=value&name=value&name=value%name=value
//考点：substr和substring
//substr(startIndex,length)
alert("abcdefg".substr(2, 4));//cdef
//substring(startIndex,endIndex) 注意：不包含endIndex
alert("abcdefg".substring(2, 4));//cd
</script>
</body>Object类型
<body>
<script type="text/javascript">
/*
Object类型：
1. Object类型是所有类型的超类。自定义的任何类型，默认继承Object类中所有的属性和函数。
2.Object类的属性：
prototype属性（常用的，主要是这个，作用是给类动态的扩展属性和函数）
constructor属性
3.Object类的函数：
toString()
valueOf()
toLocaleString()
4.在JS中定义类，new对象：
定义类的语法：
第一种方式：
function 类名(形参){
}
第二种方式：
类名=function(形参){
}
创建对象的语法:
new 构造方法名(实参);//构造方法名和类名一致
5.在JS中，类的定义和构造函数的定义同时进行。
*/
function sayHello() {
alert("Hello!");
}
sayHello();//sayHello被当作函数来调用
var obj = new sayHello();//sayHello被当作类来new一个对象
alert(obj);//[object Object]
function User(no, name, age) {//no name age是形参，属于局部变量
//声明User类的属性（this表示当前对象）：no name age
this.no = no;
this.name = name;
this.age = age;
}
//创建对象
var u = new User("001", "zhangsan", 19);
//访问对象的属性
alert(u.no);
alert(u.name);
alert(u.age);
//访问对象的属性(第二种方式)
alert(u["no"]);
alert(u["name"]);
alert(u["age"]);
Student = function (name, major) {
this.name = name;
this.major = major;
}
var stu = new Student("yidaihao", "网络工程");
alert(stu.name + "," + stu["major"]);//yidaihao,网络工程
function Product(pno, pname, price) {
//属性
this.pno = pno;
this.pname = pname;
this.price = price;
//函数
this.getPrice = function () {
return this.price;
}
}
var pro = new Product("001", "计算机", 5000);
var pri = pro.getPrice();
alert(pri);
//可以通过prototype这个属性给类动态扩展属性和函数
//类名.prototype.函数名
Product.prototype.getPname = function () {
return this.pname;
}
//调用后期扩展的getPname()函数
var pname = pro.getPname();
alert(pname);
//给String扩展一个函数
String.prototype.suiyi = function () {
alert("这是给String类扩展的一个函数，叫做suiyi");
}
"abc".suiyi();
</script>
<!--
Java与JS之定义类对比：
Java：(强类型)
public class User{
private String username;
private String password;
public User(){
}
public User(String username){
this.name=username;
}
public User(String username,String password){
this.name=username;
this.password=password;
}
}
JS:(弱类型)
function User(username,password){
this.username=username;
this.password=password;
}
创建对象(一样)：
User u1=new User();
User u2=new User("zhangsan");
User u3=new User("zhangsan",123);
-->
</body>
null NaN undefined三者的区别
<body>
<script type="text/javascript">
//null NaN undefined数据类型不一致
alert(typeof null);//object
alert(typeof NaN);//number
alert(typeof undefined);//undefined
//null等同于undefined
alert(null == NaN);//false
alert(null == undefined);//true
alert(NaN == undefined);//false
//JS中两个比较特殊的运算符
//==(等同运算符：只判断值是否相等)
//===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
alert(null === NaN);//false
alert(null === undefined);//false
alert(NaN === undefined);//false
alert(1 == true);//true
alert(1 == true);//true
</script>
</body>8.JS的事件
- blur 失去焦点
- focus 获得焦点
- click 鼠标单击
- dblclick 鼠标双击
- keydown 键盘按下
- keyup 键盘弹起
- mouseover 鼠标经过
- mousemove 鼠标移动
- mouseout 鼠标离开
- mouseup 鼠标弹起
- submit 表单提交
- reset 表单重置
- change 下拉列表选中项改变，或文本框内容改变
- select 文本被选定
- load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）
注意
- 任何一个事件都会对应一个事件句柄（在事件前加on）。
- onXXX这个事件句柄以属性的位置存在。
8.1注册代码的两种方式
<body>
<script type="text/javascript">
//回调函数：自己写函数代码，但自己不负责调用这个函数，而是由其他程序负责调用该函数。
//sayHello函数被称为回调函数(callback函数)
function sayHello() {
alert("hello js!");
}
</script>
<!-- 注册事件的第一种方式：直接在标签中使用事件句柄 -->
<!-- 将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。
站在用户角度看sayHello函数，这是正向调用。
站在程序员角度看sayHello函数，这是回调函数。
-->
<input type="button" value="hello" onclick="sayHello()">
<!--
java中的回调函数机制：
public class MyClass{
public static void main(String[] args){
//站在用户角度看run方法，这是正向调用。
run();
}
//站在程序员角度看run方法，这是回调函数。
public static void run(){
System.out.println("run...");
}
}
-->
</body><body>
<input type="button" value="hello" id="mybtn">
<input type="button" value="hello2" id="mybtn2">
<input type="button" value="hello3" id="mybtn3">
<script type="text/javascript">
function doSome() {
alert("do some!");
}
/*
第二种注册事件的方式，是使用纯JS代码完成事件
*/
//第一步：获取这个按钮对象(document代表整个HTML页面，可以直接用，全部小写，内置对象)
var btnObj = document.getElementById("mybtn");
//第二步：给按钮对象的onclick属性赋值
btnObj.onclick = doSome;//这行代码的含义是，将回调函数doSome注册到click事件上，在click事件发生之后才会调用。
//注意：千万别加小括号
var btnObj2 = document.getElementById("mybtn2");
btnObj2.onclick = function () {//这个函数没有名字，叫做匿名函数（也是回调函数）
alert("test.....");
}
//另一种写法
document.getElementById("mybtn3").onclick = function () {
alert("test2.....");
}
</script>
</body>8.2JS代码的执行顺序
<!-- 页面加载完毕后load事件发生，会调用ready函数 -->
<body onload="ready()">
<script type="text/javascript">
/*
var btnObj = document.getElementById("btn");//返回null(因为代码执行到此处时id="btn"的元素还没有加载到内存)
btnObj.onclick = function () {
alert("hello js!");
}
*/
function ready() {
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
alert("hello js!");
}
}
</script>
<input type="button" value="hello" id="btn">
</body>简便写法（常用写法）
<body>
<script type="text/javascript">
/*
1.页面加载过程中，将回调函数a注册给load事件
2.页面加载结束后，load事件发生，执行回调函数a
3.回调函数a执行过程中，将回调函数b注册到click事件
4.用户单机hello按钮，click事件发生，执行回调函数b
*/
window.onload = function () {//回调函数a
document.getElementById("btn").onclick = function () {//回调函数b
alert("hello js!");
}
}
</script>
<input type="button" value="hello" id="btn">
</body>8.4JS代码设置节点的属性
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
var mytext = document.getElementById("mytext");
//节点对象+"."+有的属性
mytext.type = "checkbox";
}
}
</script>
<input type="text" id="mytext">
<input type="button" value="将文本框修改为复选框" id="btn">
</body>8.5捕捉回车键
<body>
<script type="text/javascript">
window.onload = function () {
var passwordElt = document.getElementById("password");
//回车键的键值是13
//ESC键的键值是27
/*
passwordElt.onkeydown = function (a) {//变量a（变量名自定义）接受浏览器传过来的“键盘事件对象”
alert(a);//[object KeyboardEvent]
}
*/
passwordElt.onkeydown = function (event) {
//“键盘事件对象”有keyCode属性，用来获取键值
if (event.keyCode == 13) {
alert("正在验证，请稍候...");
}
}
}
</script>
用户名：<input type="text">
<br>
密码：<input type="text" id="password">
</body>8.6void运算符
<body>
页面顶部
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<!--
void运算符：
语法：void(表达式),表达式任意且不能为空
运算原理：执行表达式，但不返回任何结果
javascript:void(0)
javascript不能省略，其作用是告诉浏览器后面是一段JS代码
-->
<a href="javascript:void(0)" onclick="window.alert('test code');">
既保留超链接的样式，同时用户点击超链接的时候执行一段JS代码，页面还不会跳转
</a>
<br>
<!-- 语法错误：Uncaught SyntaxError: Unexpected token ')' -->
<a href="javascript:void()" onclick="window.alert('test code');">
既保留超链接的样式，同时用户点击超链接的时候执行一段JS代码，页面还不会跳转
</a>
</body>8.7控制语句
<body>
<script type="text/javascript">
/*
1.if
2.switch
3.while
4.do...while
5.for循环
6.break
7.continue
8.for...in语句(了解)
9.with语句(了解)
*/
// 创建JS数组
var arr = [1, 3.14, "abc", true];//JS中数组元素的类型和个数都随意
//遍历数组元素
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
//for..in
for (var i in arr) {
//alert(i);//遍历数组下标
alert(arr[i]);//遍历数组元素
}
User = function (username, password) {
this.username = username;
this.password = password;
}
var u = new User("zhangsan", "123456");
//zhangsan,123456
alert(u.username + "," + u.password);
alert(u["username"] + "," + u["password"]);
with (u) {
alert(username + "," + password);
}
//for..in遍历对象的属性
for (var shuXingMing in u) {
//alert(shuXingMing);//遍历属性名
//alert(typeof shuXingMing);//shuXingMing是一个字符串
alert(u[shuXingMing]);
}
</script>
<!--
java:
public class Test{
public static void main(String[] args){
int arr[]={1,2,3,4,5};
int arr2[]=new int[5];//等同于int arr2[]={0,0,0,0,0};
String arr3[]={'a','b','c'};
String arr4[]=new String[3];//等同于String arr4[]={null,null,null};
}
}
-->
</body>9.BOM和DOM
<body>
<script type="text/javascript">
/*
1.JavaScript包括三大块：
ECMAScript：JS的核心语法（ES规范/ECMA-262标准）
DOM：Document Object Model(文档对象模型)
HTML文档相当于一颗DOM树，网页中的节点进行增删改。
BOM：Browser Object Model(浏览器对象模型)
打开一个新的浏览器窗口、关闭浏览器窗口，前进、后退，浏览器地址栏上的地址
2.DOM和BOM的区别和联系：
BOM的顶级对象是：window
DOM的顶级对象是：document
BOM包括DOM
*/
window.onload = function () {
//var btnObj = window.document.getElementById("btn");
var btnObj = document.getElementById("btn");
alert(btnObj);//[object HTMLInputElement]
}
</script>
<input type="button" value="hello" id="btn">
</body>
10.DOM编程
10.1获取文本框的value值
<body>
<script type="text/javascript">
window.onload = function () {
//获取文本框的value
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
var usernameObj = document.getElementById("username");
alert(usernameObj.value);
usernameObj.value = "zhangsan";//修改value值
}
//将第一个文本框的value赋值到第二个文本框上
document.getElementById("setBtn").onclick = function () {
document.getElementById("username2").value = document.getElementById("username1").value
}
}
</script>
<!-- blur :失去焦点-->
<!-- this代表的是当前input节点对象，this.value就是这个节点对象的value属性 -->
<input type="text" onblur="alert(this.value);">
<hr>
<input type="text" id="username">
<input type="button" value="获取文本框的value" id="btn">
<hr>
<input type="text" id="username1">
<br>
<input type="text" id="username2">
<input type="button" value="将第一个文本框的value赋值到第二个文本框上" id="setBtn">
</body>10.2innerHTML和innerText
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
background-color: pink;
border: 1px solid red;
position: absolute;
top: 100px;
left: 100px;
}
</style><body>
<!-- innerHTML和innerText：
相同点：都是设置元素内部的内容
不同点：前者会把“字符串”当做HTML代码解释执行，后者只认识字符串，不认识HTML代码
-->
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn").onclick = function () {
var divObj = document.getElementById("div1");
//divObj.innerHTML = "<font color='red'>用户名不能为空！</font>";//用户名不能为空！
divObj.innerText = "<font color='red'>用户名不能为空！</font>";//<font color='red'>用户名不能为空！</font>
}
}
</script>
<input type="button" value="设置div中的内容" id="btn">
<div id="div1"></div>
</body>10.3正则表达式
1.正则表达式：Regular Expression，主要用于字符串格式匹配。
2.正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多的是计算机编程领域，用作字符串格式匹配，如搜索方面等。
3.正则表达式实际上是一门独立的学科，大部分编程语言都支持正则表达式。如在Java语言中支持，c语言中也支持，JS中也支持。
4.常见的正则表达式符号？
- . 匹配除换行符以外的任意字符
- \w 匹配字母或数字或下划线或汉字
- \s 匹配任意的空白（格）符
- \d 匹配数字
- \b 匹配单词的开始或结束
- ^ 匹配字符串的开始
- $ 匹配字符串的结束
- \W 匹配任意不是字母，数字，下划线，汉字的字符
- \S 匹配任意不是空白（格）符的字符
- \D 匹配任意非数字的字符
- \B 匹配不是单词开头或结束的位置
- [^x] 匹配除了x以外的任意字符
- [^aeiou] 匹配除了aeiou这几个字母以外的任意字符
- * 重复零次或更多次
- + 重复一次或更多次
- ? 重复零次或一次
- {n} 重复n次
- {n,} 重复n次或更多次
- {n,m} 重复n到m次
- [1-9] 表示1到9的任意一个数字
- [A-Za-z0-9] 表示A到Z a到z 0到9中的任意一个字符
- [A-Za-z0-9-]表示A到Z a到z 0到9 -(减号)中的任意一个字符
- 正则表达式当中的小括号()优先级较高
5.简单的正则表达式：
- QQ号的正则：^[1-9][0-9]{4,}$
6.学会看懂他人编写的正则表达式:
- email正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
7.创建正则表达式对象和调用正则表达式对象的方法：
- 第一种创建方式：
- var regExp=/正则表达式/flags;
- 第二种创建方式：(使用内置支持类RegExp)
- var regExp=new RegExp("正则表达式","flags");
- 关于flags:
- g:全局匹配
- i:忽略大小写
- m:多行搜索(ES规范制定之后才支持m)。//只有前面是普通字符串的时候，m才可以使用。当前面是正则表达式的时候，m不能用。
- 正则表达式对象的test()方法：
- 正则表达式对象.test(用户填写的字符串);//结果返回true或false
- true:字符串格式匹配成功
- false:字符串格式匹配失败
<body>
<script type="text/javascript">
window.onload = function () {
//给按钮对象绑定click事件
document.getElementById("btn").onclick = function () {
var emailObj = document.getElementById("email");
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//或：var regExp=new RegExp("^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$");
var ok = regExp.test(emailObj.value);//通过调用正则表达式的test()方法判断文本框对象的属性value是否符合正则表达式
if (!ok) {
document.getElementById("emailError").innerText = "邮箱地址不合法";
}
}
//给文本框对象绑定focus事件
document.getElementById("email").onfocus = function () {
document.getElementById("emailError").innerText = "";
}
}
</script>
<input type="text" id="email">
<span style="color: red; font-size: 12px;" id="emailError"></span>
<br>
<input type="button" value="验证邮箱" id="btn">
</body>正确输入
错误输入
错误输入，出现提示错误。
文本框获得焦点
如果之前是错误输入，文本框获得焦点后，提示错误消失。
10.4扩展字符串的trim函数
<body>
<script type="text/javascript">
//低版本的IE浏览器不支持字符串的trim()函数
//想要在低版本的IE浏览器上运行trim()函数，可以自己对String类扩展一个全新的trim()函数
String.prototype.trim=function(){
return this.replace(/^\s+/,"").replace(/\s+$/,"");//去除字符串的前后空白，this代表当前字符串
}
window.onload = function () {
document.getElementById("btn").onclick = function () {
var usernameObj = document.getElementById("username");//获取文本框对象
var username = usernameObj.value.trim();//去除文本框内容的前后空白
alert("----->" + username + "<-----");//测试
}
}
</script>
<input type="text" id="username">
<input type="button" value="获取用户名" id="btn">
</body>
10.5表单验证
要求：
- 用户名不能为空
- 用户名必须在6-14位之间
- 用户名只能有数字和字母组成，不能含有其它符号(正则表达式)
- 密码和确认密码一致，邮箱地址合法。
- 统一失去焦点验证
- 错误提示信息统一,在span标签中提示，并且要求字体12号，红色。
- 文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
- 最终表单中所有项均合法方可提交
用户名
密码
邮箱地址
提交表单
完整代码
HTML
<body>
<!-- 这个表单提交应该使用post，这里为了检测，所以使用get -->
<form action="http://localhost:8080/jd/save" method="get" id="useForm">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"></td>
<td><span id="usernameError"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="pwd" id="pwd"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="pwd2"></td>
<td><span id="pwdError"></span></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email" id="email"></td>
<td><span id="emailError"></span></td>
</tr>
</table>
<input type="button" value="注册" id="submitBtn">
<input type="reset" value="重置">
</form>
</body>css
<style>
span {
color: red;
font-size: 12px;
}
</style>JS
<script type="text/javascript">
window.onload = function () {
var usernameErrorObj = document.getElementById("usernameError");//获取id="usernameError"的span标签的对象
var usernameObj = document.getElementById("username");//获取id="username"的input标签的对象
//给用户名文本框绑定blur事件
usernameObj.onblur = function () {
var username = usernameObj.value;//获取用户名
username = username.trim();//去除用户名的前后空白
if (username) {//用户名不为空
if (username.length > 6 && username.length < 14) {//用户名长度合法
var regExp = /^[A-Za-z0-9]+$/;
var ok = regExp.test(username);
if (ok) {//用户名匹配正则表达式，用户名最终合法
}
else {//用户名不匹配正则表达式
usernameErrorObj.innerText = "用户名只能由数字和字母组成";
}
} else {//用户名长度不合法
usernameErrorObj.innerText = "用户名长度必须在6-14位之间";
}
}
else {//用户名为空
usernameErrorObj.innerText = "用户名不能为空";
}
//if(username.length==0){}
//if(username===""){}
}
//给用户名文本框绑定focus事件
usernameObj.onfocus = function () {
if (usernameErrorObj.innerText) {//如果有错误提示信息则清空文本框的value值
usernameObj.value = "";//修改value值
}
usernameErrorObj.innerText = "";//清空错误提示信息
}
var pwdErrorObj = document.getElementById("pwdError");
var pwdObj = document.getElementById("pwd");
var pwd2Obj = document.getElementById("pwd2");
//给确认密码框绑定blur事件
pwd2Obj.onblur = function () {
var pwd = pwdObj.value;
var pwd2 = pwd2Obj.value;
if (pwd != pwd2) {
pwdErrorObj.innerText = "密码不一致";
}
}
//给确认密码框绑定focus事件
pwd2Obj.onfocus = function () {
if (pwdErrorObj.innerText) {
pwd2Obj.value = "";
}
pwdErrorObj.innerText = "";
}
var emailObj = document.getElementById("email");
var emailErrorObj = document.getElementById("emailError");
//给邮箱文本框绑定blur事件
emailObj.onblur = function () {
var email = emailObj.value;
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var ok = regExp.test(email);
if (!ok) {
emailErrorObj.innerText = "邮箱地址有误！";
}
}
//给邮箱文本框绑定focus事件
emailObj.onfocus = function () {
if (emailErrorObj.innerText) {
emailObj.value = "";
}
emailErrorObj.innerText = "";
}
var submitBtnObj = document.getElementById("submitBtn");//获取按钮标签的对象
//给按钮绑定click事件
submitBtnObj.onclick = function () {
//使用JS代码触发focus、blur事件，不需要人工操作
usernameObj.focus();
usernameObj.blur();
pwd2Obj.focus();
pwd2Obj.blur();
emailObj.focus();
emailObj.blur();
if (usernameErrorObj.innerText == "" && pwdErrorObj.innerText == "" && emailErrorObj.innerText == "") {
var useFormObj = document.getElementById("useForm");
useFormObj.action = "http://localhost:8080/jd2/save";//修改提交地址
useFormObj.method = "post";//修改提交方式
useFormObj.submit();//调用提交函数
}
}
}
</script>10.6复选框的全选和取消全选
<body>
<script type="text/javascript">
// window.onload = function () {
// var firstChkObj = document.getElementById("firstChk");
// firstChkObj.onclick = function () {
// var hobbys = document.getElementsByName("hobby");//根据name获取所有元素(数组)
// //判断第一个复选框的选中状态为true或false
// if (firstChkObj.checked) {
// //全选
// for (var i = 0; i < hobbys.length; i++) {
// hobbys[i].checked = true;
// }
// } else {
// //取消全选
// for (var i = 0; i < hobbys.length; i++) {
// hobbys[i].checked = false;
// }
// }
// }
// }
window.onload = function () {
var firstChkObj = document.getElementById("firstChk");
var hobbys = document.getElementsByName("hobby");//根据name获取三个复选框标签(数组)
firstChkObj.onclick = function () {
for (var i = 0; i < hobbys.length; i++) {
hobbys[i].checked = firstChkObj.checked;
}
}
//对以上数组进行遍历,三个复选框都绑定了click事件
for (var i = 0; i < hobbys.length; i++) {
hobbys[i].onclick = function () {
var checkedCount = 0;
for (var i = 0; i < hobbys.length; i++) {
if (hobbys[i].checked) {
checkedCount++;
}
}
firstChkObj.checked = (hobbys.length == checkedCount);//总数量和选中的数量相等的时候，第一个复选框选中
}
}
}
</script>
<input type="checkbox" id="firstChk"><br>
<input type="checkbox" name="hobby" value="study">学习<br>
<input type="checkbox" name="hobby" value="exercise">锻炼<br>
<input type="checkbox" name="hobby" value="travel">旅行<br>
</body>10.7获取下拉列表的value
<body>
<!-- 通过change事件获取选项中的value，this代表当前元素 -->
<select id="provinceList" onchange="alert(this.value);">
<option value="">--请选择省份--</option>
<option value="001">湖南</option>
<option value="002">湖北</option>
<option value="003">广东</option>
<option value="004">广西</option>
</select>
</body>
<body>
<!-- 通过回调函数给下拉列表标签绑定change事件 -->
<script type="text/javascript">
window.onload = function () {
var provinceListObj = document.getElementById("provinceList");
provinceListObj.onchange = function () {
alert(provinceListObj.value);//获取选项中的value
}
}
</script>
<select id="provinceList">
<option value="">--请选择省份--</option>
<option value="001">湖南</option>
<option value="002">湖北</option>
<option value="003">广东</option>
<option value="004">广西</option>
</select>
</body>实际开发中
这个List集合通过浏览器解析后就会得到一个新的关于河北省市区的下拉列表。
10.8内置对象
10.8.1Date
- 获取并输出系统时间
- 输出具有本地语言环境日期格式的时间
- 输出自定义日期格式的时间
- 获取并输出毫秒数
<body>
<!-- 关于JS中内置的支持类:Date,可以用来获取时间/日期 -->
<script type="text/javascript">
var nowTime = new Date();//获取系统时间
document.write(nowTime);//输出于HTML页面
document.write("<br>");
//转换成具有本地语言环境的日期格式
nowTime = nowTime.toLocaleString();
document.write(nowTime);
document.write("<br>");
//当以上格式不是自己想要的，可以通过日期获取年月日等信息，自定义日期格式
var t = new Date();
var year = t.getFullYear();//2022(以全格式返回年信息)
var month = t.getMonth();//月份是：0-11
//var dayOfWeek = t.day();//获取一周的第几天(0-6)
var day = t.getDate();//获取日信息
document.write(year + "年" + (month + 1) + "月" + day + "日");
document.write("<br>");
//获取毫秒数(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
var times = t.getTime();
document.write(times);//一般使用毫秒数当时间戳(timestamp)
document.write("<br>");
document.write(new Date().getTime());//一行代码获取毫秒数
</script>
</body>显示网页时钟（setInterval函数与clearInterval函数）
<body>
<script type="text/javascript">
function displayTime() {
var t = new Date();
var strTime = t.toLocaleString();
document.getElementById("timeDiv").innerText = strTime;
}
function start() {
v = window.setInterval("displayTime()", 1000);//每隔1000毫秒（1秒）调用displayTime()函数,v是全局变量
}
function stop() {
window.clearInterval(v);//终止系统时间
}
</script>
<input type="button" value="显示系统时间" onclick="start();">
<input type="button" value="终止系统时间" onclick="stop();">
<div id="timeDiv"></div>
</body>10.8.2Array
<body>
<script type="text/javascript">
//创建长度为0的数组
var arr = [];
alert(arr.length);//0
//数据类型任意
var arr2 = [1, 3.14, "abc", true];
alert(arr2.length);//4
arr2[5] = "test";//自动扩容，下标越界没问题！
document.write("<br>");
//遍历
for (var i = 0; i < arr2.length; i++) {
document.write(arr2[i] + " ");//1 3.14 abc true undefined test
}
//另一种创建数组对象的方式
var a = new Array();
alert(a.length);//0
var b = new Array(2);//2表示长度
alert(b.length);//2
var c = new Array(1, 3);
alert(c.length);//2
var a = [1, 2, 3, 9];
var str = a.join("-");//元素与元素之间用"-"相连
alert(str);//1-2-3-9
a.push(10);//在数组a的末尾添加一个元素(数组长度+1)
alert(a.join("-"));//1-2-3-9-10
var endElt = a.pop();//在数组a的末尾弹出一个元素(数组长度-1)
alert(endElt);//10
//注意：JS中的数组可以自动模拟栈的数据结构：先进后出，后进先出
//push 入栈
//pop 出栈
//反转数组
a.reverse();
alert(a.join("-"));//9-3-2-1
</script>
</body>11.BOM编程
11.1window.open和window.close
1.open和close.html
<body>
<script type="text/javascript">
// 1.BOM编程中，window对象是顶级对象，代表浏览器窗口。
// 2.window有open和close方法，可以开启窗口和关闭窗口。
</script>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');"><br>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank');"><br>
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self');"><br>
<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent');"><br>
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top');"><br><br>
<input type="button" value="测试打开新窗口" onclick="window.open('2.open.html');">
</body>2.open.html
<body>
<input type="button" value="测试关闭当前窗口" onclick="window.close();">
</body>11.2window.alert()和window.confirm()
windows.alert()用来弹出消息框，windows.confirm()用来探出确认消息框。
<body>
<script type="text/javascript">
function del() {
/*
var ok = window.confirm("亲，确认删除数据吗？");返回值true或false
if (ok) {
alert("delete data...");
}
*/
if (window.confirm("亲，确认删除数据吗？")) {
alert("delete data...");
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框！')">
<!-- 删除操作的时候要先得到用户的确认 -->
<input type="button" value="弹出确认框(删除)" onclick="del();">
</body>
11.3将当前窗口设置为顶级窗口
应用场景
页面4
<body>
<iframe src="5.html" width="500px" height="500px" frameborder="100"></iframe>
</body>页面5
<body>
<script type="text/javascript">
function setTop() {
if (window.top != window.self) {//如果当前窗口不是顶级窗口
window.top.location = window.self.location;//则将当前窗口设置为顶级窗口
//window.self.location是当前窗口的地址，即页面5的地址
//window.top.location是顶级窗口的地址，即页面4的地址
}
}
</script>
页面5
<br>
xxxx
<input type="button" onclick="setTop();" value="如果当前窗口不是顶级窗口，则将当前窗口设置为顶级窗口">
</body>打开页面4，点击内联框架中的按钮
当前窗口变为顶级窗口
11.4history和location对象
页面6
<body>
<!-- 后退相当于撤销
前进相当于恢复
-->
<a href="7.html">页面7</a>
<input type="button" value="前进" onclick="window.history.go(1)">
</body>页面7
<body>
<input type="button" value="后退" onclick="window.history.back()">
<input type="button" value="后退" onclick="window.history.go(-1)">
</body>设置浏览器地址栏上的URL
<body>
<script type="text/javascript">
function goBaidu() {
// var locationObj = window.location;
// locationObj.href = "http://www.baidu.com";//设置浏览器地址栏上的URL
window.location.href = "http://www.baidu.com";//一行代码搞定
window.location = "http://www.baidu.com";//href可省略
document.location.href = "http://www.baidu.com";//window可以换成document
document.location = "http://www.baidu.com";//href可省略
}
</script>
<input type="button" value="百度" onclick="goBaidu()">
</body>11.5通过浏览器向服务器发送请求的方法
- 直接在浏览器地址栏上输入URL，然后回车
- 提交form表单 action="xxx"
- 超链接 href="xxx"
- window.open window.open("xxx")
- window.location window.location="xxx"
- document.location document.location="xxx"
注意：以上所有的请求方式均可以携带数据给服务器，但只有通过表单提交的数据(用户填写表单内容)才是动态的。
12.JSON
- JSON是一种标准的轻量级的数据交换格式。其英文全称为JavaScript Object Notation（JavaScript对象标记），简称JSON。
- 在实际的开发中有两种数据交换格式，使用最多，一个是JSON，另一个是XML。
- JSON体积较小，易解析。目前非常流行，90%以上的系统采用JSON。系统A与系统B交换数据的话，都是采用JSON。
- XML体积较大，解析麻烦，但是语法严谨。通常银行相关的系统之间进行数据交换的话会使用XML。
XML
HTML和XML有一个父亲: SGML (标准通用的标记语言。)
12.1简单JSON对象
代码格式
var jsonObj={
"属性名":"属性值",
"属性名":"属性值",
"属性名":"属性值"
...
};
<body>
<script type="text/javascript">
// 不使用JSON对象
//定义类
Student = function (sno, sname, sex) {
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
var stu = new Student("001", "zhangsan", "男");//创建对象
alert(stu.sno + "," + stu.sname + "," + stu.sex);//访问对象的属性
//创建JSON对象(无类型对象)
var studentObj = {
"sno": "002",
"sname": "李四",
"sex": "男"
};
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);//访问JSON对象的属性
//创建JSON数组,每一个JSON数组元素就是一个JSON对象
var students = [
{ "sno": "001", "sname": "zhangsan", "sex": "男" },
{ "sno": "002", "sname": "lisi", "sex": "男" },
{ "sno": "003", "sname": "wangwu", "sex": "男" },
];
//遍历数组对象
for (var i = 0; i < students.length; i++) {
var stuObj = students[i];
alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
}
//访问JSON对象的两种方式
alert(json.username);//zhangsan
alert(json["username"]);//zhangsan
</script>
</body>面试题
问：在JS中，[]和{}有什么区别
答 ：[]是数组，{}是JSON
举例：
- JS中的数组: var arr=[1,2,3,4,5];//[]
- JSON: var jsonObj={"email":"zhangsan@123.com","age":25};//{}
- java中的数组：int arr[]={1,2,3,4,5};//{}
12.2复杂JSON对象
<body>
<script type="text/javascript">
// JSON对象的属性值的数据类型随意
// JSON对象的属性中可以嵌套JSON对象
var user = {
"usercode": "001",
"username": "张三",
"isStudent": true,//属性值是boolean类型
"address": {//属性值是一个JSON对象
"city": "北京",
"street": "大兴区",
"zipcode": "123456"
},
"hobby": ["study", "exercise", "travel"]//属性值的数据结构是一个数组
};//最外层的JSON对象的最后要加";"
//访问人名以及居住的城市
alert(user.username + "居住在" + user.address.city);
//设计JSOM格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息以及总人数信息。
var jsonStudentData={
"total":3,
"students":[//JSON数组
{"sno":"001","sname":"zhangsan","sex":"男"},
{"sno":"002","sname":"lisi","sex":"男"},
{"sno":"003","sname":"wangwu","sex":"男"}
]
};
</script>
</body>11.3eval函数
为什么要使用eval函数
- java连接数据库，查询数据库之后，将数据在java程序中拼接成JSON格式的“字符串”,将JSON格式的字符串响应到浏览器
- 也就是说java响应到浏览器上的仅仅是一个“JSON格式的字符串”,还不是JSON对象
- 可以使用eval函数，将JSON格式的字符串转换成JSON对象。本质上来说，是因为eval函数可以去掉json字符串两侧的引号。
<script type="text/javascript">
// eval函数的作用:将字符串当做一段JS代码解释并执行
window.eval("var i=100;");
alert("i=" + i);//i=100
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}";//java程序发过来的json格式的“字符串”,加转义字符是为了双引号的匹配
window.eval("var jsonObj=" + fromJava);//JSON格式的字符串转换成JSON对象
alert(jsonObj.name + "," + jsonObj.password);//访问JSON对象,在前端取数据
</script>11.4设置table的tbody
- 底层java语言中的JDBC查询数据库中的数据,发给浏览器，浏览器将JSON格式的字符串转换成JSON对象(数据)。(实际开发中是这样的，这里我们简单化，已经给出了JSON数据)
- <tbody></tbody>中本身没有数据。设计代码，使得单击按钮，就能将JSON数据显示到页面上。
<body>
<script type="text/javascript">
//有这些JSON数据
var data = {
"total": 3,
"emps": [
{ "eno": 001, "ename": "张三", "sal": "700.0" },
{ "eno": 002, "ename": "李四", "sal": "800.0" },
{ "eno": 003, "ename": "王五", "sal": "900.0" }
]
};
//希望把数据展示到table中
window.onload = function () {
var displayBtnObj = document.getElementById("displayBtn");
displayBtnObj.onclick = function () {
var emps = data.emps;//JSON数组
var html = "";
for (var i = 0; i < emps.length; i++) {
var emp = emps[i];//JSON数组每一个元素即为一个JSON对象（这里是指一个员工）
//字符串拼接
html += '<tr>';
html += '<td>' + emp.eno + '</td>';
html += '<td>' + emp.ename + '</td>';
html += '<td>' + emp.sal + '</td>';
html += '</tr>';
}
document.getElementById("emptbody").innerHTML = html;//把“字符串”当做HTML代码解释执行
document.getElementById("count").innerHTML = data.total;
}
}
</script>
<input type="button" value="显示员工信息列表" id="displayBtn">
<h2>员工信息列表</h2>
<hr>
<table border="1px" width="50%">
<thead>
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</thead>
<tbody id="emptbody">
<!--
<tr>
<td>001</td>
<td>张三</td>
<td>700.0</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>800.0</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>900.0</td>
</tr>
-->
</tbody>
</table>
总共<span id="count">0</span>条数
</body>12.jQuery
12.1初始jQuery及公式
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1]
jQuery库下载地址
第一个是生产版（已编译，已压缩）
第二个是开发版（未编译，未压缩）
jQuery cdn加速插件下载
为什么
当用户访问自己的站点时从服务器加载文件，每个服务器同时只能下载2-4个文件，这样就会降低文件的执行效率，如果多用几个服务器，这样同时加载文件的个数就是(2-4)*服务器个数，所以我们把jQuery放到CDN上就是为了提高网站加载文件的效率。
怎么做
在百度上搜索关键字，随便找一个，复制JS代码。
这里我选择了这个：<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<body>
<!-- 导入下载下来的JQuery库 -->
<script src="lib/jquery-3.6.0.js"></script>
<!-- 也可以导入JQuery cdn -->
<!-- <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<script type="text/javascript">
/*
//不使用JQuery
window.onload = function () {
document.getElementById("testjQuery").onclick = function () {
alert("hello jQuery!");
}
}
*/
window.onload = function () {
/*
$("选择器的id").事件(function(){
})
*/
$("#testjQuery").click(function () {
alert("hello jQuery!");
})
}
</script>
<a href="" id="testjQuery">点我</a>
</body>12.2选择器
<body>
<script src="lib/jquery-3.6.0.js"></script>
<script type="text/javascript">
window.onload = function () {
/*
document.getElementsByTagName("input").onclick=function(){
alert("测试标签选择器!");
}
*/
$("input").click(function () {
alert("测试标签选择器!");
})
/*
document.getElementsByClassName("a1").onclick=function(){
alert("测试类选择器！");
}
*/
$(".a1").click(function () {
alert("测试类选择器！");
})
/*
document.getElementById("a1").onclick=function(){
alert("测试id选择器！");
}
*/
$("#a1").click(function () {
alert("测试id选择器！");
})
}
</script>
<input type="button" value="测试标签选择器">
<a href="" class="a1">测试类选择器</a>
<a href="" id="a1">测试id选择器</a>
</body>公式(与css中选择器相对应)
- 标签选择器：$("标签名").事件
- 类选择器：$(".类名").事件
- id选择器:$("#类名").事件
文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
12.3事件
<style>
#divMove {
width: 500px;
height: 500px;
border: 1px solid red;
text-align: center;
}
</style><body>
<script src="lib/jquery-3.6.0.js"></script>
<!-- 要求：获取鼠标当前的一个坐标 -->
<div id="divMove">在这此区域移动鼠标试试</div>
mouse:<span id="mouseMove"></span>
<script type="text/javascript">
//当网页元素加载完毕之后，执行回调函数,等同于$(document).ready(function(){...
$(function () {
$("#divMove").mousemove(function (e) {
$("#mouseMove").text("x:" + e.pageX + "y:" + e.pageY);
})
});
</script>
</body>12.4操作DOM
//文本操作：
$("#div1").text("123");//document.getElementById("div1").innerText="123";
$("#div1").html("<strong>123</strong>");//document.getElementById("div1").innerHTML="<strong>123</strong>";
//css的操作：
$("div1").css("color","red");
//元素的显示和隐藏（隐藏本质：display: none）
$("div1").show();
$("div1").hide();
13.Web前端基础推荐教程
w3school:w3school 在线教程
菜鸟教程:菜鸟教程 - 学的不仅是技术，更是梦想！
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
