jQuery怎样获取标签子元素的值

$("div")children()//获取子元素

$("div")find()//获取后代中匹配元素

$("div")val()//获取元素值

/根据需求可连贯 *** 作/

因为P标签不止一个。

var p= documentgetElementsByTagName('p');

getElementsByTagName这个函数的返回值是个数组

不管有几个p标签，返回都是数组，所以就要使用[0]来取其中的一个。

HTML结构：

<div id="test">

id=test: <span>Glen</span><span>Tane</span><span>John</span><span>Ralph</span>

</div>

<div id="test1">

id=test0: <span>Glen1</span><span>Tane1</span><span>John1</span><span>Ralph1</span>

</div>

<input type='button' value='获取id为test的div下的span' onClick="fun()"/>

扩展资料：

getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是在使用此方法时所处的元素的后代。

getElementsByTagName() 可被用于任何的 HTML 元素

如果把特殊字符串 "" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

参考资料来源：百度百科-getElementsByTagName

CSS层叠样式表：

css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。css可以分别为网页的各个层次设置样式。

语法：

选择器 {样式名:样式值；样式名:样式值 ; }

p {color:red ; font-size:12px;}

行内样式：

<p style="color: red;font-size: 30px"></p>

内部样式表：

<style>

p{color:red; font-size: 30px;}

</style>

外部样式表：

<link rel="stylesheet" type="text/css" href="stylecss">

元素选择器：

元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。

语法：

标签名 { }

比如p则会选中页面中的所有p标签，h1会 选中页面中的所有h1标签。

类选择器：

类选择器，可以根据元素的class属性值选 取元素。

语法：

className { }

比如hello会选中页面所有class属性为hello的元素。

ID选择器：

ID选择器，可以根据元素的id属性值选取 元素。

语法：

比如#box会选中页面中id属性值为box的 元素，和class属性不同，id属性是不能重 复的。

复合选择器（交集选择器）：

复合选择器，可以同时使用多个选择器， 这样可以选择同时满足多个选择器的元素。

语法：

– 选择器1选择器2{}

例如divbox1会选中页面中具有box1这个class的div元素。

群组选择器（并集选择器）：

群组选择器，可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。

语法：

选择器1,选择器2,选择器3 { }

比如p,hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

通用选择器：

通用选择器，可以同时选中页面中的所有 元素。

语法：

{ }

标签之间的关系：

祖先元素：

直接或间接包含后代元素的元素。

后代元素：

直接或间接被祖先元素包含的元素。

父元素：

直接包含子元素的元素。

子元素：

直接被父元素包含的元素。

兄弟元素：

拥有相同父元素的元素。

后代选择器：

后代选择器可以根据标签的关系，为处在 元素内部的代元素设置样式。

语法：

祖先元素 后代元素 后代元素 { }

比如p strong 会选中页面中所有的p元素 内的strong元素。

伪类和伪元素：

有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。

链接定义样式：

有四个伪类可以让你根据访问者与该链接的交 互方式，将链接设置成4种不同的状态。

正常链接

a:link

访问过的链接

a:visited（只能定义字体颜色）

鼠标滑过的链接

a:hover

正在点击的链接

a:active

其他：

获取焦点

:focus

指定元素前

:before

指定元素后

:after

选中的元素

::selection

属性选择器：

属性选择器可以挑选带有特殊属性的标签。

语法:

[属性名]

[属性名="属性值"]

[属性名~="属性值"]

[属性名|="属性值"]

[属性名^="属性值"]

[属性名$="属性值"]

[属性名="属性值"]

子元素选择器：

子元素选择器可以给另一个元素的子元素 设置样式。

语法：

父元素 > 子元素{}

比如body > h1将选择body子标签中的所 有h1标签。

其他子元素选择器：

:first-child

选择第一个子标签

:last-child

择最后一个子标签

:nth-child

选择指定位置的子元素

:first-of-type

:last-of-type

:nth-of-type

选择指定类型的子元素

兄弟选择器：

除了根据祖先父子关系，还可以根据兄弟 关系查找元素。

语法:

查找后边一个兄弟元素

