【JQuery Mobile移动应用开发实战】JQuery Mobile基础—

文章目录

- 5. 列表控件的使用
- - 5.1 简单的新闻列表
  - 5.2 音乐专辑列表的显示
  - 5.3 更完善的音乐专辑列表
  - 5.4 显示销售的商品列表
  - 5.5 图书销量排名
  - 5.6 简单的电话通讯录
  - 5.7 让查找更加便捷
  - 5.8 比较高级的新闻列表

5. 列表控件的使用

JQuery Mobile使用方便而且具有出色的交互性，本章主要知识点包括：

列表的使用方法，包括最基础的列表及列表内容的排列技巧。
列表的高级用法，包括在列表中插入图片及额外的按钮。
使用列表规划界面布局。

5.1 简单的新闻列表

用列表控件实现简单的新闻列表：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>     
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed" data-fullscreen="true"><a href="#">返回</a>    <h1>今日新闻</h1>    <a href="#">设置</a></div><div data-role="content"><ul data-role="listview"><li><a href="#">中美海军举行联合反海盗演习 首次演练实弹射击</a></li><li><a href="#">安徽回应警察目睹少女被杀:不护短已提请检方介入</a></li><li><a href="#">深圳居民为省钱开船到香港加油被判拘役5个月</a></li><li><a href="#">海南卫生厅干部体验看病难:候2小时就诊5分钟</a></li><li><a href="#">延安市长回应削山建新城：保证不变“鬼城”</a></li><li><a href="#">上海今日遭高温暴雨雷电大风轮番袭击(组图)</a></li><li><a href="#">美国安局人员被曝曾用监控资源监听自己伴侣</a></li><li><a href="#">金正恩视察朝鲜最新战舰 赞军舰科技含量高(图)</a></li><li><a href="#">美“51区”雇员称内有9架飞碟 曾见灰色外星人 </a></li><li><a href="#">巴基斯坦释放337名印度在押人员</a></li><li><a href="#">海南卫生厅干部体验看病难:候2小时就诊5分钟</a></li><li><a href="#">延安市长回应削山建新城：保证不变“鬼城”</a></li><li><a href="#">上海今日遭高温暴雨雷电大风轮番袭击(组图)</a></li><li><a href="#">美国安局人员被曝曾用监控资源监听自己伴侣</a></li><li><a href="#">金正恩视察朝鲜最新战舰 赞军舰科技含量高(图)</a></li><li><a href="#">美“51区”雇员称内有9架飞碟 曾见灰色外星人 </a></li><li><a href="#">巴基斯坦释放337名印度在押人员</a></li></ul></div><div data-role="footer" data-position="fixed" data-fullscreen="true"><div data-role="navbar"><ul><li><a id="chat" href="#" data-icon="plus">今日新闻</a></li>        <li><a id="email" href="#" data-icon="plus">国内新闻</a></li>        <li><a id="skull" href="#" data-icon="plus">国际新闻</a></li>        <li><a id="beer" href="#" data-icon="plus">设置</a></li>         </ul></div></div></div>
</body>
</html>

效果如下：
在这里插入图片描述
使用标签时，首先在页面中加入一个标签< ul data-role=“listview” >，之后在其中加入任意数量的< li >标签，其中的内容会以一种类似按钮的形式显示出来。

5.2 音乐专辑列表的显示

带有图片的音乐专辑列表：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>         
</head>               
<body><div data-role="page" data-theme="a"><div data-role="header" data-position="fixed" data-fullscreen="true"><a href="#">返回</a>    <h1>播放列表</h1>    <a href="#">设置</a></div><ul data-role="listview"><li><a href="#"><img src="images/1.jpg"><h2>no air</h2><p> Chris Brown</p></a></li><li><a href="#"><img src="images/2.jpg"><h2>baby</h2><p>justinbieber</p></a></li><li><a href="#"><img src="images/3.jpg"><h2>黑色星期五</h2><p>莎拉布莱曼</p></a></li><li><a href="#"><img src="images/4.jpg"><h2>好想大声说爱你</h2><p>灌篮高手</p></a></li><li><a href="#"><img src="images/5.jpg"><h2>brave song</h2><p>多田葵</p></a></li><li><a href="#"><img src="images/1.jpg"><h2>no air</h2><p> Chris Brown</p></a></li><li><a href="#"><img src="images/2.jpg"><h2>baby</h2><p>justinbieber</p></a></li><li><a href="#"><img src="images/3.jpg"><h2>黑色星期五</h2><p>莎拉布莱曼</p></a></li><li><a href="#"><img src="images/4.jpg"><h2>好想大声说爱你</h2><p>灌篮高手</p></a></li><li><a href="#"><img src="images/5.jpg"><h2>brave song</h2><p>多田葵</p></a></li><li><a href="#"><img src="images/1.jpg"><h2>no air</h2><p> Chris Brown</p></a></li><li><a href="#"><img src="images/2.jpg"><h2>baby</h2><p>justinbieber</p></a></li><li><a href="#"><img src="images/3.jpg"><h2>黑色星期五</h2><p>莎拉布莱曼</p></a></li><li><a href="#"><img src="images/4.jpg"><h2>好想大声说爱你</h2><p>灌篮高手</p></a></li><li><a href="#"><img src="images/5.jpg"><h2>brave song</h2><p>多田葵</p></a></li></ul></div>
</body>
</html>

