資訊專(zhuān)欄INFORMATION COLUMN
摘要：進(jìn)行測(cè)試之理論是目前很火的一個(gè)測(cè)試組件，內(nèi)部綁定了之類(lèi)的斷言為了讓代碼代碼更有說(shuō)服力，減少提交測(cè)試錯(cuò)誤，進(jìn)行測(cè)試顯然是非常有必要的。
cypress 進(jìn)行 e2e 測(cè)試之理論
cypress 是目前 e2e 很火的一個(gè)測(cè)試組件，內(nèi)部綁定了 macha、chai、chai-jquery 之類(lèi)的斷言,為了讓代碼代碼
更有說(shuō)服力，減少提交測(cè)試錯(cuò)誤，進(jìn)行 e2e 測(cè)試顯然是非常有必要的。
官網(wǎng)
GitHub
借鑒官網(wǎng)一句話(huà)來(lái)說(shuō):
Cypress is a next generation front end testing tool built for the modern web. We address the key本文環(huán)境
pain points developers and QA engineers face when testing modern applications.
node v9.5 npm v5.5e2e 簡(jiǎn)介
e2e 測(cè)試端對(duì)端測(cè)試的簡(jiǎn)稱(chēng), e2e 即為end to end,
指任意一個(gè)人的社交、交易、休閑都可以直接與另外任意一個(gè)人產(chǎn)生關(guān)系，去中心化、渠道化.
做前端怎么少的多的了 npm 呢
$ npm i -D cypress
然后為了方便起見(jiàn)，咱們?cè)?b>package.json中寫(xiě)入下面腳本:
{
"scripts": {
"e2e:open": "cypress open",
"e2e:run": "cypress run"
}
}
運(yùn)行npm run e2e:open,啟動(dòng)一個(gè) cypress 的服務(wù)器，如下:
如下圖這就完成了一個(gè)啟動(dòng)一個(gè) cypress。第一次點(diǎn)開(kāi)時(shí)候，cypress 會(huì)幫你創(chuàng)建一個(gè)初始化配置目錄，這是
cypress 推薦的目錄的結(jié)構(gòu)，當(dāng)然也可以自己創(chuàng)建。
點(diǎn)擊 example_spec.js 文件，然后可以看到如下界面,cypress 開(kāi)始測(cè)試:
上面就看到 cypress 的運(yùn)行過(guò)程了。下面看看 example_spec.js(文件的位置
:projectName/cypress/integration)文件中寫(xiě)了啥:
describe("Kitchen Sink", function() {
it(".should() - assert that is correct", function() {
// ...
}
})</pre>
<p>這是主要結(jié)構(gòu)的，下面大部分都是在一個(gè)<b>it</b>函數(shù)內(nèi)部，是測(cè)試?yán)锩娴幕卣{(diào)函數(shù)。詳細(xì)可以查看 TDD 和 BDD 測(cè)試<br>框架，cypress 綁定了這些測(cè)試框架。</p>
<b>cy.visit</b>
<p>這是 cypress 里面一個(gè)很重要的方法，可以訪問(wèn)一個(gè)鏈接,列入 example.js 文件如下:</p>
<pre>beforeEach(function() {
// Visiting our app before each test removes any state build up from
// previous tests. Visiting acts as if we closed a tab and opened a fresh one
cy.visit("https://example.cypress.io/commands/querying")
})</pre>
<p>這里就是在前置鉤子函數(shù)里面訪問(wèn)了<b>https://...../querying</b>這個(gè)鏈接。如果代碼需要瀏覽器調(diào)試，比如用戶(hù)交<br>互點(diǎn)擊，用戶(hù)輸入之類(lèi)的。第一步就是訪問(wèn)：cy.visit</p>
<b>cy.get</b>
<p>還是從 example_spec.js 問(wèn)中說(shuō)起：</p>
<pre>it("cy.get() - query DOM elements", function() {
// https://on.cypress.io/get
// Get DOM elements by id
cy.get("#query-btn").should("contain", "Button")
// Get DOM elements by class
cy.get(".query-btn").should("contain", "Button")
cy.get("#querying .well>button:first").should("contain", "Button")
// ?
// Use CSS selectors just like jQuery
})</pre>
<p>這里定義了一個(gè)測(cè)試單元，在這個(gè)里面做了啥呢？第一步獲取 id 為 query-btn 這個(gè)按鈕。接下來(lái) should 操作<br>，奉上一張表自行查看: <script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000014630106?w=743&h=810");</script></p>
<p>cy.get 還有一個(gè)玩法就是 cy.get("@app")這種，意思說(shuō)之前你已經(jīng)<b>cy.get(".app").as("app")</b>,不需要再次獲<br>取了，直接使用別名就好了</p>
<p>從官網(wǎng)截圖的表格，詳<br>細(xì)jquery-chai 文檔表格</p>
<p>這里看到<b>cy.get()</b>和<b>jquery.$</b>是不是很像，在官網(wǎng)這里說(shuō)了這樣一句話(huà):</p>
<pre>The querying behavior of this command matches exactly how $(…) works in jQuery.</pre>
<p>所以可以將 cy.get()當(dāng)$一樣來(lái)用即可，不過(guò)這里返回的不過(guò) jquery 對(duì)象罷了，這里返回的事通過(guò) cypress 包<br>裝過(guò)的對(duì)象可以在控制臺(tái)看到這樣的東西,見(jiàn)下圖:<br><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000014630107?w=718&h=1192");</script></p>
<p>是一個(gè)用于 cypress 所有方法的對(duì)象。然后可以操作他的 api 了。</p>
<p>第一部分，主要是查詢(xún)，查詢(xún)頁(yè)面元素是否按照我們開(kāi)發(fā)想要的存在，下面看第二部分:</p>
<pre>context("Actions", function() {
beforeEach(function() {
cy.visit("https://example.cypress.io/commands/actions")
})
// Let"s perform some actions on DOM elements
// https://on.cypress.io/interacting-with-elements
it(".type() - type into a DOM element", function() {
// https://on.cypress.io/type
cy
.get(".action-email")
.type("fake@email.com")
.should("have.value", "fake@email.com")
// .type() with special character sequences
.type("{leftarrow}{rightarrow}{uparrow}{downarrow}")
.type("{del}{selectall}{backspace}")
// .type() with key modifiers
.type("{alt}{option}") //these are equivalent
.type("{ctrl}{control}") //these are equivalent
.type("{meta}{command}{cmd}") //these are equivalent
.type("{shift}")
// Delay each keypress by 0.1 sec
.type("slow.typing@email.com", { delay: 100 })
.should("have.value", "slow.typing@email.com")
cy
.get(".action-disabled")
// Ignore error checking prior to type
// like whether the input is visible or disabled
.type("disabled error checking", { force: true })
.should("have.value", "disabled error checking")
})
})</pre>
<p>這一部分主要是進(jìn)行獲取元素交互, 下面來(lái)說(shuō)交互是如何搞得。 與 cy.get 相似還有:</p>
<p>cy.contains 通過(guò)文本獲取元素</p>
<p>cy.closet 見(jiàn) jqery</p>
<p>cy.next/cy.nextAll 可以和 cy.contains 聯(lián)合使用獲取該節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)</p>
<p>cy.prev/cy.prevAll 同上</p>
<p>cy.children/cy.parents/cy.parent 獲取子節(jié)點(diǎn)/ 所有的父節(jié)點(diǎn) / 父節(jié)點(diǎn)</p>
<p>cy.first/cy.last</p>
<p>cy.url 獲取當(dāng)前頁(yè)面 url</p>
<p>cy.title 獲取當(dāng)前頁(yè)面標(biāo)題</p>
<p>... API 挺多的，同樣奉<br>上api 文檔
</p>
<b>cypress 交互邏輯</b>
<p>既然要交互肯定需要點(diǎn)擊輸入滾動(dòng)，可以還存在拖拽等等。咱們就暫時(shí)從輸入開(kāi)始說(shuō)起啦</p>
<b>cy.type</b>
<p>這不是一個(gè)可以直接使用的方法，要配合<b>cy.get</b>使用的,作用是給空間進(jìn)行輸入。例如:</p>
<b>測(cè)試輸入例如 text, textarea</b>
<pre>cy.get("input").type("hello world")</pre>
<b>測(cè)試 tabIndex</b>
<pre> <div id="fpt75r5" class="el" tabIndex="1">
This is TabIndex div.
</div></pre>
<pre>cy.get(".el").type("laldkadaljdkljasf") // 這個(gè)里面是隨機(jī)字符串</pre>
<b>測(cè)試 input 為日期的</b>
<pre>cy.get("input[type=date]").type("2008-8-9")</pre>
<b>鍵盤(pán)綁定</b>
<p>下面直接是對(duì) input 進(jìn)行組合鍵盤(pán)操作</p>
<pre>cy.get("input").type("{shift}{alt}Q")</pre>
<p>按住鍵盤(pán)操作</p>
<pre>cy.get("input").type("{alt}這里是按了一下alt后輸入的內(nèi)容")</pre>
<p>還有長(zhǎng)按鍵盤(pán)之類(lèi)的操作，詳細(xì)就看官網(wǎng)了這里之類(lèi)奉上鏈<br>接https://docs.cypress.io/api/commands/type.html#Key-Combinations</p>
<p>這里就是關(guān)于鍵盤(pán)的組合操作。</p>
<b>對(duì)于選擇例如 radio, checkbox</b>
<p>這些就只需要利用點(diǎn)擊事件即可，如下:</p>
<pre>cy
.get("input[type=radio]")
.as("radio")
.click()
cy.get("@radio").should("be.checked")</pre>
<b>定時(shí)</b>
<b>cy.wait</b>
<p>下面是等待 1s</p>
<pre>cy.wait(1000)</pre>
<b>cy.clock 和 cy.tick</b>
<p>自己的代碼：</p>
<pre>var seconds = 0
setInterval(() => {
$("#seconds-elapsed").text(++seconds + " seconds")
}, 1000)</pre>
<p>測(cè)試代碼</p>
<pre>cy.clock()
cy.visit("/index.html")
cy.tick(1000)
cy.get("#seconds-elapsed").should("have.text", "1 seconds")
cy.tick(1000)
cy.get("#seconds-elapsed").should("have.text", "2 seconds")</pre>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/remote/1460000014630108");</script> 這里就會(huì)出現(xiàn)關(guān)于 clock 和 tick<br>的用法，更多用法看文檔，我也有部分迷惑的。待后來(lái)再解決。老規(guī)矩文檔地址:<br>地址</p>
<b>關(guān)于 cypress 的配置</b>
<p>先復(fù)制一段出來(lái):</p>
<pre>{
"baseUrl": "http://localhost:8080",
"pageLoadTimeout": 3000,
"viewportHeight": 667,
"viewportWidth": 375
}</pre>
<p>這是一個(gè)非常精簡(jiǎn)的配置了:</p>
<p>baseUrl 基礎(chǔ)鏈接，之后在是使用 cy.visit 的時(shí)候，只需要訪問(wèn)具體路由例如: cy.visit("/Hello")</p>
<p>
<p>viewport 兩個(gè)屬性</p>
<p>viewportHeight 測(cè)試窗口的高度</p>
<p>viewportWidth 測(cè)試窗口的寬度</p>
</p>
<p>pageLoadTimeout 頁(yè)面家安在超過(guò) 3000ms 即為超時(shí)。</p>
<b>總結(jié)</b>
<p>上面是 cypress 的基本用法，cypress 是基于 electron 的一個(gè)測(cè)試框架，提供 web 環(huán)境進(jìn)行點(diǎn)對(duì)點(diǎn)的測(cè)試，在<br>programer 思維下，進(jìn)行自動(dòng)化的交互操作，必要點(diǎn)檢測(cè)說(shuō)明，這是一個(gè)非常棒的用處。例如之后擁有數(shù)據(jù)埋點(diǎn)，<br>可以在固定的位置檢測(cè)是否有埋點(diǎn)。測(cè)試想要的地方是否匹配的數(shù)據(jù)。模擬用戶(hù)的點(diǎn)擊操作，這都是非常棒的。在<br>jquery 操作年代，各種 id 和 class 奇怪命名下，這些都可以容易找到，在 vue 和 react 大行其道的年代，但<br>是卻可以通過(guò)文本尋找節(jié)點(diǎn)。這也是非常棒的體驗(yàn)，更多秘密需要去體驗(yàn)，奉上官方地址<br>：官網(wǎng) cypress</p>
</div>
<div id="zxzh5jv" class="mt-64 tags-seach" >
<div id="rd7tn75" class="tags-info">
<a style="width:120px;" title="GPU云服務(wù)器" href="http://specialneedsforspecialkids.com/site/product/gpu.html">GPU云服務(wù)器</a>
<a style="width:120px;" title="云服務(wù)器" href="http://specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo">云服務(wù)器</a>
<a style="width:120px;" title="進(jìn)行測(cè)試" href="http://specialneedsforspecialkids.com/yun/tag/jinxingceshi/">進(jìn)行測(cè)試</a>
<a style="width:120px;" title="java進(jìn)行接口測(cè)試" href="http://specialneedsforspecialkids.com/yun/tag/javajinxingjiekouceshi/">java進(jìn)行接口測(cè)試</a>
<a style="width:120px;" title="cypress" href="http://specialneedsforspecialkids.com/yun/tag/cypress/">cypress</a>
<a style="width:120px;" title="云主機(jī)上可以進(jìn)行壓力測(cè)試嗎" href="http://specialneedsforspecialkids.com/yun/tag/yunzhujishangkeyijinxingyaliceshima/">云主機(jī)上可以進(jìn)行壓力測(cè)試嗎</a>
</div>
</div>
<div id="fldvnbr" class="entry-copyright mb-30">
<p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p>
<p>轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94633.html</p>
</div>
<ul class="pre-next-page">
<li id="d77nftr" class="ellipsis"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/94632.html">上一篇：如何把滑動(dòng)條變好看一點(diǎn)</a></li>
<li id="t7tv5b5" class="ellipsis"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/94634.html">下一篇：關(guān)于js節(jié)流函數(shù)throttle和防抖動(dòng)debounce</a></li>
</ul>
</div>
<div id="7vbhzxv" class="about_topicone-mid">
<h3 class="top-com-title mb-0"><span data-id="0">相關(guān)文章</span></h3>
<ul class="com_white-left-mid atricle-list-box">
<li>
<div id="rxdjrt5" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/107684.html"><b>前端<em>E2E</em><em>測(cè)試</em>框架 <em>cypress</em>了解一下</b></a></h2>
<p class="ellipsis2 good">摘要：是一款開(kāi)箱即用可以跑在瀏覽器上的測(cè)試工具。同樣，測(cè)試了也可以直接調(diào)試。這個(gè)時(shí)候我們的測(cè)試文件就可以訪問(wèn)了，點(diǎn)擊之后發(fā)現(xiàn)他需要我們編寫(xiě)測(cè)試用例，那么接下來(lái)就手把手教你編寫(xiě)基本的測(cè)試用例。
What is E2E?
所謂的E2E就是end-to-end。 假設(shè)我們編寫(xiě)的每個(gè)功能程序都是一個(gè)黑匣子，最終用戶(hù)也只會(huì)看到這個(gè)黑匣子，那么站在用戶(hù)的角度來(lái)看并不需要知道這個(gè)黑匣子內(nèi)部是什么東西也不...</p>
<div id="x7blt7v" class="com_white-left-info">
<div id="pflddnb" class="com_white-left-infol">
<a href="http://specialneedsforspecialkids.com/yun/u-172.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/01/small_000000172.jpg" alt=""><span id="77jn5tf" class="layui-hide64">mushang</span></a>
<time datetime="">2019-08-26 11:51</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="dhz5fhh" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/94439.html"><b>撩<em>測(cè)試</em>MM神器<em>cypress</em>使用入門(mén)</b></a></h2>
<p class="ellipsis2 good">摘要：上也有幾個(gè)臨時(shí)方案，目前我傾向使用自帶的來(lái)查看。在打開(kāi)的測(cè)試的瀏覽器中打開(kāi)切到按下用戶(hù)按，輸入，選擇重新刷新并統(tǒng)計(jì)代碼執(zhí)行覆蓋率。那么，起來(lái)為了高撩質(zhì)測(cè)量試代碼，起來(lái)。
不很久不很久以前
據(jù)說(shuō)某家公司有兩位前端，天天擼bug，為啥嘞？只怪測(cè)試MM傾人國(guó)，輕語(yǔ)哥哥有bug。?(??????)?? 可是最近兩位有點(diǎn)犯愁 Σ(っ °Д °;)っ。測(cè)試MM有幾次提了緊急bug，都在旁邊鼓勵(lì)他們...</p>
<div id="nxrjbbl" class="com_white-left-info">
<div id="jzpvzb7" class="com_white-left-infol">
<a href="http://specialneedsforspecialkids.com/yun/u-837.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/08/small_000000837.jpg" alt=""><span id="lbbhljv" class="layui-hide64">MAX_zuo</span></a>
<time datetime="">2019-08-22 16:32</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="7dhj7jj" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/95054.html"><b>端到端<em>測(cè)試</em>哪家強(qiáng)？不容錯(cuò)過(guò)的<em>Cypress</em></b></a></h2>
<p class="ellipsis2 good">摘要：閱讀原文目前測(cè)試工具有哪些項(xiàng)目不需要不需要端到端測(cè)試一般都需要一個(gè)容器，來(lái)運(yùn)行前端應(yīng)用。向快速，一致和可靠的無(wú)剝落測(cè)試問(wèn)好。
閱讀原文
1. 目前E2E測(cè)試工具有哪些？
項(xiàng)目
Web
Star
puppeteer
Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win)
31906
nightmare
Electron
15502
...</p>
<div id="vjztvll" class="com_white-left-info">
<div id="rfxp5jx" class="com_white-left-infol">
<a href="http://specialneedsforspecialkids.com/yun/u-573.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/05/small_000000573.jpg" alt=""><span id="hd5phxn" class="layui-hide64">LancerComet</span></a>
<time datetime="">2019-08-22 17:19</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="77fltnl" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://specialneedsforspecialkids.com/yun/99095.html"><b>FE.TEST-前端<em>測(cè)試</em>初探</b></a></h2>
<p class="ellipsis2 good">摘要：使用可以快速生成一個(gè)項(xiàng)目，其中包含了和以及覆蓋率統(tǒng)計(jì)的配置參考一個(gè)創(chuàng)建測(cè)試腳本的快速方法其他參考資料前端自動(dòng)化測(cè)試概覽測(cè)試之使用對(duì)項(xiàng)目進(jìn)行單元測(cè)試
showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317);
前言
測(cè)試可以提供快速反饋，根據(jù)測(cè)試用例覆蓋代碼，從而提升代碼開(kāi)發(fā)效率和質(zhì)量。根據(jù)投入產(chǎn)出價(jià)值，通常迭代較快的業(yè)務(wù)邏輯不做...</p>
<div id="xl7v7fr" class="com_white-left-info">
<div id="pfj7nnb" class="com_white-left-infol">
<a href="http://specialneedsforspecialkids.com/yun/u-1120.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/11/small_000001120.jpg" alt=""><span id="df5hllz" class="layui-hide64">Travis</span></a>
<time datetime="">2019-08-23 12:55</time>
<span><i class="fa fa-commenting"></i>評(píng)論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="fd5v5p5" class="topicone-box-wangeditor">
<h3 class="top-com-title mb-64"><span>發(fā)表評(píng)論</span></h3>
<div id="vhn5ppp" class="xcp-publish-main flex_box_zd">
<div id="75lnrtt" class="unlogin-pinglun-box">
<a href="javascript:login()" class="grad">登陸后可評(píng)論</a>
</div> </div>
</div>
<div id="pdlbrfv" class="site-box-content">
<div id="zzrl5x5" class="site-content-title">
<h3 class="top-com-title mb-64"><span>0條評(píng)論</span></h3>
</div>
<div id="nxptlnp" class="pages"></ul></div>
</div>
</div>
<div id="nbtnrv5" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
<div id="lbtxblj" class="">
<div id="vfj5xv5" class="com_layuiright-box user-msgbox">
<a href="http://specialneedsforspecialkids.com/yun/u-768.html"><img src="http://specialneedsforspecialkids.com/yun/data/avatar/000/00/07/small_000000768.jpg" alt=""></a>
<h3><a href="http://specialneedsforspecialkids.com/yun/u-768.html" rel="nofollow">chnmagnus</a></h3>
<h6>男<span>|</span>高級(jí)講師</h6>
<div id="vhntxx7" class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(768)" id="attenttouser_768" class="grad follow-btn notfollow attention">我要關(guān)注</a>
<a href="javascript:login()" title="發(fā)私信" >我要私信</a>
</div>
<div id="77hpblz" class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="http://specialneedsforspecialkids.com/yun/ut-768.html" class="box_hxjz">閱讀更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/119914.html">把 RNN 循環(huán)神經(jīng)網(wǎng)絡(luò)植入體內(nèi)，僅憑一張“薄片”，就能直接檢測(cè)你有無(wú)心律異常</a></h3>
<p>閱讀 3591<span>·</span>2021-09-13 10:28</p></li>
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/118068.html">SecureIDC：$19/月/1GB內(nèi)存/100GB SSD空間/500GB流量/1Gbps端口/</a></h3>
<p>閱讀 1940<span>·</span>2021-08-10 09:43</p></li>
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/116086.html">第三集: 從零開(kāi)始實(shí)現(xiàn)一套pc端vue的ui組件庫(kù)(button組件其一)</a></h3>
<p>閱讀 1013<span>·</span>2019-08-30 15:44</p></li>
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/115408.html">Bootstrap 柵格布局</a></h3>
<p>閱讀 3183<span>·</span>2019-08-30 13:14</p></li>
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/113990.html">解決input 中placeholder的那些神坑</a></h3>
<p>閱讀 1836<span>·</span>2019-08-29 16:56</p></li>
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/113841.html">一個(gè)常年更新的CSS采坑合集</a></h3>
<p>閱讀 2942<span>·</span>2019-08-29 16:35</p></li>
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/112270.html">HTML CSS 實(shí)現(xiàn)鼠標(biāo)懸停時(shí)圖片拉近效果</a></h3>
<p>閱讀 2849<span>·</span>2019-08-29 12:58</p></li>
<li><h3 class="ellipsis"><a href="http://specialneedsforspecialkids.com/yun/109497.html">canvas-塔防游戲</a></h3>
<p>閱讀 868<span>·</span>2019-08-26 13:46</p></li>
</ul>
</div>
<!-- 文章詳情右側(cè)廣告-->
<div id="vvlph5f" class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活動(dòng)</span></h6>
<div id="5phzd5v" class="com_adbox">
<div id="znnbttt" class="layui-carousel" id="right-item">
<div carousel-item>
<div>
<a href="http://specialneedsforspecialkids.com/site/active/kuaijiesale.html?ytag=seo" rel="nofollow">
<img src="http://specialneedsforspecialkids.com/yun/data/attach/240625/2rTjEHmi.png" alt="云服務(wù)器">
</a>
</div>
<div>
<a href="http://specialneedsforspecialkids.com/site/product/gpu.html" rel="nofollow">
<img src="http://specialneedsforspecialkids.com/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務(wù)器">
</a>
</div>
</div>
</div>
</div> <!-- banner結(jié)束 -->
<div id="hv7vj5j" class="adhtml">
</div>
<script>
$(function(){
$.ajax({
type: "GET",
url:"http://specialneedsforspecialkids.com/yun/ad/getad/1.html",
cache: false,
success: function(text){
$(".adhtml").html(text);
}
});
})
</script> </div> </div>
</div>
</div>
</div>
</section>
<!-- wap拉出按鈕 -->
<div id="5l5rjv7" class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<!-- wap遮罩層 -->
<div id="dd55xjz" class="site-mobile-shade"></div>
<!--付費(fèi)閱讀 -->
<div class="zvnrl55" id="payread">
<div id="77jbh5d" class="layui-form-item">閱讀需要支付1元查看</div>
<div id="dbjlpd7" class="layui-form-item"><button class="btn-right">支付并查看</button></div>
</div>
<script>
var prei=0;
$(".site-seo-depict pre").each(function(){
var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
$(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
$(this).html("").append("<code>"+html+"</code>");
prei++;
})
$(".site-seo-depict img").each(function(){
if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
$(this).remove();
}
})
$("LINK[href*='style-49037e4d27.css']").remove();
$("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
$("pre").attr("class","layui-code");
$("pre").attr("lay-title","");
$("pre").attr("lay-skin","");
layui.code();
$(".layui-code-h3 a").attr("class","copycode").html("復(fù)制代碼 ").attr("onclick","copycode(this)");
});
function copycode(target){
var id=$(target).parent().parent().attr("id");
var clipboard = new ClipboardJS("#"+id);
clipboard.on('success', function(e) {
e.clearSelection();
alert("復(fù)制成功")
});
clipboard.on('error', function(e) {
alert("復(fù)制失敗")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
<link rel="stylesheet" type="text/css" href="http://specialneedsforspecialkids.com/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
<script src="http://specialneedsforspecialkids.com/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
<script src="http://specialneedsforspecialkids.com/yun/static/js/clipboard.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
function setcode(){
var _html='';
document.querySelectorAll('pre code').forEach((block) => {
var _tmptext=$.trim($(block).text());
if(_tmptext!=''){
_html=_html+_tmptext;
console.log(_html);
}
});
}
</script>
<script>
function payread(){
layer.open({
type: 1,
title:"付費(fèi)閱讀",
shadeClose: true,
content: $('#payread')
});
}
// 舉報(bào)
function jupao_tip(){
layer.open({
type: 1,
title:false,
shadeClose: true,
content: $('#jubao')
});
}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加載評(píng)論
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);
})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("評(píng)論內(nèi)容不能為空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
$(".button_agree").click(function(){
var supportobj = $(this);
var tid = $(this).attr("id");
$.ajax({
type: "GET",
url:"http://specialneedsforspecialkids.com/yun/index.php?topic/ajaxhassupport/" + tid,
cache: false,
success: function(hassupport){
if (hassupport != '1'){
$.ajax({
type: "GET",
cache:false,
url: "http://specialneedsforspecialkids.com/yun/index.php?topic/ajaxaddsupport/" + tid,
success: function(comments) {
supportobj.find("span").html(comments+"人贊");
}
});
}else{
alert("您已經(jīng)贊過(guò)");
}
}
});
});
function attenquestion(_tid,_rs){
$.ajax({
//提交數(shù)據(jù)的類(lèi)型 POST GET
type:"POST",
//提交的網(wǎng)址
url:"http://specialneedsforspecialkids.com/yun/favorite/topicadd.html",
//提交的數(shù)據(jù)
data:{tid:_tid,rs:_rs},
//返回?cái)?shù)據(jù)的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在請(qǐng)求之前調(diào)用的函數(shù)
beforeSend:function(){},
//成功返回之后調(diào)用的函數(shù)
success:function(data){
var data=eval("("+data+")");
console.log(data)
if(data.code==2000){
layer.msg(data.msg,function(){
if(data.rs==1){
//取消收藏
$(".layui-layer-tips").attr("data-tips","收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
}
if(data.rs==0){
//收藏成功
$(".layui-layer-tips").attr("data-tips","已收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
}
})
}else{
layer.msg(data.msg)
}
} ,
//調(diào)用執(zhí)行后調(diào)用的函數(shù)
complete: function(XMLHttpRequest, textStatus){
postadopt=true;
},
//調(diào)用出錯(cuò)執(zhí)行的函數(shù)
error: function(){
//請(qǐng)求出錯(cuò)處理
postadopt=false;
}
});
}
</script>
<footer>
<div id="rfld7vz" class="layui-container">
<div id="7pxdhtv" class="flex_box_zd">
<div id="d7jxppn" class="left-footer">
<h6><a href="http://specialneedsforspecialkids.com/"><img src="http://specialneedsforspecialkids.com/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6>
<p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計(jì)算服務(wù)平臺(tái)，堅(jiān)持中立，不涉足客戶(hù)業(yè)務(wù)領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺(tái)、AI服務(wù)平臺(tái)等一系列云計(jì)算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場(chǎng)景下的業(yè)務(wù)需求，提供公有云、混合云、私有云、專(zhuān)有云在內(nèi)的綜合性行業(yè)解決方案。</p>
</div>
<div id="jvpjnn5" class="right-footer layui-hidemd">
<ul class="flex_box_zd">
<li>
<h6>UCloud與云服務(wù)</h6>
<p><a href="http://specialneedsforspecialkids.com/site/about/intro/">公司介紹</a></p>
<p><a >加入我們</a></p>
<p><a href="http://specialneedsforspecialkids.com/site/ucan/onlineclass/">UCan線上公開(kāi)課</a></p>
<p><a href="http://specialneedsforspecialkids.com/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://specialneedsforspecialkids.com/site/pro-notice/">產(chǎn)品動(dòng)態(tài)</a></p>
</li>
<li>
<h6>友情鏈接</h6> <p><a >GPU算力平臺(tái)</a></p> <p><a >UCloud私有云</a></p>
<p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >Pinex</a></p> <p><a >AI繪畫(huà)</a></p>
</li>
<li>
<h6>社區(qū)欄目</h6>
<p><a href="http://specialneedsforspecialkids.com/yun/column/index.html">專(zhuān)欄文章</a></p>
<p><a href="http://specialneedsforspecialkids.com/yun/udata/">專(zhuān)題地圖</a></p> </li>
<li>
<h6>常見(jiàn)問(wèn)題</h6>
<p><a href="http://specialneedsforspecialkids.com/site/ucsafe/notice.html" >安全中心</a></p>
<p><a href="http://specialneedsforspecialkids.com/site/about/news/recent/" >新聞動(dòng)態(tài)</a></p>
<p><a href="http://specialneedsforspecialkids.com/site/about/news/report/">媒體動(dòng)態(tài)</a></p> <p><a href="http://specialneedsforspecialkids.com/site/cases.html">客戶(hù)案例</a></p>
<p><a href="http://specialneedsforspecialkids.com/site/notice/">公告</a></p>
</li>
<li>
<span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優(yōu)刻得"></span>
<p>掃掃了解更多</p></div>
</div>
<div id="pr55f5t" class="copyright">Copyright ? 2012-2023 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 31011002000058號(hào)</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號(hào)-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div>
</div>
</footer>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://specialneedsforspecialkids.com/" title="国产xxxx99真实实拍">国产xxxx99真实实拍</a>
<div class="friend-links">
<a href="http://belistarlp.com/">国产黄色在线</a>
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="jt7vn" class="pl_css_ganrao" style="display: none;"><ol id="jt7vn"></ol><pre id="jt7vn"><style id="jt7vn"><video id="jt7vn"><font id="jt7vn"></font></video></style></pre><ol id="jt7vn"></ol><optgroup id="jt7vn"></optgroup><ruby id="jt7vn"></ruby><mark id="jt7vn"><address id="jt7vn"></address></mark><dfn id="jt7vn"><u id="jt7vn"></u></dfn><legend id="jt7vn"><ol id="jt7vn"></ol></legend><dl id="jt7vn"><pre id="jt7vn"></pre></dl><acronym id="jt7vn"><legend id="jt7vn"><dfn id="jt7vn"><u id="jt7vn"></u></dfn></legend></acronym><ol id="jt7vn"><label id="jt7vn"></label></ol><nobr id="jt7vn"><small id="jt7vn"></small></nobr><dl id="jt7vn"></dl><listing id="jt7vn"></listing><thead id="jt7vn"><progress id="jt7vn"><label id="jt7vn"><pre id="jt7vn"></pre></label></progress></thead><nobr id="jt7vn"></nobr><strike id="jt7vn"><strong id="jt7vn"></strong></strike><th id="jt7vn"><tt id="jt7vn"><progress id="jt7vn"><acronym id="jt7vn"></acronym></progress></tt></th><i id="jt7vn"><listing id="jt7vn"><dfn id="jt7vn"><ruby id="jt7vn"></ruby></dfn></listing></i><strong id="jt7vn"><track id="jt7vn"></track></strong><rp id="jt7vn"></rp><sub id="jt7vn"><strike id="jt7vn"></strike></sub><address id="jt7vn"><p id="jt7vn"></p></address><progress id="jt7vn"></progress><legend id="jt7vn"></legend><label id="jt7vn"></label><u id="jt7vn"><ins id="jt7vn"></ins></u><strong id="jt7vn"><track id="jt7vn"></track></strong><ol id="jt7vn"></ol><meter id="jt7vn"></meter><menuitem id="jt7vn"></menuitem><dfn id="jt7vn"><u id="jt7vn"></u></dfn><address id="jt7vn"><legend id="jt7vn"></legend></address><acronym id="jt7vn"><legend id="jt7vn"><dfn id="jt7vn"><u id="jt7vn"></u></dfn></legend></acronym><ins id="jt7vn"></ins><listing id="jt7vn"><dfn id="jt7vn"></dfn></listing><small id="jt7vn"><meter id="jt7vn"></meter></small><small id="jt7vn"></small><ruby id="jt7vn"><sub id="jt7vn"></sub></ruby><output id="jt7vn"></output><form id="jt7vn"></form><u id="jt7vn"></u><th id="jt7vn"></th><thead id="jt7vn"><label id="jt7vn"><strong id="jt7vn"><track id="jt7vn"></track></strong></label></thead><pre id="jt7vn"><th id="jt7vn"><b id="jt7vn"><ins id="jt7vn"></ins></b></th></pre><pre id="jt7vn"><th id="jt7vn"><b id="jt7vn"><mark id="jt7vn"></mark></b></th></pre><i id="jt7vn"><listing id="jt7vn"><small id="jt7vn"><output id="jt7vn"></output></small></listing></i><b id="jt7vn"><mark id="jt7vn"></mark></b><sup id="jt7vn"><label id="jt7vn"><rp id="jt7vn"><em id="jt7vn"></em></rp></label></sup><font id="jt7vn"><meter id="jt7vn"></meter></font><big id="jt7vn"><dl id="jt7vn"></dl></big><form id="jt7vn"><rp id="jt7vn"></rp></form><listing id="jt7vn"><dfn id="jt7vn"></dfn></listing><th id="jt7vn"><tt id="jt7vn"></tt></th><ruby id="jt7vn"><thead id="jt7vn"></thead></ruby><p id="jt7vn"></p><meter id="jt7vn"></meter><pre id="jt7vn"><i id="jt7vn"><listing id="jt7vn"><dfn id="jt7vn"></dfn></listing></i></pre><nobr id="jt7vn"><small id="jt7vn"></small></nobr><listing id="jt7vn"><dfn id="jt7vn"></dfn></listing><output id="jt7vn"><sub id="jt7vn"></sub></output><tt id="jt7vn"></tt><label id="jt7vn"></label><p id="jt7vn"></p><sup id="jt7vn"></sup><dfn id="jt7vn"></dfn><menuitem id="jt7vn"><span id="jt7vn"></span></menuitem><big id="jt7vn"></big><i id="jt7vn"></i><optgroup id="jt7vn"></optgroup><ins id="jt7vn"></ins><font id="jt7vn"><div id="jt7vn"><ol id="jt7vn"><style id="jt7vn"></style></ol></div></font><menuitem id="jt7vn"><span id="jt7vn"></span></menuitem><output id="jt7vn"></output><dfn id="jt7vn"><u id="jt7vn"></u></dfn><track id="jt7vn"><tt id="jt7vn"><progress id="jt7vn"><acronym id="jt7vn"></acronym></progress></tt></track><output id="jt7vn"></output><meter id="jt7vn"></meter><strike id="jt7vn"></strike><sub id="jt7vn"><strike id="jt7vn"></strike></sub><optgroup id="jt7vn"></optgroup><nobr id="jt7vn"></nobr><legend id="jt7vn"><sup id="jt7vn"><label id="jt7vn"><video id="jt7vn"></video></label></sup></legend><div id="jt7vn"><ol id="jt7vn"><style id="jt7vn"><listing id="jt7vn"></listing></style></ol></div><video id="jt7vn"><em id="jt7vn"></em></video><thead id="jt7vn"><label id="jt7vn"></label></thead><style id="jt7vn"><nobr id="jt7vn"><small id="jt7vn"><menuitem id="jt7vn"></menuitem></small></nobr></style><div id="jt7vn"></div><form id="jt7vn"><p id="jt7vn"><var id="jt7vn"><u id="jt7vn"></u></var></p></form><legend id="jt7vn"><ol id="jt7vn"><label id="jt7vn"><video id="jt7vn"></video></label></ol></legend><ins id="jt7vn"><form id="jt7vn"><p id="jt7vn"><var id="jt7vn"></var></p></form></ins><address id="jt7vn"></address><pre id="jt7vn"><style id="jt7vn"><listing id="jt7vn"><dfn id="jt7vn"></dfn></listing></style></pre><var id="jt7vn"><u id="jt7vn"><mark id="jt7vn"><address id="jt7vn"></address></mark></u></var><i id="jt7vn"><listing id="jt7vn"><dfn id="jt7vn"><output id="jt7vn"></output></dfn></listing></i><form id="jt7vn"></form><font id="jt7vn"><div id="jt7vn"></div></font><p id="jt7vn"><sup id="jt7vn"></sup></p><mark id="jt7vn"><form id="jt7vn"><p id="jt7vn"><var id="jt7vn"></var></p></form></mark><form id="jt7vn"></form><thead id="jt7vn"></thead><thead id="jt7vn"></thead><output id="jt7vn"></output><strike id="jt7vn"></strike><sup id="jt7vn"></sup><b id="jt7vn"></b><form id="jt7vn"><legend id="jt7vn"><dfn id="jt7vn"><u id="jt7vn"></u></dfn></legend></form><b id="jt7vn"><progress id="jt7vn"></progress></b><em id="jt7vn"></em><dfn id="jt7vn"><u id="jt7vn"></u></dfn><sub id="jt7vn"></sub><th id="jt7vn"><b id="jt7vn"><mark id="jt7vn"><acronym id="jt7vn"></acronym></mark></b></th><dfn id="jt7vn"><menuitem id="jt7vn"><span id="jt7vn"><strike id="jt7vn"></strike></span></menuitem></dfn><output id="jt7vn"><sub id="jt7vn"><thead id="jt7vn"><label id="jt7vn"></label></thead></sub></output><ol id="jt7vn"><label id="jt7vn"></label></ol><th id="jt7vn"><b id="jt7vn"><mark id="jt7vn"><form id="jt7vn"></form></mark></b></th><thead id="jt7vn"></thead><label id="jt7vn"></label><sub id="jt7vn"><thead id="jt7vn"></thead></sub><strong id="jt7vn"></strong><th id="jt7vn"><u id="jt7vn"><mark id="jt7vn"><address id="jt7vn"></address></mark></u></th><u id="jt7vn"><ins id="jt7vn"></ins></u><dl id="jt7vn"></dl><listing id="jt7vn"><dfn id="jt7vn"><output id="jt7vn"><sub id="jt7vn"></sub></output></dfn></listing><i id="jt7vn"></i><optgroup id="jt7vn"></optgroup><label id="jt7vn"><video id="jt7vn"></video></label><ruby id="jt7vn"></ruby><form id="jt7vn"><p id="jt7vn"></p></form><address id="jt7vn"><legend id="jt7vn"></legend></address><listing id="jt7vn"></listing><label id="jt7vn"><video id="jt7vn"></video></label><div id="jt7vn"><ol id="jt7vn"><style id="jt7vn"><video id="jt7vn"></video></style></ol></div><legend id="jt7vn"><th id="jt7vn"><b id="jt7vn"><mark id="jt7vn"></mark></b></th></legend><thead id="jt7vn"><big id="jt7vn"><label id="jt7vn"><pre id="jt7vn"></pre></label></big></thead><acronym id="jt7vn"><pre id="jt7vn"></pre></acronym><menuitem id="jt7vn"><pre id="jt7vn"></pre></menuitem><legend id="jt7vn"><sup id="jt7vn"><form id="jt7vn"><video id="jt7vn"></video></form></sup></legend><small id="jt7vn"><menuitem id="jt7vn"></menuitem></small><form id="jt7vn"><legend id="jt7vn"><dfn id="jt7vn"><form id="jt7vn"></form></dfn></legend></form><optgroup id="jt7vn"><output id="jt7vn"><sub id="jt7vn"><big id="jt7vn"></big></sub></output></optgroup><form id="jt7vn"><p id="jt7vn"><var id="jt7vn"><form id="jt7vn"></form></var></p></form><style id="jt7vn"><nobr id="jt7vn"><small id="jt7vn"><menuitem id="jt7vn"></menuitem></small></nobr></style><strong id="jt7vn"><track id="jt7vn"></track></strong><th id="jt7vn"><b id="jt7vn"></b></th><optgroup id="jt7vn"><output id="jt7vn"><sub id="jt7vn"><thead id="jt7vn"></thead></sub></output></optgroup><big id="jt7vn"><label id="jt7vn"><strong id="jt7vn"><th id="jt7vn"></th></strong></label></big><strike id="jt7vn"></strike><dfn id="jt7vn"><output id="jt7vn"><span id="jt7vn"><strike id="jt7vn"></strike></span></output></dfn><pre id="jt7vn"><dfn id="jt7vn"></dfn></pre></div>
<script src="http://specialneedsforspecialkids.com/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html>