jQuery选择器

最新推荐文章于 2021-11-20 11:12:56 发布
最新推荐文章于 2021-11-20 11:12:56 发布
阅读量151 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_4898698/article/details/117324219
版权
本文详细介绍了jQuery的选择器，包括基本选择器、层级选择器、基本筛选、内容筛选、可见性、属性、子元素、表单及表单属性等，提供了丰富的示例，帮助开发者更好地理解和使用jQuery进行网页元素的选取和操作。
摘要由CSDN通过智能技术生成

jQuery选择器

开发工具与关键技术： MVC

作者: 忄雾

撰写时间：2021/5/7

jQuery选择器

·基本选择器

·层级选择器

1.基本选择器

（1）.

分类

选择器

描述

基本

*

选取所有元素

 

#id

根据给定的ID匹配一个元素

 

.class

根据给定的类匹配元素

 

Element

根据给定的元素名匹配到的所有元素

 

（2）. jQuery注释快捷键：‘Ctrl’ + ‘K’ + ‘C’ ；

取消注释快捷键：‘Ctrl’ + ‘K’ + ‘U’；

 

 

 

 

2.层级选择器

（3）.

 

 

 

层级

Selectors,……,selectorN

将每一个选择器匹配到的元素合并后一起返回

 

ancestor descendant

在给定的元素ancestor下匹配所有的后代元素

 

parent>child

在给定的元素parent下匹配所有的子元素

 

prev+next

匹配所有紧接在prev元素后的相邻元素

 

prev~siblings

匹配prev元素之后的所有兄弟元素

 

2.基本筛选

（4）.

 

 

 

筛选

:first

获取第一个元素

 

:not（）

去除给定选择器匹配的元素

例：$（“p:not(.intro)”）   

匹配除.intro元素外的所有p元素                                                                                                                                                                                                                                                                                                                                                                                                                      

 

:even

匹配所有索引值为偶数的元素，从0开始计数

 

 

 

 

:odd（）、

匹配所有索引值为奇数的元素，从0开始计数

 

:eq（）

匹配一个给定索引值的元素

 

:gt（）

匹配所有大于给定索引值的元素

 

:lt（）

匹配所有小于给定索引值的元素

 

:lang

选择指定语言的所有元素

 

:last

获取最后一个元素

 

:header

匹配如h1,h2,h3之类的标题元素

 

:animated

匹配所有执行动画效果中的元素

 

:focus

匹配当前获取焦点的元素

 

:root

选择该文档的根元素永远是<html>元素

 

:target

选择由文档URI的格式化识别码表示的目标元素

3.内容

（5）.

 

 

 

内容

:contains()

获取第一匹配包含给定文本的元素元素

 

:empty

匹配所有不包含子元素或者文本的空元素

 

:has()

匹配含有选择器所匹配的元素的元素

 

:parent

匹配含有子元素或者文本的元素

4.可见性

（6）.

 

 

 

可见性

:hidden

匹配所有不可见元素，或者 type 为 hidden

的元素

 

:visible

匹配所有的可见元素

5.属性

（7）.

 

 

 

属性

[attribute]

匹配包含给定属性的元素

 

[attribute=value]

匹配给定的属性是某个特定值的元素

 

[attribute!=value]

匹配所有不含有指定的属性，或者属性不等

于特定值的元素。

 

[attribute^=value]

匹配给定的属性是以某些值开始的元素

 

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

 

[attribute*=value]

匹配给定的属性是以包含某些值的元素

 

[attrSel1][attrSel2][attrSelN]

复合属性选择器，需要同时满足多个条件时

使用。

6.子元素

（8）.

 

 

 

属性

:first­child

匹配第一个子元素

 

:last­child

匹配最后一个子元素

 

:first­of­type

选择所有相同的元素名称的第一个兄弟元

素。

 

:last­of­type

选择的所有元素之间具有相同元素名称的

最后一个兄弟元素。

 

:nth­child()

匹配某个元素，该元素必须是某个父元素下

的第 n 个子元素。序号从 1 开始

 

:nth­last­child()

选中某个元素，该元素必须是某个父元素下

的倒数第 n 个子元素。序号从 1 开始

 

:nth­of­type()

选中某个元素，该元素必须是某个父元素下

的指定类型第 n 个子元素。序号从 1 开始

7.表单

（9）.

 

 

 

表单

:input

匹配所有 input, textarea, select 和

button 元素

 

:text

匹配所有的单行文本框

 

:radio

匹配所有单选按钮

 

:checkbox

匹配所有复选框

 

:submit

匹配所有提交按钮

 

:image

匹配所有图像域

 

:reset

匹配所有重置按钮

 

:button

匹配所有按钮

 

:file

匹配所有文件域

 

:password

匹配所有密码框

8.表单属性

（10）.

 

 

 

表单属性

:enabled

匹配所有可用元素

 

:disabled

