华清远见重庆中心------JavaScript和 jQuery基础总结

最新推荐文章于 2024-08-10 16:15:00 发布

小白不听话

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量263

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/weixin_45735754/article/details/128402761

版权

JavaScript

JavaScript通常简称为JS，由网景(NetScape)公司推出。

是一门面向对象、轻量级、弱类型的解释型脚本语言。

弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。
解释型：无需编译，通过解释器解释运行。浏览器就是一个JS解释器。
script脚本：按指令顺序执行。

js的作用

HTML用于定义页面中的内容
CSS用于控制HTML元素的外观和样式
JS用来操作HTML元素
HTML+CSS+JS组成前端基本三要素。

可以在页面中控制任意元素
可以在页面中动态嵌入元素
可以操作浏览器
可以与用户进行数据交互

Js写在哪里

1、写在某个标签的某个事件中

事件如鼠标单击onclick，鼠标移入onmouseenter等

<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<!-- 通过提示框输出alert("输出内容") -->
<button onclick="alert('Hello JS!')">点击1</button>
<!-- 通过控制台输出console.log("输出内容") -->
<button onclick="console.log('Hello JS!')">点击2</button>
<!-- 通过新页面输出document.write("输出内容") -->
<button onclick="document.write('Hello JS!')">点击3</button>
</body>
</html>

写在

该标签是一个双标签，可以放在页面的任何位置，通常放在head标签中或body标签结束之前

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 可以将js代码写在这里 -->
<script>
//js代码
</script>
</head>
<body >
<!-- 建议将js代码写在这里 -->
<script >
//js代码
</script>

</body>
</html>

3、写在一个独立的.js文件中，在通过scrip标签导入

js的输出语句

1.弹警告窗

alert（字符串或变量）

2.控制台输出

console.log(字符串或变量)

3.打印在新页面中

document.write(字符串或变量)

js中的注释

//单行注释
/*
多行注释
*/

js的组成

1.ECMAScript

简称为ES，是JS的标准，也是JS的核心语法。
包含了数据类型、定义变量、流程控制语句等语法内容。

2.BOM

浏览器对象模型

3.DOM

文档对象模型

ECMAScript核心语法

数据类型

原始类型

JS中的原始类型	说明
数值型number	整数、小数都称为数值型
字符串string	用单引号或双引号引起来的都是字符串
布尔型boolean	true/false
未定义undefined	当某个变量没有声明或没有值时
空null	某个引用类型变量通过null设置为空

引用类型

如对象、数组、函数等都是引用类型

定义变量

var/let 变量名;
var name;
var age;
let sex;

标识符的命名规则

由字母、数字、下划线和$符号组成
不能以数字开头
不能使用js中的关键字

变量的初始化

var name;
name = "Tom";
var age = 22;
//可以不用var定义，但不建议
sex = "男";
//都可以正常输出
console.log("name:" + name + ",age:" + age + ",sex:" + sex);

运算符

js中的boolean类型，0可以表示false，非0可以表示true。
默认true为1，所以可以用true或false当做数字来运算。

算数

+ - * / %
+ 两端如果有一端是字符串，作为拼接使用。
+ 两端如果都是数值，作为相加使用。
除+外，其余符号都可以计算字符串。

关系

> < >= <=
用法同java，结果为boolean
==
比较值是否相同，不比较数据类型，如"123"==123结果为true
===
比较值和数据类型是否相同，如"123"===123结果为false
!=
比较值是否不同，如"123"!=123结果为false
!==
比较值和数据类型是否不同，如"123"!==123结果为true

逻辑

&& || !
用法同java

赋值与复合赋值

= += -= *= /= %=
a*=b+c相当于a=a*(b+c)
符号两端当做整体运算后赋值给符号左侧变量

自增自减

++ --
符号在前，先+1或-1后使用
符号在后，先使用后+1或-1
如果独立成行，都为+1或-1
var i=10;
var res=i-- - --i;
//res为10-8=2,i最终为8

条件

表达式1?表达式2:表达式3
判断表达式1，结果为true执行表达式2，结果为false执行表达式3

条件语句

if语句

js中的if语句条件可以是boolean值也可以是一个数字(0false,非0true)

多分支if语句，如果有一个条件满足则不再判断后续的条件，所以将范围最小的情况写在最前

switch语句

与java中不同的是，小括号中没有数据类型的限制，不同的case后也可以写不同类型的数据。
没有break，会继续执行后续case后的内容，直到break或没有代码，如果没有任何case满足，执行
default。

循环

while

先判断后执行，有可能一次都不执行。

do-while

先执行一次，再判断，至少执行一次。

for

continue和break

continue停止本次循环，执行下一次循环。
break停止所有循环。

JS中的本地对象

数组Array

JS中的数组类似于Java中的ArrayList，
可以保存不同类型的数据，数组大小可变。

定义数组

数组使用

数组遍历

数组初始化

常用方法

方法名	作用	返回值
sort()	将数组中的元素进行升序排序	排序后的数组
组reverse()	将数组中的元素倒序保存	倒叙后的数组
pop	移除数组中的最后一个元素	被移除的元素
push()	添加元素到数组末尾	最新的数组长度
shift()	移除数组中的第一个元素	被移除的元素
unshift()	添加元素到数组开头	最新的数组长度
fill()	使用指定元素填充数组	填充后的数组
splice(index)	从指定索引开始分割数组，方法调用后，数组为剩余
元素的数组	截取到的元素集合
splice(index,length)	从指定索引开始截取指定长度的数组，方法调用后，数组为剩余元素的数组	截取到的元素集合
以上方法在调用后都会影响原数组

方法名	作用	返回值
indexOf(元素)	得到某个元素第一次出现的索引	索引
lastIndexOf(元素)	得到某个元素最后一次出现的索引	索引
concat(元素)	将指定元素添加到元素数组末尾	添加元素后的数组
join(字符)	使用指定符号将数组元素拼接为一个
字符串	拼接后的字符串
slice(start,end)	截取指定[start,end)区间内的元素	截取后的数组
slice(index)	截取从index开始至末尾的元素	截取后的数组
map(方法名)	让数组中的元素都执行指定方法	执行方法后的新数组
以上方法在调用后，都不会影响原数组

正则表达式

参考网址： https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
正则表达式对字符串匹配（规定字符串的格式，比如长度，允许出现的字符。。。）的工具，一般用于
表单输入数据的校验

正则表达式的定义和使用
两种定义方式：var reg1 = new RegExp(“hqyj”);
```
                       var reg2 = /hqyj/;
```
校验字符串使用test方法，字符串跟正则表达式匹配，返回true, 否则返回false
reg2.test(“hqyj”);
正则表达式的规则：
- 方括号
  [1-9], [a-z] 范围
  [abc], [135] 列举
  （130|151|189）组合，多选一
- 元字符
  \d 数字
  \w 字符
  . 数字、字符、符号
  \s 空格
  \n 换行
  \r 回车
  \t 制表符
  \ 转义符， . 匹配点比如url中点 www.com.cn
  ^ 以什么开头
  $ 以什么结尾
