按鍵精靈的Html系列命令使用技巧講的如此精魄

豬腳本（原飛豬腳本）以按鍵精靈教學為主,涉及UiBot，Python,Lua等腳本編程語言,教學包括全自動辦公腳本,游戲輔助腳本,引流腳本,網(wǎng)頁腳本,安卓腳本,IOS腳本,注冊腳本,點贊腳本,閱讀腳本以及網(wǎng)賺腳本等各個領(lǐng)域。想學習按鍵精靈的朋友可以添加金豬腳本粉絲交流群:554127455 學習路上不再孤單,金豬腳本伴你一同成長.

1.什么是網(wǎng)頁元素特征字符串？

請參考網(wǎng)頁特征字符串詳解；

2.Html系列命令

2.1.HtmlSelect命令

1）HtmlSelect命令只能夠根據(jù)Select項的值來進行選擇，注意這里不是顯示在Select項上的文字，而是該項的value。

一個典型的下拉框HTML代碼如下：

</select>

這里如果要選擇上海，需要選擇值為2的項；

2）級聯(lián)的下拉列表組合。

在有的網(wǎng)頁中，會有幾個級聯(lián)的下拉列表，后一個下拉框會隨前一個框的值變化而發(fā)生變化，典型的有注冊頁面上的省份城市選擇，HtmlSelect命令能夠觸發(fā)Onchange事件，會導致后一個下拉框值發(fā)生變化，但是如果執(zhí)行腳本太快，而導致后一個未能選中正確的值，可以在前一個HtmlSelect后加上適當?shù)难訒r；

3）多選表單中的列表控件；有的列表支持多選，在有一些個求職網(wǎng)站中，職業(yè)是可以多選的，這時候可以用%將多個需要選擇的值連接起來傳遞給HtmlSelect命令實現(xiàn)多選；

2.2.HtmlExists命令

HtmlExists命令，能夠判斷指定特征的元素是否存在，并能夠返回具備該特征的元素的個數(shù)。這個命令能夠用來判斷某個元素是否存在，如果為0證明不存在；

2.3.HtmlGet命令

HtmlGet命令比較復雜，但是功能也非常強大，該命令具備兩個參數(shù)，第一個參數(shù)為獲取類型，目前支持的值如下所示：

序號值適用對象

1 text 得到指定元素的文本值，對應(yīng)DOM屬性innerText

2 html 得到指定元素內(nèi)部的HTML代碼，對應(yīng)DOM屬性innerHTML

3 outerHtml 得到元素整體的HTML代碼，對應(yīng)DOM屬性的outerHTML

4 value 得到元素的Value值，用于獲取表單元素內(nèi)部的值

5 src 得到圖像元素的src屬性，用于IMG標簽對象

6 href 得到鏈接元素的鏈接地址，用于A標簽

7 …其他名稱其他屬性，如果您使用的是合法的屬性名稱，就能夠返回對應(yīng)的值。如何才是合法的屬性？請參閱HTML標準。

第二個參數(shù)為特征字符串，如果匹配多個，只能返回第一個元素的值；

例如，獲得淘寶貨物價格：

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

獲取某個表單文本的值

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

2.4.RunJS命令

RunJS命令提供了直接運行Javascript的功能，如果您對JS非常熟悉，就能夠極大的擴展WQM的功能。

RunJS命令支持兩中執(zhí)行方式，第一個參數(shù)設(shè)置為0時，能夠執(zhí)行一段沒有返回值的Javascript，

例如：

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

第一個參數(shù)設(shè)置為1時，能執(zhí)行一段js并返回由return語句返回的值，返回值為字符串類型；

例如：返回Html文檔的title；

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

如果您分析到網(wǎng)頁中某個按鈕實際上就是執(zhí)行了一個函數(shù)，例如

您就可以直接調(diào)用

RunJS(0,"dosomething();")

JQuery的支持，網(wǎng)頁按鍵精靈集成了Jquery1.3.2，為了不與其他JQ的庫發(fā)生沖突，使用了wqmjq來代替$操作符，如果您需要直接使用JQ來操作網(wǎng)頁，可使用wqmjq來執(zhí)行Jquery語句：

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

在HTML中，id和class是元素最基本的兩個屬性，一般情況下，id和class都是用來選擇元素，以便進行CSS操作或者JavaScript操作。

一、ID屬性

我們知道id屬性具有唯一性，也就是說同一個id在一個頁面中只能出現(xiàn)一次，如果出現(xiàn)多次相同的id，那么CSS或JavaScript就無法識別id對應(yīng)的是哪一個元素了。

二、class屬性

class，顧名思義就是“類”，與C++，C#等編程語言中的“類”相似，我們可以為同一個頁面的相同元素或者不同元素設(shè)置相同的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>

七、后代選擇器

定義：

就是選擇元素內(nèi)部中所有的某一種元素，包括子元素和其他后代元素。

語法：

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數(shù)學，100px屬性值

舉例：

把元素div,p中的元素，文本屬性設(shè)置成紅色

天一個網(wǎng)友問小編，說他在用tp5提交多選框的時候獲取不到多選框的值，小編今天就對這個問題寫出解決方法。

我的html代碼如下：

小編在測試上面代碼的過程中發(fā)現(xiàn)，如果用官方提供的 input 助手函數(shù)去獲取多選框 test 的值確實獲取不到，后面仔細看了一下官方文檔，發(fā)現(xiàn)原來如果要獲取的數(shù)據(jù)為數(shù)組的話，就要加上 /a 修飾符才能正確獲取到：

小編在加上修飾符后就獲取到數(shù)據(jù)了，也不知道這算不算是一個BUG，下面順便附上一些修飾符說明：

s強制轉(zhuǎn)換為字符串類型
d強制轉(zhuǎn)換為整型類型
b強制轉(zhuǎn)換為布爾類型
a強制轉(zhuǎn)換為數(shù)組類型
f強制轉(zhuǎn)換為浮點類型

謝謝你的閱讀，如果你有更好的方法或在應(yīng)用過程中遇到問題可以在評論區(qū)提問或者直接私信我，我會定期回復，碼農(nóng)劉小橋與你一起學習，共同進步。

在線咨詢

上一篇：Web前端開發(fā)基礎(chǔ)知識，設(shè)置網(wǎng)頁背景圖，如何在網(wǎng)頁中插入圖片
下一篇：高質(zhì)量的網(wǎng)頁設(shè)計模板都開始收費了？小編精選了100套免費的給你

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

按鍵精靈的Html系列命令使用技巧講的如此精魄

您的項目需求