为什么 querySelector 有效而 $() 或 document.getElementById 不适用于复选框？

Question

这是来自Lynda.com的课程"Jquery Essentianl Training"，其中一个解决方案中有一点我真的无法理解。任务是创建复选框，并根据是否选中显示和隐藏具有特定数据属性的项目。

document.querySelector('#vitamincheck').addEventListener('change',function (evt) {
        updateProductView("vitamins", evt.target.checked);
    });
    document.querySelector('#mineralcheck').addEventListener('change',function (evt) {
        updateProductView("mineralwater", evt.target.checked);
    });
    document.querySelector('#proteincheck').addEventListener('change',function (evt) {
        updateProductView("proteinbar", evt.target.checked);
    });
    function updateProductView(categoryName, visibility) {

        var dataSelectorVal = "";
        switch (categoryName) {
        case "vitamins":
            dataSelectorVal = "h2[data-type='vitamin']";
            break;
        case "mineralwater":
            dataSelectorVal = "h2[data-type='mineralwater']";
            break;
        case "proteinbar":
            dataSelectorVal = "h2[data-type='proteinbar']";
            break;
        }

        $(".product-item").has(dataSelectorVal).css('display', visibility ? "" : "none");

    }

我能理解它为什么有效。但问题是当我尝试将 document.querySelector('#someid') 更改为 $('#someid') 或 document.getElementById('#someid'), 没用。

我用谷歌搜索了很多，如果我指向某个 ID，docuemnt.querySelector 和 $() 的行为应该相同。我是不是漏掉了什么？？

或者如果它是复选框，它应该只被选中 document.querySelector?

顺便说一句，与上面 javascript 相关的 HTML 位如下。

    <p>SHOW: <input type="checkbox" id="vitamincheck" value="vitamin" checked="checked"> Vitamins
<input type="checkbox" id="mineralcheck" value="mineralwater" checked="checked"> Mineral Water
<input type="checkbox" id="proteincheck" value="proteinbar" checked="checked"> Protein Bar</p>

<ul class="product-list">
<li class="product-item" data-prod_id="V-A1037">
    <img class="product-image" src="images/products/vitamin-a.jpg" alt="Vitamin A - Product Photo">
    <h2 class="product-name" data-type="vitamin">Vitamin A</h2>
</li>
<li class="product-item" data-prod_id="V-BC2178">
    <img class="product-image" src="images/products/vitamin-bcomplex.jpg" alt="B Complex - Product Photo">
    <h2 class="product-name" data-type="vitamin">Vitamin-B Complex</h2>
</li>
<li class="product-item" data-prod_id="MW-8812">
    <img class="product-image" src="images/products/mineralwater-blueberry.jpg" alt="Blueberry Mineral Water - Product Photo">
    <h2 class="product-name" data-type="mineralwater">Blueberry Mineral Water</h2>
</li>
<li class="product-item" data-prod_id="V-C6614">
    <img class="product-image" src="images/products/vitamin-c.jpg" alt="Vitamin C - Product Photo">
    <h2 class="product-name" data-type="vitamin">Vitamin C</h2>
</li>
<li class="product-item" data-prod_id="PB-8154">
    <img class="product-image" src="images/products/proteinbar-chocolate.jpg" alt="Protein Bar Chocolate - Product Photo">
    <h2 class="product-name" data-type="proteinbar">Chocolate Protein Bar</h2>
</li>
<li class="product-item" data-prod_id="V-CA4543">
    <img class="product-image" src="images/products/vitamin-calcium.jpg" alt="Vitamin Calcium - Product Photo">
    <h2 class="product-name" data-type="vitamin">Calcium Vitamin</h2>
</li>
<li class="product-item" data-prod_id="V-D1825">
    <img class="product-image" src="images/products/vitamin-d.jpg" alt="Vitamin D - Product Photo">
    <h2 class="product-name" data-type="vitamin">Vitamin D</h2>
