账户中心 退出系统
6.0 版本 5.0 版本 3.0 版本
使用手册 模板中心 账户中心 合作 · 服务
6.0 版本 5.0 版本 3.0 版本
快速开始
介绍及部署
原生函数简化
页面跳转
网络请求
数据缓存
图片相关
系统信息
提示加载
头部导航
元素获取
常用函数扩展
字符操作
数组操作
随机数据
日期时间
延时循环
对象操作
元素选择
Grace.js 元素选择函数基于 uni/wx.createSelectorQuery() 进行封装,使您的元素选择工作更加便利。
注意 : select 和 selectAll 均不支持 nuve,nvue 请使用 dom 对象获取元素,参考示例 :
http://grace.hcoder.net/manual/info/805-2.html [ 请切换到 nvue 版本 ]

select()

函数功能 : 获取单个元素
函数参数 : dom 选择器 ( id选择器、class选择器等 )

selectAll()

函数功能 : 获全部元素
函数参数 : dom 选择器 ( id选择器、class选择器等 )


元素的信息结构

{
    id:"demo1", // 如果设置
    width:167,
    height:100,
    left:12
    right:179
    top:15,
    bottom:10,
    dataset:Object // 如果设置
}

演示代码

<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="grace-space-between grace-margin-top">
				<view id="demo1" class="demo1 grace-bg-blue grace-text-center grace-border-radius-small">Demo1</view>
				<view class="demo2 grace-bg-green grace-text-center grace-border-radius-small">Demo2</view>
			</view>
			<view class="grace-space-between grace-margin-top">
				<view class="demo3 grace-bg-blue grace-text-center grace-border-radius-small" data-id="demo3-1">Demo3-1</view>
				<view class="demo3 grace-bg-green grace-text-center grace-border-radius-small" data-id="demo3-2">Demo3-2</view>
				<view class="demo3 grace-bg-red grace-text-center grace-border-radius-small" data-id="demo3-3">Demo3-3</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/components/gracePage.vue";
var graceJS = require('@/Grace.JS/grace.js');
export default {
	data(){
		return {}
	},
	onReady : function(){
		// 获取 demo1
		graceJS.select('#demo1', (res)=>{
			console.log('demo1 : ',res);
		});
		// 获取 demo2
		graceJS.select('.demo2', (res)=>{
			console.log('demo2 : ', res);
		});
		
		// 获取 demo3 多个元素
		graceJS.selectAll('.demo3', (res)=>{
			console.log('demo3 : ', res);
		});
	},
	components:{
		gracePage
	},
	methods:{}
}
</script>
<style>
.demo1{width:335rpx; line-height:200rpx;}
.demo2{width:335rpx; line-height:160rpx; height:160rpx;}
.demo3{width:220rpx; line-height:120rpx; height:120rpx;}
</style>