按键精灵的Html系列命令使用技巧讲的如此精魄

猪脚本（原飞猪脚本）以按键精灵教学为主,涉及UiBot，Python,Lua等脚本编程语言,教学包括全自动办公脚本,游戏辅助脚本,引流脚本,网页脚本,安卓脚本,IOS脚本,注册脚本,点赞脚本,阅读脚本以及网赚脚本等各个领域。想学习按键精灵的朋友可以添加金猪脚本粉丝交流群:554127455 学习路上不再孤单,金猪脚本伴你一同成长.

1.什么是网页元素特征字符串？

请参考网页特征字符串详解；

2.Html系列命令

2.1.HtmlSelect命令

1）HtmlSelect命令只能够根据Select项的值来进行选择，注意这里不是显示在Select项上的文字，而是该项的value。

一个典型的下拉框HTML代码如下：

</select>

这里如果要选择上海，需要选择值为2的项；

2）级联的下拉列表组合。

在有的网页中，会有几个级联的下拉列表，后一个下拉框会随前一个框的值变化而发生变化，典型的有注册页面上的省份城市选择，HtmlSelect命令能够触发Onchange事件，会导致后一个下拉框值发生变化，但是如果执行脚本太快，而导致后一个未能选中正确的值，可以在前一个HtmlSelect后加上适当的延时；

3）多选表单中的列表控件；有的列表支持多选，在有一些个求职网站中，职业是可以多选的，这时候可以用%将多个需要选择的值连接起来传递给HtmlSelect命令实现多选；

2.2.HtmlExists命令

HtmlExists命令，能够判断指定特征的元素是否存在，并能够返回具备该特征的元素的个数。这个命令能够用来判断某个元素是否存在，如果为0证明不存在；

2.3.HtmlGet命令

HtmlGet命令比较复杂，但是功能也非常强大，该命令具备两个参数，第一个参数为获取类型，目前支持的值如下所示：

序号值适用对象

1 text 得到指定元素的文本值，对应DOM属性innerText

2 html 得到指定元素内部的HTML代码，对应DOM属性innerHTML

3 outerHtml 得到元素整体的HTML代码，对应DOM属性的outerHTML

4 value 得到元素的Value值，用于获取表单元素内部的值

5 src 得到图像元素的src属性，用于IMG标签对象

6 href 得到链接元素的链接地址，用于A标签

7 …其他名称其他属性，如果您使用的是合法的属性名称，就能够返回对应的值。如何才是合法的属性？请参阅HTML标准。

第二个参数为特征字符串，如果匹配多个，只能返回第一个元素的值；

例如，获得淘宝货物价格：

Plugin price=Web.HtmlGet("text","id:id_Price")

获取某个表单文本的值

Plugin email=Web.HtmlGet("value","name:Email")

2.4.RunJS命令

RunJS命令提供了直接运行Javascript的功能，如果您对JS非常熟悉，就能够极大的扩展WQM的功能。

RunJS命令支持两中执行方式，第一个参数设置为0时，能够执行一段没有返回值的Javascript，

例如：

RunJS(0,"alert('hello');")

第一个参数设置为1时，能执行一段js并返回由return语句返回的值，返回值为字符串类型；

例如：返回Html文档的title；

RunJS(1,"var t=document.title;return t;")

如果您分析到网页中某个按钮实际上就是执行了一个函数，例如

您就可以直接调用

RunJS(0,"dosomething();")

JQuery的支持，网页按键精灵集成了Jquery1.3.2，为了不与其他JQ的库发生冲突，使用了wqmjq来代替$操作符，如果您需要直接使用JQ来操作网页，可使用wqmjq来执行Jquery语句：

RunJS(0,"wqmjq('#test').click();")

在HTML中，id和class是元素最基本的两个属性，一般情况下，id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作。

一、ID属性

我们知道id属性具有唯一性，也就是说同一个id在一个页面中只能出现一次，如果出现多次相同的id，那么CSS或JavaScript就无法识别id对应的是哪一个元素了。

二、class属性

