财客网

全部频道

您的当前位置：首页juqery学习之三选择器层级基本_jquery

juqery学习之三选择器层级基本_jquery

来源：财客网


#id

根据给定的ID匹配一个元素。
Matches a single element with the given id attribute.

返回值

Element

参数

id (String) : 用于搜索的，通过元素的 id 属性中给定的值

示例

查找 ID 为"myDiv"的元素。

HTML 代码:

id="notMe"


id="myDiv"

jQuery 代码:

$("#myDiv");

结果:

[ id="myDiv" ]
---------------------------------------------------------------------------------------

element

根据给定的元素名匹配所有元素
Matches all elements with the given name.

返回值

Array

参数

element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。

示例

查找一个 DIV 元素。

HTML 代码:

DIV1
DIV2
SPAN

jQuery 代码:

$("div");

结果:

[ DIV1, DIV2 ] ---------------------------------------------------------------------------------------

.class

根据给定的类匹配元素。
Matches all elements with the given class.

返回值

Array

参数

class (String) : 一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

示例

查找所有类是 "myClass" 的元素.

HTML 代码:

div class="notMe"
div class="myClass"
span class="myClass"

jQuery 代码:

$(".myClass");

结果:

[ div class="myClass", span class="myClass" ]
---------------------------------------------------------------------------------------

*

匹配所有元素 多用于结合上下文来搜索。
Matches all elements. Most useful when combined with a context to search in.

返回值

Array

示例

找到每一个元素

HTML 代码:

DIV
SPAN

P

jQuery 代码:

$("*")

结果:

[ DIV, SPAN,

P

]
---------------------------------------------------------------------------------------

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。 你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
Matches the combined results of all the specified selectors. You can specify any number of selectors to combine into a single result.

返回值

Array

参数

selector1 (Selector) : 一个有效的选择器

selector2 (Selector) : 另一个有效的选择器

selectorN (Selector) : (可选) 任意多个有效选择器

示例

找到匹配任意一个类的元素。

HTML 代码:

div

p class="myClass"


span

p class="notMyClass"

jQuery 代码:

$("div,span,p.myClass")

结果:

[ div,

p class="myClass"

, span ] ---------------------------------------------------------------------------------------

ancestor descendant

在给定的祖先元素下匹配所有的后代元素
Matches all descendant elements specified by descendant of elements specified by ancestor.

返回值

Array

参数

ancestor (Selector) : 任何有效选择器

descendant (Selector) : 用以匹配元素的选择器，并且它是第一个选择器的后代元素

示例

找到表单中所有的 input 元素

HTML 代码:


jQuery 代码:

$("form input")

结果:

[ , ]
---------------------------------------------------------------------------------------

parent > child

在给定的父元素下匹配所有的子元素
Matches all child elements specified by child of elements specified by parent.

返回值

Array

参数

parent (Selector) : 任何有效选择器

child (Selector) : 用以匹配元素的选择器，并且它是第一个选择器的子元素

示例

匹配表单中所有的子级input元素。

HTML 代码:


jQuery 代码:

$("form > input")

结果:

[ ]
---------------------------------------------------------------------------------------

prev + next

匹配所有紧接在 prev 元素后的 next 元素
Matches all next elements specified by next that are next to elements specified by prev.

返回值

Array

参数

prev (Selector) : 任何有效选择器

next (Selector) :一个有效选择器并且紧接着第一个选择器

示例

匹配所有跟在 label 后面的 input 元素

HTML 代码:


jQuery 代码:

$("label + input")

结果:

[ , ]
---------------------------------------------------------------------------------------

prev ~ siblings

匹配 prev 元素之后的所有 siblings 元素
Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.

返回值

Array

参数

prev (Selector) : 任何有效选择器

siblings (Selector) : 一个选择器，并且它作为第一个选择器的同辈

示例

找到所有与表单同辈的 input 元素

HTML 代码:


jQuery 代码:

$("form ~ input")

结果:

[ ] if ($ != jQuery) { $ = jQuery.noConflict(); }

财客网还为您提供以下相关内容希望对您有帮助：

jQuery选择器快速入门与理解

Element：通过元素的名称来获取元素。例如：$("div")。selector1,selector2：群组选择器，可以同时匹配多个元素。例如：$("div, p")。二、层级选择器 ancestor descendant：选择当前元素的所有后代元素（不分层级）。例如：$("div p")。parent > child

jquery选择器 是什么

元素类选择器：element.class，结合类和元素类型选择。例如，$("div.myDivClass")会选择所有类名为myDivClass的元素。后代选择器：element element，选择嵌套在另一个元素中的元素。例如，$("div p")会选择所有嵌套在元素内的元素。三、层级选择器 子选择器：>，选择直接子元素。

jQuery的选择器中的通配符及jquery选择器总结

$：选择name属性以’value’结尾的元素。 $：选择name属性包含’value’的元素。 表单选择器： $：选择所有表单元素，包括、<textarea>、和。 $：选择所有文本框。 $：选择所有密码框。 $：选择所有单选按钮。 $：选择所有复选框。 $：选择所有提交按钮。

jquery中基本选择器有哪些

jQuery中的基本选择器共有五种，具体分类及功能如下：ID选择器通过元素的唯一ID属性进行匹配，语法为#id。例如$("#header")会选中页面中ID为header的元素。该选择器只能匹配单个元素，因为HTML规范要求ID在文档中必须唯一。若存在重复ID，仅返回第一个匹配项。元素（标签）选择器根据HTML标签名...

jquery有几种选择器

jQuery选择器一般分为四种 一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。1、ID选择器 #id 描述：根据给定的id匹配一个元素， 返回单个元素（注：在网页中，id名称不能重复）示例：$("#test") 选取 id 为 test 的元素 2、类选择...

jquery三级菜单要求掌握的知识点

选择器和事件：jQuery 使用 CSS 样式的选择器来识别它将操作的元素，并使用事件（如单击、悬停或按键）来触发其操作。基本JavaScript：jQuery是一个JavaScript库，因此对JavaScript语法和概念的基本了解对于有效地使用它是必要的。要使用jQuery创建三级菜单，您需要使用HTML和CSS来定义菜单的结构和外观，并使用...

jquery级联选择器 jquery同级元素选择器

一、jquery级联选择器 jquery级联选择器主要用于选取具有层级关系的元素。在HTML DOM中，元素之间可能存在父子、祖先与后代等层级关系。jquery级联选择器可以帮助我们精确地选取这些具有特定层级关系的元素。后代选择器：使用空格分隔两个选择器，用于选取某个元素内部的所有指定后代元素。例如，$("div p&...

jquery中的层次选择器都有哪些选择器

层次选择器 如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。(“ancestor descendant”)：选取parent元素后所有的child元素ancestor的中文意思是“祖先”，descendant的中文意思是“后代”‍(“body div”)选取body元素下...

jquery如何学好

1. 夯实前端基础学习jQuery前需掌握HTML、CSS和JavaScript基础知识，理解DOM操作原理。jQuery本质是对原生JavaScript的封装，熟悉这些基础能更快理解jQuery的设计逻辑。2. 系统学习语法与API通过官方文档或权威教程学习jQuery核心语法，重点掌握：选择器（如$()、class/id选择）DOM操作（增删改查元素、属性/内容...

jquery选择器有几种

jquery选择器有9种，分别是：基本的有id、标签、类、通配符选择器；层次选择器；基本过滤器选择器；内容过滤器选择器；可见性过滤器选择器；属性过滤器选择器；子元素过滤器选择器；表单选择器；表单过滤器选择器。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（...
显示全文