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扫码

图片示例

SelectorQuery.select - 图2

代码示例 1

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  1. <view class="wrap">
  2. <view class="card-area">
  3. <movable-area>
  4. <movable-view class="target" x="{{x}}" y="{{y}}" direction="all">
  5. Drag
  6. </movable-view>
  7. </movable-area>
  8. <button bindtap="queryNodeInfo">点击获取节点信息</button>
  9. <view class="list-area border-bottom">
  10. <text>Drag的节点信息高度为:</text>
  11. <text class="list-item-value-6">{{message}}</text>
  12. </view>
  13. </view>
  14. </view>

代码示例 2:id 选择器

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  1. <view class="wrap">
  2. <view class="card-area">
  3. <movable-area>
  4. <movable-view id="target" x="{{x}}" y="{{y}}" direction="all">
  5. Drag
  6. </movable-view>
  7. </movable-area>
  8. <button bindtap="queryNodeInfo">点击获取节点信息</button>
  9. <view class="list-area border-bottom">
  10. <text>Drag的节点信息高度为:</text>
  11. <text class="list-item-value-6">{{message}}</text>
  12. </view>
  13. </view>
  14. </view>

代码示例 3:多个 class 选择器

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  1. <view class="wrap">
  2. <view class="card-area">
  3. <movable-area>
  4. <movable-view class="target target2" x="{{x}}" y="{{y}}" direction="all">
  5. Drag
  6. </movable-view>
  7. </movable-area>
  8. <button bindtap="queryNodeInfo">点击获取节点信息</button>
  9. <view class="list-area border-bottom">
  10. <text>Drag的节点信息高度为:</text>
  11. <text class="list-item-value-6"> {{message}}</text>
  12. </view>
  13. </view>
  14. </view>

代码示例 4:子元素选择器

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  1. <view class="wrap">
  2. <view class="card-area">
  3. <movable-area>
  4. <movable-view class="target" x="{{x}}" y="{{y}}" direction="all">
  5. <view class="block"> Drag</view>
  6. </movable-view>
  7. </movable-area>
  8. <button bindtap="queryNodeInfo">点击获取节点信息</button>
  9. <view class="list-area border-bottom">
  10. <text>Drag的节点信息高度为:</text>
  11. <text class="list-item-value-6"> {{message}}</text>
  12. </view>
  13. </view>
  14. </view>