Java Web(十）--jQuery

介绍

官网文档：jQuery 教程

jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

下载地址：https://jquery.com/download/%20jQuery

jQuery 是一个快速的，简洁的 javaScrip工具库，使用户能更方便地处理 HTML,css,dom...  
宗旨是—WRITE LESS,DO MORE，写更少的代码，做更多的事情；

  •     提供方法、events、选择器，并且方便地为网站提供 AJAX 交互；
  •     jQuery 实现了浏览器的兼容问题；

jQuery的两把利器分别：

  • jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
  • jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。

入门案例

点击按钮，弹出"hello,jQuery"。

1）使用传统的dom编程/原生js,完成

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>simple_jquery</title><script type="text/javascript">/*** 使用 dom 编程* 1. 代码比较麻烦* 2. document.getElementById("btn01") 返回的是 dom 对象*///使用原生 js+dom 完成//(1) 当页面加载完毕后，就执行 functionwindow.onload = function () {//1. 得到 id=btn01 的 dom 对象var but01 = document.getElementById("but01");//2. 绑定点击事件but01.onclick = function () {alert("哈哈")}}</script>
</head>
<body>
<button id="but01">按钮</button>
</body>
</html>

2）使用jQuery完成,体会jQuery的"WRITELESS,DOMORE"

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jQuery快速入门</title><!--    引入jquery库--><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">/*** 说明* 1. jquery的底层仍然是js,只是做了封装* 2. $(function () {} 等价  window.onload = function () {}* 3. $() 可以理解成是一个函数 [可以定义 function $(id) {} ...]* 3. $("#btn01") 底层: document.getElementById("btn01")* 4. 注意 $("#btn01") 不能写成 $("btn01")* 5. 通过$("#btn01") 返回的对象就是 jquery对象(即进行了封装)，而不是原生的dom对象*///使用jquery//1. 引入jquery库文件//2. $(function(){}) 等价原生的js的, 当页面加载完毕就会执行 function(){}/*window.onload= function(){}*/$(function () {//1.得到btn01这个对象->jquery对象// $btn01 是一个jquery对象 其实就是对dom对象的包装，此时可以使用jquery对象的方法，事件等待// 通过debug 我们发现jquery对象是数组对象.//2. jquery中，获取对象的方法是 $("#id"), 必须在id前有#//3. 编程中，规定 jquery对象的命名以$开头.(不是必须，但是约定)// 老韩编程小技巧: (1) 不明的地方可以做测试 (2) 使用debug直接看对象构成//  (3) 尽量能够看到效果，或者这个对象构成 => 了解 (4) 多动手var $btn01 = $("#btn01");//2.绑定事件$btn01.click(function () {alert("hello,jquery...~~~")})});</script></head><body>
<button id="btn01">按钮1</button>
</body></html>

 jQuery核心函数

jQuery 选择器

  • 选择器是 jQuery 的核心，在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。jQuery选择器返回的是jQuery对象。
  • jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
  • jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。

优点

  •     1.简洁的写法：$("#id") 等价于 document.getElementById("id")； $("tagName") 等价于 document.getElementsByTagName("tagName")；
  •     2.完善的事件处理机制

分类

【1】基本选择器

        最常用的选择器, 也是最简单的选择器，通过元素 id, class和标签名来查找 DOM 元素

    分类。

1） #id：

            用法：$("#myDiv");                

            说明：返回值：单个元素的组成的集合；这个就是直接选择 html 中的 id=”myDiv”。

需求描述：选择页面中所有id为btn的按钮，设置其背景为红色。

<button>按钮1</button>
<button id="btn">按钮2</button>
<button>按钮3</button>
$('#btn').css('background', 'red');

 2）Element

            用法：$("div")                

            说明：

  •                 返回值:集合元素
  •                 element的英文翻译过来是”元素”,所以element其实就是html已经定义的标签元素； 例如div,input,a等等。

需求描述：选择页面中所有的div标签，设置其背景为红色。

<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
$('div').css('background', 'red');

3）class

            用法：$(".myClass")                

            说明：返回值：集合元素；这个标签是直接选择 html 代码中 class=”myClass”的元素或元素组；因为在同一html 页面中class 是可以存在多个同样值的；

需求描述：选择页面中所有class为red的段落，设置其背景为红色。

<p class="red">我是段落1</p>
<p>我是段落2</p>
<p class="red">我是段落3</p>
$('.red').css('background', 'red');

4）*

            用法： $("*")                

            说明：返回值：集合元素； 匹配所有元素,多用于结合上下文来搜索。

需求描述：选择页面中class为content的div下所有元素，设置其背景为红色。

<div class="content"><p>我是段落1</p> <p>我是段落2</p><p>我是段落3</p>
</div>
$('.content *').css('background', 'red');

5）selector1, selector2, selectorN

            用法：  $("div,span,p.myClass")                

            说明：返回值：集合元素； 将每一个选择器匹配到的元素合并后一起返回；可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内。  其中 p.myClass 是表示匹配元素  p class=”myClass”。

需求描述：选择页面中所有的段落与按钮，设置其背景为红色。

<p>我是段落</p>
<button>我是按钮</button>
<div>我是div</div>
<h1>我是大标题</h1>
$('p,button').css('background', 'red');
【2】层次选择器

       如果想通过 DOM 元素之间的层次关系来获取特定元素。  例如后代元素, 子元素, 相邻元素, 兄弟元素等。

种类用法返回值说明
ancestor descendant$(“form input”)集合元素在给定的祖先元素下匹配所有后代元素
parent > child$(“form > input”)集合元素在给定的父元素下匹配所有子元素(注意区分后代元素和子元素)
prev + next$(“label + input”)集合元素匹配所有紧跟在prev元素后的next元素
prev ~ siblings$(“form ~ input”)集合元素匹配prev元素之后的所有siblings元素. 注意: 是匹配之后的元素, 不包含该元素在内, 并且匹配的是和prev同级的元素, 其后辈元素不被匹配

需求描述：选择ul下的所有span子元素，设置其背景为红色。

<ul><span>我是ul的span1</span><li>我是li1 <span>我是li1的span1</span></li><li>我是li2 <span>我是li2的span2</span></li><li>我是li3 <span>我是li3的span3</span></li><span>我是ul的span2</span>
</ul>
$('ul>span').css('background', 'red');
【3】过滤选择器        

1）基本过滤选择器

种类用法返回值说明
:first$(“tr:first”)单个元素组成的集合匹配找到的第一个元素
:last$(“tr:last”)集合元素匹配找到的最后一个元素
:not(selector)$(“input:not(:checked)”)集合元素去除所有与给定选择器匹配的元素, 意思是没有被选中的input(当 input type=“checkbox”)
:even$(“tr:even”)集合元素匹配所有索引值为偶数的元素, 从0开始计数.js的数组都是从0开始计数的, 例如要选择table的行, 因为是从0开始计数, 所以table中的第一个tr就为偶数0
:odd$(“tr:odd”)集合元素匹配所有索引值为奇数的元素, 从0开始计数
:eq(index)$(“tr:eq(0)”)集合元素匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素, 括号里面的是索引值, 不是元素排放数
:gt(index)$(“tr:gt(0)”)集合元素匹配所有大于给定索引值的元素
:lt(index)$(“tr:lt(0)”)集合元素匹配所有小于给定索引值的元素
:header$(“:header”).css(“background”, “red”)集合元素匹配所有h1, h2, h3之类的标题元素, 这个是专门用来获取h1, h2这样的元素
:animated集合元素匹配所有正在执行动画效果的元素

需求描述：实现隔行变色，让表格的奇数行的背景变为红色，:even代表选取下标为偶数的行。

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>
$('tr:even').css('background', 'red');

2）内容过滤选择器

      过滤规则主要体现在它所包含的子元素和文本内容上。

需求描述：实现让内容为“男”的单元格的背景变为红色。

<table cellspacing="0px" cellpadding="10px" border="1px"><tr><td>张三</td><td>男</td><td>21</td></tr><tr><td>李四</td><td>女</td><td>22</td></tr><tr><td>王五</td><td>男</td><td>23</td></tr><tr><td>赵六</td><td>女</td><td>24</td></tr>
</table>
$('td:contains("男")').css('background', 'red');

3）可见度过滤选择器

    根据元素的可见和不可见状态来选择相应的元素。

4）属性过滤选择器

        过滤规则是通过元素的属性来获取相应的元素，使用 XPath 表达式来选择带有给定属性的元素。

    1） [attribute]

            用法: $("div[id]") ; 返回值 集合元素

            说明: 匹配包含给定属性的元素. 例子中是选取了所有带"id"属性的 div 标签.

需求描述：查找herflang属性的标签元素，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('[hreflang]').css('background', 'red');

     2）[attribute=value]

            用法: $("input[name='newsletter']").attr("checked", true); 返回值 集合元素

            说明：  匹配给定的属性是某个特定值的元素；例子中选取了所有 name 属性是newsletter 的 input 元素。

需求描述：查找hreflang属性值是en的所有超链接，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('a[hreflang="en"]').css('background', 'red');

     3） [attribute!=value]

            用法: $("input[name!='newsletter']").attr("checked", true); 返回值 集合元素

            说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素。 此选择器等价于 :not([attr=value])。

            要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])。 之前看到的 :not 派上了用场。

