四、jQuery笔记

(一)jQuery概述


  • jQuery本身是js的一个轻量级的库,封装了一个对象jQuery,jquery的所有语法都在jQuery对象中

  • 浏览器不认识jquery,只渲染html、css和js代码,需要先导入jQuery文件,官网下载即可

  • jQuery中文说明文档:https://hemin.cn/jq/


(二)jQuery要点


1、jQuery对象 

  • 通过jQuery包装DOM对象后产生的对象。
  • jQuery对象用$符号表示
  • 给jQuery对象命名引用时,通常标识符前面加个$符,与DOM对象的引用区分开来
  • jQuery代码和js代码可以混着用,比如绑定事件处理函数仍旧可以用js的几种方式,只是js对象调用DOM方法和属性,jQuery对象也调用自己的方法
  • DOM对象和jQuery对象可以互相转换:
    • 用$符号把DOM对象括起来就变成了jQuery对象,如:$(this)
    • jQuery加上[0]就变成了DOM对象,如:$("p")[0]

2、jQuery的语法 

可以概括为$(selector).action()的形式,

2.1 selector

选择器和筛选器:

  • id选择器拿到的是唯一的标签对象;
  • 其他选择器得到的是标签对象数组;
  • jquery会自动循环处理每个元素,不用自己再写循环语句一个个处理
(1)基本选择器 

基本格式:$("css-selector") 

(1.1)通用选择器
$("*").css("color", "green")
(1.2)id选择器
$("#jquery").css("color", "red")
(1.3)class选择器
$(".hl").css("color", "gold")
(1.5)标签选择器
$("div").css("color", "black")
(1.6)并列多选选择器
$(".hl,div").css("color", "gold")
(2)层级选择器
(2.1)后代选择器 
$(".hl div").css("color", "red")
(2.2)子代选择器 
$(".hl>div").css("color", "red")
(2.3)毗邻选择器(下面紧挨着的兄弟标签)
$(".hl+p").css("color", "blue")
(2.4)下方兄弟选择器(不用紧挨着)
$(".hl~p").css("color", "red")
(3)属性选择器
$("[name]").css("color", "red")
$("[name='789']").css("color", "blue")
$("[name='789'][alex='111']").css("color", "red")
(4)表单选择器(只有inpput的type属性才行)
$(":text").css("color", "blue")
(5)基本筛选器
(5.1)first:第一个
$(".hl~p:first").css("color", "gold")
(5.2)last:最后一个
$(".hl~p:last").css("color", "gold")
(5.3)eq(index):指定索引序号
$(".hl~p:eq(0)").css("color", "gold")
(5.4)even:奇数行
$(".hl~p:even").css("color", "gold")
(5.5)odd:偶数行
$(".hl~p:odd").css("color", "gold")
(5.6)gt(index):大于指定索引序号
$(".hl~p:gt(0)").css("color", "gray")
(5.7)lt(index):小于指定索引序号
$(".hl~p:lt(2)").css("color", "gray")
(6)过滤筛选器
$(".hl~p").eq(0).css("color", "gold") //筛选任意一个.eq(index)
$(".hl~p").first().css("color", "gray") //筛选第一个.first()
$(".hl~p").last().css("color", "gray") //筛选最后一个.last()
$(".hl~p").even().css("color", "red") //筛选奇数行的标签.even()
$(".hl~p").odd().css("color", "blue") //筛选偶数行的标签.odd()
console.log($(".hl~p").hasClass("456") ) //判断标签是否有这个class属性,返回boolean值
(7)查找筛选器
//7.1只找子代元素children(selector)
$("#jquery").children("p").css("color", "blue")
//7.2找后代元素find(selector)
$("#jquery").find("p").css("color", "blue")
//7.3找下面的元素next()
$("li").next().css("color", "blue") //查找第二个及往后的li标签
$("li").eq(0).next().css("color", "blue") //查找第几个li标签的下一个的li标签
//7.4找下面的元素nextAll()
$("li").nextAll().css("color", "red") //查找第二个及往后的li标签
$("li").eq(1).nextAll().css("color", "red") //查找第几个li标签的下面所有li标签
//7.5找下面的元素nextUntil()
$("li").nextUntil(".liend").css("color", "gold")//查找终止标签(不包含)上面除了第一个的li标签和下面所有的li标签
$("li").eq(0).nextUntil(".liend").css("color", "gold")//查找第几个li标签的下面到终止标签(不包含)的li标签
//7.6找上面面的元素prev()
$("li").prev().css("color", "blue") //查找除了最后一个的li标签
$("li").eq(2).prev().css("color", "blue") //查找第几个li标签的上一个的li标签
//7.7找上面的元素prevAll()
$("li").prevAll().css("color", "red") //查找除了最后一个的li标签
$("li").eq(3).prevAll().css("color", "red") //查找第几个li标签的上面所有li标签
//7.8找上面的元素prevUntil()
$("li").prevUntil(".liend").css("color", "gold")//查找终止标签(不包含)上面所有的li标签和下面除了最后一个的li标签
$("li").eq(7).prevUntil(".liend").css("color", "gold")//查找第几个li标签的上面到终止标签(不包含)的li标签
//7.9查找父级标签parent
$("#parents p").parent().css("color", "red")
//7.9查找所有祖宗标签parents
$("#parents p").parents().css("color", "red")
//7.9查找区间祖辈标签parentUntil
$("#parents p").parentsUntil().css("color", "black") // 不写参数,类同parents()
$("#parents p").parentsUntil("#parents").css("color", "black") // 查找所有终止祖辈下面的祖辈标签
//7.10查找兄弟标签
$("ul").siblings().css("color", "black")
(8)练习-左侧菜单
<body><div style="clear: both">练习-左侧菜单:<br><div class="outer2"><div class="menu"><div class="item"><div class="title" onclick="f1(this)">菜单一</div><div class="con"><div>111</div><div>111</div><div>111</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单二</div><div class="con hide"><div>222</div><div>222</div><div>222</div></div></div><div class="item"><div class="title" onclick="f1(this)">菜单三</div><div class="con hide"><div>333</div><div>333</div><div>333</div></div></div></div><div class="content"></div></div></div>
</body>function f1(self) {$(self).next().removeClass("hide");$(self).parent().siblings().children(".con").addClass("hide");
}
 

