jQuery对象---获取标签总结

最新推荐文章于 2025-03-18 11:52:33 发布

郭静静--Jennica

最新推荐文章于 2025-03-18 11:52:33 发布

阅读量3.4k

点赞数 1

分类专栏： jQuery 文章标签： jquery css html

本文链接：https://blog.youkuaiyun.com/weixin_43729166/article/details/120580400

版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

这篇博客总结了jQuery对象获取HTML标签的四种方法：1) 使用css选择器，如元素选择器、伪类选择器；2) 利用jQuery的css伪类选择器；3) 通过关系元素，包括父、子、兄弟元素之间的获取；4) 通过索引号直接获取指定位置的标签。文中通过实例详细讲解了每种方法的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 通过css选择器来获取

在jQuery中获取HTML标签，可以是通过我们之前学过的css选择器，像元素选择器，类选择器，ID选择器，后代选择器，子代选择器，伪类选择器……（好像把css选择器也复习了一下^_^）

    <ul>
        <li class="one">文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字123</li>
    </ul>//这是前面标签放置

console.log($('li'));      //结果为：li的一个伪数组（见下图一）        元素选择器

console.log($('.one'));    //结果为：只有一个元素li，长度为1的伪数组    类选择器                              
                                                                    
console.log($('ul li'));   //结果为：依然是一个伪数组（与下图二相同）   后代选择器

console.log($('ul > li')); //结果为：与上同                           子代选择器（亲儿子）

console.log($('ul li:nth-child(2)'));  //结果为：获取到第二个li        结构伪类选择器

console.log($('ul li:last-child'));    //结果为：获取到最后一个选择器   结构伪类选择器

在这里要考考大家，如果我前面放置的HTML标签是这样的：

    <div>
        <span>span标签</span>
        <a href="#">链接标签</a>
        <a href="#">链接标签</a>
        <p>段落标签</p>
        <h1>标题标签</h1>
    </div>

那么使用jQuery应该如何获取第二个标签呢？

怎么样？有结果了吗？是这样？

 console.log($('a'));

还是这样？

 console.log($('div a'));

这两种结果都是输出两个a链接标签

对，你有没有想起什么？

console.log($('div a:nth-child(2)'));

这样是对的，得到的正是第二个a标签。这是我们应用结构伪类选择器来获取标签。

二. 通过jQuery css伪类选择器来获取

还是应用前面第一次放置的标签，如果用jQuery对象提供的css伪类选择器来获取：

        // jQ中提供的伪类选择器获取页面中的元素
        // 语法: $('css选择器:jQ中伪类选择器')
        // :first     代表获取第一个元素,类似于 first-child   nth-child(1)
        // :last      代表获取最后一个元素,类似于 last-child 
        // :eq(索引)  代表获取对应索引位置的标签, 类似nth-child(值)
        // :odd       代表获取索引是奇数的标签,   类似于nth-child(odd)
        // :even      代表获取索引是偶数的标签, 类似于nth-child(even)

// 代码演示:
console.log($('li:first'));//获取存有第一个li的伪数组

console.log($('li:last'));//获取存有最后一个li的伪数组

console.log($('li:eq(1)')); //获取存有第二个li的伪数组（因为索引是从0开始的，这个大家都知道吧）

console.log($('li:odd'));//获取存有索引为1和3的li的伪数组

console.log($('li:even'));//获取存有索引为0和2的li的伪数组

三. 通过关系元素来获取

通过关系元素来获取标签，也就是根据父元素来获取子元素，根据子元素来获取父元素，或者根据兄弟元素来获取。

照例，前面放置好HTML标签

    <div>
        <p>段落</p>
        <h1>标题</h1>
        <ul>
            <li>列表</li>
            <li>
                <a href="#">列表中的a标签</a>
            </li>
        </ul>
        <a href="#">链接</a>
    </div>

首先是根据子元素来获取父元素

        // ☞根据子元素获取父元素
        // 语法1: 子元素jQ对象.parent();   获取当前元素的直接父元素
        // 语法2: 子元素jQ对象.parents();  获取当前元素所有的父辈元素
        // 语法3: 子元素jQ对象.parents('css选择器');  获取当前元素指定的父元素

        // 代码演示:
         console.log($('li').parent()); //li的亲爹自然是ul了
         console.log($('li').parents()); //获取了li的所有父元素（见下图一）
         console.log($('li').parents('body')); //获取到指定的父元素

其次是根据父元素来获取子元素

        // ☞ 父元素JQ对象.children(); 获取当前标签中所有的直接子元素(亲儿子)
        // ☞ 父元素JQ对象.children('选择器'); 获取当前父元素中指定的子元素
        // 代码演示:
        console.log($('div').children()); //获取元素见下图三
        console.log($('div').children('a')); //获取到存有a标签的伪数组

相比children()，我们还有个也很常用的关键字：jQuery对象.find()

        // ☞ 父元素jQ对象.find();          无法获取对应的元素
        // ☞ 父元素jQ对象.find('选择器');  获取父元素中所有满足选择器的后代元素
        // 代码演示:
         console.log($('div').find());    //获取到的伪数组长度为0，因为没有获取到任何元素
         console.log($('div').find('a')); //精确地获取到a标签

最后是根据元素获取兄弟元素，

        // ☞ jQ对象.siblings(); 获取当前标签的所有兄弟元素
        // ☞ jQ对象.siblings(选择器);  获取当前标签指定的兄弟元素

        // 代码演示:
         console.log($('h1').siblings('ul')); //与ul为兄弟元素的有p标签和a标签，ul标签，但因为指定了ul，所以输出结果为ul

        // ☞ jQ对象.nextAll() 获取当前标签结构中后面所有的兄弟元素
        // ☞ jQ对象.nextAll(选择器) 获取当前标签结构中后面指定的兄弟元素
        
         console.log($('h1').nextAll())    //输出h1标签后所有标签
         console.log($('h1').nextAll('a'));//输出a标签

        // ☞ jQ对象.prevAll() 获取当前标签结构中前面所有的兄弟元素
        // ☞ jQ对象.prevAll(选择器) 获取当前标签结构中前面指定的兄弟元素

        console.log($('h1').prevAll()); 
        console.log($('h1').prevAll());

四. 通过索引号来获取

前面放置标签如下：

    <div>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
    </div>

        // 语法: $('css选择器:eq(索引)')
         console.log($('a:eq(1)'));