SelectorQuery.select
解释: 在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。
方法参数
String selector
返回值
NodesRef
selector 类似于 CSS 的选择器,但仅支持下列语法。
1、ID 选择器:#the-id
2、class 选择器(可以连续指定多个):.a-class.another-class
3、子元素选择器:.the-parent > .the-child
4、后代选择器:.the-ancestor .the-descendant
5、多选择器的并集:#a-node, .some-other-nodes
示例
扫码体验
代码示例
请使用百度APP扫码
图片示例
代码示例 1
- SWAN
- JS
<view class="wrap">
<view class="card-area">
<movable-area>
<movable-view class="target" x="{{x}}" y="{{y}}" direction="all">
Drag
</movable-view>
</movable-area>
<button bindtap="queryNodeInfo">点击获取节点信息</button>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6">{{message}}</text>
</view>
</view>
</view>
代码示例 2:id 选择器
- SWAN
- JS
<view class="wrap">
<view class="card-area">
<movable-area>
<movable-view id="target" x="{{x}}" y="{{y}}" direction="all">
Drag
</movable-view>
</movable-area>
<button bindtap="queryNodeInfo">点击获取节点信息</button>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6">{{message}}</text>
</view>
</view>
</view>
代码示例 3:多个 class 选择器
- SWAN
- JS
<view class="wrap">
<view class="card-area">
<movable-area>
<movable-view class="target target2" x="{{x}}" y="{{y}}" direction="all">
Drag
</movable-view>
</movable-area>
<button bindtap="queryNodeInfo">点击获取节点信息</button>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6"> {{message}}</text>
</view>
</view>
</view>
代码示例 4:子元素选择器
- SWAN
- JS
<view class="wrap">
<view class="card-area">
<movable-area>
<movable-view class="target" x="{{x}}" y="{{y}}" direction="all">
<view class="block"> Drag</view>
</movable-view>
</movable-area>
<button bindtap="queryNodeInfo">点击获取节点信息</button>
<view class="list-area border-bottom">
<text>Drag的节点信息高度为:</text>
<text class="list-item-value-6"> {{message}}</text>
</view>
</view>
</view>