效果如下：
在这里插入图片描述
在JQuery Mobile的列表控件中，默认如果在< li >标签中的第一个位置插入图片，将会把图片放大或缩小到80×80像素的大小，并在列表左侧显示。也就是说，把专辑图片放在右边是不容易做到的。

tips：

JQuery Mobile中保留了大量HTML中自带的属性，这些属性往往会带来意外之喜。
虽然理论上JQuery Mobile的列表控件可以无限加入项目，但是开发者在实际设计中要充分考虑移动设备的性能极限，尤其是有大量图片需要加载时，极容易出现卡顿现象。

5.3 更完善的音乐专辑列表

上节分享了一个制作音乐播放器列表的例子，在实际开发中往往需要更加复杂的播放列表。比如，当前显示的是网络音乐列表，在列表右侧有一个按钮，通过这个按钮可以将资源添加到本地播放列表中进行保存。

改进后的音乐专辑列表：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>    
</head>               
<body><div data-role="page" data-theme="a"><div data-role="header" data-position="fixed" data-fullscreen="true"><a href="#">返回</a>    <h1>播放列表</h1>    <a href="#">设置</a></div><div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;"><h3>是否加入播放列表？</h3><a href="#" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">加入播放列表</a><a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">算了吧</a></div><ul data-role="listview"><li><a href="#"><img src="images/1.jpg"><h2>no air</h2><p> Chris Brown</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"></a></li><li><a href="#"><img src="images/2.jpg"><h2>baby</h2><p>justinbieber</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"></a></li><li><a href="#"><img src="images/3.jpg"><h2>黑色星期五</h2><p>莎拉布莱曼</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"></a></li><li><a href="#"><img src="images/4.jpg"><h2>好想大声说爱你</h2><p>灌篮高手</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"></a></li><li><a href="#"><img src="images/5.jpg"><h2>brave song</h2><p>多田葵</p></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"></a></li></ul></div>
</body>
</html>

效果如下：
在这里插入图片描述
实际上是在列表中再加入一个链接。由于本例中没有引入链接的图标，因此显示的是一个空洞的圆圈。

5.4 显示销售的商品列表

在制作有关电子商务的应用时，除了商品的价格和名称外，还需要显示一些其他数据(如销售量或点击量)，而这样的数据可以利用列表控件的气泡功能实现。

利用消息气泡制作能显示销售量的商品列表：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>消息气泡的使用</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>      
</head>               
<body><!--设置了新的页面--><div data-role="page"><div data-role="header" data-position="fixed" data-fullscreen="true"><a href="#">返回</a>    <h1>商品列表</h1>    <a href="#">设置</a></div><!---不使用内容栏直接在页面中加入列表--><ul data-role="listview" data-inset="true"><li><a href="#">						<!--每一个li标签标示列表中额一项--><h2>联想Y400</h2>				<!--用来显示电脑的型号--><p>价格：5199</p>					<!--这个是价格--><span class="ui-li-count">820</span>	<!--本节的重点，以气泡的形式给出信息--></a></li>								<!--结束--><li><a href="#"><h2>ThinkPad E430</h2><p>价格：3749</p><span class="ui-li-count">45</span></a></li><li><a href="#"><h2>神舟K590</h2><p>价格：4599</p><span class="ui-li-count">123</span></a></li><li><a href="#"><h2>清华同方U410</h2><p>价格：4099</p><span class="ui-li-count">444</span></a></li><li><a href="#"><h2>戴尔14V inspiron</h2><p>价格：3099</p><span class="ui-li-count">674</span></a></li><li><a href="#"><h2>iMac</h2><p>价格：15999</p><span class="ui-li-count">99</span></a></li></ul></div>
</body>
</html>

