SelectorQuery.select

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

方法参数

String selector

返回值

NodesRef selector 类似于 CSS 的选择器，但仅支持下列语法。 1、ID 选择器：#the-id2、class 选择器（可以连续指定多个）：.a-class.another-class3、子元素选择器：.the-parent > .the-child4、后代选择器：.the-ancestor .the-descendant5、多选择器的并集：#a-node, .some-other-nodes

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例1

在开发者工具中预览效果

  1. <view class="container">    <view class="card-area">        <movable-area>            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">                Drag            </movable-view>        </movable-area>        <view class="list-area border-bottom">            <text>Drag的节点信息高度为：</text>            <text class="list-item-value-6"> {{message}}</text>        </view>    </view></view>
  1. Page({    data: {         message: ''    },    onReady() {        const selectorQuery = swan.createSelectorQuery();        this.selectorQuery = selectorQuery;    },    queryNodeInfo() {        console.log(this.selectorQuery.select('.target'));// nodeRef: selector: ".target", queryType: "select"        this.selectorQuery.select('.target').boundingClientRect();        this.selectorQuery.exec(res => {            console.log(res[0].top)            this.setData('message', res[0].top);        });    }});

代码示例2 - id选择器

在开发者工具中预览效果

  1. <view class="container">    <view class="card-area">        <movable-area>            <movable-view id="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">                Drag            </movable-view>        </movable-area>        <view class="list-area border-bottom">            <text>Drag的节点信息高度为：</text>            <text class="list-item-value-6"> {{message}}</text>        </view>    </view></view>
  1. Page({    data: {         message: ''    },    onReady() {        const selectorQuery = swan.createSelectorQuery();        this.selectorQuery = selectorQuery;    },    queryNodeInfo() {        console.log(this.selectorQuery.select('.target'));// nodeRef: selector: ".target", queryType: "select"        this.selectorQuery.select('#target').boundingClientRect();        this.selectorQuery.exec(res => {            console.log(res[0].top)            this.setData('message', res[0].top);        });    }});

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

在开发者工具中预览效果

  1. <view class="container">    <view class="card-area">        <movable-area>            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">                 Drag            </movable-view>            <movable-view class="target2" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">                Drag2            </movable-view>        </movable-area>        <view class="list-area border-bottom">            <text>Drag的节点信息高度为：</text>            <text class="list-item-value-6"> {{message}}</text>        </view>    </view></view>
  1. Page({    data: {         message: ''    },    onReady() {        const selectorQuery = swan.createSelectorQuery();        this.selectorQuery = selectorQuery;    },    queryNodeInfo() {        console.log(this.selectorQuery.select('.target.target2'));// nodeRef: selector: ".target", queryType: "select"        this.selectorQuery.select('.target.target2').boundingClientRect();        this.selectorQuery.exec(res => {            console.log(res)            // this.setData('message', res[0].top);        });    }});

代码示例4 - 后代选择器

在开发者工具中预览效果

  1. <view class="container">    <view class="card-area">        <movable-area>            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">                <view class="block"> Drag</view>            </movable-view>        </movable-area>        <view class="list-area border-bottom">            <text>Drag的节点信息高度为：</text>            <text class="list-item-value-6"> {{message}}</text>        </view>    </view></view>
  1. Page({    data: {         message: ''    },    onReady() {        const selectorQuery = swan.createSelectorQuery();        this.selectorQuery = selectorQuery;    },    queryNodeInfo() {        console.log(this.selectorQuery.select('.target>.block'));// nodeRef: selector: ".target", queryType: "select"        this.selectorQuery.select('.target>.block').boundingClientRect();        this.selectorQuery.exec(res => {            console.log(res)            // this.setData('message', res[0].top);        });    }});

代码示例5 - 多个选择器

在开发者工具中预览效果

  1. <view class="container">    <view class="card-area">        <movable-area>            <movable-view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">                <view class="block"> Drag</view>            </movable-view>            <movable-view id="target2" x="{{x}}" y="{{y}}" direction="all" bindchange="queryNodeInfo">                <view class="block"> Drag</view>            </movable-view>        </movable-area>        <view class="list-area border-bottom">            <text>Drag的节点信息高度为：</text>            <text class="list-item-value-6"> {{message}}</text>        </view>    </view></view>
  1. Page({    data: {         message: ''    },    onReady() {        const selectorQuery = swan.createSelectorQuery();        this.selectorQuery = selectorQuery;    },    queryNodeInfo() {        console.log(this.selectorQuery.select('.target, #block'));// nodeRef: selector: ".target", queryType: "select"        this.selectorQuery.select('.target, #block').boundingClientRect();        this.selectorQuery.exec(res => {            console.log(res)            // this.setData('message', res[0].top);        });    }});