Windows,虚拟机Ubuntu和开发板三者之间的NFS服务器搭建-CFANZ编程社区

HTML

HTML基础

什么是HTML

HTML(Hyper Text Markup Language),超文本标记语言.

超文本

比文本要强大. 通过链接和交互式方式来组织和呈现信息的文本形式. 不仅仅有文本, 还可能包

含图片, 音频, 或者自已经审阅过它的学者所加的评注、补充或脚注等等

标记语言

由标签构成的语言;

比如下列代码:

<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>

经过浏览器解析:

------------------------------------------------------------------------------------------------------------------------------

认识HTML标签

HTML代码是由"标签"来构成的;

<h3>我是三级标题</h3>

标签名 (body) 放到 < > 中

大部分标签成对出现. <h1> 为开始标签, </h2> 为结束标签.

少数标签只有开始标签, 称为 "单标签".

开始标签和结束标签之间, 写的是标签的内容.

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了⼀个唯⼀的标识符(身份证号码).

<h3 id="myId">我是三级标题</h3>

------------------------------------------------------------------------------------------------------------------------------

HTML文件的基本结构

<html>
    <head>
        <title>第⼀个⻚⾯</title>
    </head>
    <body>
        hello world
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)

head 标签中写页面的属性.

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题.

------------------------------------------------------------------------------------------------------------------------------

标签的层次结构

(1)父子关系;

(2)兄弟关系;

<html>
    <head>
        <title>第⼀个⻚⾯</title>
    </head>
    <body>
        hello world
    </body>
</html>

其中:

head 和 body 是 html 的子标签(html 就是 head 和 body 的⽗标签)

•

title 是 head 的子标签. head 是 title 的父标签.

•

head 和 body 之间是兄弟关系

标签之间的关系就可以构成一个DOM树;

------------------------------------------------------------------------------------------------------------------------------

HTML常见标签

1.标题标签 h1 - h6

数字越大,字体越小:

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

------------------------------------------------------------------------------------------------------------------------------

2.段落标签 p

在HTML中, 段落, 换行符, 空格都会失效, 如果需要分成段落, 需要使用专门的标签

<p>这是⼀个段落</p>
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>

注意:

p 标签描述的段落, 前面没有缩进. (未来 CSS 会学)

自动根据浏览器宽度来决定排版.

html 内容首尾处的换行, 空格均无效.

在 html 中文字之间输入的多个空格只相当于⼀个空格.

html 中直接输入换行不会真的换行, 而是相当于⼀个空格.

" ":半角的不断行的空白格;

"&ensp;":半角的空格;

"&emsp;":全角的空格;

------------------------------------------------------------------------------------------------------------------------------

3.换行标签 br

br 是 break 的缩写. 表示换行.

br 是⼀个单标签(不需要结束标签)

br 标签不像 p 标签那样带有⼀个很大的空隙.

<br/> 是规范写法. 不建议写成 <br>;

这是⼀个br标签<br/>
这是⼀个br标签<br/>
这是⼀个br标签<br/>

效果:

------------------------------------------------------------------------------------------------------------------------------

4.图片标签:img

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.

img 标签的其他属性:

width/height: 控制宽度高度. 高度和宽度⼀般改⼀个就行, 另外⼀个会等比例缩放. 否则就会图片失衡.(单位:px,表示像素)

border: 边框, 参数是宽度的像素. 但是⼀般使用 CSS 来设定

注意:

1. 属性可以有多个, 不能写到标签之前.

2. 属性之间用空格分割, 可以是多个空格, 也可以是换行.

3. 属性之间不分先后顺序.

4. 属性使用 "键值对" 的格式来表示.

------------------------------------------------------------------------------------------------------------------------------

5.超链接: a

href: 必须具备, 表示点击后会跳转到哪个页面.

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开

<a href="http://www.baidu.com">百度</a>

链接的几种形式:

外部链接: href 引用其他网站的地址

<a href="http://www.baidu.com">百度</a>

内部链接: 网站内部页面之间的链接. 写相对路径即可

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接: 使用 # 在 href 中占位

<a href="#">空链接</a>

------------------------------------------------------------------------------------------------------------------------------

表格标签

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

thead: 表格的头部区域