效果如下：
在这里插入图片描述
每个列表右侧多了一个像气泡一样的图标，里面分别显示一条数据，这与< span class=“ui-li-count” >45< /span >有关，这就是列表中消息气泡的使用方法。

除商品信息外，消息气泡同样适用于其他类型的应用，比如在新闻类应用中用来显示评论的数量，在聊天类软件中显示接受的信息等。

5.5 图书销量排名

制作带有编号的列表：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>         
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed" data-fullscreen="true"><a href="#">返回</a>    <h1>本月图书销售排名</h1>    <a href="#">设置</a></div><ol data-role="listview"><li><h2>我是个大师</h2></li><li><h2>致我们终将逝去的青春</h2></li><li><h2>饥饿游戏</h2></li><li><h2>我是个算命先生</h2></li><li><h2>谁主沉浮</h2></li><li><h2>剩下的方程式</h2></li><li><h2>世界经典推理故事大全集</h2></li><li><h2>三体全集</h2></li><li><h2>天坑猎鹰</h2></li><li><h2>心理罪之城市之光</h2></li></ol></div>
</body>
</html>

效果如下：
在这里插入图片描述
与HTML一样，在JQuery Mobile中也可以使用< ul >标签作为有序列表来使用。在HTML中，< ul >与< ol >都能够起到列表的作用，但是它们又有些不同。< ol >表示的是有序列表，即会显示出列表中每一项的序号，而< ul >作为无序列表则不会显示序号。JQuery Mobile显然也继承了HTML的这一规定。

虽然带有编号的列表使用非常方便，但是却有很大的局限性。比如，当需要在列表中插入图片或在列表中显示两行文字时，左侧的编号并不能居中显示而依然留在偏上的位置，影响页面的效果。

5.6 简单的电话通讯录

有序列表能够有效对列表中的内容进行排列和查找，除了通过编号之外，还可以通过对列表进行分组来实现信息的分类以提高查找效率，其中一个经典的例子就是手机的通讯录。

具有分组功能的列表：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>     
</head>               
<body><div data-role="page"><!--使用ul标签声明一个列表--><ul data-role="listview" data-inset="true"><!--使用属性data-role="list-divider"作为分隔栏使用--><li data-role="list-divider">家人</li><!--这个才是真正的列表项--><li><a href="#"><h3>爸爸</h3>					<!--列表中的内容--><p>13334333564</p>			<!--使用p标签实现换行--></a></li><!--此处省略部分内容，读者可自行添加--><li data-role="list-divider">陌生人</li><li><a href="#"><h3>10086</h3><p>10086</p></a></li><li><a href="#"><h3>骗子1</h3><p>13334333564</p></a></li><li><a href="#"><h3>骗子2</h3><p>13334333564</p></a></li></ul></div></body>
</html>

效果如下：
在这里插入图片描述
对列表分组的方式非常简单，只需要在列表的某一项中加入属性data-role=“list-divider”，该项就会成为列表中组与组之间的分隔符，以不同的样式显示出来。

注：如果在分隔符中加入链接，将不会被处理为按钮的样式而仅给其中的文字加入链接。

5.7 让查找更加便捷

上一节介绍了一种对号码进行分类的方法，其实还可以根据号码本身的数字进行分类。比如在QQ界面偏上的位置有一个文本编辑框，在里面输入数字或其他文字，QQ会自动在好友列表中找出能与之匹配的好友。

事实上，在手机的通讯录中也常常会用到类似的功能，比如在拨打电话的界面输入几个数字，手机会自动在号码本中找到符合条件的号码，并以列表的形式显示出来，这样的功能都可以通过列表控件实现。

便于查找的号码本：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=0.5"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>     
</head>               
<body><div data-role="page"><ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"><li><a href="index.html">陈二狗</a></li><li><a href="index.html">陈三狗</a></li><li><a href="index.html">陈四狗</a></li><li><a href="index.html">孙悟空</a></li><li><a href="index.html">孙二娘</a></li><li><a href="index.html">张三丰</a></li><li><a href="index.html">张无忌</a></li><li><a href="index.html">张飞</a></li><li><a href="index.html">刘备</a></li><li><a href="index.html">刘秀</a></li><li><a href="index.html">刘邦</a></li><li><a href="index.html">鲁班一世</a></li><li><a href="index.html">鲁班二世</a></li><li><a href="index.html">鲁班三世</a></li><li><a href="index.html">刘瑾</a></li><li><a href="index.html">10086</a></li></ul></div>
</body>
</html>

效果如下：
在这里插入图片描述
由于在列表中设置了属性data-autodividers=“true”，因此列表中的内容会根据首字母或第一个汉字自动分组。另外由于设置了属性data-filter=“true”，因此在列表上方会显示一个针对列表内容的搜索框。

