jQuery选择器快速入门与理解

来源：互联网 2023-03-16 23:54:50 185

在原生Javascript代码中，我们只能使用document.的方式来获取页面中的某个元素，这一点，在jQuery中可以使用$(选择器)在九个不同的角度来任意获取元素：

•基本

•层级

•简单

•内容

•可见性

•属性

•子元素

•表单

•表单对象属性

工具/原料

jQuery

方法/步骤

1、基本选择器

•#id：根据元素的id属性来获取元素

•.class：根据元素的class属性来获取元素

•Element：根据元素的名称来获取元素

•selector1,selector2：群组选择器，可以同时匹配多个元素

示例代码：

jQuery选择器快速入门与理解

2、层级选择器（重点）

同级兄弟关系，父子关系，祖先与后代元素关系

•ancetor（空格）descendant：选择当前元素的所有后代元素（不分层级）

•parent > child：选择父元素下的所有子元素（只有一级，要求是父子关系）

•prev next：选择当前元素紧邻的同级元素的下一个元素

•prev ~ siblings：选择当前元素紧邻的所有同级兄弟元素

示例代码：

jQuery选择器快速入门与理解

3、简单选择器

•:first ：选择索引为0第一个元素，索引默认是从0开始的

•:last ：选择索引最大的最后一个元素

•:even ：选择索引为偶数的所有元素

•:odd ：选择索引为奇数的所有元素

•:eq(index) ：根据元素的索引index来获取元素

•:gt(index) ：选择索引大于index的所有元素

•:lt(index) ：选择索引小于index的所有元素

•:not(selector)：选择除指定选择器以外的其他元素

示例代码:

jQuery选择器快速入门与理解

4、内容选择器

•:contains(text)：匹配包含指定text文本的元素

•:empty：匹配内容为空的元素

•:has(selector) ：匹配具有指定选择器的元素

•:parent ：匹配具有子元素（子元素或文本）的元素，匹配内容不为空的元素

示例代码：

jQuery选择器快速入门与理解

4本页面未经许可获取自百度经验

5、可见性选择器

•:hidden：匹配所有隐藏元素（display:none）

•:visible：匹配所有可见元素

示例代码：

jQuery选择器快速入门与理解

6、属性选择器

•[attribute]：匹配具有指定选择器的元素

•[attribute=value]：匹配具有指定属性值value的元素

•[attribute!=value] ：匹配属性值不等于value的元素

•[attribute^=value] ：匹配属性值以value开始的元素

•[attribute$=value] ：匹配属性值以value结尾的元素

•[attribute*=value] ：匹配属性值包含value的元素

•[attribute1][ attribute2][ attributeN] ：匹配同时具有多个属性的元素

示例代码：

jQuery选择器快速入门与理解

7、子元素选择器

•:nth-child(index/even/odd) ：根据子素的索引获取元素，默认索引从1开始

•:first-child ：匹配第一个子元素

•:last-child ：匹配最后一个子元素

•:only-child ：如果一个子元素是唯一的子元素，则匹配

示例代码：

jQuery选择器快速入门与理解

8、表单元素选择器

•:input ：匹配所有的表单元素，也包括（select下拉与textarea文本域）

•:text ：匹配所有文本框

•:password：匹配所有密码框

•:radio ：匹配所有单选按钮

•:checkbox：匹配所有复选框

•:submit：匹配所有提交按钮

•:reset：匹配所有的重置按钮

•:image：匹配所有的图像域input type=’image’ src=’photo.jpg’ />

•:button：匹配所有的button按钮

•:file：匹配所有的文件域

•:hidden：匹配所有隐藏表单

示例代码：

jQuery选择器快速入门与理解

9、表单对象属性选择器

•:enabled：匹配所有可用的表单元素

•:disabled：匹配所有不可用表单元素，input type=’text’ disabled=’true’ />

•:checked：匹配选中的表单元素（radio或checkbox）

•:selected：匹配下拉选框选中的表单元素

示例代码：

jQuery选择器快速入门与理解

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：jquery实现图片弹出窗口lightbox效果下一篇：jquery 设置隐藏教程

jQuery选择器快速入门与理解

工具/原料

方法/步骤

热门文章

标签列表