自学h.js笔记

最新推荐文章于 2024-06-04 02:03:09 发布

woody_deng

最新推荐文章于 2024-06-04 02:03:09 发布

阅读量1.4k

点赞数

分类专栏： JS 文章标签： h.js dom js

本文链接：https://blog.csdn.net/woody_deng/article/details/79114098

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

H.js DOM相关

1、h.js 选择器

dom元素选择器

使用h（select）可以快速的选择dom元素，支持下面几种选择方式：

id选择器
类选择器
标签选择器
原生对象选择器

选择器语法及返回

语法: h('选择器')
参数: 对应类型的选择器
返回: h.js 特定的dom操作对象

id 选择器

语法： h(‘#test’);

返回：选择成功返回h.js dom对象(主要该对象用于基于h.js的后续操作，原生的dom对象被保存在返回对象的dom属性中),否则返回空对象。

//选中返回
 {"dom":[{}],"length":1}
//选择失败返回
 {"dom":[],"length":0}

原生dom对象

返回对象的dom属性的第一个元素，实例：

var test = h('#test');
var dom  = test.dom[0];
dom.innerHTML = 'hi..';//只是一个例子 h.js就是简化原生dom操作的不需要这样执行

使用id选择器改变dom内容及颜色的例子：

<div id="test">12</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
var test = h('#test').html('hi').css({'color':'#900'});
</script>

类选择器

语法：h(‘className’);

返回：选择成功返回h.js dom对象(注意该对象用于基于H.js的后续操作，原生的dom对象被保存在返回对象的dom属性中),否则返回对象。

//选中返回
 {"dom":[{}],"length":1}
//选择失败返回
 {"dom":[],"length":0}

原生dom对象：返回对象的dom属性的第X个元素。

实例：

<div class="test">12</div>
<div class="test">12</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('.test').html('hi').css({'color':'#900'});
</script>

标签选择器

语法：h(‘tagName’);

返回：选择成功返回h.js dom对象(注意该对象用于基于h.js的后续操作，原生的dom对象被保存在返回对象的dom属性中),否则返回空对象。

//选中返回
 {"dom":[{}],"length":1}
//选择失败返回
 {"dom":[],"length":0}

原生dom对象：返回对象的dom属性的第X个元素。

实例：

<div class="test">12</div>
<div class="test">12</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('div').html('hi').css({'color':'#900'});
</script>

原生dom对象选择器

语法：h(原生dom对象);

返回：选择成功返回h.js dom对象（注意该对象用于基于h.js的后续操作，原生的dom对象别保存在返回对象的dom属性中），否则返回空对象。

//选中返回
 {"dom":[{}],"length":1}
//选择失败返回
 {"dom":[],"length":0}

注意：只支持单个对象。

实例：

<div class="test" id="t1">12</div>
<div class="test">12</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h(document.getElementById('t1')).html('hi').css({'color':'#900'});
</script>

2、h.js筛选器

选择元素的筛选器

在选中元素的基础上h.js提供了丰富的筛选器，详情如下：

eq() 根据元素的索引在已经选中的元素集中进行选择

语法：h(‘选择器’).eq(index)

说明：index 从0开始

返回：h.js dom对象，原生对象以数组形式保存在dom属性中

实例：

<div class="test" id="t1">12</div>
<div class="test">12</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('div').eq(0).html('hi').css({'color':'#900'});
</script>

first()选中元素集合中的第一个元素

语法：h(‘选择器’).first()

返回：h.js dom对象，原生对象以数组形式保存在dom属性中

next() 选中元素的下一个相邻元素

语法：h(‘选择器’).next()

说明：选中元素应该为一个独立的元素

返回：h.js dom对象，原生对象以数组形式保存在dom属性中

last()选中元素集合中的最后元素

语法：h(‘选择器’).last()

返回：h.js dom对象，原生对象以数组形式保存在dom属性中

parent()选中元素的父级元素

语法 : h(‘选择器’).parent()

返回 : h.js dom对象，原生对象以数组形式保存在dom属性中

find()在选中元素内继续向下寻找

语法：h(‘选择器’).find(‘选择器’)

说明 : find函数的参数支持 id、类、标签三种选择器。

实例：

<div id="t">
<p>1</p>
<h2>2</h2>
<p>3</p>
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#t').find('p').html('hi').css({'color':'#900'});
</script>

siblings() 获取相邻元素

语法:hui(‘选择器’).siblings()

返回:元素对象集合

实例

<div>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="js/h.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
h("#ul").find('li').eq(3).siblings().css({color:"#900"});
</script>

3、选中元素个数及选中判断

选中元素个数

使用选中对象的length属性或者size()函数可以获取选中元素的个数。如 :

<div id="t">
<p>1</p>
<h2>2</h2>
<p>3</p>
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#t').find('p').html('hi').css({'color':'#900'});
console.log(h('#t').find('p').size());
console.log(h('#t').find('p').length);

判断元素是否被选中

<div id="t">
<p>1</p>
<h2>2</h2>
<p>3</p>
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
var p = h('#t').find('p');
if(p.length > 0){
console.log('选中');
}else{
console.log('没有匹配的元素');
}
</script>

4、选中元素集合的遍历

使用each()进行选中元素集合的遍历

语法:hui(‘选择器’).each(function(dom){your code ……});

说明:遍历过程中返回对应的dom对象（原生的），并为其增加了index属性代表当前元素的序列号。

返回:无返回值

示例:

<div id="test" class="red">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test').find('li').each(function(obj){
//获得原生dom
console.log(obj.index + ' : '+ obj.innerHTML);
//可以继续使用选择器进行dom操作
h(obj).css({color:'#090'});
});
</script>