tbody: 表格的主体区域

table 包含 tr, tr 包含 td;

<table border="1px" cellspacing="0" width="300" cellpading="20">
        <tr>
            <td colspan="2" align="center">aaa</td>
            <!-- <td>bbb</td> -->
        </tr>
        <tr>
            <td rowspan="2" align="center">ccc</td>
            <td align="center">ddd</td>
        </tr>
        <tr>
            <!-- <td>eee</td> -->
            <td align="center">fff</td>
        </tr>
    </table>

效果:

------------------------------------------------------------------------------------------------------------------------------

表单标签

表单是让用户输入信息的重要途径.

分成两个部分:

表单域: 包含表单元素的区域. 重点是 form 标签.

表单控件: 输入框, 提交按钮等. 重点是 input 标签

------------------------------------------------------------------------------------------------------------------------------

form标签

关于 form 需要结合后端代码来进⼀步理解. 后面再详细研究.

------------------------------------------------------------------------------------------------------------------------------

input标签

type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.

name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选⼀.

value: input 中的默认值.

checked: 默认被选中. (用于单选按钮和多选按钮)

代码:

<!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>
    文本框<input type="text" name="" id=""><br/>
    密码<input type="password" name="" id=""><br/>
    文件<input type="file" name="" id=""><br/>
    邮箱<input type="email" name="" id=""><br/>
    单选按钮<input type="radio" name="gender" id="">男
    <input type="radio" name="gender" id="">女
    <input type="radio" name="gender" id="" cheked="checked">不选择<br/>
    复选框<input type="checkbox" name="" id="">篮球
    <input type="checkbox" name="" id="">足球
    <input type="checkbox" name="" id="">网球<br/>
    普通按钮<input type="button" value="我是一个按钮,可以点击"><br/>
    提交按钮<input type="submit" value="提交">
</body>
</html>

代码效果:

------------------------------------------------------------------------------------------------------------------------------

select标签

下拉菜单;

option 中定义 selected="selected" 表示默认选中;

 下拉菜单<select >
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广东</option>
        <option value="" selected="selected">西安</option>
    </select><br/>

------------------------------------------------------------------------------------------------------------------------------

textarea标签

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.

rows 和 cols 也都不会直接使用, 都是用 css 来改的.

文本域
    <textarea rows="5" cols="20"></textarea>

------------------------------------------------------------------------------------------------------------------------------

无语义标签: div&span

div 标签, division 的缩写, 含义是分割

span 标签, 含义是跨度

就是两个盒子. 用于网页布局

div 是独占一行的, 是⼀个大盒子.

span 不独占一行, 是⼀个小盒子.

<div style="height: 200px; border: 1px solid black;">我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>

效果:

综合练习:简易登录界面

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <h1>用户注册</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="" id="" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="" id="" placeholder="请输入密码"></td>
        </tr>
    </table>
    <div>
        <input type="submit" value="注册">
        <span>已有帐号?</span>
        <a href="#">登录</a>
    </div>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------

CSS

CSS介绍

CSS(Cascading Style Sheet)，层叠样式表, 用于控制页面的样式.

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

------------------------------------------------------------------------------------------------------------------------------

基本语法规范

选择器 + {⼀条/N条声明}

选择器决定针对谁修改 (找谁)

声明决定修改啥. (干啥)

声明的属性是键值对. 使用";"区分键值对, 使用":"区分键和值;

页面上的所有内容都称为"元素";

<style>
        p {
            /*设置字体颜色*/
            color: red;
            /* 设置字体大小 */
            font-size: 30px;
        }
    </style>
    <p>hello</p>

注意:

CSS 要写到 style 标签中(后面还会介绍其他写法)

style 标签可以放到页面任意位置. ⼀般放到 head 标签内.

CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换) .

------------------------------------------------------------------------------------------------------------------------------

引入方式

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>
        p {
            /*设置字体颜色*/
            color: red;
            /* 设置字体大小 */
            font-size: 30px;
        }
    </style>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <!-- 行内样式 -->
    <span style="color:green; font-size: 30px;">hello</span>
    <!-- 内部样式 -->
    <p>hello</p>
    <p style="color:blueviolet;">hello</p>
    <!-- 外部样式 -->
    <m>hello</m>