兄弟元素 + 兄弟元素{}

查找后边所有的兄弟元素

兄弟元素 ~ 兄弟元素{}

否定伪类：

否定伪类可以帮助我们选择不是其他东西 的某件东西。

语法:

:not(选择器){}

比如p:not(hello)表示选择所有的p元素但 是class为hello的除外。

选择器的权重：

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个 选择器选中。

比如：

body h1

h1

上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一 致那还好不会产生冲突，但是如果两个选择器设置的是同一个样式， 这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的样式， 权重又是如何计算的呢？

权重的计算：

不同的选择器有不同的权重值：

内联样式：权重是 1000

id选择器：权重是 100

类、属性、伪类选择器：权重是 10

元素选择器：权重是 1

通配符：权重是 0

计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样 式会优先显示。

第一题： plate（元素选择器）

第二题：bento(元素选择器)

第三题：#fancy(id选择器)

第四题：plate apple(后代元素选择器)

第五题：#fancy pickle(复合选择器)

第六题：small(类选择器)

第七题：bento small,plate small(并集选择器)

第八题：bento orange(后代元素选择器)

第九题：plate,bento,plate(并集选择器)

第十题：（通配选择器）

第十一题：plate(后代元素选择器)

第十二题：plate + apple(兄弟元素选择器)

第十三题：bento~pickle(兄弟元素选择器)

第十四题：plate > apple(子类元素选择器)

第十五题：orange:first-child(子元素选择器)

第十六题：:only-child(子元素选择器)

第十七题：small:last-child(子元素选择器)

第十八题：plate:nth-child(3)(子元素选择器)

第十九题：:nth-last-child(4)(子元素选择器)

第二十题：apple:first-of-type(子元素选择器)

第二十一题：plate:nth-of-type(even)(子元素选择器)

第二十二题：plate:nth-of-type(2n+3)(子元素选择器)

第二十三题：apple:only-of-type(子元素选择器)

第二十四题：small:nth-child(even)(子元素选择器)

第二十五题：bento:empty(子元素选择器)

第二十六题：apple:not(small)(not选择器)

$(this)指的是这个当前select，$(this)find("option:selected")text()是找到这个下拉框被选中的option标签的值，$(this)parent()找到这个select框的父级元素，$(this)parent()children("select-val")是再找到这个父级元素下的名为select-val的元素，所有，整个代码的意思是：找到下拉框的被选中的值，将这个值写在这个下拉框的父级下面名为select-val的元素内。

通过children

children("input:first-child")

$(this)children("input:first-child")val();

$(this)children("input:last-child")val();

通过>选择器，$("items>input:first")

1 通过位置选择的 *** 作：

:first：默认情况下是相对整个页面来说的第一个，如：li:first表示整个页面的第一个li元素，而ul li:first表示整个页面的第一个li元素，并且是在ul下的子元素；

:first- child：为每个父元素匹配第一个子元素，如li:first-child返回每个ul的第一个li元素。可以这样理解，页面中的元素有相同的父元素 的，并且里面又包含li元素的，那么就取第一个li元素，每个子类集合都要进行判断，直到找出所有符合要求的li元素；

:only- child：返回所有没有兄弟节点的元素，注意，文本元素不是，也就是说类似这样的<div>hello<a href="">jquery</a></div>，对于这段会选出<a>元素；对 于$(”label:only-child“)会选出是label元素，同时它是它父类唯一的子元素的label元素；

:nth-child(n)：返回第n个子节点，n从1开始，如果n取0，那么就会选择所有的元素。如：[]li:nth-child(2)返回li元素，并且该元素是其父元素的第二个子元素；

:nth-child(even|odd)：返回偶数或奇数的子节点；

:nth-child(An+B)：返回满足表达式An+B的所有子节点，比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素；

:even：页面范围内的处于偶数位置的元素，如：li:even返回全部偶数li元素；

:odd：页面范围内的处于奇数位置的元素；

:eq(n)：第n个匹配的元素(n从0开始)，如：li:eq(3)返回整个页面的第四个li元素，ul li:eq(1)返回页面中第一个ul元素下的第二个li元素，注意：只匹配一次就返回了；