2.2 action() 

jQuery操作属性的方法 

(1)标签属性类
// 获取属性值
console.log($(".attr1 .a1").attr("class")) 
//设置属性值,不适用设置input标签的checked属性,因为不默认选中(手动勾选)是undefined,默认选中是cheched
$(".attr1 .a1").attr("class", "a2") 
// 删除属性
$(".attr1 .a1").removeAttr("class") 
//获取固有属性值,不适用自定义属性,因为prop找不到,获取到的是undefined,但适用input标签的checked属性,因为其值是true或false
console.log($(".attr1 .a2").prop("class")) 
// 设置固有属性值
$(".attr1 .a2").prop("class", "a3")
// 删除固有属性
$(".attr1 .a3").removeProp("class") 
//对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
//对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
//像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此,需要使用prop方法去操作才能获得正确的结果。
(2)css样式类
// 增加class属性列表的元素
$(".attr1 .a3").addClass("a4")
// 删除class属性列表的元素
$(".attr1 .a4").removeClass("a4")
// 设置css样式
$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});
(3)HTML代码/文本/值 
$(".attr1 .a3").html("456<h1>123</h1>") //相当于js的innerHTML,加参数是替换原本内容
$(".attr1 .a3").text("<p>111</p>") //相当于js的innerText,加参数是替换原本内容为纯文本
$(".attr1 .a3").val() //获取标签的固有属性value,不能获取自定义属性
$(".attr1 input").val("789") // 加上参数是修改固有属性value值
(4)jQuery的循环语句
  • 方式一:

$.each(object[循环的对象,如数组], function(index[, value]){
    代码块
})

  • 方式二:

$("p").each(function(){
    代码块;//每一个标签对象是$(this)
}) 