5.8 比较高级的新闻列表

比较高级的新闻列表：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Positioning Example</title>     
<meta name="viewport" content="width=device-width, initial-scale=1"/>     
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>     
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed" data-fullscreen="true"><a href="#">返回</a>    <h1>今日新闻</h1>    <a href="#">设置</a></div><ul data-role="listview" style="margin-top:45px;"><li data-role="list-divider">8月27日 星期二<span class="ui-li-count">4</span></li><li><a href="#"><img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" /><h2>jQuery Mobile实战发布</h2><p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li><li><a href="#"><img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" /><h2>jQuery Mobile实战发布</h2><p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li><li><a href="#"><img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" /><h2>jQuery Mobile实战发布</h2><p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li><li><a href="#"><img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" /><h2>jQuery Mobile实战发布</h2><p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li><li data-role="list-divider">8月26日 星期一<span class="ui-li-count">3</span></li><li><a href="#"><img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" /><h2>jQuery Mobile实战发布</h2><p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li><li><a href="#"><img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" /><h2>jQuery Mobile实战发布</h2><p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li><li><a href="#"><img src="http://img5.pcpop.com/AppImg/160x160/2012/03/25/5115094241333943948193.jpg" /><h2>jQuery Mobile实战发布</h2><p>新版《jQuery Mobile实战》第八章即将完稿，敬请各位读者期待。届时笔者也将开始第九章的写作。</p><p class="ui-li-aside"><strong>6:24</strong>PM</p></a></li></ul><div data-role="footer" data-position="fixed" data-fullscreen="true"><div data-role="navbar"><ul><li><a id="chat" href="#" data-icon="custom">今日新闻</a></li>        <li><a id="email" href="#" data-icon="custom">国内新闻</a></li>        <li><a id="skull" href="#" data-icon="custom">国际新闻</a></li>        <li><a id="beer" href="#" data-icon="custom">设置</a></li>         </ul></div></div></div>
</body>
</html>

效果如下：
在这里插入图片描述

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