:gt(n)：第n个匹配元素(不包括)之后的元素(n从0开始)，如：ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个)；

:lt(n)：第n个匹配元素(不包括)之前的元素(n从0开始)，如：ul:lt(2)返回从第0个和第1个ul元素；

2 利用css选择器进行选择：

元素标签名：比如说$(”a“)会选出所有链接元素；

#id：通过元素id进行选择，比如说$("#form1")会选择id为form1的元素；

class：通过元素的CSS类来选择，比如说$("boldstyle")会选择CSS为boldstyle类的元素；

标签 名#idclass：通过某类元素的id属性和class属性来选择，如：$(a#blogboldStyle)会选择id为blog并且CSS类型 为boldStyle类型的链接元素(<a id='blog' class='boldStyle'>)；

父标签名 子标签名class：通过选择父标签下的某种CSS类型的子元素，如：$(p aredStyle)会选择p段落元素中的链接子元素a，且其css类型为redStyle；

3 通过子选择器，容器选择器和属性选择器进行选择：

：匹配所有的元素，比如说:$()会把页面中的所有元素都返回；

E：匹配标签名为E的所有元素，如$("a")返回所有链接元素；

E F：匹配父元素E下的标签名为F的所有子元素（F可以为E的子类的子类，甚至更远）；

E>F：匹配父元素E下的所有标签名为F的直接子元素；

E+F：匹配所有标签名为F的元素，并且有E类型的兄弟节点在该F元素之前（E,F紧挨着）；

E~F：匹配前面是任何兄弟节点E的所有元素F(E,F不必紧挨着);

E:has(F)：匹配标签名为E，至少有一个标签名为F的后代节点的所有元素E；

EC：匹配带有类名C的所有元素E。C等效于C；

E#I：匹配id为I的所有元素E，#I等效于#I；

E[A]：匹配带有属性A的所有元素E；

E[A=V]：匹配所有属性A的值为V的元素E；

E[A^=V]：匹配所有元素E，且A的属性值是V开头的；

E[A$=V]：匹配所有元素E，且A的属性值是V结尾的；

E[A=V]：匹配所有元素E，且A的属性值中包含有V；

4利用jQuery自定义的选择器进行选择：

:button：选择任何按钮类型的元素，包括input[type=submit]等等；

:checkbox：选择复选框元素；

:file：选择所有文件类型元素，即input[type=file]；

:image：选择表单中的图像元素，即input[type=image]，注意此处和前面根据标签名img选择图像有点不同哈；

:input：选择表单元素，如<input>,<select>,<textarea>,<button>等；

:radio：选择单选按钮元素；

:reset：选择复位按钮元素，如input[type=reset]，button[type=reset]；

:submit：选择提交按钮元素；

:text：选择文本字段元素，即input[type=text]；

:animated：选择当前处于动态控制下的元素；

:contains(hello)：选择包含文本hello的元素；

:header：选择标题元素，如<h1>；

:parent：选择拥有后代节点(包括文本)的元素，而排除空元素；

:selected：选择已选中的选项元素；

:visible：选择可见元素；

js获取元素方法有：

1、getElementById ：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。

2、getElementsByName：getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以getElementsByName() 方法返回的是所有匹配元素组成的数组，而不是一个元素。

3、getElementsByTagName：getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。

getElementsByTagName() 可被用于任何的 HTML 元素

如果把特殊字符串 "" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

在jquery中想要找到所有元素的同辈元素，siblings（[expr])可以实现。children([expr])：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。只考虑子元素而不考虑所有后代元素。

首先获取这个div的对象

比如

var divObj = documentgetElementById('myDIv');

这个没有问题吧

然后获取这个div里面的所有table元素

var tables = divObjgetElementsByTagName('table');

这样你就获取到所有的table了

tables[0]就是第一个table的对象

你可以试试看

以上就是关于jQuery怎样获取标签子元素的值全部的内容，包括:jQuery怎样获取标签子元素的值、请问js中为什么var p= document.getElementsByTagName('p');然后在获取它的子元素要这样p[0]勒，不然不对、常见的元素选择器等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！