【JavaEE进阶】 JavaScript

发布于:2024-11-27 ⋅ 阅读:(286) ⋅ 点赞:(0)

本节⽬标

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

一. 初识 JavaScript

1.JavaScript 是什么

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

发展历史

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

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

  1. 1994年,⽹景公司(Netscape)发布了Navigator浏览器0.9版。这是历史上第⼀个⽐较成熟的⽹络浏览器,轰动⼀时。但是,这个版本的浏览器只能⽤来浏览,不具备与访问者互动的能⼒. ⽹景公司急需⼀种⽹⻚脚本语⾔,使得浏览器可以与⽹⻚互动
  2. 1995年Sun公司将Oak语⾔改名为Java, 正式向市场推出, 并⼤肆宣传: ⼀次编写,到处运⾏. ⽹景公司⼼动了,决定与Sun公司结成联盟。它允许Java程序以applet(⼩程序)的形式,直接在浏览器中运⾏, 甚⾄考虑直接将Java作为脚本语⾔嵌⼊⽹⻚, 但是这样会让HTML⽹⻚太复杂了, 不得不放弃
  3. 1995年4⽉, Brendan Eich ⼊职了⽹景公司
  4. 1995年5⽉,⽹景公司做出决策,决定开发⼀⻔新的语⾔, 新的语⾔要"看上去与Java⾜够相似",但是⽐Java简单. Brendan Eich被指定为该语⾔的设计师.
  5.  对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快速上⼿

1. 在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>
</head>
<body>
    <script>
        alert("Hello JavaScript!")
        </script>
</body>
</html>

2. 运⾏浏览器

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种引⼊⽅式对⽐:

1. 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护,所以不常⽤. 

2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的jS.

3. 外部样式,html和js实现了完全的分离, 企业开发常⽤⽅式.

二、基础语法

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

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

1 变量

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

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

注意事项:

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

var name = 'zhangsan';

var age = 20;

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

var a = 10; // 数字

a = "hehe"; // 字符串

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

2. 变量名命名规则:

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

        b. 数字不能开头

        c. 建议使⽤驼峰命名

3. + 表⽰字符串拼接, 也就是把两个字符串⾸尾相接变成⼀个字符串.

4. \n 表⽰换⾏

2.数据类型

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

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

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

<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

代码⽰例:

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

 

三、 JavaScript对象

1.数组

(1) 数组定义

创建数组有两种⽅式

1. 使⽤ new 关键字创建

// Array 的 A 要⼤写

var arr = new Array();

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

var arr = [];

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

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

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

(2) 数组操作

1. 读: 使⽤下标的⽅式访问数组元素(从 0 开始)

2. 增: 通过下标新增, 或者使⽤ push 进⾏追加元素

3. 改: 通过下标修改

4. 删: 使⽤ splice ⽅法删除元素

代码⽰例:

<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>

注意:

1. 如果下标超出范围读取元素, 则结果为 undefined

2. 不要给数组名直接赋值, 此时数组中的所有元素都没了.

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

 

2.函数

(1) 语法格式

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

function 函数名(形参列表) {

        函数体

        return 返回值;

}

// 函数调⽤

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

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

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

 

(2) 关于参数个数

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

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

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

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

 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. 使⽤ 字⾯量 创建对象 [常⽤]

使⽤ { } 创建对象

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

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

使⽤对象的属性和⽅法:

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

console.log(student.name);

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

console.log(student[height]);

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

student.sayHello();

2. 使⽤ new Object 创建对象

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. 使⽤ 构造函数 创建对象

function 构造函数名(形参) {

    this.属性 = 值;

    this.⽅法 = function...

}

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

注意:

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

this 相当于 "我"

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

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⽂档中加⼊如下代码

<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库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.

下载⽅式:

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

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

⽐如:

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

</script>

2 JQuery 语法

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

基础语法

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

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

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

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

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

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

⽰例:

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

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

简洁写法:

$(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 获取到, 从⽽进⾏更复杂的交互操作.

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

事件由三部分组成:

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

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

$("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() 设置或返回表单字段的值

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

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

代码⽰例:

获取元素内容:

<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>

设置元素内容

 <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() ⽅法⽤于获取属性值.

代码⽰例

获取元素属性

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

<script>

        $(function(){

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

        console.log(href);

});

</script>

设置元素属性

 

  <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() ⽅法设置或返回被选元素的⼀个或多个样式属性

代码⽰例

获取元素属性
<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>

    $(function(){

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

    console.log(fontSize);

    });
    
</script>
设置元素属性
<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>

        $(function(){

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

});

</script>

(4) 添加元素

添加 HTML 内容

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

代码⽰例:

 

  <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 ⽅法:

  1. remove() : 删除被选元素(及其⼦元素)
  2. empty() : 删除被选元素的⼦元素。

代码⽰例:

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

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

<script>

    $(function () {

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

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

});

});

删除被选元素的⼦元素

<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 猜数字

预期效果

代码实现

<!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 表⽩墙

预期效果

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

代码实现

1. 提前准备如下HTML和CSS代码

<!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>

2. 实现提交

$(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("");

});

});

六. 总结

1. HTML是⼀种超⽂本标记语⾔, 主要⽤于⻚⾯内容的显⽰和排版.如果需要更漂亮的样式展⽰和⻚⾯效果, 需要搭配CSS和JavaScript来使⽤

2. 学习HTML主要是学习标签, HTML的标签特别多, 了解基本语法即可

3. CSS重点是学习CSS的选择器使⽤

4. JavaScript是⼀个脚本语⾔, 和Java没有关系. JQuery是⼀个JavaScript框架, 使⽤JQuery可以轻松地选择和操作HTML元素, 提⾼我们的开发效率.

5. 前端开发对于后端开发⼈员⽽⾔不是很重要, 不必花费过多时间在这个上⾯. 达到借助⽹络能阅读代码的⽔平即可.