官网的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
例如
<p id="ap" name="bp" class="cp">P</p>
var id=document.getElementById("ap");
var tag=document.getElementsByTagName("p")[0];
var cTag=document.getElementsByClassName("cp")[0];
var name=document.getElementsByName("bp")[0]
在JQUERY中,大家也使用过$(“”)进行选择;在考虑原生JS的情况下,要用类似的功能,我们可以使用HTML5相关的选择器去解决。
document.querySelector
document.querySelectorAll
ele = document.querySelector('selectors');
eleList = document.querySelectorAll('selectors');
下面来解释下mui()
官网上面提到
若要将mui对象转化成dom对象,可使用如下方法(类似jquery对象转成dom对象):
//obj1是mui对象
var obj1 = mui("#title");
//obj2是dom对象
var obj2 = obj1[0];
mui这个对象是怎么来的。
最简单的方法,我们来构造一个自己的选择器
function KS(selector)
{
return document.querySelectorAll(selector);
}
KS("#ap")[0];//我们就选择到了上面的P
mui.each()跟 .each类似,不懂可自行科普JQ的 .each
extend()
把两个对象合并成一个对象
结构:
.extend( target , object1 [, objectN] )
.extend( deep , target , object1 [, objectN] )
scrollTo()
滚动窗口屏幕到指定位置,该方法是对window.scrollTo()方法在手机端的增强实现,可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小,该方法仅可实现屏幕纵向滚动。