HTML5+移动APP开发中遇到的各种代码元素的含义（四）

最新推荐文章于 2023-05-22 17:41:41 发布

cug-jdc

最新推荐文章于 2023-05-22 17:41:41 发布

阅读量1.9k

点赞数

分类专栏： JavaScript H5+app开发文章标签： html5 移动开发 javascript js

本文链接：https://blog.csdn.net/qq_19924321/article/details/111474902

版权

JavaScript 同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

H5+app开发

17 篇文章 4 订阅

订阅专栏

系列目录

跨平台移动APP开发中遇到的各种代码元素的含义（一）
HTML5+移动APP开发中遇到的各种代码元素的含义（二）
HTML5+移动APP开发中遇到的各种代码元素的含义（三）

前言

随着移动开发的迅速发展，移动APP混合开发模式越来越受到欢迎，APP的开发过程也变得越来越快速、高效。这个HTML5+移动APP开发中遇到的各种代码元素的含义系列文章主要是想利用H5+开发移动APP过程给广大需要了解这方面的人以帮助，对于一些重要的JS代码、HTML代码以及CSS代码等含义进行详细的讲解说明。

一、CSS代码含义

1、transition-duration含义
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。实例如下：

div
{
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */
}

含义是让过渡效果持续5秒。

2、transform 属性含义
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法：

transform: none|transform-functions;

值	                               描述	 
none	            定义不进行转换。	 
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	 
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
translate(x,y)	    定义 2D 转换。	 
translate3d(x,y,z)	定义 3D 转换。	
translateX(x)	    定义转换，只是用 X 轴的值。	 
translateY(y)	    定义转换，只是用 Y 轴的值。	 
translateZ(z)	    定义 3D 转换，只是用 Z 轴的值。	
scale(x,y)	        定义 2D 缩放转换。	 
scale3d(x,y,z)	    定义 3D 缩放转换。	
scaleX(x)	        通过设置 X 轴的值来定义缩放转换。	 
scaleY(y)	        通过设置 Y 轴的值来定义缩放转换。	 
scaleZ(z)	        通过设置 Z 轴的值来定义 3D 缩放转换。	
rotate(angle)	    定义 2D 旋转，在参数中规定角度。	 
rotate3d(x,y,z,angle)	定义 3D 旋转。	
rotateX(angle)	    定义沿着 X 轴的 3D 旋转。  
rotateY(angle)	    定义沿着 Y 轴的 3D 旋转。	 
rotateZ(angle)	    定义沿着 Z 轴的 3D 旋转。	 
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	 
skewX(angle)	    定义沿着 X 轴的 2D 倾斜转换。 
skewY(angle)	    定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	    为 3D 转换元素定义透视视图。

3、.ove_hid{overflow:hidden;}的含义
overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
实例：
.ove_hid{
overflow: hidden;
}
可能的值：

值	            描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

4、display:inline的含义
定义：
display 属性规定元素应该生成的框的类型。
说明：
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
可能的值：

值	                         描述
none	            此元素不会被显示。
block	            此元素将显示为块级元素，此元素前后会带有换行符。
inline	            默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	    行内块元素。（CSS2.1 新增的值）
list-item	        此元素会作为列表显示。
run-in	            此元素会根据上下文作为块级元素或内联元素显示。
compact	            CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	            CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	            此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	    此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	    此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	        此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	    此元素会作为一个单元格列显示（类似 <col>）
table-cell	        此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	    此元素会作为一个表格标题显示（类似 <caption>）
inherit	            规定应该从父元素继承 display 属性的值。

5、.mui-btn .mui-icon {font-size: inherit}含义
定义和用法：
inherit 关键字指定一个属性应从父元素继承它的值。inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。
语法：

property: inherit;

实例：设置 <span> 元素的文本颜色为蓝色，那些 class=“extra” 的元素除外，它们不会继承蓝色。

span
{
    color: blue;
}
 
.extra span
{
    color: inherit;
}

具体例子：
元素样式
效果如下：
样式效果

6、mui-ios和mui-android含义用法