</body>
</html>

m {
    /*设置字体颜色*/
    color: yellow;
    /* 设置字体大小 */
    font-size: 30px;
}

效果:

注意:

内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常用.

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

外部样式，html和css实现了完全的分离, 企业开发常用方式

------------------------------------------------------------------------------------------------------------------------------

规范

样式大小写

虽然 CSS 不区分大小写, 我们开发时统⼀使用小写字母;

空格规范

冒号后⾯带空格

选择器和 "{" 之间也有⼀个空格

------------------------------------------------------------------------------------------------------------------------------

CSS选择器

CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性;

分为五种:

1. 标签选择器

        p {
            /*设置字体颜色*/
            color: red;
            /* 设置字体大小 */
            font-size: 30px;
        }
        span {
            color: aqua;
        }

2. class选择器

        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .blue {
            color: blue;
        }

⼀个类可以被多个标签使用, ⼀个标签也能使⽤多个类(多个类名要使用空格分割, 这种做法可以让

代码更好复用)

3. id选择器

/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
 color: red;
}

id 是唯⼀的, 不能被多个标签使用 (是和类选择器最大的区别)

4. 通配符选择器

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
 color: red;
}

5. 复合选择器

(1)空格表示后代

/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
 color: blue;
}

(2)没空格表示交集

      p.red {
            color: red;
      }

(3)逗号表示并集

        .red,.green {
            font-size: 40px;
        }

(4)">"表示相邻后代

        ul>li>a {
            color:aqua;
        }

1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选

择器的组合, 也可以是任意数量选择器的组合;

2. 不⼀定是相邻的标签, 也可以是"孙子"标签;

3. 如果需要选择多种标签, 可以使用 "," 分割, 如 p, div { } 表示同时选中p标签和div标签.

逗号前后可以是以上任意选择器, 也可以是选择器的组合.

------------------------------------------------------------------------------------------------------------------------------

常用CSS

color

表示字体颜色

.text1{
 color: red;
}

颜色有如下几种表达方式:

英文单词,如red,blue

rgb代码的颜色如rgb(255,0,0)

十六进制的颜色如#ff00ff

------------------------------------------------------------------------------------------------------------------------------

font-size

表示字体大小

.text1{
 font-size: 32px;
}

px像素; em相对尺寸(如果字体大小为16px,1em=16px);

rem相对浏览器默认字体的大小; 30%也是相对大小;

------------------------------------------------------------------------------------------------------------------------------

border

边框

.text1{
 border: 1px solid purple;
}

边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断

以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜色.

也可以拆开来设置

------------------------------------------------------------------------------------------------------------------------------

width/height

width: 设置宽度

height: 设置高度

只有块级元素可以设置宽高

块级元素是HTML标签的⼀种显⽰模式, 对应的还有⾏内元素

常见块级元素: h1-h6, p, div 等

常见行内元素: a span

块级元素独占⼀⾏, 可以设置宽⾼

