【JavaEE进阶】 JavaScript

本节⽬标

了解什么是JavaScript, 学习JavaScript的常⻅操作, 以及使⽤JQuery完成简单的⻚⾯元素操作.

一. 初识 JavaScript

1.JavaScript 是什么

JavaScript (简称 JS), 是⼀个脚本语⾔, 解释型或即时编译型的编程语⾔. 虽然它是作为开发Web⻚⾯的脚本语⾔⽽出名，但是它也被⽤到了很多⾮浏览器环境中.

发展历史

JavaScript 之⽗布兰登 . 艾奇 (Brendan Eich)

JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后来不⼩⼼就⽕了.

1994年，⽹景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第⼀个⽐较成熟的⽹络浏览器，轰动⼀时。但是，这个版本的浏览器只能⽤来浏览，不具备与访问者互动的能⼒. ⽹景公司急需⼀种⽹⻚脚本语⾔，使得浏览器可以与⽹⻚互动
1995年Sun公司将Oak语⾔改名为Java, 正式向市场推出, 并⼤肆宣传: ⼀次编写，到处运⾏. ⽹景公司⼼动了，决定与Sun公司结成联盟。它允许Java程序以applet（⼩程序）的形式，直接在浏览器中运⾏, 甚⾄考虑直接将Java作为脚本语⾔嵌⼊⽹⻚, 但是这样会让HTML⽹⻚太复杂了, 不得不放弃
1995年4⽉, Brendan Eich ⼊职了⽹景公司
1995年5⽉，⽹景公司做出决策，决定开发⼀⻔新的语⾔, 新的语⾔要"看上去与Java⾜够相似"，但是⽐Java简单. Brendan Eich被指定为该语⾔的设计师.
对Java⼀点兴趣都没有的Brendan Eich, 为了应付公司安排的任务, 只⽤10天时间就把Javascript设计出来了.(由于设计时间太短, 语⾔的⼀些细节考虑得不够严谨，导致后来很⻓⼀段时间Javascript 写出来的程序混乱不堪)

最初在⽹景公司, 该语⾔命名为 LiveScript, 当时⽹景公司认为, Java作为当时最流⾏的编程语⾔, 带有"Java" 的名字有助于这⻔新⽣语⾔的传播, 将 LiveScript 命名为 JavaScript.

其实 Java 和 JavaScript 之间的语法⻛格相去甚远.

JavaScript 发展历史可以参考阮⼀峰⼤神的博客

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

JavaScript 和 HTML 和 CSS 之间的关系

HTML: ⽹⻚的结构(⻣)

CSS: ⽹⻚的表现(⽪)

JavaScript: ⽹⻚的⾏为(魂)

2.JavaScript快速上⼿

在HTML⽂件中, 写如下代码

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("Hello JavaScript!")
        </script>
</body>
</html>

运⾏浏览器

3 引⼊⽅式

JS有3种引⼊⽅式，语法如下表格所⽰：

|------|---------------------------------|--------------------------------------------------------------|
| 引⼊⽅式 | 语法描述 | ⽰例 |
| ⾏内样式 | 直接嵌⼊到 html 元素内部 | <input type="button" value="点我⼀下" οnclick="alert('haha')"> |
| 内部样式 | 定义<script>标签，写到 script 标签中 | <script> alert("haha"); </script> |
| 外部样式 | 定义<script >标签，通过src属性引⼊外部js⽂件 | <script src="hello.js"></script> |

3种引⼊⽅式对⽐:

内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤.
⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的jS.
外部样式，html和js实现了完全的分离, 企业开发常⽤⽅式.

二、基础语法

JavaScript 虽然⼀些设计理念和 Java 相去甚远, 但是在基础语法层⾯上还是有⼀些相似之处的.

有了 Java 的基础很容易理解 JavaScript 的⼀些基本语法.

1 变量

创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式

|-------|----------------------------------|--------------------------|
| 关键字 | 解释 | ⽰例 |
| var | 早期JS中声明变量的关键字, 作⽤域在该语句的函数内 | var name = 'zhangsan'; |
| let | ES6 中新增的声明变量的关键字, 作⽤域为该语句所在的代码块内 | let name = 'zhangsan'; |
| const | 声明常量的，声明后不能修改 | const name = 'zhangsan'; |