需求描述：查找hreflang属性值不是en的所有超链接，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('a[hreflang!="en"]').css('background', 'red');

     4） [attribute^=value]

            说明: 匹配给定的属性是以某些值开始的元素

            用法: $("input[name^='news']") 返回值 集合元素

需求描述：查找hreflang属性值是en或者以en开头的所有超链接，设置其背景为红色。

<a href="" hreflang="en">en</a>
<a href="" hreflang="en-UK">en-UK</a>
<a href="" hreflang="zh-CN">zh-CN</a>
$('a[hreflang|="en"]').css('background', 'red');
或者
$('a[hreflang^="en"]').css('background', 'red');

5）子元素过滤选择器

6）表单属性过滤选择器

    说明：主要对所选择的表单元素进行过滤；

【4】表单选择器
种类用法返回值说明
:input$(“:input”)集合元素匹配所有input, textarea, select 和 button元素
:text$(“:text”)集合元素匹配所有的单行文本框
:password$(“:password”)集合元素匹配所有密码框
:radio$(“:radio”)集合元素匹配所有单选按钮
:checkbox$(“:checkbox”)集合元素匹配所有复选框
:submit$(“:submit”)集合元素匹配所有提交按钮
image$(“:image”)集合元素匹配所有图像域
:reset$(“:reset”)集合元素匹配所有重置按钮
:button$(“:button”)集合元素匹配所有按钮, 这个包括直接写的button
:file$(“:file”)集合元素匹配所有文件域
:hidden$(“input:hidden”)集合元素匹配所有不可见元素, 或者type为hidden的元素, 这个选择器不仅限于表单, 除了匹配input, 那些style为hidden的也会被匹配. 注意: 要选取input中为hidden的元素就是$(“input:hidden”), 但是直接使用":hidden"就是匹配页面中所有不可见元素, 包括宽度和高度为0的