行内元素不独占⼀⾏, 不能设置宽⾼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dome3</title>
    <style>
        div ,span{
            /* border: 5px black solid; */
            border-width: 1px;
            border-color: blue;
            border-style: solid;
            width: 500px;
            height: 200px;
            /* border-left-color: purple; */
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div>hello1</div>
    <span>span</span>
    <span>span1</span>
</body>
</html>

效果:

改变显⽰模式

使⽤ display 属性可以修改元素的显⽰模式.

display: block 改成块级元素 [常⽤]

display: inline 改成⾏内元素 [很少⽤]

------------------------------------------------------------------------------------------------------------------------------

padding/margin(内边距/外边距)

padding也是⼀个复合样式, 可以对四个方向分开设置

padding-top

padding-bottom

padding-left

padding-right

margin也是⼀个复合样式, 可以给四个方向都加上外边距

margin-top

margin-bottom

margin-left

margin-right

         div {
            border: 1px black solid; 
            width: 500px;
            height: 200px;
            padding: 100px;
            margin: 50px 100px 150px 200px;
            /* 外边距取两个块级元素外边距的最大值 */
         }
         html {
            padding: 100px;
         }

------------------------------------------------------------------------------------------------------------------------------

JavaScript

引入方式

JavaScript也有三种引入方式:

1. 内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常⽤. (课堂上为了方便讲解, 使用该方式)

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

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

------------------------------------------------------------------------------------------------------------------------------

基础语法

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

注意事项:

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

var name = 'zhangsan';
var age = 20;

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

var a = 10; 
a = "hehe";

2. 变量名命名规则:

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

b. 数字不能开头;

c. 建议使⽤驼峰命名;

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

4. \n 表⽰换⾏;

------------------------------------------------------------------------------------------------------------------------------

数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为：

原始类型和引⽤类型，具体有如下类型

------------------------------------------------------------------------------------------------------------------------------

运算符

------------------------------------------------------------------------------------------------------------------------------

JavaScript对象

数组

创建数组有两种⽅式

1. 使⽤ new 关键字创建

// Array 的 A 要⼤写
var arr = new Array();

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

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

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

数组操作

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

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

3. 改: 通过下标修改

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

<script>
 var arr = [1, 2, 'haha', false];
 //读取数组
 console.log(arr[0]); //1
 //添加数组元素
 arr[4] = "add"
 console.log(arr[4]);//add
 console.log(arr.length);//5, 获取数组的⻓度
 //修改数组元素
 arr[4] = "update"
 console.log(arr[4]);//update
 //删除数组元素
 arr.splice(4,1);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除的元
素个数是 1 个
 console.log(arr[4]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined
 console.log(arr.length);//4, 获取数组的⻓度
<script>

------------------------------------------------------------------------------------------------------------------------------

函数

语法格式:

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
 函数体
 return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

关于参数个数

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

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

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

------------------------------------------------------------------------------------------------------------------------------

函数表达式

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

对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象.

每个对象中包含若⼲的属性和⽅法.

属性: 事物的特征.

⽅法: 事物的⾏为.

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

1. 使用字面量创建对象 [常用]

使用"{}"创建对象.

var a = {}; // 创建了⼀个空的对象
var student = {
 name: '蔡徐坤',
 height: 175,
 weight: 170,
 sayHello: function() {
 console.log("hello");
 }
};

使⽤ { } 创建对象

属性和⽅法使⽤键值对的形式来组织.

键值对之间使⽤ ","分割. 最后⼀个属性后⾯的 , 可有可无.

键和值之间使⽤ ":" 分割.

⽅法的值是⼀个匿名函数.

使⽤对象的属性和⽅法:

        // 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();

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

function 构造函数名(形参) {
 this.属性 = 值;
 this.⽅法 = function...
}
var obj = new 构造函数名(实参);

注意:

在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象.

构造函数的函数名⾸字⺟⼀般是⼤写的.

构造函数的函数名可以是名词.

构造函数不需要 return .

创建对象的时候必须使⽤ new 关键字.

------------------------------------------------------------------------------------------------------------------------------

JQuery

引入依赖

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

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

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

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

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

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

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

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

slim minified : slim 的压缩版

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

下载⽅式:

1. 通过浏览器访问上述连接

2. 右键 -> 另存为.... 保存到本地, 放在项⽬中即可

JQuery 语法

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

$(selector).action()

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元

selector 选择器, ⽤来"查询"和"查找" HTML 元素

action 操作, 执⾏对元素的操作

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

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

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

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

例子:

    <button id="btn">点我看看</button>
    <script src="jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            console.log("文档加载完成");
            $("#btn").click(function() {
                $(this).hide();
            });
        });
    </script>

JQuery 选择器

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

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

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

JQuery事件

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

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

更复杂的交互操作.

事件由三部分组成:

1. 事件源: 哪个元素触发的

2. 事件类型: 是点击, 选中, 还是修改?

3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数

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

$("p").click(function(){
 //动作发⽣后执⾏的代码
});

操作元素

获取/设置元素内容

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

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

<script>
        $(document).ready(function () {
            console.log("文档加载完成");
            $("#btn").click(function() {
                //$(this).hide();
                //$("#content").text("我是修改后得内容 ")
                $("#content").html("<h1>我是修改后得内容</h1> ")
                $("#txt").val("修改文本框")
            });
            let content = $("#content").text();
            console.log(content);
            let content2 = $("#content").html();
            console.log(content2);
            let content3 = $("#content").val();
            console.log(content3);
        });
    </script>

