HTML简介：
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
应用程序
客户端/服务端
Client / Server CS模式
用户需要下载安装一个客户端才能使用，如：通讯工具、网游、购物软件等
特点：功能丰富、安装略微频繁、需要更新，不同平台，软件不同
为什么要学习WEB前端基础
由于JavaEE是BS模式，必须要使用浏览器渲染页面，程序都需要页面呈现教程
所以后台开发，需要知道如何将数据显示在页面中
学习WEB基础，就是学习开发网页
网页是一个文件，后缀名为 .html
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>HTML基础功能
段落代码示例：
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>链接代码示例：
<a href="https://www.runoob.com">这是一个链接</a>图像代码示例：
<img decoding="async" src="/images/logo.png" width="258" height="39" />HTML元素
| 开始标签 * | 元素内容 | 结束标签 * |
|---|---|---|
| <p> | 这是一个段落 | </p> |
| <a href="default.htm"> | 这是一个链接 | </a> |
| <br> | 换行 |
HTML元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
HTML属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
代码示例：
<a href="http://www.runoob.com">这是一个链接</a>HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
代码示例：
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>HTML表单与输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
代码示例：
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
HTML5 Video(视频)
代码示例：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video><video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
HTML5 Audio(音频)
代码示例：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
Input 类型
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
jQuery
jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是javacript(一个.js文件)。
作用：
jQuery的宗旨：”write less,do more"，意味写更少的代码，做更多的事情。
- 用于获取文档中的元素，对元素进行操作
- 更强大的选择器
- 支持链式写法
- 封装了ajax，更方便使用
使用：
1.下载jquery.js文件，导入到项目中
- 官网下载Download jQuery | jQuery
- 使用HBuilder中自带的创建
- 新建项目，在js文件夹下右键新建.js文件，选择jQuery，修改名称
2.在页面中导入jquer.js文件
<script src="jQuery.js文件路径"></script>jQuery对象和js对象(dom对象)
在js中，使用document.getElementXXX获取到的是dom对象。
dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。
在jQuery中，使用jQuery选择器获取到的是jQuery对象。
jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。
通常在jQuery对象命名时，使用$符号作为前缀，方便区分jQuery对象和dom对象。
两者之间转换
jQuery对象转换为dom对象
- jQuery对象[0]
- jQuery对象.get(0)
dom对象转换为jQuery
$(dom对象)
<html>
<body>
<h1 id="test"></h1>
</body>
<script src="jQuery.js"></script>
<script>
$(function(){
//通过js的方式获取的对象，称为dom对象，只能使用dom对象操作节点的属性和方法
var test= document.getElementById("test");
test.innerText="修改文本"；
//通过jQuery的选择器获取的对象，称为jQuery对象，只能使用jQuery对象操作节点的属性和方法
//$("#test").innerText="xxx"//无效
$("#test").text("修改文本");
//将jQuery对象转换为dom对象
$("#test")[0].innerText="修改文本";
//将dom对象转换为jQuery对象
$(test).text("修改文本");
});
</script>
</html>jQuery中的选择器
| 基本选择器 | |
|---|---|
| $("#id名") | id选择器，根据id名获取某个节点 |
| $(".class名") | class选择器，根据class名获取某些节点 |
| $("标签名") | 元素选择器，根据标签名获取某些节点 |
| $("#id名，.class名，标签名") | 群组选择器，根据指定的选择器获取所有满足的节点 |
| $("a.test") | 获取class名为test的a标签 |
| $("a#test") | 获取id名为test的a标签 |
| $("*") | 获取所有节点 |
| 层次选择器 | |
|---|---|
| $("#test空格*") | 得到id为test节点中的所有子节点。 |
| $("#test空格div") | 得到id为test节点中的所有div子节点。 |
| $("#test>*") | 得到id为test节点中的第一层所有子节点。 |
| $("#test>.test") | 得到id为test节点中的第一层class为test的子节点 |
| $("#test+p") | 得到id为test节点后紧邻的第一个p节点 |
| $("#test~p") | 得到id为test节点后同级的p节点 |
| 普通过滤 | |
|---|---|
| $("tr:odd") | 奇数索引。得到索引为1,3,5...的tr标签，按自然顺序为偶数 |
| $("tr:even") | 偶数索引。得到索引为0,2,4...的tr标签，按自然顺序为奇数 |
| $("tr:first") | 得到所有tr标签中的第一个 |
| $("tr:last") | 得到所有tr标签中的最后一个 |
| $("tr:eq(索引)") | 得到指定索引的tr |
| $("tr:gt(索引)") | 得到大于指定索引的tr |
| $("tr:lt(索引)") | 得到小于指定索引的tr |
| $("li:nth-child(3n+1)") | |
| $("#test p:first-child") | |
| $("#test p:last-child") | |
| $("div:not(.test)") | 得到class不为test的div |
| $("div:not(:eq(3))") | 得到索引不为3的div |
| 表单元素过滤 | |
|---|---|
| $(":input") | 得到所有表单元素，包含input、select、textarea |
| $(":text") | 得到文本框 |
| $(":password") | 得到密码框 |
| $(":radio") | 得到单选按钮 |
| $(":checkbox") | 得到复选框 |
| $(":checked") | 得到被选中的表单元素，包含radio、checkbox、select |
| $(":checkbox:checked") | 得到被选中的复选框 |
| $(":selected") | 得到被选中的下拉菜单选项 |
| $(":reset")/$(":submit") | 得到重置/提交按钮 |
| 属性过滤 | |
|---|---|
| $("a[href]") | 得到所有包含href属性的a标签 |
| $("a:not([href])") | 得到所有不包含href属性的a标签 |
| $("div[属性=值]") | 得到指定属性和值的div |
| $("div[属性!=值]") | 得到指定属性不等于指定值的div |
| $("div[属性^=值]") | 得到以指定值开头的指定属性的div |
| $("div[属性$=值]") | 得到以指定值结尾的指定属性的div |
| $("div[属性*=值]") | 得到包含指定值的指定属性的div |
$("div[属性1=值][属性2=值]") | 得到既包含指定值的属性1且包含指定值的属性2的div |
| 内容过滤选择器 | |
|---|---|
| $("p:contains(文字)") | 得到带有指定文字的p标签 |
| $("p:not(:contains(文字))") | 得到不带有指定文字的p标签 |
| $("p:empty") | 得到没有任何文本的p标签 |
操作节点
获取、设置节点内容
| 函数 | |
|---|---|
| 节点.text() | 获取节点中的文本。相当于js中的var text=x.innerText； |
| 节点.text("内容") | 设置节点中的文本。相当于js中的x.innerText="内容"； |
| 节点.html() | 获取节点中的内容。相当于js中的var text=x.innerHTML； |
| 节点.html("内容") | 设置节点中的内容。相当于js中的x.innerHTML="内容"； |
| 节点.val() | 获取某节点中的value属性值。相当于js中的var val=x.value; |
| 节点.val("内容") | 设置某节点中的value属性值。相当于js中的x.value="内容"; |
获取、设置节点样式
| 函数名 | |
|---|---|
| 节点.css("样式名") | 获取某个节点的某个样式值 |
| 节点.css("样式名","值") | 设置某个节点的某个样式 |
| 节点.css({样式名:"值",样式名:"值"...}) | 同时设置多个样式 |
| 节点.css("样式名","值").css("样式名","值") | 同时设置多个样式 |
获取、设置节点属性
| 函数名 | |
|---|---|
| 节点.attr("属性名") | 获取某个属性的值 |
| 节点.attr("属性名","值") | 设置某个属性的值 |
| 节点.removeAttr("属性名") | 移除指定属性 |
| 节点.addClass("class名") | 给某个节点追加class值 |
| 节点.removeClass("class名") | 移除某个节点的某个class值 |
| 节点.toggleClass("class名") | 添加或移除某个class值。如果没有则添加，有则移除。 |
| 节点.hasClass("class名") | 判断是否存在某个class值 |
在HTML中读取JSO文件
- $.getJSON("json文件路径",回调函数)
- $.ajax({url:"访问的资源路径",success:function(){访问成功后的回调函数}})
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <table class="layui-table " lay-skin="row"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th colspan="2">宠物</th> <th>婚姻状况</th> <th>是否有房</th> <th colspan="2">家庭成员</th> </tr> <tr> <td>name</td> <td>sex</td> <td>age</td> <td>petName</td> <td>petType</td> <td>married</td> <td>house</td> <td>familyName</td> <td>familyRelation</td> </tr> <tr> <td rowspan="2"></td> <td rowspan="2"></td> <td rowspan="2"></td> <td rowspan="2"></td> <td rowspan="2"></td> <td rowspan="2"></td> <td rowspan="2"></td> <td >familyName</td> <td >familyRelation</td> </tr> </table> <button>使用ajax读取json文件</button> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> $(function() { // $.getJSON("json文件路径",function(res){}) res为读取到的所有数据 $.getJSON("data.json",function(res){ console.log(res); }) $("button:eq(0)").bind("click",function(){ $.ajax({ url:"data.json", success:function(res){ // console.log(res); // 读取json文件中的数据，通过.访问 $("td:contains(name)").text(res.name); // pet是对象res.对象.对象属性 $("td:contains(petName)").text(res.pet.petName); // family是对象数组res[索引].对象属性 $("td:contains(familyName):eq(0)").text(res.family[0].name); $("td:contains(familyRelation):eq(0)").text(res.family[0].relation); } }); }); }); </script> </html>
扫一扫
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