//1.方式一:
var data={'name':"alex", age:18};
var dl=[1,"a",[12,'b'], data];
$.each(data, function(key, value){console.log("key:", key);   //循环object(字典)第一个参数值是:键keyconsole.log("value:", value);
})
$.each(data, function(key){console.log("key:", key);   //循环object(字典)如果只有一个参数值是:键key
})
$.each(dl,function(index,value){console.log("index:", index);   //循环数组第一个参数值是:索引indexconsole.log("value:", value);
})
$.each(dl,function(index){console.log("index:", index);   //循环数组如果只有一个参数值是:索引index
})
//2.方式二:
$("li").each(function(){console.log("$(this):", $(this));console.log("$(this).html():", $(this).html());
})
(5)练习-正反选
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.11.3.min.js"></script><script>function selectall(){$("table :checkbox").prop("checked",true)}function cancel(){$("table :checkbox").prop("checked",false)}/*js写法function reverse(){let idlist=$("table :checkbox")for(let i=0;i<idlist.length;i++){let element=idlist[i];let ischecked=$(element).prop("checked")if (ischecked){$(element).prop("checked",false)}else {$(element).prop("checked",true)}}}                *//*jQuery循环方式*/function reverse(){$("table :checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));if ($(this).prop("checked")){$(this).prop("checked",false)}else {$(this).prop("checked",true)}});}</script>
</head>
<body><button onclick="selectall();">全选</button><button onclick="cancel();">取消</button><button onclick="reverse();">反选</button><table border="1"><tr><td><input type="checkbox"></td><td>111</td></tr><tr><td><input type="checkbox"></td><td>222</td></tr><tr><td><input type="checkbox"></td><td>333</td></tr><tr><td><input type="checkbox"></td><td>444</td></tr></table>
</body>
</html>
(6)jQuery支持链式查找

对一个标签对象做完操作后,可以用.继续查找其他标签对象进行操作 

$("p").parent().addClass("hide");
$("p").parent().prev().addClass("hide");
// 可以合并成一行:
$("p").parent().addClass("hide").prev().addClass("hide")
 (7)练习-模态对话框
function show(self){$(self).parent().next().removeClass("hide");
}
function cancel(self){$(self).parent().parent().addClass("hide");
}
(8)文档处理 
    <div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bo").on("click", function(){//1.内部插入:父标签内插入子标签// $(".c1").append("<h1>123</h1>"); // 创建新标签方式一:直接在append()里面写上标签内容var $ele = $("<h1></h1>"); //创建新标签方式二:相当于js中var ele=document.cerateElement("h1");var $ele = $("<h1>"); //简化写法$ele.html("hello word");$ele.css("color", "red");$(".c1").append($ele);//给父标签的子标签最后添加创建的新子标签$ele.appendTo($(".c1"));//把创建的新子标签添加到父标签的子标签最后面$(".c1").prepend($ele);//给父标签的子标签最前面添加创建的新子标签$ele.prependTo($(".c1"));//把创建的新子标签添加到父标签的子标签最前面//2.外部插入:插入兄弟标签$(".c1").after($ele);$(".c1").before($ele);$ele.insertAfter($(".c1"));$ele.insertBefore($(".c1"));//3.替换$(".c1 p").replaceWith($ele);//4.删除与清空$(".c1").empty(); //清空标签的内容,但是标签还在$(".c1").remove(); //删除标签//5.复制var $ele2=$(".c1").clone(); //clone()里写个true就不会复制事件$(".c1").after($ele2);
})
(9)练习-复制输入框
    <div class="c1">文档操作<p>ppp</p><button class="bo">add</button><div class="lxclone">练习-复制输入框<div class="item"><button class="bc">+</button><input type="text"></div></div></div>$(".bc").click(function (){var $cloneObj=$(".lxclone .item").clone(); // 这种方式复制的数量会以2的次方倍增,因为复制出来的也是一个class属性,也会被复制var $cloneObj=$(this).parent().clone(); //应该通过这种方式复制,每次就是复制一个$cloneObj.children(".bc").html("-").attr("onclick", "removeObj(this)");$(".lxclone").append($cloneObj);
});
function removeObj(self){$(self).parent().remove();
}

