jquery选择器找子元素
很多同学在进行编程学习时缺乏系统学习的资料。本页面基于jquery选择器找子元素内容，从基础理论到综合实战，通过实用的知识类文章，标准的编程教程，丰富的视频课程，为您在jquery选择器找子元素相关知识领域提供全面立体的资料补充。同时还包含 j2ee是什么、jar格式、java 的知识内容，欢迎查阅！
jquery选择器找子元素相关知识
-
JQuery选择器——子元素筛选选择器和表单元素选择器 子元素筛选选择器和表单元素选择器1 子元素筛选选择器描述$(":first-child") 选择所有父级元素下的第一个子元素$(":last-child") 选择所有父级元素下的最后一个子元素$(":only-child") 选择父元素唯一的子元素$(":nth-child") 选择所有他们父元素的第n个子元素$(":nth-last-child") 选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个2 ：first只匹配一个单独的元素，但是：first-child选择器可以匹配多个元素，即每个父级元素匹配第一
-
jQuery 基础样式篇 子元素筛选选择器（1）子元素筛选选择器 查找所有class="last-div"下的a元素,选择第二个 $(".div a:nth-child(2)") 查找所有class="last-div"下的a元素,选择第倒数第二个 $(".div a:nth-last-child(2)") 查找所有class="first-div"下的a元素，如果只有一个子元素的情况 $(".div a:only-child") 查找所有class="first-div"下的a元素，只取最后一个针对所有父级下的最后一个；如果只有一个元素的话，last也是第一个元素 $(".div a:last-child") 查找所有class="first-div"下的a元素，只取第一个针对所有父
-
jQuery 选择器使用jQuery获取元素我们可以通过document.getElementById等方法获取DOM对象，但是方法名称长，使用不方便，而且功能有限，不能像CSS选择器那样灵活jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。讲jQuery不得不提到其选择器，这是jQuery能够快速流行的非常重要的原因，为了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器选择器基本选择器$('*')匹配页面所有元素$('#id')id选择器$('.class')类选择器$('element')标签选择器组合/层次选择器$('E,F')多元素选择器，用”,分隔，同时匹配元素E或元素F$('E F')后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F$(E>F)子元素选择器，用”>”分
-
[jQuery]选择器1. 基本选择器基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。如下表：选择器描述返回示例#id根据给定的id匹配一个元素。单个元素$("#myID").class根据给定的类名匹配元素。集合元素$(".myClass")element根据给定的元素名匹配元素。集合元素$("div")*匹配所有元素。集合元素$("*")selector1,...,selectorN将每一个选择器匹配到的元素合并。集合元素$("div,#myID,p.myClass")2. 层次选择器如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，可以使用层次选择器。如下表：选择器描述返回示例$("ancestor descendant")选取ancestor元素里的所有descendant后代元素。集合元素$
jquery选择器找子元素相关课程
-
初识HTML(5)+CSS(3)-升级版 你是否也有过这样的“烦恼”： * 对前端技术感兴趣不知道从何学起？ * 想从事前端工作却没有基础？ 想要成为一名合格的前端工作者，HTML与CSS是必不可少的技能，但是对于新手工程师来讲，这部分也是最难掌握的。 本门课程专为零基础学员设计，囊括了目前使用比较广泛的HTML+CSS基础知识，以知识点结合小案例的形式书写代码，学与练结合，帮助学员顺利入门。 课程从最基本的概念讲起，逐步深入，带你学习HTML(5)和CSS(3)样式基础知识，了解各种常用标签的意义以及基本用法，讲解CSS(3)样式代码添加，为后续更深入的学习打好基础。 通过本门课程的学习，你可以基本掌握前端必备的HTML+CSS样式基础知识，并可以利用这些知识实现静态页面。
讲师：五月的夏天 入门 1207180人正在学习
jquery选择器找子元素相关教程
- nth 元素选择 当我们要一组 class 同名，或者连续的一组元素的其中一个，或者某种规律的元素添加单独样式的时候，不妨看看这类的元素选择器。
- 2.2 CSS 选择器 CSS 选择器决定了对应 CSS 样式会被用到网页中的哪个元素上。CSS 选择器主要有以下几种：元素选择器：通过元素名来定位元素，并将对应 CSS 样式用于网页上所有该元素上；<style type="text/css"> p { color: red; }</style>...<body> <div>无样式作用</div> <p>红色文本</p> <h4>标题文本</h4> <p>有一个红色文本</p> <div><lable>有无样式文本</lable></div></body>示例图：元素选择器效果图这里我们可以看到字体红色的样式作用到了所有 <p> 标签中，其他 HTML 标签则没有应用到这样的样式。ID 选择器：ID 选择器是根据 HTML 元素的 ID 属性确定对应的元素。它的使用语法如下：#ID { 属性1: 值1; 属性2: 值2; ...}示例代码：<style type="text/css"> #red-color { color: red; }</style>...<body> <div>无样式作用</div> <p id="red-color">红色文本</p> <h4>标题文本</h4> <p>未被选中</p> <div><lable>又无样式文本</lable></div></body>效果图如下，可以看到只有 id 属性值等于 red-color 的元素被选中，然后应用对应的样式：ID 选择器效果图类选择器：类选择器以 HTML 元素的类属性来确定元素。语法如下：.class { 属性1: 值1; 属性2: 值2; ...}示例代码：<style type="text/css"> .red-color { color: red; }</style>...<body> <div class="red-color">红色文本</div> <p>普通文本</p> <h4>标题文本</h4> <p>未被选中</p> <div class="red-color"><lable>红色文本</lable></div></body>效果图如下，可以看到只有元素的 class 属性值为 red-color 时，对应的样式才会被应用到该元素上。类选择器效果图组合选择器：组合选择器有很多种形式，比如元素 + 类组合、元素和元素组合、元素和 ID 组合、类和类组合等等。对应具体的选择规则需要参考相关的文档，这里就不一一说明，我们通过示例代码来了解下组合选择器。<style type="text/css"> p.red-color { color: red; } p span { color: yellow; }</style>...<body> <div class="red-color">div作用红色文本样式</div> <p><span>黄色文本</span></p> <div><span>div包裹span的文本</span></div> <h4>标题文本</h4> <p class="red-color">p元素作用红色文本样式</p> <div><lable>红色文本</lable></div></body>效果图如下，可以看到 p.red-color 表示该样式只作用于 p 标签中 class 属性为 red-color 的标签，其他标签的 class 属性值等于 red-color 并不会被选中。 p span 指的是在 p 标签内的 span 标签，对于这类的标签才会被应用其样式：组合选择器效果图其他选择器：CSS 中很多形式的选择器，比如后代选择器等等，有非常多的选择元素的方式。需要大家耐心去学习和实践。
- 3. 使用 jQuery jQuery 使用 $ 或者 jQuery 来生成一个 jQuery 对象，这里统一使用 $。1167$ 可以接受一个 CSS 规范的选择器，用来选择元素，html 方法相当于设置 DOM 节点的 innerHTML 属性。在 DOM 相关章节有提到，如果使用 querySelector 来选择节点，碰到节点不存在的情况下，会返回 null，这样就需要一层判断， jQuery 已经处理好了这些情况。<div>DOM节点</div><div class="element"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script> $('.ele').html('<p>这里是用 jQuery 插入的 HTML</p>'); console.log('不会影响正常程序执行');</script>其可以接受的参数不仅仅是 CSS 选择器，也可以是一个原生 DOM 节点，一段 HTML 字符串等。jQuery 选择 $ 作为作为入口名称，一部分是因为简单，原生 DOM 提供的选择 DOM 节点的方法都是一长串，另一个原因是 $ 本身的发音 dollar 和 DOM 的发音接近。
- 1. xpath 选择器介绍 首先来看看 Xpath 的字面介绍：XPath 即为 XML 路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的语言。 XPath 基于 XML 的树状结构，提供在数据结构树中找寻节点的能力。XQuery 和 XPointer 均构建于 XPath 表达式之上。来看看 xpath 最常用的路径表达式规则：表达式描述nodename选择此元素的所有子节点/从根节点开始选择//从匹配选择的当前节点选择文档中的节点.当前节点…当前节点的父节点@选取属性来看下面几个例子：路径表达式含义p选择所有 p 节点//body选择所有的body元素节点///*[@class=“red-color”]/…选择所有class属性值为 “red-color” 节点的父节点在 xpath 中可以使用通配符来提取相关节点元素：路径表达式含义//*找出所有节点//*[@*]匹配任何有属性的节点//*[@class=“red-color”]提取所有class属性值为 “red-color” 的节点另外，在 xpath 中我们还可以使用运算符，来辅助选取节点：路径表达式含义//div | //p选取div或者p元素的节点//p[1 + 1]/text()获取第二个p元素节点的文本值//*[@value > 10]找出所有 value 值大于10的节点其中 xpath 支持的表达式除了 +、- *、div 和 mod 等基本运算符外，还有比较运算符，如 =、!=、>=、<=、> 、> 、and、or等。在 xpath 中有一个叫做轴的概念，表示相对于当前节点的节点集。下面是一些基本轴的定义：轴名称含义ancestor选取当前节点的所有先辈（父、祖父等）ancestor-or-self选取当前节点的所有先辈（父、祖父等）以及当前节点本身attribute选取当前节点的所有属性child选取当前节点的所有子元素descendant选取当前节点的所有后代元素（子、孙等）descendant-or-self选取当前节点的所有后代元素（子、孙等）以及当前节点本身following选取文档中当前节点的结束标签之后的所有节点following-sibling选取文档中当前节点的结束标签之后的所有同级节点parent选取当前节点的父节点preceding选取文档中当前节点的开始标签之前的所有节点preceding-sibling选取当前节点之前的所有同级节点self选取当前节点轴的用法是：轴名称::节点测试。来看下面几个例子：路径表达式含义//body/div[2]/following-sibling::*body节点下第二个div节点之后的所有同级节点//body/p[1]/child::span[last()]/text()body节点下的第一个p节点下的最后一个span子节点的文本值//body/p[1]/span/child::text()body节点下的第一个p节点下的所有span子节点的文本值//body/p/attribute::*body节点下所有p节点的属性值最后，在 xpath 中还有一些辅助我们更好搜索节点的函数：函数含义starts-with()获取某个字符串开头的节点contains()包含某个字符串的节点，可以是属性包含、文本包含等等text()获取节点的文本值上述辅助函数的实例如下：路径表达式含义//p[contains(@class, “red”)]获取class属性值包含"red"的所有p节点值‘//span[contains(text(), “蓝色”)]/text()’获取文本值包含"蓝色"的所有span节点的文本‘//span[starts-with(text(), “蓝”)]/text()’获取文本值以"蓝"开头的所有span节点的文本此外，当然还有许多方面没有讲到，后续会在实战中进行说明。上面的基础部分一定要熟记和灵活运用，足以应付常见的页面数据提取。下面就进入实战环节，使用 Python 来实操 xpath 路径表达式。
- 4.1 在选择器中使用 我们一般在写页面的时候会为 DOM 元素定义一些 class 或 id ，当我们为其写样式的时候会用不同的选择器，那么在选择器中我们可以使用插值来拼接一些类名等等，我们举个例子来看下：$name: item;.ul-#{$name} { // 使用插值 width: 200px; .li-#{$name} { // 使用插值 width: 100%; }}.box-#{$name} { // 使用插值 height:100px; .#{$name} { // 使用插值 height:100%; }}可以看到上面的代码，我制定了一个 DOM 层级结构，这种结构也是很常见的，可能很多子元素的类名我们都带有 item ，那么我们就可以把它提取为一个变量然后通过在选择器中应用插值来拼接，这样就很方便我们维护，我们想改子元素类名的时候就不需要逐一的去更改了。上面这段 Sasd 代码转换为 CSS 如下：.ul-item { width: 200px;}.ul-item .li-item { width: 100%;}.box-item { height: 100px;}.box-item .item { height: 100%;}
- 4.2 父选择器 (Parent Selector) 父选择器是 Sass 中一种特殊的选择器，用于嵌套选择器中，用来引用外部的选择器；通俗的讲就是，当你使用嵌套的时候，可能你会需要使用到嵌套外层的父选择器，比如为一个元素 添加伪类 (hover、active、before、after) 的时候，可以用 & 代表嵌套规则外层的父选择器，我们举个例子来更直观的感受下：a { &:hover { color:red; } &:active { color:blue; } &:before { content:''; } &:after { content:''; } span { &:hover { color:green; } }}在上面的 Sass 代码中我们编写了几个伪类，在编译的时候 & 将会被替换为嵌套外层的父选择器，有多层嵌套的话将会把父选择器一级一级的传递下去，最终转换为如下的 CSS 代码：a:hover { color: red;}a:active { color: blue;}a:before { content: "";}a:after { content: "";}a span:hover { color: green;}4.2.1 添加后缀 (Adding Suffixes)可以使用 & 向外部选择器添加后缀，举个例子看下：.box { width:100px; &-head { width:100%; &-title { color:red; } } &-body { width:100%; } &-footer { width:100%; }}上面这个例子将会转换为如下的 CSS 代码：.box { width: 100px;}.box-head { width: 100%;}.box-head-title { color: red;}.box-body { width: 100%;}.box-footer { width: 100%;}
jquery选择器找子元素相关搜索
-
j2ee
j2ee是什么
jar格式
java
java api
java applet
java c
java jdk
java list
java map
java script
java se
java socket
java swing
java switch
java web
java xml
java 程序设计
java 多线程
java 环境变量