获取/设置元素属性

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

let href = $("a").attr("href");
console.log(href);
$("a").attr("href","youdao.com")

获取/返回css属性

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

获取
<div style="font-size: 36px;">我是⼀个⽂本</div>
<script>
 $(function(){
 var fontSize = $("div").css("font-size");
 console.log(fontSize);
 });
</script>

设置
<div style="font-size: 36px;">我是⼀个⽂本</div>
<script>
 $(function(){
 $("div").css("font-size","24px");
 
 });
</script>

添加元素

添加 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="pic/rose.jpg">
<script>
 $(function () {
 $("ol").append("<li>append</li>");
 $("ol").prepend("<li>prepend</li>");
 
 $("img").before("图⽚前插⼊");
 $("img").after("图⽚后插⼊");
 });
</script>

删除元素

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

1. remove() : 删除被选元素（及其⼦元素）

2. empty() : 删除被选元素的⼦元素。

<div id="div1">我是⼀个div</div>
<button>删除 div 元素</button>
<script>
 $(function () {
 $('button').click(function(){
 $('#div1').remove();
 });
 });
</script>

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

综合练习

猜数字游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <button id="reset">restart the game!</button><br/>
    please enter the number you guess: <input type="text" name="" id="guessNum"><input type="button" value="guess!" id="guess"> <br/>
    The number of times it has been guessed: <span id="count">0</span> <br/>
    result: <span id="result"></span><br/>

    <script src="jquery-3.7.1.min.js"></script>
    <script>
        //generate random number
        let rightNum = Math.floor(Math.random() * 100);
        console.log(rightNum);
        let count = 0;
        $("#guess").click(function() {
            //guess count
            count++;
            $("#count").text(count);
            //guess result
            let guessNum = $("#guessNum").val();
            if(guessNum > rightNum) {
                $("#result").text("Big guess");
                $("#result").css("color", "red");
            } else if(guessNum < rightNum){
                $("#result").text("Small guess");
                $("#result").css("color", "red");
            } else {
                $("#result").text("Right!");    
                $("#result").css("color", "green");
            }
        })
        $("#reset").click(function() {
            //regenerate random number
            rightNum = Math.floor(Math.random() * 100);
            console.log(rightNum);
            count = 0;
            //reset factors
            count = 0;
            $("#count").text(count);
            $("#guessNum").val("");
            $("#result").text("");
        })
    </script>
</body>
</html>

表白墙

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
 
        function submit(){
            var from = $("#from").text();
            var to = $("#to").text();
            var say = $("#say").text();

            if(form==""||to==""||say=="") {
                alert("请检查输入内容!");
                return;
            }

            var html="<div>" + from + " 对 " + to + " 说: " + say + "</div>";
            $(".container").append(html);
            $(":text").val("");
        }
        
    </script>
</body>

</html>

Windows,虚拟机Ubuntu和开发板三者之间的NFS服务器搭建

HTML

HTML基础

什么是HTML

认识HTML标签

HTML文件的基本结构

标签的层次结构

HTML常见标签

1.标题标签 h1 - h6

2.段落标签 p

3.换行标签 br

4.图片标签:img

5.超链接: a

表格标签

表单标签

form标签

input标签

select标签

textarea标签

无语义标签: div&span

综合练习:简易登录界面

CSS

CSS介绍

基本语法规范

引入方式

规范

CSS选择器

1. 标签选择器

2. class选择器

3. id选择器

4. 通配符选择器

5. 复合选择器

常用CSS

color

font-size

border

width/height

padding/margin(内边距/外边距)

JavaScript

引入方式

基础语法

数据类型

运算符

JavaScript对象

数组

函数

语法格式:

关于参数个数

函数表达式

对象

1. 使用字面量创建对象 [常用]

2. 使⽤ new Object 创建对象

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

JQuery

引入依赖

JQuery 语法

JQuery 选择器

JQuery事件

操作元素

获取/设置元素内容

获取/设置元素属性

获取/返回css属性

添加元素

删除元素

综合练习

猜数字游戏

表白墙

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