MUI-Utils
2016-07-17 22:53
363 查看
官网的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
例如
在JQUERY中,大家也使用过$(“”)进行选择;在考虑原生JS的情况下,要用类似的功能,我们可以使用HTML5相关的选择器去解决。
document.querySelector
document.querySelectorAll
下面来解释下mui()
官网上面提到
若要将mui对象转化成dom对象,可使用如下方法(类似jquery对象转成dom对象):
mui这个对象是怎么来的。
最简单的方法,我们来构造一个自己的选择器
mui.each()跟.each类似,不懂可自行科普JQ的.each
extend()
把两个对象合并成一个对象
结构:
scrollTo()
滚动窗口屏幕到指定位置,该方法是对window.scrollTo()方法在手机端的增强实现,可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小,该方法仅可实现屏幕纵向滚动。
官网链接地址:http://dev.dcloud.net.cn/mui/util/#extend
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
相关文章推荐
- OpenGeo Suite在Ubuntu14.04下安装
- 一个小小的mui ajax查询应用
- EasyUI之EasyLoader加载器
- EasyUI之EasyLoader加载器
- EasyUI之EasyLoader加载器
- ServletRequestAttributeListener接口
- The requested resource (/) is not available
- Vue.jsbrowserify项目模板
- INSTALLMENT of QValue
- String和StringBuilder、StringBuffer的区别?
- hdu-2818-Building Block-带权并查集
- php 序列化储存和转化 json_encode() json_decode($q,true)
- Android UI设计(引导界面):ViewPager之三PagerTabStrip与PagerTitleStrip添加标题栏的区别
- codeforces 234E Champions' League
- sap gui 740 mac 下载
- uboot启动zImage(go)和uImage(bootm)分析
- storyboard 控件设置autolayout没起作用
- 【转】编译quickfast解析库(沪深level2行情转码库)
- 三、Android Call requires API level 11 (current min is 8)
- 【C#】StringBuilder和string对比