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

在开发者工具中预览效果

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

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选择器

在开发者工具中预览效果

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

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选择器

在开发者工具中预览效果

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

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 - 后代选择器

在开发者工具中预览效果

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

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 - 多个选择器

在开发者工具中预览效果

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

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);
        });
    }
});