需求描述：选中表单中的文本框、密码框、文件框、按钮、提交按钮、重置按钮等，设置其背景为红色。

<form><input type="text"><br><input type="password"><br><input type="file"><br><input type="button" value="按钮"><br><input type="submit" value="提交按钮"><br><input type="reset" value="重置按钮"><br>
</form>
$('input:text').css('background', 'red');
$('input:password').css('background', 'red');
$('input:file').css('background', 'red');
$('input:button').css('background', 'red');
$('input:submit').css('background', 'red');
$('input:reset').css('background', 'red');

jQuery 对象和 DOM 对象

jQuery 对象

    jQuery 对象就是对 DOM 对象进行包装后产生的对象。

        例如： $("#test").html() ：获取ID为test的元素内的html标签， 等同于用DOM实现代码： document.getElementById("id").innerHTML;

        例如：$("#test").val()：用来读取或修改表单元素的value值【只能使用在表单元素上】，this.value是js的原生语法，使用this.value无需引入任何库文件；

        例如：.text()：用来读取或修改元素的纯文本内容，包括后代元素；不能使用在表单元素上。对应js中的innerText。

    jQuery  对象是jQuery  独有的。如果一个对象是    jQuery   对象, 那么它就可以使用jQuery  里的方法: $("#id").html();

    约定：如果获取的是  jQuery  对象,  那么要在变量前面加上$

        比如：

            var $variable =jQuery  对象

            var variable = DOM 对象