5、html内容设置及获取

dom内容操作

使用h.js的html()方法可以实现dom元素内html内容的设置及获取

h(‘选择器’).html(html)

参数：不设置参数代表获取匹配元素的html内容，设置参数则会进行匹配元素的html内容设置工作。

返回：设置时返回h.js操作对象可进行连贯操作，获取时返回html内容。

获取实例：

<div id="t">
    <p>1</p>
    <h2>2</h2>
    <p>3</p>
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
console.log(h('#t').html());
</script>

设置实例：

<div id="t">
    <p>1</p>
    <h2>2</h2>
    <p>3</p>
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#t').html('hi');
</script>

6、value设置及获取

输入元素的值属性操作

使用h.js 的val()方法可以实现输入元素内的value属性设置及获取

h(‘选择器’).val(val)

参数:不设置参数代表获取匹配元素的value，设置参数则会进行匹配元素的value属性设置工作。

返回：设置是返回h.js操作对象可进行连贯操作，获取时则返回value属性对应的值。

获取实例：

<input type="text" id="test1" value="1" />
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
console.log(h('#test1').val());
</script>

设置实例：

<input type="text" id="test1" value="1" />
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test1').val(2);
</script>

7、选中元素的style设置

选中元素的style设置

使用h.js的css()函数可以方便的为选中元素设置style。

参数：style对象（对象形式）

返回：h.js操作对象可进行连贯操作

注意：带有-的属性采用驼峰法转换

实例：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<div>
hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('div').css({color:'#900', 'lineHeight':'50px'});
</script>
</body>
</html>

8、class属性操作

匹配元素的class属性操作

1、hasClass(‘className’)判断匹配元素是否带有指定的class属性

参数：className

返回：true/false

实例：

<div id="test" class="a b c">
hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
console.log(h('#test').hasClass('a'));
</script>

2、addClass(className)为匹配元素添加指定的class属性

参数：className

返回：h.js操作对象，可以进行连贯操作

实例：

