jquery select option 收藏 0

jquery选择器

jQuery选择器共有四大类，分别为基本选择器，层次选择器，过滤选择器和表单选择器。

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素。

适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素。

注意：$(“prev~siblings”)选择器与siblings()方法的区别。

$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关，只要是同辈节点就都能匹配。

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单过滤和表单对象属性过滤选择器共七种选择器。

主要对所选择的元素中所包含的子元素或内容进行过滤。

主要对元素的可见性（可见或不可见）进行过滤。

可见选择器:hidden，可以对样式的display的值为none的元素进行过滤选择；以外；还可以对表单的隐藏元素（即类型为hidden的表单项）或visible:hidden的元素进行过滤选择。

主要对元素的属性进行过滤选择符合属性特征符合的元素。

主要选择元素中所含有的子元素。

:nth-child 过滤选择器：

:nth-child(even) 选取父元素下索引号为偶数的子元素

:nth-child(odd) 选取父元素下索引号为奇数的子元素

:nth-child(5n) 选取父元素下索引号为5n的子元素

:nth-child(5n+1) 选取父元素下索引号为5n+1的子元素

主要对表单元素进行过滤选择。

主要对所选择的表单元素进行过滤。

详解JQuery框架的五大选择器

此账号为华为云开发者社区官方运营账号，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态

本文分享自华为云社区《 【JQuery框架】五大选择器“全家桶”详解！！！》，原文作者：灰小猿 。

今天来和大家分享一下JQuery的五种选择器的详细使用方法，那么何为选择器？从功能上来讲，它能够筛选具有相似特征的元素标签，在我们想要对具有相似特征的元素进行集中或统一操作时是十分有用的。

首先我们需要了解选择器使用的基本操作，该基本操作可以分为三步：

选择器的使用需要进行事件的绑定，一般来说我们可以将事件绑定到一个按钮上去，通过按钮的点击来触发相应的事件响应。

同时在jQuery中，这样的事件绑定是需要写在一个入口函数中去的，在<script></script>的代码段中建立入口函数的语法是：

在这里需要注意的是：在js中定义入口函数的window.onload方法和$(function)方法是有区别的，

具体如下：

window.onload只能定义一次，如果定义多次，后面的会将前面的覆盖掉

$(function)方法是可以定义多次的，后面的不会将前面的覆盖掉

当我们对选择器的事件进行了绑定之后，我们就可以通过选择器进行相应元素的样式控制了，在这里通常的表现是css方法，通过css方法来对相应的元素样式进行修改。

来看一个基本操作的实例：

那么接下来就通过实例分别来和大家讲一下jQuery框架下的五种选择器的使用方法。

标签选择器又称为“元素选择器”，

语法：$(“html标签名”)

作用：获得所有匹配标签元素名称的元素

语法：$(“#id的属性值”)

作用：获得与指定id属性值匹配的元素

语法：$(“.class的属性选择器”)

作用：获得与指定class属性值匹配的元素

语法：$(“选择器1,选择器2….”)

获取多个选择器选中的所有元素

语法：$(“A B”)

作用：选择A元素内部的所有B元素

语法：$(“A > B”)

作用：选择A元素内部的所有B子元素

在这里需要注意的是：这两个选择器看上去似乎没有什么区别，但是我们在使用时就会发现其实是有区别的，后代选择器会将元素A内部的所有B元素都选中，而子选择器只会选中元素A的下一级元素中的B元素，范围是小于后代选择器的。具体可以看下面的实例：

语法：$(“A[属性名]”)

作用：包含指定属性的选择器

语法：$(“A[属性名=’值’]”)

作用：包含指定属性等于指定值的选择器，

在这个选择器中，我们可以根据他的功能进行拓展，比如我们可以将：

“=”换成“!=”，就是指定属性名称不等于指定值的选择器

“=”换成“^=”，就是指定属性名称是以指定值开头的选择器

“=”换成“$=”,就是指定属性名称是以指定值结尾的选择器

“=”换成“*=”，就是指定属性名称中包含指定值的选择器

语法：$(“A[属性名=’值’][]…”)

作用：包含多个属性条件的选择器

语法：$(“A:first”)

作用：获得选择的元素的第一个元素

语法：$(“A:last”)

作用：获得选择的元素的最后一个元素

语法：$(“not(selector)”)

作用：不包括指定内容的元素

语法：$(“A:even”)

作用：从0开始计数，获得选择的元素中索引为偶数的元素

语法：$(“A:odd”)

作用：从0开始计数，获得选择的元素中索引为奇数的元素

语法：$(“A:eq(index)”)

作用：获得选择的元素中指定索引的元素

语法：$(“A:gt(index)”)

作用：获得选择的元素中大于指定索引的元素

语法：$(“A:lt(index)”)

作用：获得选择的元素中小于指定索引的元素

语法：$(“:header”)

作用：获得标题（h1~h6）元素，为固定写法

语法：$(“A:enabled”)

作用：获得选择元素中的可用元素

语法：$(“A:disabled”)

作用：获得选择元素中的不可用元素

语法：$(“A:checked”)

作用：获得单选/复选框选中的元素

语法：$(“A:selected”)

作用：获得下拉框选中的元素

在这里需要注意一点：上面的两个选中选择器的作用对象是不一样的，第一个选中选择器的作用对象是单选/复选框，而第二个选中选择器的作用对象是下拉框，同时对于第二种选择器，它的作用内容是下拉框中的包含在<option></option>内的选项，因此在使用时应当使用“>”来具体说明，具体可以看下面的实例：

jQuery知识一览

jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。jQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。jQuery的主旨是write less, do more。

• html元素的选取
• 操作html元素
• css操作
• html事件处理
• 实现js动画效果
• 能够链式调用
• 容易扩展插件
• 封装了ajax

引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。

在官网的：https://jquery.com/download/ 链接下可以下载到完整的代码，放到项目文件的js文件夹下。

在网站：https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。

• 1.x 版本兼容老版本的IE，文件比较大
• 2.x 版本文件比较小，支持IE8+
• 3.x 版本引入部分新API，提供多个分包的版本，支持IE9+

开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。

从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：

从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。

继续跟踪源码 new jQuery.fn.init( selector, context)，这个函数中调用了makeArray，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿makeArray作为演示。

查看makeArray函数：

所以这个返回实例对象，是一个伪数组。

从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。

所以在引入jQuery的项目中：

通常形式为：$(param)

• param为函数：dom加载完成后，执行该回调函数
• param为选择器字符串：查找与该选择器匹配的所有标签，并封装成jQuery对象
• param为dom对象：将该dom对象封装成jQuery对象
• param为标签字符串：创建标签对象并封装成jQuery对象

• jQuery函数返回的是一个伪数组（Object对象），可以使用length和下标。

通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。

直接修改css属性（如果其dom标签存在这个css属性）

清空某标签下的所有dom：

给某标签下添加dom标签：

移除、添加class：

获取dom标签上的属性：

设置标签的属性：

点击：

hover：

监听事件：

post请求：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com