- 量词
  console.log(arrChar[3]);
  //拼接字符串
  var stra = “xxx,”;
  var strb = “你好”;
  console.log(stra + strb);
  console.log(stra.concat(strb));
  var str3 = “a d min”;
  //用新字符（字符串）替换第一个旧的字符串
  console.log(str3.replace(" “, “”));
  console.log(str3.replaceAll(” ", “”));
  - 一个或多个
  - 0个或多个
    ? 0个或1个
    {n} n个
    {m, n} m到n个
    {m, } m到任意个

修饰符
i 忽略大小写
g 全局匹配（匹配字符串的每一个符合规则的字符）

Math

floor() 向下取整
ceil() 向上取整
round() 四舍五入
abs() 取绝对值
random() 产生[0, 1)的随机数
产生随机数的公式
- [m, n]的随机数： Math.floor(Math.random() * (n - m + 1)) + m
- [m, n) 的随机数：Math.floor(Math.random() * (n - m)) + m

函数 function

一段代码的，能够完成特定的功能，可以被重复的使用

自定义函数

函数的定义
function 函数名(参数1，参数2…){
//代码
return 返回值； //函数不需要返回值，省略return语句
}
函数调用
对象.函数名(参数);

js默认的全局函数

parseInt（）
parseFloat()
isNaN()=
eval()

匿名函数

没有名字的函数，通常设置某个标签的某个事件

BOM

Browser Object Model
浏览器对象模型
可以通过JS获取浏览器信息和控制浏览器的行为。

弹框

警告框，带有提示文字和确认按钮
输入框，带有输入框和确认取消按钮，点击确认，返回值为输入的内容。
确认框，带有确认取消按钮，点击确认返回true，否则返回false

window对象

表示浏览器窗口对象，可以获取浏览器相关信息，调用浏览器的某些行为

获取设置节点文本

innerText

读取或设置某个节点的内容(双标签中的内容)，无论设置什么内容都会原样显示

innerHTML

读取或设置某个节点的内容(双标签中的内容)，设置的内容中如果有HTML元素会识别HTML元素

节点样式

修改单个样式

节点.style.样式名=“值”；

样式名在这里需要使用驼峰命名法。如background-color，要写成backgroundColor

修改多个样式

节点.style.cssText=“样式名:值;样式名:值”；
样式名和css中的写法一样
通过"节点.style.样式"只能获取通过该方式设置过的样式。

jQuery

jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是javacript(一个.js文件)。

作用

jQuery的宗旨：”write less,do more"，意味写更少的代码，做更多的事情。

用于获取文档中的元素，对元素进行操作
更强大的选择器
支持链式写法
封装了ajax，更方便使用

…

使用

1.下载jQuery.js文件，导入到项目中

2.在页面中导入jQuery.js文件

<script src="jQuery.js文件路径"></script>

3.在页面中加入另一个script标签，在该标签中写jQuery代码

通常将jQuery代码写在文档就绪函数中，表示在页面所有内容加载成功后开始执行
- 文档就绪函数类似于js中的onload事件

<script src="jQuery.js文件路径"></script>
<script>
    //文档就绪函数
    jQuery(document).ready(function(){
        //jQuery代码
    });
    //简化版文档就绪函数
    $(function(){
        //jQuery代码
    });
</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.js后，$符号相当于"jQuery"这个单词，有特殊的含义。

如果一个页面中，会引入多个js函数库，并且这些函数库都会用到符号时，就会造成符号冲突。

jQuery提供了一个**noConflict()**函数用于释放对$的使用权。

//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md")//这时会无效
jQuery("#md")//只能这样使用

//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md")//将jq当做$使用

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

注意

$(“p .test”)表示得到p标签下的class为test的标签。有空格

<p>
    <div class="test"></div>
    <p class="test"></p>
</p>
//可以得到p标签中的两个

$(“p.test”)表示饿到class为test的p标签。无空格

<p>
    <div class="test"></div>
    <p class="test"></p>//只能得到这一个
</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值

打地鼠游戏核心原理

1.使用js画div和开始按钮

2.写好显示图片的样式，如“show”，使用setInterval，每隔一段时间，随机一个div，让其拥有该样式

3.每次只能有一个div有该样式：可以每次先清除“show”后，再添加"show"

4.给每个div添加单击事件，点中了图片(带有"show"的div)，移除样式"show"

创建节点

$(“完整标签”)

如

//js写法
var h1=document.createElement("h1");
h1.innerText="创建出的h1";
//jquery写法
var $h1=$("<h1>创建出的h1</h1>");

//以上两种方式创建出的节点都是处于游离态，需要添加到已有的某个节点上

添加节点

添加子节点
父节点.append(子节点)	将子节点添加到父节点中的最后
子节点.appendTo(父节点)	将子节点添加到父节点中的最后
父节点.prepend(子节点)	将子节点添加到父节点中的最前
子节点.prependTo(父节点)	将子节点添加到父节点中的最前

添加兄弟节点
原始节点.before(新节点)	添加新节点到原始节点之前
新节点.insertBefore(原始节点)	添加新节点到原始节点之前
原始节点.after(新节点)	添加新节点到原始节点之后
新节点.insertAfter(原始节点)	添加新节点到原始节点之后

移除节点

移除节点
某节点.remove()	移除某节点
某节点.empty()	移除某节点中的子节点

复制节点

复制节点
某节点.clone()	复制某节点，不复制节点的事件
某节点.clone(true)	复制某节点，复制节点的事件

修饰节点

替换节点
旧节点.replaceWith(新节点)	用新节点替换旧节点
新节点.replaceAll(旧节点)	用心节点替换旧节点

包裹节点
原节点.wrap(指定节点)	使用指定节点包裹原节点，如果原节点是集合，会逐一包裹
原节点.wrapAll(指定节点)	使用指定节点包裹原节点，如果原节点是集合，会整个用一个节点包裹
父节点.wrapInner(指定节点)	使用指定节点对父节点中的所有子节点整个包裹

通过节点获取节点

函数名
某节点.next()	得到某节点的下一个节点
某节点.prev()	得到某节点的上一个节点
某节点.nextAll(参数)	得到某节点之后的所有或指定节点。参数为标签名的字符串，如nextAll(“a”)表示得到后续所有a标签
某节点.prevAll(参数)	得到某节点之前的所有或指定节点
某节点.siblings(参数)	得到某节点同级所有或指定节点
父节点.children(参数)	得到某父节点的所有或指定子节点
节点集合.first()	得到节点集合中的第一个子节点
节点集合.last()	得到节点集合中的最后一个子节点
子节点.parent()	得到某节点的父节点
某节点.index()	得到节点所在集合的索引

预设动画

函数名
show()	同时将宽度和高度从0变为原始值，最终display:block
hide()	同时将宽度和高度从原始值变为0，最终display:none
toggle()	切换show/hide
fadeIn()	将不透明度从0变为1，淡入，最终display:block
fadeOut()	将不透明度从1变为0，淡出，最终display:none
fadeToggle()	切换fadeIn/fadeOut
slideUp()	将高度从原始值变为0，最终display:none
slideDown()	将高度从0变为原始值，最终display:block
slideToggle()	切换slideUp/slideDown
	以上所有函数都可以给两个参数。第一个参数为动画执行所需毫秒，第二个参数为动画执行结束后的回调函数，表示在动画执行后执行。

$("#md").click(function(){
    //如果希望在动画执行后执行，不能这样写
    /*
    $(this).fadeOut(500);
    alert("消失后弹出");
    */
    //正确写法
    $(this).fadeOut(500,function(){
        alert("消失后弹出");
    })
});

自定义动画

启用自定义动画

使用animate()函数，该函数有四个参数分别为样式组、所需事件、动画函数、回调函数
animate()函数支持链式写法
只支持数值型样式。如尺寸、位置等。字符串型样式不支持，如颜色等

节点.animate({
    "样式":"值",
    "样式":"值"
},2000,linear,function(){
    //动画执行结束后执行
}).animate(...)

停止动画

停止当前动画

节点.stop();

停止所有动画

节点.stop(true);

事件

绑定事件

js中的事件绑定方式为：

//dom节点.on事件=function(){}
document.getElementById("md").οnclick=function(){

}

jquery中的事件绑定方式为：

//jquery节点.事件(function(){});
$("#md").click(function(){

});
或
//jquery节点.bind("事件名",function(){})
$("#md").bind("click",function(){

})

事件函数	作用
click()	单击
hover()	鼠标悬停/离开。该事件可以传入两个函数，分别表示悬停时触发第一个函数，离开时触发第二个函数。如果只有一个函数，悬停离开均触发这一个函数。
focus()	获得焦点
blur()	失去焦点
change()	改变。适用于各种能发生变化的节点，如文本框、单选、复选、下拉等
mouseup/down/over/move/enter/leave/out()	鼠标相关
submit()	表单提交
…	将js中的事件名去掉on变为函数

前端框架

设计者提供给用户该框架的css文件和js文件。

用户只需导入css文件和js文件后，通过对应的class值呈现相应的样式和效果。

任何前端框架都有对应的开发文档API，只需参考其使用使用说明即可。

BootStrap

由Twitter推出的一套前端框架。其最大的特点是"栅格化系统"。

使用

1.下载核心文件

官网https://v3.bootcss.com/

2.将解压后的整个文件夹复制到项目中

3.新建一个页面，引入3个文件

bootstrap.min.css文件
jquery.js文件
bootstrap.min.js文件

引入js时，一定要先引入jquery，再引入bootstrap.min.js。因为bootstrap依赖于jquery.

Layui

由国内开发者设计的一款基于jquery的前端框架。

官网现已下架，但Layui依然可以使用。

镜像网站https://layuion.com/

使用

1.下载layui核心文件

2.解压后导入项目

3.在页面中加入2个文件

layui.css文件
layui.js文件

JSON

JavaScript Object Notation JS对象简谱

是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。

JSON数据通常以键值对的形式保存。

键:值

键的类型为字符串，值的类型可以是普通类型、对象或数组。

值的数据类型

值的数据类型	符号	示例
字符串	“”	“name”:“wanghai”
数值	直接写数字	“age”:20
逻辑值	true/false	“married”:false
空	null	“car”:null
对象	{}	“pet”:{“petName”:“小汪”,“petAge”:2}
数组	[]	“family”:[{“relation”:“父亲”,“name”:“xxx”},{“relation”:“弟弟”,“name”:“xxx”}]

举例

使用Json格式如保存一个人的信息

属性：姓名、年龄、性别、宠物、婚姻状况、房产、家庭成员

{
    "name": "张明",
    "age": 20,
    "sex": "男",
    "pet": {
        "petName": "刀乐",
        "petType": "猫"
    },
    "married": true,
    "house": null,
    "family": [{
        "name": "赵鑫",
        "relation": "配偶"
    },{
        "name": "张明亮",
        "relation": "父亲"
    }]
}

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