V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
yazoox
V2EX  ›  JavaScript

JS 的 querySelector 和 JQuery 的是一样的语法么?还是有些许区别?

  •  
  •   yazoox · 2021-03-25 10:17:12 +08:00 · 2782 次点击
    这是一个创建于 1099 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这个是基本的网页里面的数据,\

    <div>
      <p>
        A
      </p>
      <p>
        A global issue
      </p>
    </div>
    <div>
      <p>
        C
      </p>
    </div>
    

    如上,我在 chrome 浏览器,打开 console,输入

    $("div p:contains('A')")
    

    提示我出错

    Uncaught DOMException: Failed to execute '$' on 'CommandLineAPI': 'div  p:contains('A')' is not a valid selector.
        at <anonymous>:1:1
    

    但是,有时候又能够成功,我“傻掉”了......

    n.fn.init [prevObject: n.fn.init(1), context: document, selector: "div p:contains('A')"]
    

    p.s.
    之所以问这个问题,是因为我在用 WebDriverIO 写 end-to-end 测试时,
    declare var browser: WebdriverIO.BrowserObject;

    我想用 browser 查找一个 div 的 text 为“A"或者,p 的 text 为“A"的对象,
    browser.$("div p:contains(’A')");
    调用总是失败,所以,我用 jsbin 试了一下,有时候成功,有时候失败。我也查了一样 DOM 的 querySelector & JQuery,没找到原因。

    所以来问问。

    p.s.2
    jsbin sample:

    https://jsbin.com/gecodut/edit?html,output

    8 条回复    2021-03-25 15:22:57 +08:00
    Girlphobia
        1
    Girlphobia  
       2021-03-25 10:31:55 +08:00
    AFAIK, `:contains()` 是一个 jQuery selector,并不是 CSS 标准。
    https://api.jquery.com/contains-selector/
    cin
        2
    cin  
       2021-03-25 10:38:35 +08:00
    你成功时是调用了 jQuery 的 $方法, 失败则是调用了 console 的 $方法. console 面板里也提供了一个便捷调试用的 $, 类似于 querySelector. querySelector 只接收有效的 CSS 选择器.
    可以加个样式 div p:contains('A') {color: red} 来验证下.
    DOLLOR
        3
    DOLLOR  
       2021-03-25 10:41:14 +08:00
    querySelector 和 querySelectorAll 用的是 CSS 选择器( CSS selectors ),跟 jquery 的选择器有些不同。
    Rhilip
        4
    Rhilip  
       2021-03-25 13:50:09 +08:00
    yazoox
        5
    yazoox  
    OP
       2021-03-25 13:56:08 +08:00
    @Rhilip
    @Girlphobia

    回取最初的需求,那我怎么 selector 一个 div 或者 p 这样的元素对象,基 text 是指定的值呢?
    比如,我想找到 text 为 abc 的 div 对象?
    <div>abc<div>
    xuanzizhe
        6
    xuanzizhe  
       2021-03-25 14:29:03 +08:00
    这个恐怕没有什么好的高效的方式,间接的办法先取到 div/p 元素,然后循环判断 element.textContent 是否包含 abc,但 textContent 是会取到所有子元素的文本的,这表示你的 abc 可能是间隔分布在文本节点和 element 子元素内的,如果这没问题的话,你可能还得去重,因为假如子元素能筛选到的话、父元素也一定能筛选到,这样下来性能应该是不会好到哪去的了~
    wxsm
        7
    wxsm  
       2021-03-25 14:32:59 +08:00   ❤️ 1
    > 回取最初的需求,那我怎么 selector 一个 div 或者 p 这样的元素对象,基 text 是指定的值呢?

    这个可以用 xpath 做,比较方便。

    举例:

    //*[contains(text(),'ABC')]

    https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript
    xuanzizhe
        8
    xuanzizhe  
       2021-03-25 15:22:57 +08:00
    @wxsm 👍🏻 是个好办法啊,不过看了下 xpath 里 contains 方法和 jquery 里的:contains 选择器还是有些区别的,如上面所说,xpath 里匹配到的文本必须是在元素的文本子节点里连续存在的,相当于获取到元素后,再遍历元素的所有文本子节点看是否包含,比如『<div>ab<span>c</span></div>』,在 xpath 里是只能匹配到文本『 ab 』而不能匹配到『 abc 』的,所以看实际需求了,如果你的需求就是如 xpath 的处理方式一样,那原生的就能满足了,如果是如 jquery 的处理方式,那就不如直接引下库了~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3230 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:17 · PVG 22:17 · LAX 07:17 · JFK 10:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.