3、css操作

<div class="cssop">CSS操作<p id="ys">1.样式</p><div id="offsetdiv">2.位置<div class="div1">2.1-offset相对视口偏移量</div><div class="div2">2.2-position相对已定位父级偏移量</div></div><div class="gotop hide" style="position: fixed;right: 20px;bottom: 20px;width: 90px;height: 50px;background-color: gray; color:white;text-align: center;line-height: 50px">返回顶部</div><ul><li>111</li><li>222</li><li>333</li></ul>
</div>

3.1 样式

$("#ys").css({"color": "blue", "height":"100px", "width":"100px", "background-color": "red"});

 3.2 位置

//2.位置
$("*").css({"padding":"0px", "margin":"0px"});
$("#offsetdiv").css({position:"relative"});
$("#offsetdiv .div1").css({width: "200px", height: "200px", "background-color":"blue"});
$("#offsetdiv .div2").css({width: "200px", height: "200px", margin:"20px", padding:"20px", border:"1px solid red", "background-color":"green"});
//2.1-1offset()得到的是偏移量对象,有top和left两个属性:是相对于视口(窗口)的偏移量
console.log($("#offsetdiv .div1").offset().top)
console.log($("#offsetdiv .div1").offset().left)
console.log($("#offsetdiv .div2").offset().top)
console.log($("#offsetdiv .div2").offset().left)
//2.2-position()得到的是偏移量对象,有top和left两个属性:是相对于已定位的父级标签的偏移量
console.log($("#offsetdiv .div1").position().top)
console.log($("#offsetdiv .div1").position().left)
console.log($("#offsetdiv .div2").position().top)
console.log($("#offsetdiv .div2").position().left)
//2.3-scrollTop放在监听事件才有效
//练习-返回顶部
window.onscroll=function(){if($(window).scrollTop()>100){ //窗口滚动滑轮距离顶部的距离$(".gotop").removeClass("hide")} else {$(".gotop").addClass("hide")}
}
$(".gotop").click(function(){$(window).scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//练习-对标签元素应用scrollTop
// var $btEle=$("<button>");
// $btEle.html("回顶部")
// $btEle.addClass("aftb hide")
// $("#offsetdiv .div2").after($btEle);
$("#offsetdiv .div2").after("<button class='aftb hide'>回顶部</button>");
$("#offsetdiv .div2").html("<h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1><h1>111</h1>")
$("#offsetdiv .div2").css("overflow", "auto");
$("#offsetdiv .div2").scroll(function (){if($(this).scrollTop()>0){ //窗口滚动滑轮距离顶部的距离$(".aftb").removeClass("hide")} else {$(".aftb").addClass("hide")}
});
$(".aftb").click(function(){$("#offsetdiv .div2").scrollTop(0) //将窗口滚动滑轮距离顶部的距离设置为0
})
//2.4-scrollLeft放在监听事件才有效,(左右滑轮,类似上下滑轮)

3.3 尺寸

console.log($("#offsetdiv .div2").height()) // 获取内容的高度
$("#offsetdiv .div2").height("300px") // 修改内容的高度
console.log($("#offsetdiv .div2").innerHeight()) // 获取内容+内边距padding的高度
console.log($("#offsetdiv .div2").outerHeight()) // 获取内容+内边距padding+边框border的高度
console.log($("#offsetdiv .div2").outerHeight(true)) // 获取内容+内边距padding+边框border+外边距margin的高度
console.log($("#offsetdiv .div2").width()) // 获取内容的宽度
$("#offsetdiv .div2").width("300px") // 修改内容的宽度
console.log($("#offsetdiv .div2").innerWidth()) // 获取内容+内边距padding的宽度
console.log($("#offsetdiv .div2").outerWidth()) // 获取内容+内边距padding+边框border的宽度
console.log($("#offsetdiv .div2").outerWidth(true)) // 获取内容+内边距padding+边框border+外边距margin的宽度

3.4 索引

$("ul li").index(); //获取标签集合的索引

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/894296.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Versal - 基础4(VD100+Versal IBERT)

1. 简介 在之前的一篇博文中&#xff0c;我分享了在 Zynq Ultrascale MPSoC 中使用 IBERT 的方法。 《Vivado - 集成眼图分析仪 Serial I/O IBERT 误码率_vivado ibert-CSDN博客》 本文进一步探讨 Versal 中使用 IBERT 的方法。 2. 硬件平台 芯片&#xff1a;XCVE2302-SF…

《HelloGitHub》第 106 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、…

英语语法 第一天

I’m a student. 我是个学生 我是个新东方的学生 I’m a student of New Oriental School 我爱你 I love you 我在心中爱你 I love you in my heart. 这是一朵花 This is a flower 这是一朵在公园里的花 This is a flower in the park.(修饰部分在修饰词后面) 主干…

“新月之智”智能战术头盔系统(CITHS)

新月人物传记&#xff1a;人物传记之新月篇-CSDN博客 相关文章链接&#xff08;更新&#xff09;&#xff1a; 星际战争模拟系统&#xff1a;新月的编程之道-CSDN博客 新月智能护甲系统CMIA--未来战场的守护者-CSDN博客 目录 一、引言 二、智能头盔控制系统概述 三、系统架…

猿人学web 19题(js逆向)

这题直接点击翻页抓包&#xff0c;然后获取seesion ID请求即可 求和代码 import requestssession requests.Session() cookies {sessionid:eao9i00r8pt4xu6uzzx2k01ttqn51yc9} urlhttps://match.yuanrenxue.cn/api/match/19?page sum0 for i in range(1,6):response sess…

c语言:编译和链接(详解)

前言 要将编译和链接&#xff0c;就不得不提及编译器是如何运作的&#xff0c;虽然这部分知识是针对于要创造编译器和创作语言的人所需要清楚的&#xff0c;但作为c语言的学习者也需要了解一下&#xff0c;修炼内功&#xff0c;尤其是对于想学习c的人而言。 编译器的运作过程…

积分和微分的区别

积分&#xff1a; 积分是由微小量求大量&#xff0c;由微观的数据求得整体的状况。运算是对总量求和。 微分&#xff1a; 微分是由大量求微小量&#xff0c;反应微观的状况&#xff0c;运算是伴随着求导。 峰值检测电路: 上图检测的误差主要来自与二极管的正向导通电压降&am…

OVS-DPDK

dpdk介绍及应用 DPDK介绍 DPDK&#xff08;Data Plane Development Kit&#xff09;是一组快速处理数据包的开发平台及接口。有intel主导开发&#xff0c;主要基于Linux系统&#xff0c;用于快速数据包处理的函 数库与驱动集合&#xff0c;可以极大提高数据处理性能和吞吐量&…

亚博microros小车-原生ubuntu支持系列:18 Cartographer建图

Cartographer简介 Cartographer是Google开源的一个ROS系统支持的2D和3D SLAM&#xff08;simultaneous localization and mapping&#xff09;库。基于图优化&#xff08;多线程后端优化、cere构建的problem优化&#xff09;的方法建图算法。可以结合来自多个传感器&#xff0…

安卓(android)实现注册界面【Android移动开发基础案例教程(第2版)黑马程序员】

一、实验目的&#xff08;如果代码有错漏&#xff0c;可查看源码&#xff09; 1.掌握LinearLayout、RelativeLayout、FrameLayout等布局的综合使用。 2.掌握ImageView、TextView、EditText、CheckBox、Button、RadioGroup、RadioButton、ListView、RecyclerView等控件在项目中的…

爬虫基础(四)线程 和 进程 及相关知识点

目录 一、线程和进程 &#xff08;1&#xff09;进程 &#xff08;2&#xff09;线程 &#xff08;3&#xff09;区别 二、串行、并发、并行 &#xff08;1&#xff09;串行 &#xff08;2&#xff09;并行 &#xff08;3&#xff09;并发 三、爬虫中的线程和进程 &am…

自签证书的dockerfile中from命令无法拉取镜像而docker的pull命令能拉取镜像

问题现象&#xff1a; docker pull images拉取镜像正常 dockerfile中的from命令拉取镜像就会报出证书错误。报错信息如下&#xff1a; [bjxtbwj-kvm-test-jenkins-6-243 ceshi_dockerfile]$ docker build . [] Building 0.4s (3/3) FINISHED …

计算机网络 IP 网络层 2 (重置版)

IP的简介&#xff1a; IP 地址是互联网协议地址&#xff08;Internet Protocol Address&#xff09;的简称&#xff0c;是分配给连接到互联网的设备的唯一标识符&#xff0c;用于在网络中定位和通信。 IP编制的历史阶段&#xff1a; 1&#xff0c;分类的IP地址&#xff1a; …

面对企业文件交换难题,镭速跨网文件交换系统是如何解决的?

在当今这个数字化快速发展的时代&#xff0c;企业越来越依赖于数据交换来维持其业务运作。无论是内部网络之间的沟通还是与外部合作伙伴的数据共享&#xff0c;高效且安全的跨网文件交换都显得尤为重要。然而&#xff0c;在实际操作中&#xff0c;许多企业面临着各种各样的挑战…

Many Whelps! Handle It! (10 player) Many Whelps! Handle It! (25 player)

http://db.nfuwow.com/80/?achievement4403 http://db.nfuwow.com/80/?achievement4406 最少扣你50DKP! 第二阶段 当奥妮克希亚升空后&#xff0c;在10秒内引出50只奥妮克希亚雏龙&#xff0c;随后击败奥妮克希亚。 World of Warcraft [CLASSIC][80猎人][Grandel][最少扣你5…

自制虚拟机(C/C++)(一、分析语法和easyx运用,完整虚拟机实现)

网上对虚拟机的解释很多&#xff0c;其实本质就一句话 虚拟机就是机器语言解释器 我们今天要实现汇编语言解释器&#xff0c;下一次再加上ndisasm反汇编器就是真正虚拟机了 注:这里的虚拟机指的是VMware一类的&#xff0c;而不是JVM&#xff0c;python一样的高级语言解释器 …

36. printf

1. printf 格式化函数说的是 printf、 sprintf 和 scanf 这样的函数&#xff0c;分为格式化输入和格式化输出两类函数。学习 C 语言的时候常常通过 printf 函数在屏幕上显示字符串&#xff0c;通过 scanf 函数从键盘获取输入。这样就有了输入和输出了&#xff0c;实现了最基本…

实验八 JSP访问数据库

实验八 JSP访问数据库 目的&#xff1a; 1、熟悉JDBC的数据库访问模式。 2、掌握使用My SQL数据库的使用 实验要求&#xff1a; 1、通过JDBC访问mysql数据&#xff0c;实现增删改查功能的实现 2、要求提交实验报告&#xff0c;将代码和实验结果页面截图放入报告中 实验过程&a…

python学opencv|读取图像(四十六)使用cv2.bitwise_or()函数实现图像按位或运算

【0】基础定义 按位与运算&#xff1a;全1取1&#xff0c;其余取0。按位或运算&#xff1a;全0取0&#xff0c;其余取1。 【1】引言 前序学习进程中&#xff0c;已经对图像按位与计算进行了详细探究&#xff0c;相关文章链接如下&#xff1a; python学opencv|读取图像&…

使用vhd虚拟磁盘安装两个win10系统

使用vhd虚拟磁盘安装两个win10系统 前言vhd虚拟磁盘技术简介准备工具开始动手实践1.winX选择磁盘管理2.选择“操作”--“创建VHD”3.自定义一个位置&#xff0c;输入虚拟磁盘大小4.右键初始化磁盘5.选择GPT分区表格式6.右键新建简单卷7.给卷起个名字&#xff0c;用于区分8.打开…