注意事项:

JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态), ⽐如:

javascript 复制代码

var name = 'zhangsan';

var age = 20;

随着程序的运⾏, 变量的类型可能会发⽣改变. (弱类型)

javascript 复制代码

var a = 10; // 数字

a = "hehe"; // 字符串

Java是静态强类型语⾔, 在变量声明时, 需要明确定义变量的类型. 如果不强制转换, 类型不会发⽣变化.

变量名命名规则:

a. 组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）

b. 数字不能开头

c. 建议使⽤驼峰命名

- 表⽰字符串拼接, 也就是把两个字符串⾸尾相接变成⼀个字符串.
\n 表⽰换⾏

2.数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为：原始类型和引⽤类型，具体有如下类型

|-----------|----------------------------------|
| 数据类型 | 描述 |
| number | 数字. 不区分整数和⼩数. |
| string | 字符串类型.字符串字⾯值需要使⽤引号引起来, 单引号双引号均可. |
| boolean | 布尔类型. true 真, false 假 |
| undefined | 表⽰变量未初始化. 只有唯⼀的值 undefined. |

使⽤typeof函数可以返回变量的数据类型

javascript 复制代码

<script>
         let aa=10;
        console.log(typeof aa);
        aa="aaa"
        console.log(typeof aa);
        aa=true;
        console.log(typeof aa);
        let bb;
        console.log(typeof bb);
        </script>

3. 运算符

JavaScript 中的运算符和 Java ⽤法基本相同

|---------|------------------------------------------------------------------------------|
| 运算符类型 | 运算符 |
| 算术运算符 | + , - , * , / , % |
| ⾃增⾃减运算符 | ++ , -- |
| 赋值运算符 | = , += , -= , *= , /= , %= |
| ⽐较运算符 | • < , > , <= , >= , != , !== • == ⽐较相等(会进⾏隐式类型转换) • === ⽐较相等(不会进⾏隐式类型转换) |
| 逻辑运算符 | && , || , ! |
| 位运算符 | • & 按位与 • | 按位或 • ~ 按位取反 • ^ 按位异或 |
| 移位运算符 | • << 左移 • >> 有符号右移(算术右移) • >>> ⽆符号右移(逻辑右移) |
| 三元运算符 | 条件表达式 ? true_value : false_value |

代码⽰例:

javascript 复制代码

  <script>
        let aa=10;
        let bb="10";
        console.log("aa==bb",aa==bb);
        console.log("aa===bb",aa===bb);
         </script>

三、 JavaScript对象

1.数组

