jQuery获取标签的方法

最新推荐文章于 2024-09-05 11:16:50 发布

LSSHFF

最新推荐文章于 2024-09-05 11:16:50 发布

阅读量3.5k

点赞数 1

文章标签： javascript jquery

本文链接：https://blog.csdn.net/LSSHFF/article/details/118058456

版权

这篇博客深入介绍了jQuery中的CSS选择器使用，包括id选择器、class选择器、标签选择器、交集选择器、全选选择器、并集选择器以及后代和子代选择器。同时，讲解了DOM操作，如筛选、父级、子代、指定后代和兄弟元素的获取方法。通过实例展示了如何在JavaScript中高效地操作DOM元素。

摘要由CSDN通过智能技术生成

一、CSS选择器

//jq文件引入
<script src="./js/jquery3.6.0.js"></script>
<script>
 $(function () {
      // 获取标签
      // JS的方式
      let theDiv = document.getElementById('myDiv')
      // JQ的方式
      // 语法: $('css选择器')
      // 注意:
      // JQ获取标签返回的不是一个dom对象,是一个JQ对象
      // 是一个伪数组(有length,有下标,不可以使用数组的方法)

      // 1.id选择器
      console.log($('#myDiv'));

      // 2.class选择器
      console.log($('.my_p'));

      // 标签选择器
      console.log($('li'));

      // 交集选择器
      console.log($('li.ac'));

      // 全选选择器
      console.log($('*'));

      // 并集选择器  - 选择器与选择器是逗号相隔
      console.log($('div,p,ul'));

      // 子代选择器  使用>号, 获取的就是亲儿子层级的元素
      console.log($('#myUL>li'));

      // 后代选择器 使用的空格  获取的就是当前元素ul - 所有的li ,包括孙子 ,,,,
      console.log($('#myUL li'));
 }
</script>

二、其他方法

  <script>
    $(function () {
      // 1.筛选  eq(下标)  
      console.log($('li').eq(2));

      // 2.父级 .parent()
      console.log($('li').parent());

      // 子代元素  .children()  
      console.log($('ul').children());

      // 指定后代的查找  find('css选择器')
      console.log($('ul').find('.ac'));

      // 兄弟元素  .siblings()  - 查找目标兄弟们
      console.log($('li.ac').siblings());
    })
  </script>