官網的Utils提供了四個?
mui()?
each()?
extend()?
scrollTo()

在原生JS我們的選擇器常用的是?
1、document.getElementById();?
2、document.getElementsByClassName();?
3、document.getElementsByName();?
4、document.getElementsByTagName();

Id選擇單個，獲取的是[object HTMLDivElement]?
Name選擇多個,獲取的是[object NodeList]?
ClassName選擇多個，獲取的是[object HTMLCollection]?
TagName選擇多個，獲取的是[object HTMLCollection]

除了ID，其余的都要加下標才能訪問相應的DOM

例如

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><p <span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ap"</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bp"</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cp"</span>>P</p></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul> <code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> id=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementById(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ap"</span>); <span class="hljs-reserved" style="box-sizing: border-box;">var</span> tag=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementsByTagName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"p"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]; <span class="hljs-reserved" style="box-sizing: border-box;">var</span> cTag=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementsByClassName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cp"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]; <span class="hljs-reserved" style="box-sizing: border-box;">var</span> name=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementsByName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bp"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

在JQUERY中，大家也使用過$(“”)進行選擇；在考慮原生JS的情況下，要用類似的功能，我們可以使用HTML5相關的選擇器去解決。?
document.querySelector?
document.querySelectorAll

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">ele = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.querySelector(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'selectors'</span>); eleList = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.querySelectorAll(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'selectors'</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

下面來解釋下mui()?
官網上面提到

若要將mui對象轉化成dom對象，可使用如下方法（類似jquery對象轉成dom對象）：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//obj1是mui對象</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> obj1 = mui(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#title"</span>); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//obj2是dom對象</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> obj2 = obj1[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

mui這個對象是怎么來的。?
最簡單的方法，我們來構造一個自己的選擇器

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">KS</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(selector)</span> {</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> document.querySelectorAll(selector); }KS(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ap"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//我們就選擇到了上面的P</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

mui.each()跟.each類似，不懂可自行科普JQ的.each

extend()?
把兩個對象合并成一個對象?
結構:

<code class="hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.extend</span>( <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">target</span> , <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">object1</span> <span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[, objectN]</span> ) <span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.extend</span>( <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">deep</span> , <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">target</span> , <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">object1</span> <span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[, objectN]</span> )</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

scrollTo()

滾動窗口屏幕到指定位置，該方法是對window.scrollTo()方法在手機端的增強實現，可設定滾動動畫時間及滾動結束后的回調函數;鑒于手機屏幕大小，該方法僅可實現屏幕縱向滾動。

官網鏈接地址:http://dev.dcloud.net.cn/mui/util/#extend

總結

以上是生活随笔為你收集整理的MUI-Utils的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。