(1）数组定义

创建数组有两种⽅式

使⽤ new 关键字创建

javascript 复制代码

// Array 的 A 要⼤写

var arr = new Array();

使⽤字⾯量⽅式创建 [常⽤]

javascript 复制代码

var arr = [];

var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

注意: JS 的数组不要求元素是相同类型.

这⼀点和 C, C++, Java 等静态类型的语⾔差别很⼤. 但是 Python, PHP 等动态类型语⾔也是如此.

(2）数组操作

读: 使⽤下标的⽅式访问数组元素(从 0 开始)
增: 通过下标新增, 或者使⽤ push 进⾏追加元素
改: 通过下标修改
删: 使⽤ splice ⽅法删除元素

代码⽰例：

javascript 复制代码

<script>
        let arr = [1, 2, 'haha', false];
        //读取数组元素
        console.log(arr[0]);
        //添加数组元素
        arr[4]="sd";
        console.log(arr);

        arr[100]="cccc";
        console.log(arr.length);
        //修改数组元素
        arr[0]=10;
        console.log(arr);

        //删除数组元素
        arr.splice(1,1);
        console.log(arr);//第一个下标为开始删除的下标，第二个参数为删除的个数
 </script>

注意:

如果下标超出范围读取元素, 则结果为 undefined
不要给数组名直接赋值, 此时数组中的所有元素都没了.

相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了.

2.函数

(1）语法格式

// 创建函数 / 函数声明 / 函数定义

function 函数名(形参列表) {

函数体

return 返回值;

}

// 函数调⽤

函数名(实参列表) // 不考虑返回值

返回值 = 函数名(实参列表) // 考虑返回值

函数定义并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次.
调⽤函数的时候进⼊函数内部执⾏, 函数结束时回到调⽤位置继续执⾏. 可以借助调试器来观察.
函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤)

(2）关于参数个数

实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配

如果实参个数⽐形参个数多, 则多出的参数不参与函数运算

javascript 复制代码

sum(10, 20, 30); // 30

如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined

javascript 复制代码

 sum(10); // NaN, 相当于 num2 为 undefined.

JS 的函数传参⽐较灵活, 这⼀点和其他语⾔差别较⼤. 事实上这种灵活性往往不是好事.

(3) 函数表达式

另外⼀种函数的定义⽅式

var add = function() {

var sum = 0;

for (var i = 0; i < arguments.length; i++) {

sum += arguments[i];

}

return sum;

}

console.log(add(10, 20)); // 30

console.log(add(1, 2, 3, 4)); // 10

console.log(typeof add); // function

此时形如 function() { } 这样的写法定义了⼀个匿名函数, 然后将这个匿名函数⽤⼀个变量来表

⽰.

后⾯就可以通过这个 add 变量来调⽤函数了.

JS 中函数是⼀等公⺠, 可以⽤变量保存, 也可以作为其他函数的参数或者返回值.

3.对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象，每个对象中包含若⼲的属性和⽅法.

属性: 事物的特征.
⽅法: 事物的⾏为.

JavaScript 的对象和 Java 的对象概念上基本⼀致. 只是具体的语法表项形式差别较⼤.

1. 使⽤字⾯量创建对象 [常⽤]

使⽤ { } 创建对象

javascript 复制代码

 let student={
            name:"chenjie",
            height:180,
            age:18,
            sayHello: function() {
                console.log("hello");
            }

        }
        console.log(student);

使⽤ { } 创建对象
属性和⽅法使⽤键值对的形式来组织.
键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆
键和值之间使⽤ : 分割.
⽅法的值是⼀个匿名函数.

使⽤对象的属性和⽅法:

1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 " 的 "

javascript 复制代码

console.log(student.name);

2. 使⽤ [ ] 访问属性 , 此时属性需要加上引号

javascript 复制代码

console.log(student[height]);

3. 调⽤⽅法 , 别忘记加上 ()

javascript 复制代码

student.sayHello();

2. 使⽤ new Object 创建对象

javascript 复制代码

var student = new Object(); // 和创建数组类似

student.name = "蔡徐坤";

student.height = 175;

student['weight'] = 170;

student.sayHello = function () {

    console.log("hello");

}

console.log(student.name);

console.log(student['weight']);

student.sayHello();

注意, 使⽤ { } 创建的对象也可以随时使⽤ student.name = "蔡徐坤"; 这样的⽅式来新增属性.

3. 使⽤构造函数创建对象

javascript 复制代码

function 构造函数名(形参) {

    this.属性 = 值;

    this.⽅法 = function...

}

var obj = new 构造函数名(实参);

注意:

在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象.
构造函数的函数名⾸字⺟⼀般是⼤写的.
构造函数的函数名可以是名词.
构造函数不需要 return
创建对象的时候必须使⽤ new 关键字.

this 相当于 "我"

使⽤构造函数重新创建猫咪对象

javascript 复制代码

function Cat(name, type, sound) {

    this.name = name;

    this.type = type;

    this.miao = function () {

        console.log(sound); // 别忘了作⽤域的链式访问规则

    }

}
var mimi = new Cat('咪咪', '中华⽥园喵', '喵');

var xiaohei = new Cat('⼩⿊', '波斯喵', '猫呜');

var ciqiu = new Cat('刺球', '⾦渐层', '咕噜噜');

console.log(mimi);

mimi.miao();

四、JQuery

W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:

⽹⻚内容
⽹⻚结构
⽹⻚样式

但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率, 它提供的 API 易于使⽤且兼容众多浏览器，这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单.

JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

1 引⼊依赖

使⽤JQuery需要先引⼊对应的库

在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码

javascript 复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址: https://releases.jquery.com/

其中， src 属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库提供的⼀个统⼀资源定位符.

如果需要使⽤其他版本的JQuery, 可以在官⽹进⾏下载

Jquery官⽅共提供了4种类型的JQuery库

uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)

minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)

slim: 精简瘦⾝版, 没有Ajax和⼀些特效

slim minified : slim 的压缩版

开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.

下载⽅式:

通过浏览器访问上述连接
右键 -> 另存为.... 保存到本地, 放在项⽬中即可.

也可以从其他CDN上下载引⽤JQuery

⽐如:

javascript 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">

</script>

2 JQuery 语法

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作

基础语法

javascript 复制代码

 $(selector).action()

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
Selector 选择器, ⽤来"查询"和"查找" HTML 元素
action 操作, 执⾏对元素的操作

JQuery 的代码通常都写在 document ready 函数中.

document：整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.

这是为了防⽌⽂档在完全加载（就绪）之前运⾏ jQuery 代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

javascript 复制代码

 $(document).ready(function(){
            alert("页面加载完成");
        });

⽰例:

javascript 复制代码

<body>
    <button type="button">点我消失</button>
    
    <script>
       $(document).ready(function(){
        $("button").click(function(){
            $(this).hide();
        })
       });
    </script> 
    
</body>

给按钮添加了click事件, 点击后元素消失.

简洁写法:

javascript 复制代码

$(function(){

// jQuery functions go here

});

3 JQuery 选择器

我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作.

JQuery选择器基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器.

jQuery 中所有选择器都以 $ 开头：$().

|-------------------|-------------------------------------|
| 语法 | 描述 |
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| S("p") | 所有<p> 元素 |
| $("p:first") | 选取第一个<p>元素 |
| $("p:last") | 最后一个<p>元素 |
| $(".box") | 所有 class="box"的元素 |
| S("#box") | id="box"的元素 |
| $(".intro .demo") | 所有 class="intro" 且 class="demo" 的元素 |
| $("p .intro") | 选取 class 为 intro 的<p>元素 |
| $("ul li:first") | 选取第一个<ul>元素的第一个 <li> 元素 |
| $(":input") | 所有<input> 元素 |
| $(":text") | 所有 type="text"的<input>元素 |
| $(":checkbox") | 所有 type="checkbox"的<input> 元素 |

4 JQuery事件

JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏更复杂的交互操作.

浏览器就是⼀个哨兵, 在侦查敌情(⽤⼾⾏为). ⼀旦⽤⼾有反应(触发具体动作), 哨兵就会点燃烽⽕台的狼烟(事件), 后⽅就可以根据狼烟来决定下⼀步的对敌策略.

事件由三部分组成:

事件源: 哪个元素触发的
事件类型: 是点击, 选中, 还是修改?
事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数.

例如: 某个元素的点击事件:

javascript 复制代码

$("p").click(function(){

//动作发⽣后执⾏的代码

});

常⻅的事件有:

|--------------|---------------------------------|
| 事件 | 代码 |
| 文档就绪事件(完成加载) | $(document).ready(function) |
| 点击事件 | $(selector).click(function) |
| 双击事件 | $(selector).dblclick(function) |
| 元素的值发生改变 | $(selector).change(function) |
| 鼠标悬停事件 | S(selector).mouseover(function) |

5 操作元素

(1)获取/设置元素内容

三个简单的获取元素内容的JQuery⽅法

|----------|-------------------------|
| JQuery方法 | 说明 |
| text() | 设置或返回所选元素的文本内容 |
| html() | 设置或返回所选元素的内容(包括 HTML标签) |
| val() | 设置或返回表单字段的值 |

这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容.

有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取.

代码⽰例:

获取元素内容:

javascript 复制代码

<div id="test"><span>你好</span></div>

<input type="text" value="hello">

<script>

    $(document).ready(function () {

    let html = $("#test").html();

    console.log("html内容为:"+html);
    let text = $("#test").text();

    console.log("⽂本内容为:"+text);

    let inputVal = $("input").val();

    console.log(inputVal);

    });

</script>

设置元素内容

javascript 复制代码

 <div id="test"></div>

    <div id="test2"></div>

    <input type="text" value="">

<script>

    $(document).ready(function () {

    $("#test").html('<h1>设置html</h1>');

    $("#test2").text('<h1>设置text</h1>');

    $("input").val("设置内容");

});

</script>

(2)获取/设置元素属性

JQuery attr() ⽅法⽤于获取属性值.

代码⽰例

获取元素属性

javascript 复制代码

<p><a href="https://www.baidu.com" id="baidu">百度</a></p>

<script>

        $(function(){

        let href = $("p a").attr("href")

        console.log(href);

});

</script>

设置元素属性

javascript 复制代码

  <p><a href="https://www.baidu.com" id="baidu">百度</a></p>

<script>

    $(function(){

        $("p a").attr("href","https://www.jingdong.com")

        console.log($("p a").attr("href"));

});

(3）获取/返回css属性

css() ⽅法设置或返回被选元素的⼀个或多个样式属性

代码⽰例

获取元素属性

javascript 复制代码

<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>

    $(function(){

    let fontSize = $("div").css("font-size");

    console.log(fontSize);

    });
    
</script>

设置元素属性

javascript 复制代码

<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>

        $(function(){

        $("div").css("font-size","24px");

});

</script>

(4) 添加元素

添加 HTML 内容

append() : 在被选元素的结尾插⼊内容
prepend() : 在被选元素的开头插⼊内容
after() : 在被选元素之后插⼊内容
before() : 在被选元素之前插⼊内容

代码⽰例:

javascript 复制代码

  <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    
    <img src="DH.jpg" >
    
    <script>
    
    $(function () {
    
    $("ol").append("<li>append</li>");
    
    $("ol").prepend("<li>prepend</li>");
    
    $("img").before("图⽚前插⼊");
    
    $("img").after("图⽚后插⼊");
    
    });
    
    </script>

(5) 删除元素

删除元素和内容，⼀般使⽤以下两个 jQuery ⽅法：

remove() : 删除被选元素（及其⼦元素）
empty() : 删除被选元素的⼦元素。

代码⽰例:

javascript 复制代码

    <div id="div1">我是⼀个div</div>

    <button>删除 div 元素</button>

<script>

    $(function () {

        $('button').click(function(){

        $('#div1').remove();

});

});

删除被选元素的⼦元素

javascript 复制代码

<ol>

        <li>List item 1</li>
        
        <li>List item 2</li>
        
        <li>List item 3</li>
        
</ol>
        
        <button>删除列表元素</button>
        
        <script>
        
        $(function () {
        
        $('button').click(function(){
        
                 $('ol').empty();
        
                });
        
        });
        
        </script>

五、综合案例

1 猜数字

预期效果

代码实现

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <button type="button" id="reset">重新开始⼀局游戏</button>

<br>

请输⼊要猜的数字：<input type="text" id="number">

<button type="button" id="button">猜</button>

<br>

已经猜的次数：<span id="count">0</span>

<br>

结果：<span id="result"></span>

<script>

$(function () {

// 随机⽣成⼀个 1-100 的数字

var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数

var count = 0;

// click: 点击

// 事件驱动（Event-Drive）：只要真正发⽣了点击事件时，才执⾏该函数

$("#button").click(function () {

count++;

$("#count").text(count);

var userGuess = parseInt($("#number").val());

if (userGuess == guessNumber) {

$("#result").text("猜对了");

$("#result").css("color","gray");

} else if (userGuess < guessNumber) {

  $("#result").text("猜⼩了");

$("#result").css("color","blue");

} else {

$("#result").text("猜⼤了");

$("#result").css("color","red");

}

});

$("#reset").click(function(){

guessNumber = Math.floor(Math.random() * 100) + 1

count = 0;

$("#count").text(count);

$("#result").text("");

$("#number").val("");

});



});

</script>
</body>
</html>

2 表⽩墙

预期效果

需求: 按要求在⽂本框中输⼊内容, 点击提交按钮, 输⼊内容显⽰在⻚⾯下⽅.

代码实现

提前准备如下HTML和CSS代码

html 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

<style>

    * {

    margin: 0;

    padding: 0;

    }

    .container {

    width: 400px;

    margin: 0 auto;

    }

    h1 {

    text-align: center;

    padding: 20px 0;

    }

    p {

    color: #666;

    text-align: center;

    font-size: 14px;

    padding: 10px 0;

    }

    .row {

    height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    }

    span {

    width: 100px;

    line-height: 40px;

    }

    .edit {

    width: 200px;

    height: 30px;

    }

    .submit {

    width: 304px;

    height: 40px;

    color: white;

    background-color: orange;

    border: none;

    }

</style>

</head>

<body>

    <div class="container">

    <h1>表⽩墙</h1>

    <p>输⼊后点击提交, 会将信息显⽰在表格中</p>

    <div class="row">

    <span>谁: </span>

    <input class="edit" type="text">

    </div>

    <div class="row">

    <span>对谁: </span>

    <input class="edit" type="text">

    </div>

    <div class="row">

    <span>说什么: </span>

    <input class="edit" type="text">

    </div>

    <div class="row">

    <input type="button" value="提交" class="submit">

    </div>

    </div>

</body>

</html>

实现提交

javascript 复制代码

$(function () {

// 给点击按钮注册点击事件

$(".submit").click(function () {

// 1. 获取到编辑框内容

var from = $('.edit:eq(0)').val();

var to = $('.edit:eq(1)').val();

var message = $('.edit:eq(2)').val();

  console.log(from + "," + to + "," + message);

if (from == '' || to == '' || message == '') {

return;

}
// 2. 构造 html 元素 

var html = '<div class="row">' + from + '对' + to + '说: ' + message +

'</div>';

// 3. 把构造好的元素添加进去

$('.container').append(html);

// 4. 同时清理之前输⼊框的内容

$(":text").val("");

});

});

六. 总结

HTML是⼀种超⽂本标记语⾔, 主要⽤于⻚⾯内容的显⽰和排版.如果需要更漂亮的样式展⽰和⻚⾯效果, 需要搭配CSS和JavaScript来使⽤
学习HTML主要是学习标签, HTML的标签特别多, 了解基本语法即可
CSS重点是学习CSS的选择器使⽤
JavaScript是⼀个脚本语⾔, 和Java没有关系. JQuery是⼀个JavaScript框架, 使⽤JQuery可以轻松地选择和操作HTML元素, 提⾼我们的开发效率.
前端开发对于后端开发⼈员⽽⾔不是很重要, 不必花费过多时间在这个上⾯. 达到借助⽹络能阅读代码的⽔平即可.

【JavaEE进阶】 JavaScript

一. 初识 JavaScript

1.JavaScript 是什么

2.JavaScript快速上⼿

3 引⼊⽅式

二、基础语法

1 变量

2.数据类型

3. 运算符

三、 JavaScript对象

1.数组

(1） 数组定义

(2） 数组操作

2.函数

(1） 语法格式

(2） 关于参数个数

(3) 函数表达式

3.对象

1. 使⽤ 字⾯量 创建对象 [常⽤]

2. 使⽤ new Object 创建对象

3. 使⽤ 构造函数 创建对象

四、JQuery

1 引⼊依赖

2 JQuery 语法

3 JQuery 选择器

4 JQuery事件

5 操作元素

(1)获取/设置元素内容

(2)获取/设置元素属性

获取元素属性

设置元素属性

(3） 获取/返回css属性

获取元素属性

设置元素属性

(4) 添加元素

(5) 删除元素

五、综合案例

1 猜数字

2 表⽩墙

六. 总结

(1）数组定义

(2）数组操作

(1）语法格式

(2）关于参数个数

1. 使⽤字⾯量创建对象 [常⽤]

3. 使⽤构造函数创建对象

(3）获取/返回css属性