匹配所有禁用元素

 

:checked

匹 配 具 有 checked 属 性 的 radio 和

checkbox，和有 selected 属性的 option

标签

 

:checkbox

只匹配有 selected 属性的 option 标签

 

 

这是是我整理的小技巧 分享给各位小白，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或有疑问的地方欢迎在评论区教导和提问喔！

H_4898698
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery源码详细中文注释!
11-03
JQuery源码详细中文注释!JQuery源码详细中文注释!JQuery源码详细中文注释!JQuery源码详细中文注释!JQuery源码详细中文注释!
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jQuery源码分析
如果我年少有为不自卑
04-21 1748
/*! * jQuery JavaScript Library v1.10.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors * Released un
jQuery 个人之前的笔记
Jine
06-16 2763
jQuery 基础篇 概述 jQuery是一款优秀的JavaScript库 ，从命名可以看出jQuery最主要的用途是用来做查询(iQuery=js+Query) ，正如jQuery官方Logo副标题所说(write less, domore)使用jQuery能 上我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单 入门 和原生JS区别 1、原生JS： 等DOM元素加载完毕，并且图片也加载完毕才会执行 编写多个入口函数，后面会覆盖前面 2、jQuery 等Dom元素加载完毕，但
Jquery 中的 注释？
weixin_37501775的博客
05-16 2234
jsp的注释&lt;!----&gt;示范： 如果是// 文字， 还是会显示出注释。 
jquery注释
rdman的专栏
05-30 3802
导航栏 //等待dom元素加载完毕. $(document).ready(function(){ $(".level1 > a").click(function(){ $(this).addClass("current")   //给当前元素添加"current"样式 .next().show()                //下一个元素显示 .parent
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
jquery的注释
anzhuangguai的专栏
10-21 2141
jsp的注释 --> jquery的注释 function myFunction ( myVar, myVar2 ) { // Pay attention to spaces around // the brackets and curly brackets } 多行的注释 /* comment */ 参考 http://www.sitepoint.c
html、css、js、jQuery的注释写法（单行、多行）
zag666的博客
10-11 1195
HTML注释： <!--单行注释--> <!-- 多行注释 多行注释 多行注释 --> css注释： /*单行注释*/ /* 多行注释 多行注释 多行注释 */ JS/jQuery注释： //单行注释 /* 多行注释 多行注释 多行注释 */ ...
HTML的注释与JavaScript注释及快捷键
weixin_45586870的博客
11-20 1万+
1、单行注释：在代码前输入两个反斜杠 // ，或用快捷键ctrl+/ 2、多行注释： 使用/* */ 把要注释的代码块包起来，或用快捷键shift+alt+a 3、若觉得2、的快捷键用着不方便，可以按自己喜欢可以在vscode中修改注释快捷键。 ...
Jquery、注解、页面小技巧
神叹的专栏
03-29 1102
 1,页面中点击一个按钮，清空file框中的值：         注： fileText” type=”file”/>         onClick=" fileText.select();document.selection.clear();"2,页面中，让一个img的图片显示小手的标志    3,页面中直接用DAO层的方法（注解）s:bean name="com.
JQuery 实现网页的快捷键操作
weixin_34356555的博客
04-29 164
今天同事与我分享了一个关于JQuery 实现B/S （或说网页）页面的快捷键操作方法，测试页面：http://img.jb51.net/online/jquery_HotKeys.html插件下载地址：http://code.google.com/p/js-hotkeys/downloads/list测试页面的一些代表性代码：jQuery(document).bind('keydown', 'f...
js,jsp,html,java文件的注释一行快捷键
透明大脑
03-23 6086
1.jsp Ctrl+Shift+C 2.js Ctrl+/ 3.java Ctrl+/
Js中的多行注释与快捷键
yang031997的博客
11-23 2万+
Js中的多行注释与快捷键 添加必要的注释，对一个有责任心、有道德模范的前端必须具备的好习惯，可以大大提高代码的可维护性、可读性。 java代码注释快捷键：ctrl+shift+/ 首先熟悉一下html、css、js的注释的写法： 1、HTML注释语法： 2、css注释语法 /* 注释内容 / / ----------文字样式开始---------- */ 3、javaScript注释 //注释内容...
js||jquery||XX 多种快捷键hotkey
快乐每一天
03-28 343
[code="java"] shortcut.js // 页面初始化 $(document).ready(hotkey); function hotkey() { shortcut.add("backspace", function() { alert("Hello!"); }); } [/code] [url]http://img.jb51.net...
VS注释与取消注释快捷键
热门推荐
Sky___Ice的专栏
05-08 24万+
最近在使用VS2010开发ASP.Net，突然发现想全部注释时找不到注释的快捷键，网上查了下，原来很简单，只是需要使用组合键。 注释：        先CTRL+K，然后CTRL+C 取消注释： 先CTRL+K，然后CTRL+U
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值