jQuery|jQuery对象---获取标签总结 css|html|jquery

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

文字文字文字文字文字123 //这是前面标签放置

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标签是这样的：

span标签链接标签链接标签段落标签标题标签

那么使用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-childnth-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标签

段落标题列表列表中的a标签链接

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

// ?根据子元素获取父元素 // 语法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标签