class，顾名思义就是“类”，与C++，C#等编程语言中的“类”相似，我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同class的元素具有相同的CSS样式。

三、选择器

选择器定义：

用一种方式把你想要的元素选中，只有选中了，才可以为这个元素添加CSS样式。

选择器分类：

3.1元素选择器

3.2id选择器

3.3class选择器

3.4后代选择器

3.5群组选择器

语法：

选择器
{
      属性1:取值1；
      .........
        属性n:取值n；
}

四、元素选择器

元素选择器，就是相同的元素，然后对相同的元素定义同一个CSS样式。

语法：

div{width:100px;}

div是元素符号，width是属性，100px是属性值。

举例：

选中页面中的div元素，然后把他们的文本颜色定义为红色

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">div{color: red;}</style>
	</head> 
	<body>
<div >你好</div>
<p>你好</p>
<span>你好</span>
<div >你好</div>
	</body>
</html>

预览效果

五、id选择器

语法：

#box{width:100px;}

对于一个id选择器，id前面必须要加上前缀"#",box是id名称，width是属性，100px是属性值

举例：

选择id=abc的元素， color属性的属性值是红色。

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
	#abc{color: #FF0000;}
</style>
	</head> 
	<body>
<div >你好</div>
<p>你好</p>
<span id=abc>你好</span>
<div >你好</div>
	</body>
</html>

六：class选择器

class选择器可以对相同元素或者不同元素定义相同的class属性，然后针对同一个class的元素进行css样式操作。

语法：

.abc{width:100px}

class名前面必须加上前缀的( .) ，否则无法生效，abc是类的名字,width是属性，100px是属性值。

举例：

把选择的class中的abc的所有元素，定义文本颜色为红色

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
	.abc{color: #FF0000;}
</style>
	</head> 
	<body>
<div >你好</div>
<p>你好</p>
<span class=abc>你好</span>
<div class=abc>你好</div>
	</body>
</html>

七、后代选择器

定义：

就是选择元素内部中所有的某一种元素，包括子元素和其他后代元素。

语法：

h3 p{width:100px}

h3是选择器1，p是选择器2,width是属性，100px是属性值

举例：

id为abc的元素，下面所有的idv元素，定义文本颜色为红色。

id为efg 的元素，下面所有的span元素，定义文本为蓝色

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>12CSS</title>		
<style type="text/css">
	#abc div{color: #FF0000;}
	#efg span{color: blue;}
</style>
	</head> 
	<body>
<div id=abc>
	<div>你好1</div>
	<div>你好2</div>
</div>
<div id="efg">
	<p>你好3</p>
<span >你好4</span>
<div>你好5</div>
</div>

	</body>
</html>

八、群组选择器

群组选择器，指的是同时对几个选择器进行操作

语法：

h3,p{width:100px;}

h3选择器1 中间必须带(,)隔开，p为选择器2，width数学，100px属性值

举例：

把元素div,p中的元素，文本属性设置成红色

天一个网友问小编，说他在用tp5提交多选框的时候获取不到多选框的值，小编今天就对这个问题写出解决方法。

我的html代码如下：

小编在测试上面代码的过程中发现，如果用官方提供的 input 助手函数去获取多选框 test 的值确实获取不到，后面仔细看了一下官方文档，发现原来如果要获取的数据为数组的话，就要加上 /a 修饰符才能正确获取到：

小编在加上修饰符后就获取到数据了，也不知道这算不算是一个BUG，下面顺便附上一些修饰符说明：

s强制转换为字符串类型
d强制转换为整型类型
b强制转换为布尔类型
a强制转换为数组类型
f强制转换为浮点类型

谢谢你的阅读，如果你有更好的方法或在应用过程中遇到问题可以在评论区提问或者直接私信我，我会定期回复，码农刘小桥与你一起学习，共同进步。

在线咨询

上一篇：Web前端开发基础知识，设置网页背景图，如何在网页中插入图片
下一篇：高质量的网页设计模板都开始收费了？小编精选了100套免费的给你

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

按键精灵的Html系列命令使用技巧讲的如此精魄

您的项目需求