DOM 对象与jQuery 对象之间的转换

    DOM 对象转成jQuery 对象

  •         对于一个DOM 对象，只需要用$()把 DOM 对象包装起来，即获得一个 jQuery 对象；
  •         $(DOM 对象)DOM 对象转换成 JQuery 对象后，就可以使用  jQuery 的方法；

    jQuery 对象转成 DOM 对象

  •         两种转换方式将一个jQuery 对象转换成 DOM 对象；[index]和.get(index)
  •         jQuery 本身提供，通过.get(index)方法，得到相应的 DOM 对象
  •         jQuery 对象是一个数组对象，可以通过[index]的方法，来得到相应的 DOM 对象        

DOM操作

【1】查找节点、修改属性： 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作节点的属性</title><script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function () {//给 button 绑定一个 click 事件$("button").click(function () {$("img").attr("src", "../image/1.png");$("img").attr("height", "200");})});</script>
</head>
<body>
<img src="../image/2.png" height="100"/>
<br/>
<button>设置图像的 height 属性</button>
</body>
</html>

【2】创建节点

  • 使用 jQuery 的工厂函数 $(): $(html标签); 根据传入的 html 标记字符串创建一个 jQuery 对象, 并返回
  • 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中；
  • 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式；
  • 创建文本节点就是在创建元素节点时直接把文本内容写出来; 
  • 创建属性节点也是在创建元素节点时一起创建；

方法

  1）内部插入法：在 元素内插入内容(该内容变成该元素的子元素或节点) 。 

  •             1.append(content)
  •             2.appendTo(content)
  •             3.prepend(content)
  •             4.prependTo(content)

2）外部插入法：在元素的外面插入内容(其内容变成元素的兄弟节点)。

【3】删除节点

【4】复制节点

【5】替换节点

【6】属性操作

1.attr(): 获取属性和设置属性

2.attr()传递一个参数时, 即为某元素的获取指定属性

3.attr()传递两个参数时, 即为某元素设置指定属性的值

4.jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(),height(), width(), css() 等, 

5.removeAttr(): 删除指定元素的指定属性

【7】样式操作

【8】获取HTML、文本和值

1、设置或返回所选元素的内容（包括 HTML 标记）: html()

2、读取和设置某个元素中的文本内容: text(). 。该方法既可以用于 HTML 也可以用于 XML文档.

3、读取和设置某个元素中的值: val()

  •     该方法类似 JavaScript 中的 value 属性. 
  •     对于文本框, 下拉列表框, 单选框该方法可返回元素的值

【9】常用遍历节点方法

【10】CSS-DOM操作

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

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

相关文章

C语言 变量

C语言 变量

变量其实只不过是程序可操作的存储区的名称。C 中每个变量都有特定的类型&#xff0c;类型决定了变量存储的大小和布局&#xff0c;该范围内的值都可以存储在内存中&#xff0c;运算符可应用于变量上。 变量的名称可以由字母、数字和下划线字符组成。它必须以字母或下划线开头…
阅读更多...
全网最新的软件测试面试八股文

全网最新的软件测试面试八股文

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 测试技术面试题 1、什么是兼容性测试&#xff1f;兼容性测试侧…
阅读更多...
一、前端开发

一、前端开发

#视频链接&#xff1a;https://www.bilibili.com/video/BV1rT4y1v7uQ?p1&vd_source1717654b9cbbc6a773c2092070686a95 前端开发 前端开发1、快速开发网站2、浏览器能识别的标签2.1 编码&#xff08;head&#xff09;2.2 title(head)2.3 标题2.4 div和span练习题2.5 超链接…
阅读更多...
03|索引优化

03|索引优化

数据准备 创建联合索引 KEY idx_name_age_position (name,age,position) USING BTREE CREATE TABLE employees (id int(11) NOT NULL AUTO_INCREMENT,name varchar(24) NOT NULL DEFAULT COMMENT 姓名,age int(11) NOT NULL DEFAULT 0 COMMENT 年龄,position varchar(20) NO…
阅读更多...
内存操作函数（c语言）

内存操作函数（c语言）

目录 概述1. memcpy函数2.memcpy函数的模拟实现3. memcmp函数4.memcmp函数的模拟实现5. memset函数6.memset函数的模拟实现7. memmove函数8.memmove函数的模拟实现结语 概述 C语言提供了一些非常有用的内存操作函数&#xff0c;其中包括memcpy、memcmp、memset和memmove。这些…
阅读更多...
MQTT简介

MQTT简介

https://mqtt.org/ MQTT&#xff08;Message Queuing Telemetry Transport&#xff09; 一种轻量级的&#xff0c;基于发布订阅模式的通信协议&#xff0c;用于在物联网和机器与机器&#xff08;M2M&#xff09;通信中传输消息。 它具有低带宽和低功耗的特点&#xff0c;适用于…
阅读更多...
vue3 开发记录

vue3 开发记录

1.引入nprogress插件&#xff0c;显示未声明文件 无法找到模块“nprogress”的声明文件。 解决方法&#xff1a; vite-env.d.ts // 解决引入模块的报错提示 declare module "nprogress";2.在 .evn 文件中创建了自定义环境变量 VITE_APP_BASE_URL 但在项目中使用时出…
阅读更多...
【学习记录】Resnet

【学习记录】Resnet

Resnet的残差块 BasicBlock模块&#xff1a; Resnet的作用 解决梯度消失。网络越深&#xff0c;会导致梯度消失。Resnet可以解决梯度消失的问题。 Resnet的原理 参考视频&#xff1a;https://www.bilibili.com/video/BV1cM4y117ob/?spm_id_from333.337.search-card.all.cl…
阅读更多...
请查收：2024年腾讯云服务器优惠价格表_租用配置报价

请查收：2024年腾讯云服务器优惠价格表_租用配置报价

一张表看懂腾讯云服务器租用优惠价格表&#xff0c;一目了然&#xff0c;腾讯云服务器分为轻量应用服务器和云服务器CVM&#xff0c;CPU内存配置从2核2G、2核4G、4核8G、8核16G、4核16G、8核32G、16核32G、16核64等配置可选&#xff0c;公网带宽1M、3M、5M、12M、18M、22M、28M…
阅读更多...
FreeRTOS任务切换

FreeRTOS任务切换

目录 一、PendSV异常 二、任务切换场合 1、执行系统调用 2、滴答定时器(SysTick)中断 三、PendSV中断服务函数 1、分析xPortPendSVHandler中断服务函数 四、查找下一个要运行的任务的两种方法 1、获取下一个要运行的任务 2、查找下一个要运行的任务的两种方法 2.1、通…
阅读更多...
Windows系统安装TortoiseSVN并结合内网穿透实现远程访问本地服务器——“cpolar内网穿透”

Windows系统安装TortoiseSVN并结合内网穿透实现远程访问本地服务器——“cpolar内网穿透”

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…
阅读更多...
ThreeDWorld(TDW)学习（待更新）

ThreeDWorld(TDW)学习（待更新）

目录 前言 1.TDW 2.transport challenge 总结 前言 因为挑战赛了解到tdw仿真平台。 想了解的请点击&#xff1a; GitHub - threedworld-mit/tdw: ThreeDWorld simulation environment GitHub - chuangg/tdw-transport-challenge-starter-code 1.TDW ThreeDWorld (TDW)是一…
阅读更多...
数据卷dockerfile

数据卷dockerfile

目录 一、数据卷 1. 简介 2. 数据卷和数据卷容器 1. 数据卷&#xff1a; 2. 数据卷容器&#xff1a; 二、自定义镜像 1. 作用 2. 自定义centos 3. 自定义tomcat8 一、数据卷 1. 简介 数据卷是一个可供一个或多个容器使用的特殊目录&#xff0c;它将主机操作系统目录直…
阅读更多...
mysql修改字段的长度锁表问题

mysql修改字段的长度锁表问题

mysql修改字段的长度锁表问题 背景 MySQL&#xff08;这里指5.6及其后续版本&#xff09;修改字段的长度锁表会锁表吗&#xff1f;答案是可能会但不一定会 具体原理 MySQL 5.6 及以后版本扩大字段长度 支持 online ddl in-place 模式&#xff0c;而这将不会锁表。varchar 表示…
阅读更多...
string字符串进行分割

string字符串进行分割

c标准库中&#xff0c;对string字符串并没有提供分割操作&#xff0c;需要自己手动实现此功能。 方式1&#xff1a; 采用 std::stringstream 输入字符串&#xff0c;通过getline()函数&#xff0c;来对字符串进行分割。 #include <sstream>void getSplit(std::string s…
阅读更多...
Unity—MVC分层开发思想

Unity—MVC分层开发思想

每日一句&#xff1a;当你不努力的时候&#xff0c;天赋就会一点一点被收回 目录 MVC分层开发思想 MVC是什么 MVC的开发步骤 案例&#xff1a;点击按钮实现金币进行添加&#xff0c;并且把金币记录到JSON里 MVC模式实现 背包系统基础代码 背包项目实现步骤 MVC分层开发思…
阅读更多...
【vue+element ui】大屏自适应中el-select下拉内容在低分辨率下显示不全问题解决

【vue+element ui】大屏自适应中el-select下拉内容在低分辨率下显示不全问题解决

目录 背景 现象 解决方案 背景 最近要把一个1920px*1080px的大屏改成自适应的&#xff1b;最低适配到1028px*720px&#xff1b; 现象 自适应适配改完之后 将电脑屏幕改成1028px*720px分辨率后&#xff0c;下拉显示正常 通过谷歌浏览器设置Toggle device toolbar为1028px*…
阅读更多...
Fastjson2 ＜== 2.0.26反序列漏洞

Fastjson2 ＜== 2.0.26反序列漏洞

根据Y4TACKER师傅在2023-03-20发布了一篇关于Fastjson原生反序列化的文章&#xff0c;文章中引入注目的是利用条件限制条件&#xff0c;不常常关注漏洞预警或者内容的几乎都是未发觉Fastjson2 到Fastjson2 2.0.26版本都有问题&#xff0c;其实如果单独去使用一些关键词去搜索&a…
阅读更多...
Aws Ec2服务器设置密码登录

Aws Ec2服务器设置密码登录

通过密钥&#xff0c;ssh登录到服务器 切换到root sudo -i开始设置root的新密码 passwd root输入并确认新密码即可 5.修改ssh配置文件 vim /etc/ssh/sshd_config6.重启sshd配置 systemctl restart sshd
阅读更多...
QML中动态增加表格数据

QML中动态增加表格数据

1.QML中的表格实现 import QtQuick 2.15 import QtQuick.Window 2.15import QtQuick.Controls 2.0 import Qt.labs.qmlmodels 1.0 import QtQuick.Layouts 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")TableModel{id:table_modelTabl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023