.mui-ios .nav{
	display: inline-block;
	position: absolute;
	right: 44px;
	width: 44px;
	height: 44px;
	top: 20px;
}
.mui-android .nav{
	display: inline-block;
	position: absolute;
	right: 44px;
	width: 44px;
	height: 44px;
	top: 0px;
}

说明：分别针对不同的操作系统进行界面样式的分别设计。

7、background: transparent的含义
定义：
background 是用于在一个声明中设置所有背景属性的一个简写属性。如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置transparent，表示背景透明。

实例：

background : transparent none repeat scroll 0% 0%

其含义为：背景属性：背景颜色背景图片背景是否重复背景时候随浏览器滚动背景平位置背景垂直位置

transparent   表示透明无颜色，是background-color 的默认值
none          表示没有设置背景图片
repeat        表示图片重复
scroll        表示背景图片随浏览器下拉而滚动
0%            水平位置在x0
0%            垂直位置在y0

8、.BMap_button { cursor: pointer;}的含义
定义：
cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

实例：

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

可能的值和含义：

值                               描述
url               需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default             默认光标（通常是一个箭头）
auto                默认。浏览器设置的光标。
crosshair           光标呈现为十字线。
pointer             光标呈现为指示链接的指针（一只手）
move                此光标指示某对象可被移动。
e-resize            此光标指示矩形框的边缘可被向右（东）移动。
ne-resize           此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize           此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize            此光标指示矩形框的边缘可被向上（北）移动。
se-resize           此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize           此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize            此光标指示矩形框的边缘可被向下移动（南）。
w-resize            此光标指示矩形框的边缘可被向左移动（西）。
text                此光标指示文本。
wait                此光标指示程序正忙（通常是一只表或沙漏）。
help                此光标指示可用的帮助（通常是一个问号或一个气球）。

9、{font-size: 1px；}的含义
定义：
设置或检索对象中的字体尺寸。

p { font-style: normal; }
p { font-size: 12px; }
p { font-size: 20%; }

实例：

.test p {
margin: 15px 0;
border: 1px solid#000;
}
.xx - small p {
font - size: xx - small;
} /*尺寸大小为xx - small：xx - small尺寸的文字。*/
.x - small p {
font - size: x - small;
} /*尺寸大小为x - small：x - small尺寸的文字。*/
.small p {
font - size: small;
}/*尺寸大小为small：small尺寸的文字。*/
.medium p {
font - size: medium;
}/*尺寸大小为medium：medium尺寸的文字。*/
.large p {
font - size: large;
}/*尺寸大小为large：large尺寸的文字。*/
.x - large p {
font - size: x - large;
}/*尺寸大小为x - large：x - large尺寸的文字。*/
.xx - large p {
font - size: xx - large;
}/*尺寸大小为xx - large：xx - large尺寸的文字*/
.smaller p {
font - size: smaller;
}/*尺寸大小为samller：samller尺寸的文字。*/
.larger p {
font - size: larger;
}/*尺寸大小为larger：larger尺寸的文字。*/
.float p {
font - size: 20px;
}/*尺寸大小为20px：20px尺寸的文字。*/
.percentage {
font - size: 20px;
}/*尺寸大小为20px：父对象20px尺寸的文字。*/
.percentage span {
font - size: 60 % ;
}/*我的尺寸只是父对象的60 %*/

10、{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’…/images/0.png’);}的含义
定义：
针对IE浏览器不显示本地图片的解决办法。AlphaImageLoader：在元素的背景和内容之间插入一张图片，并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。

实例：
语法格式：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled：可选项，布尔值(Boolean)。设置或检索滤镜是否激活。 true：默认值。滤镜激活。 false：滤镜被禁止。 
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 1）crop：剪切图片以适应对象尺寸。 2）image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。  3）scale：缩放图片以适应对象的尺寸边界。 
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

二、HTML代码含义

1、html页面中被hidden的元素，在对应的JS中会根据逻辑判断进行显示或者隐藏操作。如果需要显示，则先对该元素进行赋值，再show即可。

2、html中下面这段代码的含义

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />

定义：
在开发移动设备的网页时，就会有上面这么两段代码，该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是移动应用开发需要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

实例：
meta viewport有几个属性如下：

width
设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale
设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale
允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale
允许用户的最大缩放值，为一个数字，可以带小数
height
设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable
是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

3、meta标签的含义
定义：
元数据（Metadata）是数据的数据信息。
meta标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

实例：

实例 1 - 定义文档关键词，用于搜索引擎：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

实例 2 - 定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">

实例 3 - 定义页面作者：
<meta name="author" content="galton">

实例 4 - 每30秒刷新页面：
<meta http-equiv="refresh" content="30">

H5新属性：
HTML5新属性

4、html中对DIV的style和class样式的理解
说明：
style可以直接写样式，class就给div命名，然后在该html文件外面给这个名字写样式。

实例：
style例子：

<div style="background:#000;"></div>

class例子：

<style type="text/css">
.xxClass{background:#000;}
</style>
<div class="xxClass"></div>

5、input标签的理解
定义：
input标签规定了用户可以在其中输入数据的输入字段。
input元素在 form元素中使用，用来声明允许用户输入数据的 input 控件。
输入字段可通过多种方式改变，取决于 type 属性。

说明：
其中有个属性readonly 是一个布尔属性。
readonly 属性规定输入字段是只读的。
只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。

实例：

<form action="demo_form.php">
  Email: <input type="text" name="email"><br>
  Country: <input type="text" name="country" value="China" readonly><br>
  <input type="submit" value="提交">
</form>

效果如下：
readonly属性

三、JS代码含义

1、.val()的含义
语法：

$(selector).val(value)

说明：
val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。
实例：

$(selector).val("123") //123代替selector元素的值
$(selector).val("") //空白代替selector元素的值
$(selector).val()  //返回元素selector的值

2、mui.toast(“开通成功”)含义
语法：

mui.toast(message,options)

说明：
弹出系统样式提示消息框，弹出的提示对话框为非阻塞模式，显示指定时间后自动消失。
参数：
message：必选，提示消失框上显示的文字内容
options：可选，提示消息框的设置参数，时间可以设置为{duration:“long”}

3、mui.confirm(“要关闭此功能吗？”, “温馨提示”, [“确定”, “取消”], function(event) {})的含义
语法：

mui.confirm(message,title,buttons,confirmCB)

说明：
弹出系统样式确认对话框，可设置弹出对话框的标题、内容、按钮数组以及文字。弹出的提示对话框为非阻塞模式，用户点击确认框上的按钮通过confirmCB回调函数返回。
参数：
message：必选，确认对话框上显示的内容
confirmCB：可选，点击确认对话框上按钮后的回调函数
title：可选，确认对话框上显示的标题
buttons：可选，确认对话框上的按钮数组，例如[“YES”,“NO”]

4、mui(‘body’).on(‘tap’, ‘#payManagerDiv li’, function(event) {})的含义
语法：

.on(event,selector,handler)

说明：
实现元素的事件绑定
参数：
event：需监听的事件名称，例如，‘tap’ 点击
selector：选择器，HTML中需要绑定的元素
handler：事件触发时的回调函数，通过回调中的event参数可以获得事件详情

5、mui.back = function() {}的含义
语法：

mui.back=function(){}

说明：
直接调用mui.back()方法，执行窗口关闭逻辑，需要自定义关闭逻辑，复写mui.back()方法。如下实例每次都需要用户确认后，才会关闭当前页面。
实例：

mui.back=function(){
var btn=["确定","取消"]；
mui.confirm('确认关闭当前窗口？'，‘Hello mui’,btn,function(e){
if(e.index==0){
mui.currentWebview.close();
}
});
}

6、mui.fire(plus.webview.getWebviewById(“scannedQRc2c”), ‘refreshScannedQRc2c’, {qrCodesetBack: true})的含义
语法：

mui.fire(targetPage,'customEvent',{
//自定义事件参数
});

说明：
通过mui.fire方法触发目标窗口的自定义事件
参数：
targetPage：目标窗口
‘customEvent’：目标窗口里的事件，根据自定义事件参数的自定义设置来触发
实例：
在列表页面中预加载详情页面（假设为detail.html）
列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；

//初始化预加载详情页面
mui.init({
  preloadPages:[{
    id:'detail.html',
    url:'detail.html'           
  }
  ]
});

var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
  var id = this.getAttribute('id');
  //获得详情页面
  if(!detailPage){
    detailPage = plus.webview.getWebviewById('detail.html');
  }
  //触发详情页面的newsId事件
  mui.fire(detailPage,'newsId',{
    id:id
  });
//打开详情页面          
  mui.openWindow({
    id:'detail.html'
  });
});

