js的选择器

最新推荐文章于 2026-05-28 15:50:14 发布

原创最新推荐文章于 2026-05-28 15:50:14 发布 · 8.1k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了原生JavaScript的选择器，包括getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll等方法，以及jQuery的选择器，如ID选择器、类选择器、标签选择器和通用选择器。此外，还展示了jQuery中添加事件、设置样式和操作属性的方法。内容覆盖了DOM操作的基础知识，对比了原生JS和jQuery在选择元素上的差异。

一、原生js的选择器

1.首先如果你的dom元素有id值的话大多数浏览器支持直接使用的方法比如

<div id="box">



</div>
<script>
box.onclick=function(){//可以直接调用id为box的dom元素
    console.log(1111)
}

</script>

2.如果没有id值的话有多种选择的方法

let box=document.getElementById("这里是dom元素的id值");
let box=document.getElementsByClassName("这里是class值")//注意返回的是数组元素
let box=document.getElementsByTagName("这里是标签名")//注意返回的是标签名的所有值可能是数组
querySelector():返回文档中匹配指定css选择器的第一个元素
querySelectorAll():返回文档中匹配指定css选择器的所有元素
getElementsByName(name): 返回文档中name属性为name值的元素，因为name属性值不是唯一的，所以查询到的结果有可能返回的是一个数组，而不是一个元素。

以上是原生js的选择器

二、jQuery选择器

内容
基本选择器有ID选择器、类选择器、标签选择器、通用选择器，事件的添加方法如下：
$(...).事件名(function() { });
属性样式有：

    $(...).css("border","1px solid red")
    $(...).css({...})
    $(...).css("border")
    $(...).attr(属性名,值)
    $(...).html() innerHTML
    $(...).text() innerText
    $(...).val() value值
    $(...).addClass()增加
    $(...).removeClass() 移除
    $(...).toggleClass()开关**

$("#box")//这里选择的是一个id为box的元素
$(".box")//这里选择的是一个class为box的元素
$("#box ul")//这里选择的是一个id为box的元素里面的所有ul元素
$(".box ul")//这里选择的是一个class为box的元素里面的所有ul元素
$("*")//可以使用此方法选中所有的元素
$("div")//这里是选中了所有的div元素