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

示例

扫码体验

SelectorQuery.select - 图1请使用百度APP扫码

图片示例

SelectorQuery.select - 图2

SelectorQuery.select - 图3

SelectorQuery.select - 图4

代码示例1

在开发者工具中预览效果

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

代码示例2 - id选择器

在开发者工具中预览效果

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

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

在开发者工具中预览效果

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

代码示例4 - 后代选择器

在开发者工具中预览效果

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

代码示例5 - 多个选择器

在开发者工具中预览效果

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