MySQL入门 - 数据库的编辑与备份，DOS与图形界面演示，Navicat软件使用
文章目录创建MySQL表Navicat图形界面演示DOS指令演示展示现有数据库创建数据库进入数据库创建表，表属性预览表填入表数据查询users表中所有数据为什么DOS界面比图形界面好数据库三层结构-破除MySQL神秘MySQL数据库的本质依然是文件行和列SQL语句分类创建数据库字符集…...
2024/4/28 20:54:52
winform仿腾讯视频进度条
像这类进度条怎么使用winform控件美化，winform自带的trackbar有点不美观。...
2024/4/13 6:17:54
[ java ] 坦克大战1.0 ~
介绍坦克大战1.0 内容: 熟悉java绘图方法–>画出坦克了解java事件处理机制–>监听键盘事件–>按方向键让坦克动起来画框 package com.hspedu.draw.tankgame;import javax.swing.*;/*** ClassName* Description* Author zxk* DateTime 2022-01-14-18:24* Version…...
2024/4/13 6:17:49
9.if 判断
一、if的基本逻辑： 语法逻辑：如果....就..... if 要判断的条件: 条件成立时，要做的事情 if判断语句的作用：当条件满足一定条件时就会执行代码块语句，否则就不执行代码块语句。代码示例： …...
2024/4/18 14:18:24
携程首页手机端-静态页面
把pin老师旧版的携程页面跟新版的结合一起编写学到的内容有： normolize初始化样式 flex布局精灵图二倍图的图形更改阿里iconfont字体图标的使用三角的制作手机端pc端百分比自适应图像变换省略号的编写 <!DOCTYPE html> <html…...
2024/4/20 3:05:51
关于编译报错 error: cannot convert ‘const std::__cxx11::basic_string‘ to ‘const char*‘ 的处理
源代码 if( strcmp((fields[i].name),password)!0 ) 更正 if( strcmp((fields[i].name),password.str() )!0 )...
2024/4/18 19:07:13
【Python】Pandas DataFrame 一维表二维表的转换
目录一、stack & unstackunstack 将一维表转换为二维表stack 将二维表转换为一维表二、pivot & meltpivot 将一维表转换为二维表melt将二维表转换为一维表 Tips 用pandas处理数据，我们经常获取到的是从数据库或者excel中获取的一维表。而常常需要重排&…...
2024/4/16 22:31:21
RT-THREAD 内核快速入门（四）邮箱，消息队列，信号
系列文章目录 RT-THREAD 内核快速入门（一）线程 RT-THREAD 内核快速入门（二）定时器 RT-THREAD 内核快速入门（三） 信号量，互斥量，事件文章目录系列文章目录前言一、邮箱1.工作方式…...
2024/4/13 6:17:44
蚂蚁分类信息系统Nginx伪静态规则支持二级域名设置方法
蚂蚁分类信息系统Nginx伪静态规则支持二级域名设置方法 nginx环境中蚂蚁分类信息系统支持二级域名访问实现方法 1.后台生成所有城市目录 2.nginx伪静态增加配置 if ( $host ~* (\b(?!www|!m\b)\w)\.\w\.\w ) { set $domain $1; rewrite ^(.*)/(.*).php(.*)$ /city/$domain/…...
2024/4/13 6:17:39
单片机之串行通信接口遇到的问题
首先，我们要先理解两个知识点(无论是串口RS232，RS485与RS422都是基于串口通信协议(UART)进行传输的，而之所以出现这些通信接口，就是为了解决不同场景下遇到的通信问题) 第一个知识点，TTL电平与CMOS电平。 TTL电平接口…...
2024/4/16 6:52:43
多旋翼飞行器设计与控制（五）—— 坐标系和姿态表示
多旋翼飞行器设计与控制（五）—— 坐标系和姿态表示一、坐标系一般的，对坐标轴与旋转正方向的定义采用右手定则。介绍两种坐标系：地球固联坐标系与机体坐标系。地球固联坐标系用于研究多旋翼飞行器相对于地面的运动状态&a…...
2024/4/18 9:48:49
找到已安装Python包的位置
方法一： 在命令行中使用pip show package 方法二： 在Python交互环境中输入并执行以下代码 import package package.__file__ https://jingyan.baidu.com/article/1974b28956b68af4b1f774b6.html...
2024/4/13 6:17:29
常微分方程式の解法（python）
常微分非线性方程式用scipy.integrate.odeint(func, y0, t, args()) func：用def函数定义 y0：初始值（几个和t相关的函数就要设置几个初始值） t：自变量 args：放定数的（自己设定的常数&#xf…...
2024/4/13 6:17:54
《大话数据结构》（程杰著）学习笔记
Chap1 数据结构绪论 Chap2 算法 Chap3 线性表 Chap4 栈与队列 Chap5 串 Chap6 树 Chap7 图 Chap8 查找 Chap9 排序仅作为个人学习记录，佛系更新中…...
2024/4/16 18:02:15
C#基础知识回顾（第一部分共四部分）
C#基础知识回顾（第一部分共四部分） 目录C#基础知识回顾（第一部分共四部分）第1章概述1.1 Microsoft.NET Framework1.1.1 .NET框架的关键实体1.1.2 基类库（BCL）1.1.3 .NET框架的特点1.2 C#应用程序的结构1…...
2024/5/2 19:10:56
FairMOT流程图（完整版）
Figure 1 shows the proposed process FairMOT Mixed Model Figure 2 FairMOT Mixed Model...
2024/4/14 5:02:57
【如何做到自律，保持专注】
隔绝诱惑正面反馈自我暗示他人监督目标：让自己处在自律的状态下实际：自己只是在进行叫做自律的演出应该：把做成某件事当成你的目标，才会有持续的动力和创造力要有一件具体的、可期待的、迫切想要做成的一件事你尝试着去…...
2024/4/13 6:17:44
一、网络安全渗透测试的相关理论和工具
一、网络安全渗透测试是什么呢？ 在美国著名电影《金蝉脱壳》中，雷布雷斯林是这个世界上最强的越狱高手之一，他在过去8年的时间内成功地从14所守卫高度森严的重型监狱中逃脱。即便如此，雷布雷斯林却并不是一个罪犯，他真…...
2024/4/18 12:59:04
Vue中的组件嵌套
今天完成的是一个组件嵌套功能，实现的是如下效果，其中school1 与school2是同级关系我是这么想的：先用app去接管vm中的所有组件，app中有school1组件和school2组件，然后在school1中嵌套student，student组件中…...
2024/4/17 12:08:30
详细讲解如何在win10系统上安装多个版本的CUDA
文章目录前言电脑环境确认安装新CUDA环境测试新CUDA环境总结前言当我们在部署多个AI项目时，常常会需要多个python环境，虽然Anaconda能够解决大多数项目所需的不同环境，但是对于环境跨度较大所需CUDA版本不同的项目显然Anaconda就不能很好的…...
2024/4/26 23:12:30

【JQuery Mobile移动应用开发实战】JQuery Mobile基础——列表控件的使用