SelectorQuery

查询节点信息的对象

方法

SelectorQuery SelectorQuery.in(Component component)

将选择器的选取范围更改为自定义组件 component 内。

参数

NodesRef SelectorQuery.select(String selector)

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

参数

NodesRef SelectorQuery.selectAll(String selector)

在当前页面下选择匹配选择器 selector 的所有节点。

参数

NodesRef SelectorQuery.selectViewport()

选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。

NodesRef SelectorQuery.exec(Function callback)

执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

Function callback 参数

执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

selector 语法 selector类似于 CSS 的选择器，但仅支持下列语法。

• ID选择器：#the-id
• class选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node, .some-other-nodes

示例代码：

<view class="container">
  <view class="cssname">SelectorQuery mc.createSelectorQuery()</view>
  <button bindtap="select">select</button>
  <button bindtap="selectAll">selectAll</button>
  <button bindtap="selectViewport">selectViewport</button>
  <canvas class="query_class" style="display:none;" id="query_test" canvas-id="query_test"
    data-custom="dataset_custom" 
    mark:custom="marker_custom"
  >canvas:query_test</canvas>
  <canvas id="query_test2" type="webgl" class="query_class" style="display:none;"></canvas>
  <canvas id="query_test3" type="2d" class="query_class" style="display:none;"></canvas>
  <video class="query_class" style="display:none;"></video>
  <view class="cssname query_class">SelectorQuery NodesRef.fields(Object fields, function callback)</view>

  <text space="nbsp" user-select="true" class="scrollDetail">{{fieldsInfo}}</text>

  <view class="cssname">SelectorQuery NodesRef.boundingClientRect(function callback)</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{boundingClientRectInfo}}</text>

  <view class="cssname">SelectorQuery NodesRef.scrollOffset(function callback)</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{scrollOffsetInfo}}</text>

  <view class="cssname">SelectorQuery NodesRef.context(function callback)</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{contextInfo}}</text>

  <view class="cssname">SelectorQuery NodesRef.node(function callback)</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{nodeInfo}}</text>

  <view class="cssname">NodesRef SelectorQuery.exec(function callback)</view>
  <text space="nbsp" user-select="true" class="scrollDetail">{{execInfo}}</text>

</view>

Page({
  data: {

  },
  onLoad: function (options) {

  },
  select: function(){
    var selector = mc.createSelectorQuery();
    var nodesRef = selector.select('#query_test');
    this.selectorNodesRef(nodesRef);
  },
  selectAll: function(){
    var selector = mc.createSelectorQuery();
    var nodesRef = selector.selectAll('.query_class');
    this.selectorNodesRef(nodesRef);
  },
  selectViewport: function(){
    var selector = mc.createSelectorQuery();
    var nodesRef = selector.selectViewport();
    this.selectorNodesRef(nodesRef);
  },
  selectorNodesRef: function(nodesRef){
    nodesRef.fields({
      id: true,
      dataset: true,
      mark: true,
      rect: true,
      size: true,
      scrollOffset: true,
      properties: ['class'],
      computedStyle: ['font'],
      context: true,
      node: true
    }, (res) => {
      console.log('fields.callback', res);
      this.setData({
        fieldsInfo: JSON.stringify(res, null, 2)
      })
    });

    nodesRef.boundingClientRect((res) => {
      console.log('boundingClientRect.callback', res);
      this.setData({
        boundingClientRectInfo: JSON.stringify(res, null, 2)
      })
    });

    nodesRef.scrollOffset((res) => {
      console.log('scrollOffset.callback', res);
      this.setData({
        scrollOffsetInfo: JSON.stringify(res, null, 2)
      })
    });

    nodesRef.context((res) => {
      console.log('context.callback', res);
      this.setData({
        contextInfo: JSON.stringify(res, null, 2)
      })
    });

    nodesRef.node((res) => {
      console.log('node.callback', res);
      this.setData({
        nodeInfo: JSON.stringify(res, null, 2)
      })
    }).exec((res) => {
      console.log('exec', res);
      this.setData({
        execInfo: JSON.stringify(res, null, 2)
      })
    });
  }
})