vue不是前端css框架，而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架，是基于MVVM设计模式的前端框架，且专注于View层。Vue.js的优点：1、体积小；2、基于虚拟DOM，有更高的运行效率；3、双向数据绑定，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；4、生态丰富、学习成本低。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
立即学习“前端免费学习笔记（深入）”；
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能驱动复杂的单页应用。
Vue.js的优点
体积小：压缩后只有33k；
更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；
VUE框架原理
Vue对象将页面中 要改变的元素 和 data中变量 进行绑定，绑定后它会一直监听data中变量值的改变，当值发生改变时，会自动找到与其绑定的元素并且让元素跟着发生改变，改变元素的过程不需要人工干预，提高了开发效率，而且这个过程不需要像 JavaScript 那样频繁DOM操作去改变页面结构，只是监听一片区域，提高了执行效率。
Vue.js和MVVM关系:
vue 框架 是基于MVVM设计模式的前端框架，其中的Vue对象是MVVM设计模式中的VM视图模型。
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 ViewModel。ViewModel负责连接 View 和 Model,保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来.
ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
开始vue.js的安装
Vue Devtools调试工具的安装:可以在谷歌浏览器安装vue Devtools工具可以更好的审查和调试Vue应用.
Vue.js 官网下载地址：http://vuejs.org/guide/installation.html
根据自己的生产要求来安装对应版本.关于安装vue的方法官网给出了多种多样的方法,这里演示独立版本的安装.
我下载之后的地址：https://vuejs.org/js/vue.js
使用独立版本是直接用script标签导入url即可.Vue会被注册为一个全局变量。
第一个vue实例:
HTML内容就是一个个标签组合而成,不知道的自己查询即可.
标签用来声明HTML文档的编写标准,放在最开头位置,可写可不写. 和是中必须有的元素. 里面必须有标签,<meta>和<style>可选. charset属性指定HTML文档的编码为utf-8. <script>标签里面的url即为我下载的vue独立版本的地址.src标签指定超链接. View 层 - Div之间的代码属于html的view层 id指定HTML的唯一属性. {{ }} 用于输出对象属性和函数返回值. Model 层 - JavaScript代码如下(需放在指定的HTML元素之后) el标签为实例提供挂载元素.用来联立view层和model. data 用于定义属性.里面的内容也即最后的运行结果.</pre><p><img src="https://img.php.cn/upload/image/800/932/703/1661512975380127.png" title="1661512975380127.png" alt="4.png"></p> <p><strong>vue过滤器"|",和linux中管道用法类似,即上一级的输出作为下一级的输入.</strong><br></p><pre class="brush:php;toolbar:false;">HTML 中的<!--...--> 是注释标签,Split用于分割字符串,join是把数组拼接成为字符串. 整个代码就是调用了vue中过滤器的用法,使用了vue的内置函数和自定义的函数对data里面定义的属性进行了转换大写,反转的操作.</pre><p><img src="https://img.php.cn/upload/image/409/786/842/1661512969101151.png" title="1661512969101151.png" alt="5.png"></p> <p><strong><span style="font-size: 18px;">vue用法–条件判断</span></strong><br></p> <h4><strong>v-***代表的是vue中的指令.</strong></h4><pre class="brush:php;toolbar:false;"><h1>~<h6>用来表示标题的层级关系.<h1>表示最大. 在 Vue 中，我们使用 v-if 指令实现同样的功能,和其他编程语言的条件判断逻辑一样.条件成立才会执行相应的代码. <h1 v-if="ok">Yes</h1> 也可以用 v-else 添加一个“else 块”： <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> 同样也可以添加v-else-if在多种条件下进行判断.</pre><p>示例1:<br></p> <p><img src="https://img.php.cn/upload/image/606/299/877/1661512962489251.png" title="1661512962489251.png" alt="6.png"></p> <p>示例2:</p> <p><img src="https://img.php.cn/upload/image/808/459/978/1661512956337155.png" title="1661512956337155.png" alt="7.png"></p> <h4><strong>v-show指令根据条件展示元素,即不管初始条件如何元素都会被渲染.</strong></h4><pre class="brush:php;toolbar:false;">当ok为true的时候输出了指定的代码Hello!,相应的ok为false时候没有任何输出.</pre><p><img src="https://img.php.cn/upload/image/698/776/509/1661512951446569.png" title="1661512951446569.png" alt="8.png"></p> <h2> <strong>vue用法–循环语句-v-for指令</strong><br> </h2><pre class="brush:php;toolbar:false;">v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 <li>标签用于定义列表中的项目.可用于有序列表<ol>和无序列表<ul>中.也可以使用of替代in作为分隔符. 如下实例使用v-for指令依次遍历了data里面定义的数组元素.</pre><p><img src="https://img.php.cn/upload/image/685/412/964/1661513040705033.png" title="1661513040705033.png" alt="9.png"></p> <h4><strong>v-for迭代对象,v-for可以通过一个对象的属性来迭代数据.</strong></h4> <p><img src="https://img.php.cn/upload/image/793/674/995/1661513075849966.png" title="1661513075849966.png" alt="10.png"></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/11234" title="CRMEB单商户商城系统"><img src="https://img.php.cn/upload/webcode/000/000/015/176542740771774.png" alt="CRMEB单商户商城系统"></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/11234" title="CRMEB单商户商城系统">CRMEB单商户商城系统</a> <p>CRMEB单商户商城打通版基于Thinkphp6.0+vue+mysql+redis开发，前后台全部采用前后端分离式开发。前端框架为uni-app,多端合一，首页页面后台可视化编辑操作，后台采用iview框架。</p> </div> <a href="/xiazai/code/11234" title="CRMEB单商户商城系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h4><strong>v-for可以用来循环整数</strong></h4> <p><img src="https://img.php.cn/upload/image/882/879/551/1661513081241247173.png" title="1661513081241247173.png" alt="11.png"></p> <h4><strong>对getter和setter的理解</strong></h4><pre class="brush:php;toolbar:false;">顾名思义，get为取值，set为赋值. 创建一个实例，isMe；此时，isMe是没有name属性的，当我们调用isMe.name时，我们会进入到get name(){...}中，先判断 isMe是否有name属性，答案是否定的，那麽就添加一个name属性并给它赋值；如果有name属性，那就返回name属性。 你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。 set属性理解，当我给实例赋值： isMe.name="周神"此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，我就可以做很多事了， 比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。</pre><h2><strong>vue用法之vue计算属性vs监听属性</strong></h2><pre class="brush:php;toolbar:false;">计算属性关键词: computed: 整个代码进行的流程: 1. data 属性初始化 getter setter(可理解为取值和赋值) 2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter 3. 当首次获取 reversedMessage 计算属性的值时，dep 开始依赖收集. 4. 在执行 message getter 方法时，如果 dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系 5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算</pre><p><img src="https://img.php.cn/upload/image/374/904/281/1661513088686095.png" title="1661513088686095.png" alt="12.png"></p> <h4><strong>methods也是vue的计算属性,介绍一下methods和computed的区别:</strong></h4><pre class="brush:php;toolbar:false;">使用computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 以下实例分别调用了vue的两种计算属性computed和methods.可以从运行结果很清晰的看到computed在第一次渲染之后就有了缓存, 第二次调用的时候直接依赖缓存不会重新渲染,两次调用结果相同.而methods在每次调用的时候都会渲染,所以两次调用结果不同.</pre><p><img src="https://img.php.cn/upload/image/970/404/246/1661513097901929.png" title="1661513097901929.png" alt="13.png"></p> <h4><strong>vue之监听属性–watch,通过watch来响应数据的变化.</strong></h4><pre class="brush:php;toolbar:false;"><button>标签是创建一个按钮. @click等同于v-on:click,是一个指令的缩写.v-on表示事件监听,后续会详细讲到. <script type = "text/javascript">表示说明内部的代码属于js. px表示像素. font-size设置字体大小. $watch是一个实例方法, nval表示新的数据, oval旧的数据. alert()方法用于显示带有一条信息和一个ok按钮的警告框. 以下示例首先通过v-on指令来监听按钮的按键变化,然后data里面进行定义属性,接着调用vue的监听属性$watch来监听counter的 变化,最后调用alert()方法弹出一个页面来直观显示数据的变化.</pre><p><img src="https://img.php.cn/upload/image/225/650/164/1661513121312986.png" title="1661513121312986.png" alt="14.png"></p> <h2><strong>vue用法之–vue样式绑定:v-bind用来绑定html属性</strong></h2> <p>方法特别灵活可以绑定数组,属性等来实现需求.每个部分做一个演示.</p><pre class="brush:php;toolbar:false;">v-bind指令的缩写: <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a></pre><p>class 与 style 是 HTML 元素的属性，用于设置元素的样式，表达式的结果类型除了字符串之外，还可以是对象或数组。style标签用于为文档定义样式信息.v-bind:class表示class存在是否将取决于数据属性isActive的true/false<br></p> <p><img src="https://img.php.cn/upload/image/362/231/714/1661513130478907.png" title="1661513130478907.png" alt="15.png"></p> <h4><strong>多属性动态切换class,可以实时调整data里面的值来改变输出结果:</strong></h4> <p>style标签内定义了两种样式,并使用v-bind指令进行了样式绑定.由于data里面isActive属性为true所以对应样式被触发.可以更改data属性值来动态调整你想要的样式输出.</p> <p><img src="https://img.php.cn/upload/image/498/133/353/1661513138801150.png" title="1661513138801150.png" alt="16.png"></p> <h4><strong>直接绑定数据里面的一个对象:classobject和class是对应的.</strong></h4> <p>text-danger 类背景颜色覆盖了 active 类的背景色：</p> <p><img src="https://img.php.cn/upload/image/108/236/602/1661513146892643.png" title="1661513146892643.png" alt="17.png"></p> <h4><strong>数组的用法:</strong></h4> <p>可以把一个数组传给v-bind:class,以应用一个class列表.Text-danger会覆盖activeClass,所以显示结果为红色.</p> <p><img src="https://img.php.cn/upload/image/650/268/797/1661513154394795.png" title="1661513154394795.png" alt="18.png"></p> <h4><strong>根据条件表达式判断输出:</strong></h4> <p>以下实例使用了三元表达式.表示始终存在errorClass但是activeClass只能在isActive为true时候显示.</p> <p><img src="https://img.php.cn/upload/image/246/455/269/1661513161919144.png" title="1661513161919144.png" alt="19.png"></p> <p><strong><span style="font-size: 18px;">Vue.js style(内联样式):我们可以在 v-bind:style 直接设置样式</span></strong></p> <p><img src="https://img.php.cn/upload/image/917/976/824/1661513167392205.png" title="1661513167392205.png" alt="20.png"></p> <h4><strong>可以直接绑定到一个样式对象，让模板更清晰</strong></h4> <p><img src="https://img.php.cn/upload/image/376/760/748/1661513174339663.png" title="1661513174339663.png" alt="21.png"></p> <h4><strong>v-bind:style 可以使用数组将多个样式对象应用到一个元素上：</strong></h4> <p><img src="https://img.php.cn/upload/image/527/345/561/1661513180444643.png" title="1661513180444643.png" alt="22.png"></p> <p><strong><span style="font-size: 18px;">vue用法之–事件处理器:v-on指令用来事件监听.</span></strong></p><pre class="brush:php;toolbar:false;">以下示例调用了v-on指令来监听按钮的点击变化,每次点击counter加1最后做一个输出.</pre><p><img src="https://img.php.cn/upload/image/796/943/902/1661513195255734.png" title="1661513195255734.png" alt="23.png"></p> <h4><strong>v-on指令:处理用户输入</strong></h4><pre class="brush:php;toolbar:false;"> 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器， 通过它调用在 Vue 实例中定义的方法： methods是定义的函数. 以下示例同样是使用v-on来监听按钮的变化.当点击按钮会调用自定义的函数reverseMessage 来对data里面定义的message进行反转拼接操作.</pre><p><img src="https://img.php.cn/upload/image/415/634/368/1661513257551761.png" title="1661513257551761.png" alt="24.png"></p> <h4><strong>v-on用法:内联js语句中调用方法</strong></h4><pre class="brush:php;toolbar:false;">say()实际是一条JS语句，带有括号的就叫内联处理器.相当于直接使用v-on来监听一条js语句,当点击按钮时进行调用say语句进行输出.</pre><p><img src="https://img.php.cn/upload/image/335/771/446/1661513263244177.png" title="1661513263244177.png" alt="25.png"></p> <h4><strong>vue:事件修饰符</strong></h4><pre class="brush:php;toolbar:false;">Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <p v-on:click.capture="doThis">...</p> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <p v-on:click.self="doThat">...</p> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a></pre><h4><strong>vue:按键修饰符</strong></h4><pre class="brush:php;toolbar:false;">Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> 全部的按键别名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 实例: <!-- Alt + C的ASCll码为67 --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <p @click.ctrl="doSomething">Do something</p></pre><h2><strong>vue.js表单</strong></h2> <p>你可以用 v-model 指令在表单,,元素上创建双向数据绑定。V-model指令会自动根据控件类型自动选取正确的方法来更新元素.在input输入框中我们可以使用 v-model 指令来实现双向数据绑定.<br><img src="https://img.php.cn/upload/image/751/425/712/1661513272226671.png" title="1661513272226671.png" alt="26.png"></p> <h4><strong>实例:</strong></h4><pre class="brush:php;toolbar:false;">以下实例将js代码单独分离出来用src标签引入即可.在主程序里面看起来代码量比较少. 使用了v-model指令将输入框内容就行了双向绑定.会自动对页面数据变化做出响应.</pre><p><img src="https://img.php.cn/upload/image/122/204/279/1661513279459034.png" title="1661513279459034.png" alt="27.png"></p> <p><strong>输出:</strong></p> <p><img src="https://img.php.cn/upload/image/296/228/246/1661513287669832.png" title="1661513287669832.png" alt="28.png"></p> <p><strong>更改输入框数据查看效果</strong></p> <p>以上实例中 {<!-- -->{message}} 会根据输入框 input 的改变而改变，如果你不想让其变化可以修改为：{<!-- -->{* message }}<br><img src="https://img.php.cn/upload/article/000/000/024/2ccf9268de2d45354d849dab1a69172d-30.png" alt="在这里插入图片描述"></p> <p><strong>v-model对input和textarea框进行双向数据绑定:</strong></p><pre class="brush:php;toolbar:false;">Placeholder是一个动态变量可以实现动态绑定.input单行文本框,textarea多行文本框. style标签用于定义一些代码的呈现样式,后面会有详细讲解. 本实例就是使用v-model指令对单行和多行文本框进行了双向数据绑定.当我们修改文本框内容,vue会自动响应页面数据变化.</pre><p><img src="https://img.php.cn/upload/image/638/194/970/1661513294834706.png" title="1661513294834706.png" alt="29.png"></p> <p><strong>v-model对复选框的双向数据绑定</strong></p><pre class="brush:php;toolbar:false;"><input>标签用于收集用户信息.type规定了input元素的类型,value指定了输入字段的初始值. checkbox为复选框类型. <span>标签被用来组合文档中的行内元素. <br>是换行标签. <label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。 不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。</pre><p><img src="https://img.php.cn/upload/image/605/200/669/1661513300864595.png" title="1661513300864595.png" alt="30.png"></p> <p><strong>v-model对单选按钮的双向绑定: radio为单选按钮类型</strong></p> <p><img src="https://img.php.cn/upload/image/833/676/862/1661513306889140.png" title="1661513306889140.png" alt="31.png"></p> <p><strong>v-model对select下拉列表的双向绑定:</strong></p><pre class="brush:php;toolbar:false;">option 元素定义下拉列表中的一个选项。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个 元素显示。option 元素位于 select 元素内部,必须与select元素配合使用不然没意义。<option> 标签可以在不带有任何属性的 情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。</pre><p><img src="https://img.php.cn/upload/image/734/524/923/1661513312112298.png" title="1661513312112298.png" alt="32.png"></p> <p><strong>v-model修饰符</strong></p><pre class="brush:php;toolbar:false;">.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ,从而转变为在change 事件中同步,也就是在失去焦点或者按下回车键才更新. <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > .number 如果想自动将用户的输入值转为 Number 类型，可以添加一个修饰符number给v-model 来处理输入值：否则你输入的是数字 但是类型却是字符串String,在数字输入框中有用. <input v-model.number="age" type="number"> 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 .trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： <input v-model.trim="msg"></pre><p>（学习视频分享：<a href="https://www.php.cn/course/list/1.html" target="_blank" textvalue="web前端入门">web前端入门</a>）</p> </div> <div class="artmoreart "> <div class="artdp artptit"><span></span> <p>相关文章</p> </div> <div class="artmores flexColumn"> <a class="artmrlis flexRow" href="/faq/1222103.html" title="Vue项目中严格模式和Proxy有什么联系"><b></b> <p class="overflowclass">Vue项目中严格模式和Proxy有什么联系</p> </a> <a class="artmrlis flexRow" href="/faq/1222099.html" title="Vue项目去除严格模式是否会影响代码优化"><b></b> <p class="overflowclass">Vue项目去除严格模式是否会影响代码优化</p> </a> <a class="artmrlis flexRow" href="/faq/1205802.html" title="Vue项目去除严格模式的配置应该在哪个阶段"><b></b> <p class="overflowclass">Vue项目去除严格模式的配置应该在哪个阶段</p> </a> <a class="artmrlis flexRow" href="/faq/1205585.html" title="Vue项目去除严格模式如何测试"><b></b> <p class="overflowclass">Vue项目去除严格模式如何测试</p> </a> <a class="artmrlis flexRow" href="/faq/1205578.html" title="Vue项目中严格模式和Vuex的关系是什么"><b></b> <p class="overflowclass">Vue项目中严格模式和Vuex的关系是什么</p> </a> </div> <div class="artmoretabs flexRow"> <p>相关标签:</p> <div class="mtbs flexRow"> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15721.html" target="_blank">vue</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15957.html" target="_blank">vue3</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=JavaScript" target="_blank">JavaScript</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=架构" target="_blank">架构</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=css" target="_blank">css</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=vue.js" target="_blank">vue.js</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=html" target="_blank">html</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=前端框架" target="_blank">前端框架</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=for" target="_blank">for</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=select" target="_blank">select</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=全局变量" target="_blank">全局变量</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=字符串" target="_blank">字符串</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=循环" target="_blank">循环</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=class" target="_blank">class</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=JS" target="_blank">JS</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=对象" target="_blank">对象</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=事件" target="_blank">事件</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=dom" target="_blank">dom</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=input" target="_blank">input</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=http" target="_blank">http</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=https" target="_blank">https</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=linux" target="_blank">linux</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=ui" target="_blank">ui</a> </div> </div> <p class="statement">本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</p> <div class="lastanext flexRow"> <a class="lastart flexRow" href="/faq/495386.html" title="vue指令是啥"><span>上一篇：</span>vue指令是啥</a> <a class="nextart flexRow" href="/faq/495427.html" title="html5和ih5有啥区别"><span>下一篇：</span>html5和ih5有啥区别</a> </div> </div> <div class="artlef-down "> <div class="authormore "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>作者最新文章</p> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/528161.html" title="探讨如何在Vue3中编写单元测试"><b></b> <p class="overflowclass">探讨如何在Vue3中编写单元测试</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-25 19:41</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/528163.html" title="深入了解Node中的Buffer"><b></b> <p class="overflowclass">深入了解Node中的Buffer</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-25 19:49</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/528165.html" title="一文理解JavaScript中的单例模式"><b></b> <p class="overflowclass">一文理解JavaScript中的单例模式</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-25 19:53</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/528167.html" title="如何解决跨域？常见解决方案浅析"><b></b> <p class="overflowclass">如何解决跨域？常见解决方案浅析</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-25 19:57</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/529350.html" title="实用Word技巧分享：简繁转换功能竟然可以这样用！"><b></b> <p class="overflowclass">实用Word技巧分享：简繁转换功能竟然可以这样用！</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-26 17:27</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/529356.html" title="实用Excel技巧分享：4种删除重复值的小妙招！"><b></b> <p class="overflowclass">实用Excel技巧分享：4种删除重复值的小妙招！</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-26 17:31</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/529358.html" title="一文聊聊Node中的内存控制"><b></b> <p class="overflowclass">一文聊聊Node中的内存控制</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-26 17:37</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/529360.html" title="一文讨论Vue2中key和Vue3中key的区别"><b></b> <p class="overflowclass">一文讨论Vue2中key和Vue3中key的区别</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-26 17:41</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/529362.html" title="【整理分享】7个热门的React状态管理工具"><b></b> <p class="overflowclass">【整理分享】7个热门的React状态管理工具</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-26 17:47</p> </div> </div> </div> <div class="authlist flexColumn"> <div class="autharts flexRow"> <a class="autharta flexRow " href="/faq/529366.html" title="深入搞懂Redis中的哨兵"><b></b> <p class="overflowclass">深入搞懂Redis中的哨兵</p> </a> <div class="authtime flexRow"><b></b> <p>2023-04-26 17:59</p> </div> </div> </div> </div> <div class="moreAi "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>热门AI工具</p> </div> <a target="_blank" class="rititle-more flexRow" href="/ai" title="热门AI工具"><span>更多</span><b></b></a> </div> <div class="moreailist flexRow"> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/723" title="DeepSeek" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679963982777.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="DeepSeek" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">DeepSeek</p> <p class="overflowclass abriptwo">幻方量化公司旗下的开源大模型平台</p> <div class="aidconstab flexRow"> <p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p> <p href="/ai/tag/code/open-plat" title="开放平台" class="aidcontbp flexRow flexcenter">开放平台</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/726" title="豆包大模型" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680204067325.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="豆包大模型" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">豆包大模型</p> <p class="overflowclass abriptwo">字节跳动自主研发的一系列大型语言模型</p> <div class="aidconstab flexRow"> <p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/725" title="通义千问" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974228210.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="通义千问" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">通义千问</p> <p class="overflowclass abriptwo">阿里巴巴推出的全能AI助手</p> <div class="aidconstab flexRow"> <p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/854" title="腾讯元宝" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="腾讯元宝" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">腾讯元宝</p> <p class="overflowclass abriptwo">腾讯混元平台推出的AI助手</p> <div class="aidconstab flexRow"> <p href="/ai/tag/office/docs" title="文档处理" class="aidcontbp flexRow flexcenter">文档处理</p> <p href="/ai/tag/office/excel" title="Excel 表格" class="aidcontbp flexRow flexcenter">Excel 表格</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/724" title="文心一言" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974557049.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="文心一言" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">文心一言</p> <p class="overflowclass abriptwo">文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。</p> <div class="aidconstab flexRow"> <p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p> <p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/1507" title="讯飞写作" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a4153cd86671.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="讯飞写作" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">讯飞写作</p> <p class="overflowclass abriptwo">基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿</p> <div class="aidconstab flexRow"> <p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p> <p href="/ai/tag/text/write" title="写作工具" class="aidcontbp flexRow flexcenter">写作工具</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/1115" title="即梦AI" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d8f7c530c315.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="即梦AI" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">即梦AI</p> <p class="overflowclass abriptwo">一站式AI创作平台，免费AI图片和视频生成。</p> <div class="aidconstab flexRow"> <p href="/ai/tag/image/image-titching" title="图片拼接" class="aidcontbp flexRow flexcenter">图片拼接</p> <p href="/ai/tag/image/image-create" title="图画生成" class="aidcontbp flexRow flexcenter">图画生成</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/808" title="ChatGPT" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679970194596.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="ChatGPT" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">ChatGPT</p> <p class="overflowclass abriptwo">最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。</p> <div class="aidconstab flexRow"> <p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p> <p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p> </div> </div> </a> </div> <div class="aidcons flexRow check "> <a target="_blank" href="/ai/821" title="智谱清言 - 免费全能的AI助手" class="aibtns flexRow"> <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679976181507.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="智谱清言 - 免费全能的AI助手" class="aibtnimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> <div class="aibtn-right flexColumn"> <p class="overflowclass abripone">智谱清言 - 免费全能的AI助手</p> <p class="overflowclass abriptwo">智谱清言 - 免费全能的AI助手</p> <div class="aidconstab flexRow"> <p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p> <p href="/ai/tag/office/pdf" title="PDF 文档" class="aidcontbp flexRow flexcenter">PDF 文档</p> </div> </div> </a> </div> </div> </div> </div> </div> </div> <div class="conRight artdtilRight "> <div class="artrig-adv "> <script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script> </div> <div class="hotzt artdtzt"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>相关专题</p> </div> <a target="_blank" class="rititle-more flexRow" href="/faq/zt" title="相关专题"><span>更多</span><b></b></a> </div> <div class="hotztuls flexColumn"> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/jsszcd" class="aClass flexRow hotzta" title="js获取数组长度的方法"><img src="https://img.php.cn/upload/subject/202306/20/2023062017455159983.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js获取数组长度的方法" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/jsszcd" class="aClass flexRow hotztra overflowclass" title="js获取数组长度的方法">js获取数组长度的方法</a> <p class="aClass flexRow hotztrp overflowclass">在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">553</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.06.20</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/jssxym" class="aClass flexRow hotzta" title="js刷新当前页面"><img src="https://img.php.cn/upload/subject/202307/04/2023070409584996422.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js刷新当前页面" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/jssxym" class="aClass flexRow hotztra overflowclass" title="js刷新当前页面">js刷新当前页面</a> <p class="aClass flexRow hotztrp overflowclass">js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">374</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.07.04</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/jssswr" class="aClass flexRow hotzta" title="js四舍五入"><img src="https://img.php.cn/upload/subject/202307/04/2023070410160418152.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js四舍五入" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/jssswr" class="aClass flexRow hotztra overflowclass" title="js四舍五入">js四舍五入</a> <p class="aClass flexRow hotztrp overflowclass">js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">731</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.07.04</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/jsscjddff" class="aClass flexRow hotzta" title="js删除节点的方法"><img src="https://img.php.cn/upload/subject/202309/01/2023090117024286721.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js删除节点的方法" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/jsscjddff" class="aClass flexRow hotztra overflowclass" title="js删除节点的方法">js删除节点的方法</a> <p class="aClass flexRow hotztrp overflowclass">js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">477</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.09.01</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/javascriptzy" class="aClass flexRow hotzta" title="JavaScript转义字符"><img src="https://img.php.cn/upload/subject/202309/04/2023090411084899588.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="JavaScript转义字符" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/javascriptzy" class="aClass flexRow hotztra overflowclass" title="JavaScript转义字符">JavaScript转义字符</a> <p class="aClass flexRow hotztrp overflowclass">JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">394</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.09.04</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/jsscsjsdff" class="aClass flexRow hotzta" title="js生成随机数的方法"><img src="https://img.php.cn/upload/subject/202309/04/2023090411300156430.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="js生成随机数的方法" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/jsscsjsdff" class="aClass flexRow hotztra overflowclass" title="js生成随机数的方法">js生成随机数的方法</a> <p class="aClass flexRow hotztrp overflowclass">js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">990</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.09.04</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/rhqyjavascrip" class="aClass flexRow hotzta" title="如何启用JavaScript"><img src="https://img.php.cn/upload/subject/202309/12/2023091210411962381.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="如何启用JavaScript" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/rhqyjavascrip" class="aClass flexRow hotztra overflowclass" title="如何启用JavaScript">如何启用JavaScript</a> <p class="aClass flexRow hotztrp overflowclass">JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">656</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.09.12</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/jssymbol" class="aClass flexRow hotzta" title="Js中Symbol类详解"><img src="https://img.php.cn/upload/subject/202309/20/2023092011360778721.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Js中Symbol类详解" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/jssymbol" class="aClass flexRow hotztra overflowclass" title="Js中Symbol类详解">Js中Symbol类详解</a> <p class="aClass flexRow hotztrp overflowclass">javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">551</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2023.09.20</p> </div> </div> </div> </div> <div class="hotztlls flexRow"> <a target="_blank" href="/faq/jzmyykf" class="aClass flexRow hotzta" title="Java 桌面应用开发（JavaFX 实战）"><img src="https://img.php.cn/upload/subject/202601/14/2026011410210220755.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Java 桌面应用开发（JavaFX 实战）" class="hotztaimg" onerror="this.src='/static/lhimages/moren/morentu.png'"></a> <div class="hotztright flexColumn"> <a target="_blank" href="/faq/jzmyykf" class="aClass flexRow hotztra overflowclass" title="Java 桌面应用开发（JavaFX 实战）">Java 桌面应用开发（JavaFX 实战）</a> <p class="aClass flexRow hotztrp overflowclass">本专题系统讲解 Java 在桌面应用开发领域的实战应用，重点围绕 JavaFX 框架，涵盖界面布局、控件使用、事件处理、FXML、样式美化（CSS）、多线程与UI响应优化，以及桌面应用的打包与发布。通过完整示例项目，帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。</p> <div class="hotztrdown flexRow"> <div class="htztdsee flexRow"> <b></b> <p class="">36</p> </div> <div class="htztdTime flexRow"> <b></b> <p>2026.01.14</p> </div> </div> </div> </div> </div> </div> <div class="hotdownload "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>热门下载</p> </div> <a target="_blank" class="rititle-more flexRow" href="/xiazai" title="热门下载"><span>更多</span><b></b></a> </div> <div class="hotdownTab"> <div class="hdTabs flexRow"> <div class="check" data-id="onef">网站特效 <b></b> </div> / <div class="" data-id="twof">网站源码 <b></b></div> / <div class="" data-id="threef">网站素材 <b></b></div> / <div class="" data-id="fourf">前端模板 <b></b></div> </div> <ul class="onef"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="Bootstrap复选框样式美化特效" href="/xiazai/js/8450"><span>[表单按钮]</span><span>Bootstrap复选框样式美化特效</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="CSS3实现水位充满文字特效" href="/xiazai/js/8449"><span>[文字特效]</span><span>CSS3实现水位充满文字特效</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="超酷CSS3发光搜索框表单提交" href="/xiazai/js/8448"><span>[表单按钮]</span><span>超酷CSS3发光搜索框表单提交</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="animate.css制作酷炫文字特效" href="/xiazai/js/8447"><span>[文字特效]</span><span>animate.css制作酷炫文字特效</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="jQuery售后五星评价表单代码" href="/xiazai/js/8446"><span>[表单按钮]</span><span>jQuery售后五星评价表单代码</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="jQuery打字机文字输入特效" href="/xiazai/js/8445"><span>[文字特效]</span><span>jQuery打字机文字输入特效</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="jquery文件上传表单" href="/xiazai/js/8444"><span>[表单按钮]</span><span>jquery文件上传表单</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="纯CSS3绿色锯齿字体特效下载" href="/xiazai/js/8443"><span>[文字特效]</span><span>纯CSS3绿色锯齿字体特效下载</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="Swiper 3D图片滚动" href="/xiazai/js/8442"><span>[图片特效]</span><span>Swiper 3D图片滚动</span></a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" title="js select选中显示不同表单内容" href="/xiazai/js/8441"><span>[表单按钮]</span><span>js select选中显示不同表单内容</span></a> </div> </li> </ul> <ul class="twof" style="display:none;"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11354" title="思翔企(事)业单位文件柜 build 20080313"><span>[其它模板]</span><span>思翔企(事)业单位文件柜 build 20080313</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0"><span>[企业站源码]</span><span>雅龙智能装备工业设备类WordPress主题1.0</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11352" title="威发卡自动发卡系统"><span>[电商源码]</span><span>威发卡自动发卡系统</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11351" title="卡密分发系统"><span>[电商源码]</span><span>卡密分发系统</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11350" title="中华陶瓷网"><span>[电商源码]</span><span>中华陶瓷网</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11349" title="简洁粉色食品公司网站"><span>[电商源码]</span><span>简洁粉色食品公司网站</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11348" title="极速网店系统"><span>[电商源码]</span><span>极速网店系统</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11347" title="淘宝妈妈_淘客推广系统"><span>[电商源码]</span><span>淘宝妈妈_淘客推广系统</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11346" title="积客B2SCMS商城系统"><span>[电商源码]</span><span>积客B2SCMS商城系统</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/11345" title="CODEC2I 众筹系统"><span>[电商源码]</span><span>CODEC2I 众筹系统</span> </a> </div> </li> </ul> <ul class="threef" style="display:none;"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4193" title="国潮风莲花荷塘插画矢量素材"><span>[网站素材]</span><span>国潮风莲花荷塘插画矢量素材</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4192" title="假日快乐烟花背景ps素材下载"><span>[网站素材]</span><span>假日快乐烟花背景ps素材下载</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4191" title="新春喜庆剪纸喜鹊窗花矢量素材"><span>[网站素材]</span><span>新春喜庆剪纸喜鹊窗花矢量素材</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4190" title="绿色生态梯田自然风景矢量素材"><span>[网站素材]</span><span>绿色生态梯田自然风景矢量素材</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4189" title="紫色风格2026折扣横幅海报设计下载"><span>[网站素材]</span><span>紫色风格2026折扣横幅海报设计下载</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4188" title="手绘烘焙甜点菜单矢量模板"><span>[网站素材]</span><span>手绘烘焙甜点菜单矢量模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4187" title="电子数码产品超级促销海报设计下载"><span>[网站素材]</span><span>电子数码产品超级促销海报设计下载</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4186" title="新中式喜鹊登梅花纹样矢量素材"><span>[网站素材]</span><span>新中式喜鹊登梅花纹样矢量素材</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4185" title="极简线条女性花卉头像矢量素材"><span>[网站素材]</span><span>极简线条女性花卉头像矢量素材</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/sucai/4184" title="极简城市高楼建筑剪影矢量素材"><span>[网站素材]</span><span>极简城市高楼建筑剪影矢量素材</span> </a> </div> </li> </ul> <ul class="fourf" style="display:none;"> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8590" title="驾照考试驾校HTML5网站模板"><span>[前端模板]</span><span>驾照考试驾校HTML5网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8589" title="驾照培训服务机构宣传网站模板"><span>[前端模板]</span><span>驾照培训服务机构宣传网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8588" title="HTML5房地产公司宣传网站模板"><span>[前端模板]</span><span>HTML5房地产公司宣传网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8587" title="新鲜有机肉类宣传网站模板"><span>[前端模板]</span><span>新鲜有机肉类宣传网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8586" title="响应式天气预报宣传网站模板"><span>[前端模板]</span><span>响应式天气预报宣传网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8585" title="房屋建筑维修公司网站CSS模板"><span>[前端模板]</span><span>房屋建筑维修公司网站CSS模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8584" title="响应式志愿者服务网站模板"><span>[前端模板]</span><span>响应式志愿者服务网站模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8583" title="创意T恤打印店网站HTML5模板"><span>[前端模板]</span><span>创意T恤打印店网站HTML5模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8582" title="网页开发岗位简历作品展示网页模板"><span>[前端模板]</span><span>网页开发岗位简历作品展示网页模板</span> </a> </div> </li> <li> <div class="wzrfourli flexRow"> <b></b> <a target="_blank" href="/xiazai/code/8581" title="响应式人力资源机构宣传网站模板"><span>[前端模板]</span><span>响应式人力资源机构宣传网站模板</span> </a> </div> </li> </ul> </div> <script> $('.hdTabs>div').click(function (e) { $('.hdTabs>div').removeClass('check') $(this).addClass('check') $('.hotdownTab>ul').css('display', 'none') $('.' + e.currentTarget.dataset.id).show() }) </script> </div> <div class="artrig-adv "> <script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script> </div> <div class="xgarts "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>相关下载</p> </div> <a target="_blank" class="rititle-more flexRow" href="/xiazai" title="相关下载"><span>更多</span><b></b></a> </div> <div class="xgwzlist "> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="Bootstrap表格动态加载内容和排序功能" href="/xiazai/js/3365">Bootstrap表格动态加载内容和排序功能</a></div> </div> </div> <div class="jpkc"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>精品课程</p> </div> <a class="rititle-more flexRow" target="_blank" href="/course/sort_new.html" title="精品课程"><span>更多</span><b></b></a> </div> <div class=" jpkcTab"> <div class=" jpkcTabs flexRow"> <div class="check" data-id="onefd">相关推荐 <b></b> </div> / <div class="" data-id="twofd">热门推荐 <b></b></div> / <div class="" data-id="threefd">最新课程 <b></b></div> </div> <div class="onefd jpktabd"> <div class="ristyA flexRow " > <a target="_blank" href="/course/1692.html" title="Vue 教程"> <img src="https://img.php.cn/upload/course/000/000/090/68a83d50f32e9896.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Vue 教程" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1692.html" title="Vue 教程" class="rirightp overflowclass">Vue 教程</a> <div class="risrdown flexRow"> <p>共42课时 | 6.4万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/1615.html" title="Vue3.x 工具篇--十天技能课堂"> <img src="https://img.php.cn/upload/course/000/000/067/655d9424b248c649.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Vue3.x 工具篇--十天技能课堂" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1615.html" title="Vue3.x 工具篇--十天技能课堂" class="rirightp overflowclass">Vue3.x 工具篇--十天技能课堂</a> <div class="risrdown flexRow"> <p>共26课时 | 1.4万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/1603.html" title="ThinkPHP6/后台管理/支付系统--实战开发"> <img src="https://img.php.cn/upload/course/000/000/067/65489459a73c2135.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="ThinkPHP6/后台管理/支付系统--实战开发" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1603.html" title="ThinkPHP6/后台管理/支付系统--实战开发" class="rirightp overflowclass">ThinkPHP6/后台管理/支付系统--实战开发</a> <div class="risrdown flexRow"> <p>共92课时 | 5.8万人学习</p> </div> </div> </div> </div> <div class="twofd jpktabd" style="display:none;"> <div class="ristyA flexRow " > <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a> <div class="risrdown flexRow"> <p>共6课时 | 7万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="rirightp overflowclass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="risrdown flexRow"> <p>共79课时 | 151.1万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"> <img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="phpStudy极速入门视频教程" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程" class="rirightp overflowclass">phpStudy极速入门视频教程</a> <div class="risrdown flexRow"> <p>共6课时 | 53.4万人学习</p> </div> </div> </div> </div> <div class="threefd jpktabd" style="display:none;"> <div class="ristyA flexRow " > <a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通"> <img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新Python教程 从入门到精通" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通" class="rirightp overflowclass">最新Python教程 从入门到精通</a> <div class="risrdown flexRow"> <p>共4课时 | 0.6万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"> <img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学" class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a> <div class="risrdown flexRow"> <p>共6课时 | 7万人学习</p> </div> </div> </div> <div class="ristyA flexRow " > <a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学"> <img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="PHP新手语法线上课程教学" class="ristyAimg" onerror="this.src='/static/mobimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学" class="rirightp overflowclass">PHP新手语法线上课程教学</a> <div class="risrdown flexRow"> <p>共13课时 | 0.9万人学习</p> </div> </div> </div> </div> <script> $('.jpkcTabs>div').click(function (e) { $('.jpkcTabs>div').removeClass('check') $(this).addClass('check') $('.jpkcTab .jpktabd').css('display', 'none') $('.' + e.currentTarget.dataset.id).show() }) </script> </div> </div> <div class="zxarts "> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>最新文章</p> </div> <a class="rititle-more flexRow" href="" title="最新文章" target="_blank"><span>更多</span><b></b></a> </div> <div class="xgwzlist "> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="BeJSON 在数据处理领域的独特优势" href="/faq/1546882.html">BeJSON 在数据处理领域的独特优势</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="BeJSON：从诞生到未来，JSON 世界的领航者" href="/faq/1543866.html">BeJSON：从诞生到未来，JSON 世界的领航者</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="bejson在编程中啥意思" href="/faq/1540334.html">bejson在编程中啥意思</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="BeJSON适合哪些用户群体" href="/faq/1530063.html">BeJSON适合哪些用户群体</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="BeJSON—— 开启 JSON 高效处理的大门" href="/faq/1528132.html">BeJSON—— 开启 JSON 高效处理的大门</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="BeJSON：为开发者打造的 JSON 便捷处理站" href="/faq/1528049.html">BeJSON：为开发者打造的 JSON 便捷处理站</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="解析 BeJSON：多功能 JSON 在线工具平台" href="/faq/1526587.html">解析 BeJSON：多功能 JSON 在线工具平台</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="探秘 BeJSON：JSON 相关工具的强大平台" href="/faq/1525850.html">探秘 BeJSON：JSON 相关工具的强大平台</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="巧用 BeJSON，提升 JSON 处理效率" href="/faq/1525789.html">巧用 BeJSON，提升 JSON 处理效率</a></div> <div class="xgwzlid flexRow"><b></b><a target="_blank" title="BeJSON 与其他 JSON 工具的全方位比较" href="/faq/1525760.html">BeJSON 与其他 JSON 工具的全方位比较</a></div> </div> </div> </div> </div> </div> <!--底部--> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a target="_blank" href="/about/us.html" rel="nofollow" title="关于我们" class="cBlack">关于我们</a> <a target="_blank" href="/about/disclaimer.html" rel="nofollow" title="免责申明" class="cBlack">免责申明</a> <a target="_blank" href="/about/jbzx.html" rel="nofollow" title="举报中心" class="cBlack">举报中心</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a target="_blank" href="https://www.php.cn/teacher.html" rel="nofollow" title="讲师合作" class="cBlack">讲师合作</a> <a target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" title="广告合作" class="cBlack">广告合作</a> <a target="_blank" href="/new/" title="最新文章列表" class="cBlack">最新更新</a> <div class="clear"></div> </dt> <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> <span class="ylwTopBox"> <a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a> <em style="display:none;" class="ylwTopSub"> <p>微信扫码<br/>关注PHP中文网服务号</p> <img src="/static/images/examples/text16.png"/> </em> </span> <span class="ylwTopBox"> <a href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes" class="cBlack"><b class="icon2"></b>技术交流群</a> <em style="display:none;" class="ylwTopSub"> <p>QQ扫码<br/>加入技术交流群</p> <img src="/static/images/examples/text18.png"/> </em> </span> <div class="clear"></div> </dd> </dl> </div> <div class="phpFootRight"> <div class="phpFootMsg"> <span><img src="/static/images/examples/text17.png"/></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"><p>Copyright 2014-2026 <a href="https://www.php.cn/" >https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" >湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" ><b></b></a></div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span> <script src="/static/js/cdn.js?v=1.0.1"></script> <!--底部 end--> <!-- content --> <!-- <div class="phpFudong"> <div class="phpFudongIn"> <div class="phpFudongImg"></div> <div class="phpFudongXue">登录PHP中文网，和优秀的人一起学习！</div> <div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div> <div class="phpFudongCode"><a href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div> <div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div> <div class="clear"></div> </div> </div> --> <!--底部浮动层 end--> <!--侧导航--> <style> .layui-fixbar{display: none;} </style> <div class="phpSdhBox" style="height:240px !important;"> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="/k24.html" class="hover" title="PHP学习"> <b class="icon1"></b> <p>PHP学习</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="https://www.php.cn/blog/detail/1047189.html" > <b class="icon2"></b> <p>技术支持</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="#"> <b class="icon6"></b> <p>返回顶部</p> </a> </div> </div> </li> </div> </body> </html> <script type="text/javascript" src="/hitsUp?type=article&id=495387&time=1768392346"> </script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1768392346"></script> <script> article_status = "287557"; </script> <input type="hidden" id="verifycode" value="/captcha.html"> <script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/jquery.cookie.js"></script> <script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script> <script> function setCookie(name, value, iDay) { //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } function getCookie(name) { var cookieArr = document.cookie.split(";"); for (var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if (name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } </script> <!-- Matomo --> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '11']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <!-- End Matomo Code --> <script> setCookie('is_article', 1, 1); </script> <script> var is_login = "0"; var show = 0; var ceng = getCookie('ceng'); //未登录复制显示登录按钮 if(is_login == 0 && false){ $(".code").hover(function(){ $(this).find('.contentsignin').show(); },function(){ $(this).find('.contentsignin').hide(); }); //不给复制 $('.code').bind("cut copy paste",function(e) { e.preventDefault(); }); $('.code .contentsignin').click(function(){ $(document).trigger("api.loginpopbox"); }) }else{ // 获取所有的 <pre> 元素 var preElements = document.querySelectorAll('pre'); preElements.forEach(function(preElement) { // 创建复制按钮 var copyButton = document.createElement('button'); copyButton.className = 'copy-button'; copyButton.textContent = '复制'; // 添加点击事件处理程序 copyButton.addEventListener('click', function() { // 获取当前按钮所属的 <pre> 元素中的文本内容 var textContent = preElement.textContent.trim(); // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容 var tempTextarea = document.createElement('textarea'); tempTextarea.value = textContent; // 将临时 textarea 添加到文档中 document.body.appendChild(tempTextarea); // 选中临时 textarea 中的文本内容并执行复制操作 tempTextarea.select(); document.execCommand('copy'); // 移除临时 textarea 元素 document.body.removeChild(tempTextarea); // 更新按钮文本为 "已复制" this.textContent = '已复制'; }); // 创建AI写代码按钮 var aiButton = document.createElement('button'); aiButton.className = 'copy-button'; aiButton.textContent = 'AI写代码'; aiButton.style.marginLeft = '5px'; aiButton.style.marginRight = '5px'; // 添加点击事件处理程序 aiButton.addEventListener('click', function() { // Generate a random number between 0 and 1 var randomChance = Math.random(); // If the random number is less than 0.5, open the first URL, else open the second if (randomChance < 0.5) { window.open('https://www.doubao.com/chat/coding?channel=php&source=hw_db_php', '_blank'); } else { window.open('https://click.aliyun.com/m/1000402709/', '_blank'); } }); // 将按钮添加到 <pre> 元素前面 preElement.parentNode.insertBefore(copyButton, preElement); preElement.parentNode.insertBefore(aiButton, preElement); }); } </script>