</li>
<li class="product-item" data-prod_id="V-F2225">
    <img class="product-image" src="images/products/vitamin-flaxseed-oil.jpg" alt="Flaxseed Oil - Product Photo">
    <h2 class="product-name" data-type="vitamin">Flaxseed Oil Vitamin</h2>
</li>
<li class="product-item" data-prod_id="V-I7456">
    <img class="product-image" src="images/products/vitamin-iron.jpg" alt="Vitamin Iron - Product Photo">
    <h2 class="product-name" data-type="vitamin">Iron Vitamin</h2>
</li>
<li class="product-item" data-prod_id="MW-9143">
    <img class="product-image" src="images/products/mineralwater-lemonlime.jpg" alt="Mineral Water Lemon Lime - Product Photo">
    <h2 class="product-name" data-type="mineralwater">Lemon Lime Mineral Water</h2>
</li>
<li class="product-item" data-prod_id="V-M0019">
    <img class="product-image" src="images/products/vitamin-magnesium.jpg" alt="Vitamin Magnesium - Product Photo">
    <h2 class="product-name" data-type="vitamin">Magnesium Vitamin</h2>
</li>
<li class="product-item" data-prod_id="V-MV7763">
    <img class="product-image" src="images/products/vitamin-multi.jpg" alt="Vitamin Multivitamin - Product Photo">
    <h2 class="product-name" data-type="vitamin">Multi-vitamin</h2>
</li>
<li class="product-item" data-prod_id="PB-1234">
    <img class="product-image" src="images/products/proteinbar-peanutbutter.jpg" alt="Vitamin Protein Bar Peanut Butter - Product Photo">
    <h2 class="product-name" data-type="proteinbar">Peanut Butter Protein Bar</h2>
</li>
<li class="product-item" data-prod_id="MW-S0987">
    <img class="product-image" src="images/products/mineralwater-strawberry.jpg" alt="Mineral Water Strawberry - Product Photo">
    <h2 class="product-name" data-type="mineralwater">Strawberry Mineral Water</h2>
</li>
<li class="product-item" data-prod_id="PB-1919">
    <img class="product-image" src="images/products/proteinbar-lemon.jpg" alt="Protein Bar Lemon - Product Photo">
    <h2 class="product-name" data-type="proteinbar">Lemon Protein Bar</h2>
</li>
<li class="product-item" data-prod_id="MW-O1980">
    <img class="product-image" src="images/products/mineralwater-orange.jpg" alt="Mineral Water Orange - Product Photo">
    <h2 class="product-name" data-type="mineralwater">Orange Mineral Water</h2>
</li>
<li class="product-item" data-prod_id="MW-P1968">
    <img class="product-image" src="images/products/mineralwater-peach.jpg" alt="Mineral Water Peach - Product Photo">
    <h2 class="product-name" data-type="mineralwater">Peach Mineral Water</h2>
</li>
<li class="product-item" data-prod_id="MW-R2003">
    <img class="product-image" src="images/products/mineralwater-raspberry.jpg" alt="Mineral Water Raspberry - Product Photo">
    <h2 class="product-name" data-type="mineralwater">Raspberry Mineral Water</h2>
</li>
</ul><!-- product-list -->

Answer 1

如果你想使用 jQuery，你应该使用 on jQuery 方法添加事件监听器，而不是 vanilla JS 的 addEventListener 方法。只需更换 addEventListener 与 on:

$('#vitamincheck').on('change', function (evt) {
    updateProductView("vitamins", evt.target.checked);
});
$('#mineralcheck').on('change', function (evt) {
    updateProductView("mineralwater", evt.target.checked);
});
$('#proteincheck').on('change', function (evt) {
    updateProductView("proteinbar", evt.target.checked);
});

为什么 querySelector 有效而 $() 或 document.getElementById 不适用于复选框？

Why querySelector work and $() or document.getElementById doesn't work with checkboxes?

javascript

checkbox

jquery

selectors-api