<style>
.red{color:#FF0000;}
</style>
<div id="test" class="a b c">
hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test').addClass('red');
</script>

3、removeClass(className)为匹配元素删除指定的class属性

参数：className

返回：h.js操作对象，可以进行连贯操作

实例：

<style>
.red{color:#FF0000;}
</style>
<div id="test" class="red">
hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test').removeClass('red');
</script>

9、元素的隐藏及展示

1、isShow()判断匹配元素是否展示

返回：true/false

<style>
.red{color:#FF0000;}
.hide{display:none;}
</style>
<div class="hide" id="test1">
hi...
</div>
<div id="test" class="red">
hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
console.log(h('#test1').isShow());
</script>

2、hide()隐藏匹配元素

返回：h.js操作对象，可以进行连贯操作

<style>
.red{color:#FF0000;}
.hide{display:none;}
</style>
<div class="hide" id="test1">
hi...
</div>
<div id="test" class="red">
hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test1').hide();
</script>

3、show()展示匹配元素

返回：h.js操作对象，可以进行连贯操作

<style>
.red{color:#FF0000;}
.hide{display:none;}
</style>
<div class="hide" id="test1">
hi...
</div>
<div id="test" class="red">
hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test1').show().css({fontSize:'30px'});
</script>

10、获取元素的宽度和高度

1、使用h(‘选择器’).width(isOffset)获取元素的宽度

参数：isOffset可选参数默认false,使用true是会计算元素的边框。

返回：数值类型宽度值

实例：

<style>
.test{width:100px; height:100px; padding:10px; border:1px solid #000000; margin:5px;}
</style>
<div id="test" class="test">hi..</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
console.log(h('#test').width());
console.log(h('#test').width(true));
</script>

2、使用h(‘选择器’).height(isOffset)获取元素的高度

参数：isOffset可选参数默认false，使用true时会计算元素的边框。

返回：数值类型的宽度值

实例：

<style>
.test{width:100px; height:100px; padding:10px; border:1px solid #000000; margin:5px;}
</style>
<div id="test" class="test">hi..</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
console.log(h('#test').height());
console.log(h('#test').height(true));
</script>

11、元素克隆与追加

1、元素克隆.clone()

返回：克隆后端h.js操作对象

<div id="test"></div>
<button id="btnTest">我是按钮</button>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
var btnC = h('#btnTest').clone();
</script>

2、将匹配元素向前追加到指定的父级元素.prependTo(parentObj)

参数：父级元素选择器或父级元素对象（h.js对象）

返回：无返回值

实例：

<div id="test"></div>
<button id="btnTest">我是按钮</button>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
var btnC = h('#btnTest').clone();
btnC.prependTo('#test');
</script>

3、将匹配元素向后追加到指定的父级元素.appendTo(parentObj)

返回：无返回值

实例：

<div id="test"></div>
<button id="btnTest">我是按钮</button>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
var btnC = h('#btnTest').clone();
btnC.prependTo('#test');
var newDiv = document.createElement('div');
newDiv.innerHTML = 'hi..';
h(newDiv).appendTo('#test');
</script>

12、(attr)属性操作

1、attr(attrName)获取属性

参数：属性名称

返回：对应属性的值，获取失败返回null

<div id="test"></div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
console.log(h('#test').attr('id'));
</script>

2、attr(attrName,value)设置属性

参数：属性名称，对应的值

返回： h.js操作对象，可以进行连贯操作

<div id="test">
    <img src="1.jpg" />
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test').find('im').attr('src', '2.png');
</script>

3、removeAttr(attrName)删除属性

参数：属性名称

返回：h.js操作对象，可以进行连贯操作

<style>
#test{background:#900;}
</style>
<div id="test">
    hi...
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test').removeAttr('id');
</script>

13、删除匹配元素

使用.remove删除匹配元素

语法：h(‘选择器’).remove()

返回：无返回值

实例：

<div id="test">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test').find('li').last().remove();
</script>

14、获取匹配元素的偏移值

获取匹配元素的offset

1、h(‘选择器’).offset()

返回：对象形式的偏移值{top:10px,left:20px}

<style>
#test{background:#900; width:100px; height:100px; position:fixed; z-index:5; left:50px; top:100px;}
</style>
<div id="test"></div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
var sets = h('#test').offset();
console.log(JSON.stringify(sets));
</script>

2、h.offset(原生dom对象)

返回：对象形式的偏移值{top:10px,left:20px}

<style>
#test{background:#900; width:100px; height:100px; position:fixed; z-index:5; left:50px; top:100px;}
</style>
<div id="test"></div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
var sets = h.offset(document.getElementById('test'));
console.log(JSON.stringify(sets));
</script>

15、animate 元素动画

animate(animateObj,timer,callBack)

功能：使选中元素产生动画效果

参数：1、对象形式的动画属性；2、动画过程时间（单位毫秒）；3、动画执行完成回调函数

<style>
#test{background:#900; width:100px; height:100px; position:fixed; z-index:5; left:50px; top:100px;}
</style>
<div id="test"></div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h('#test').animate({width:'300px', height:'300px'}, 300, function(){
    console.log('动画执行完毕');
});
</script>

说明：

1、anmate函数产生的动画使用js来完成相对css3动画，css3动画更为流畅，虽然我们提高了动画函数但推荐您使用css3动画。

2、请为动画元素设置初始样式或初始值，并保持动画元素起始状态和结束状态设置单位的统一，如：开始时使用的单位为百分比那么设置动画结束时使用的单位应该也是百分比。

16、窗口宽、高获取及滚动条设置

1、h.winInfo()获取窗口宽、高

返回：对象形式的窗口宽、高数据

<script type="text/javascript" charset="utf-8">
var winInfo = h.winInfo();
console.log('宽度'+winInfo.width + '高'+ winInfo.height);
</script>

2、h.scrollTop(scrollTopVal)设置窗口滚动条位置

参数：整数形式的scrollTop值

<style>
#test{background:#900; width:100px; height:1000px;}
</style>
<div id="test"></div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h.scrollTop(0);
</script>

17、元素点击事件快速绑定

元素点击事件快速绑定

h.js 封装了tap方法可以快速的为匹配元素绑定 tap 事件。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" id="home">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script src="js/h.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
h('#home').tap(function(){
console.log('home');
});
</script>
</body>
</html>

扩展

扩展自己的方法

使用h.extend(funName,fun)扩展自己的操作方法

参数：1、方法名称 2、函数定义

实例：

<style>
#test{background:#900; width:100px; height:100px;}
</style>
<div id="test"></div>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" charset="utf-8">
h.extend('myFunc', function(){
    this.html('hi... this is my function');
});
mui.plusReady(function(){
    h('#test').myFunc();
});
</script>

说明

1、扩展基于选择器所使用方法是h(‘选择器’).您的扩展方法。

2、this代表当前选择器选择的h.js操作对象

3、可以设置参数，调用传递即可。

4、主要方法名称，同名方法会对原有方法进行覆盖。

H5+相关

storage 存取

1、h.setItem(name,value)设置stroage

参数：1、键名称 2、对应的值

返回：无返回值

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    h.setItem('name','hcoder');
});
</script>

2、h.getItem(name)获取stroage内对应的值

参数：1、键名称 2、对应的值

返回：获取成功返回对应的值，失败返回null

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    console.log(h.getItem('name'));
});
</script>

3、h.removeItem(name)删除stroage指定数据

参数：1、键名称 2、对应的值

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    h.removeItem('name');
});
</script>

4、h.clearItem()清空stroage

参数：1、键名称 2、对应的值

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    h.clearItem();
});
</script>

注意

设置stroage的值必须是字符串形式。

h5+ app窗口相关

1、h.currentView()获取当前窗口

返回：当前窗口对象

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    var cView = h.currentView();
    console.log(JSON.stringify(cView));
});
</script>

2、h.indexView()获取入口页

返回：窗口对象

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    var indexView = h.indexView();
    console.log(JSON.stringify(indexView));
});
</script>

3、h.topView()获取栈顶窗口

返回：窗口对象

mui.plusReady(function(){
    var topView = h.topView();
    console.log(JSON.stringify(topView));
});

说明

获取窗口后即可使用hide、close等方法对窗口进行各类窗口操作。

获取手机device信息及app版本

h.device()获取手机device信息

返回：device信息对象形式

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    console.log(JSON.stringify(h.device()));
});
</script>
//信息格式:
{"imei":"8691610224997..","imsi":["4600315408417.."],"model":"MI 5","vendor":"Xiaomi","uuid":"869161022499"}

h.version()获取app版本信息

返回：字符串形式的版本信息

注意：需要打包后才能获得正确的值

<script type="text/javascript" charset="utf-8">
mui.plusReady(function(){
    console.log(JSON.stringify(h.version()));
});
</script>

woody_deng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录