7、setInterval()和clearInterval()的使用以及注意事项
定义：
setInterval()：间隔指定的毫秒数不停地执行指定的代码，定时器
clearInterval()：用于停止 setInterval() 方法执行的函数代码

使用方法：
setInterval(code，millisec)，两个参数都是必须的，第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 code 之间的时间间隔，以毫秒计。
clearInterval(id_of_setinterval)，参数是必须的，为setInterval返回的ID值

实例1：

<body>
  <button onclick="start()">按钮一</button>
  <button onclick="stop()">按钮二</button>
  <script type="text/javascript">
    var interval = null;//计时器
    var i = 0;
    function start() {//启动计时器函数
      if (interval != null) {//判断计时器是否为空
          clearInterval(interval);
          interval = null;
      }
    interval = setInterval(overs, 1000);//启动计时器，调用overs函数，
  }

  function overs() {
    i++;
    console.log(i);
  }

  function stop() {

    clearInterval(interval);
    interval = null;
  }
 </script>

</body>

在使用setInterval方法时，每一次启动都需要对setInterval方法返回的值做一个判断，判断是否是空值，若不是空值，则要停止定时器并将值设为空，再重新启动，如果不进行判断并赋值，有可能会造成计时器循环调用，在同等的时间内同时执行调用的代码，并会随着代码的运行时间增加而增加，导致功能无法实现，甚至占用过多资源而卡死奔溃。因此在每一次使用setInterval方法时，都需要进行一次判断。

实例2：

function test(){
alert("测试");
}
// 每过5秒钟就弹出提示信息"测试"。
var intervalId = setInterval(test, 5000);
// 由于此时上述定时设置尚未执行，因此可以成功取消该定时设置
clearInterval(intervalId);

8、JSON.parse()的含义
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
语法：

JSON.parse(text[, reviver])

参数说明：
text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

9、JavaScript中的eval函数
定义用法：
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码
语法：

eval(string)

参数：
string，必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。
说明：
该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性，并通过该属性调用它，则 ECMAScript 实现允许抛出一个 EvalError 异常。
实例：

<script type="text/javascript">

eval("x=10;y=20;document.write(x*y)")

document.write(eval("2+2"))

var x=10
document.write(eval(x+17))

</script>

输出结果：

200
4
27

10、JavaScript中typeof的用法
定义：
typeof运算符用于判断对象的类型
语法：
typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。
返回值：
typeof运算符的返回类型为字符串，值包括如下几种：

 'undefined'              --未定义的变量或值

 'boolean'                --布尔类型的变量或值

 'string'                 --字符串类型的变量或值

 'number'                 --数字类型的变量或值

 'object'                 --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)

 'function'               --函数类型的变量或值

实例：

    console.log(typeof a);    //'undefined'

    console.log(typeof(true));  //'boolean'

    console.log(typeof '123');  //'string'

    console.log(typeof 123);   //'number'

    console.log(typeof NaN);   //'number'

    console.log(typeof null);  //'object'    

    var obj = new String();

    console.log(typeof(obj));    //'object'

    var  fn = function(){};

    console.log(typeof(fn));  //'function'

    console.log(typeof(class c{}));  //'function'

11、JavaScript中split()方法的含义
定义用法：
split() 方法用于把一个字符串分割成字符串数组。

stringObject.split(separator,howmany)

参数说明：
separator，必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany ，可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
实例：

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))

</script>

结果为：

How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you

cug-jdc

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录