当前位置: 首页 > 工具软件 > jquery-utils > 使用案例 >

MUI-Utils

颜博达
2023-12-01

官网的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()跟 .eachJQ .each

extend()
把两个对象合并成一个对象
结构:

.extend( target , object1 [, objectN] )
.extend( deep , target , object1 [, objectN] )

scrollTo()

滚动窗口屏幕到指定位置,该方法是对window.scrollTo()方法在手机端的增强实现,可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小,该方法仅可实现屏幕纵向滚动。

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

 类似资料: