微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

juqery 学习之三 选择器 简单 内容_jquery

php中文网
发布： 2016-05-16 18:15:26
原创
1222人浏览过

:first

匹配找到的第一个元素

返回值

Element

示例

查找表格的第一行

HTML 代码:


 
 
 
Header 1
Value 1
Value 2

jQuery 代码:

$("tr:first")

结果:

[ Header 1 ]

---------------------------------------------------------------------------------------

Fliki
Fliki

高效帮用户创建视频，具有文本转语音功能

Fliki 151
查看详情 Fliki

:last

匹配找到的最后一个元素

返回值

Element

示例

查找表格的最后一行

HTML 代码:


 
 
 
Header 1
Value 1
Value 2

jQuery 代码:

$("tr:last")

结果:

[ Value 2 ]

---------------------------------------------------------------------------------------

:not(selector)

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

返回值

Array

参数

selector (Selector) : 用于筛选的选择器

示例

查找所有未选中的 input 元素

HTML 代码:


jQuery 代码:

$("input:not(:checked)")

结果:

[  ]

---------------------------------------------------------------------------------------

:even

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

返回值

Array

示例

查找表格的1、3、5...行（即索引值0、2、4...）

HTML 代码:


 
 
 
Header 1
Value 1
Value 2

jQuery 代码:

$("tr:even")

结果:

[ Header 1, Value 2 ]

---------------------------------------------------------------------------------------

:odd

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

返回值

Array

示例

查找表格的2、4、6行（即索引值1、3、5...）

HTML 代码:


 
 
 
Header 1
Value 1
Value 2

jQuery 代码:

$("tr:odd")

结果:

[ Value 1 ]

---------------------------------------------------------------------------------------

:eq(index)

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

返回值

Element

参数

index (Number) : 从 0 开始计数

示例

查找第二行

HTML 代码:


 
 
 
Header 1
Value 1
Value 2

jQuery 代码:

$("tr:eq(1)")

结果:

[ Value 1 ]

---------------------------------------------------------------------------------------

:gt(index)

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

返回值

Array

参数

index (Number) : 从 0 开始计数

示例

查找第二第三行，即索引值是1和2，也就是比0大

HTML 代码:


 
 
 
Header 1
Value 1
Value 2

jQuery 代码:

$("tr:gt(0)")

结果:

[ Value 1, Value 2 ]

---------------------------------------------------------------------------------------

:lt(index)

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

返回值

Array

参数

index (Number) : 从 0 开始计数

示例

查找第一第二行，即索引值是0和1，也就是比2小

HTML 代码:


 
 
 
Header 1
Value 1
Value 2

jQuery 代码:

$("tr:lt(2)")

结果:

[ Header 1, Value 1 ]

---------------------------------------------------------------------------------------

:header

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

返回值

Array

示例

给页面内所有标题加上背景色

HTML 代码:

Header 1


contents 1


Header 2


Contents 2

jQuery 代码:

$(":header").css("background", "#EEE");

结果:

[

Header 1

,

Header 2

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

:animated

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

返回值

Array

示例

只有对不在执行动画效果的元素执行一个动画特效

HTML 代码:

jQuery 代码:

$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+20" }, 1000);
});

---------------------------------------------------------------------------------------

:contains(text)

匹配包含给定文本的元素

返回值

Array

参数

text (String) : 一个用以查找的字符串

示例

查找所有包含 "John" 的 div 元素

HTML 代码:

John Resig

George Martin

Malcom John Sinclair

J. Ohn

jQuery 代码:

$("div:contains('John')")

结果:

[
John Resig
,
Malcom John Sinclair
]


---------------------------------------------------------------------------------------

:empty

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

返回值

Array

示例

查找所有不包含子元素或者文本的空元素

HTML 代码:


 
 
Value 1
Value 2

jQuery 代码:

$("td:empty")

结果:

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

:has(selector)

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

返回值

Array

参数

selector (Selector) : 一个用于筛选的选择器

示例

给所有包含 p 元素的 div 元素添加一个 text 类

HTML 代码:

Hello


Hello again!

jQuery 代码:

$("div:has(p)").addClass("test");

结果:

[

Hello

]

---------------------------------------------------------------------------------------

:parent

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

返回值

Array

示例

查找所有含有子元素或者文本的 td 元素

HTML 代码:


 
 
Value 1
Value 2

jQuery 代码:

$("td:parent")

结果:

[ Value 1, Value 1 ]

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：XMLHTTPRequest的属性和方法简介_javascript技巧 下一篇：javascript 广告后加载，加载完页面再加载广告_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript响应式编程_Observable与操作符设计 响应式编程通过Observable处理异步数据流，结合操作符实现声明式、可维护的复杂逻辑。
2025-11-22 18:34:42
447
JavaScript存储方案_IndexedDB事务操作 IndexedDB通过事务保证数据一致性，所有读写操作必须在事务中进行。事务需指定对象仓库和模式（readonly或readwrite），自动提交或因错误中止。示例：consttransaction=db.transaction([‘users’],‘readwrite’);constobjectStore=transaction.objectStore(‘users’);事务生命周期由请求完成情况决定，监听oncomplete、onerror、onabort事件可掌握结果。常用操作包括add(
2025-11-22 18:32:02
135
JavaScript逃逸分析_堆栈分配策略 逃逸分析是JavaScript引擎优化技术，用于判断对象是否仅在函数内使用，若未逃逸可栈分配或标量替换以减少GC；如obj被闭包引用则需堆分配，编写作用域小、少闭包的代码利于优化。
2025-11-22 18:31:02
707
编程语言中数组元素的规范称谓与变量概念解析 本文旨在澄清编程语言中数组内部存储项的规范称谓，重点区分“元素”与“变量”这两个概念。我们将依据C#语言规范，阐明数组项被称为“元素”，并指出“数组元素”是“变量”的一种特定类型，从而帮助开发者更准确地理解和使用相关术语，避免在编程交流中产生混淆。
2025-11-22 18:29:02
607
数组中单个项的正确术语辨析 本文旨在澄清编程中关于数组内部单个项的正确术语。通过引用权威语言规范，我们明确指出“数组元素”是描述数组中单个项最准确和专业的用语。文章将深入探讨“元素”与“变量”之间的层级关系，并强调在技术交流中采用精确术语的重要性，以避免混淆。
2025-11-22 18:28:34
853
数组中数据项的规范术语：‘元素’与‘变量’的辨析 本文旨在澄清编程中数组内部数据项的规范术语。尽管数组元素在广义上可被视为变量的一种，但其最准确、最专业的称谓是“元素”或“项”。文章将通过引用语言规范，详细解释“元素”与“变量”之间的关系，并强调在编程语境下使用特定术语的重要性，以避免混淆并提升代码可读性。
2025-11-22 18:28:20
990
数组中的项：深入理解“数组元素”与“变量”的精确概念 本文旨在澄清编程中关于数组内部项的正确术语。核心观点是，“数组元素”（ArrayElement）是描述数组中单个项最准确和专业的用语，尽管从广义上讲，每个数组元素都可被视为一种特定类型的“变量”。文章将探讨这两种术语的层级关系及其在编程语境中的精确应用。
2025-11-22 18:28:01
749
JavaScript对象操作_深拷贝与不可变数据结构 深拷贝确保对象完全独立，避免数据被意外修改。常用方法有JSON.parse(JSON.stringify())（仅适用于纯数据）、递归实现和Lodash的_.cloneDeep()。不可变数据通过创建新对象防止副作用，提升可预测性与调试效率，适合React/Redux场景。Immer库简化了不可变操作，允许“可变”语法生成新状态，内部采用Proxy和结构共享，性能优异。项目中应根据复杂度选择方案：简单场景用展开运算符，大型应用推荐Immer或成熟工具库。
2025-11-22 18:25:36
178
解决Pywebview中Paper.js画布渲染失败问题：CDN加载策略与实践 本文详细探讨了在pywebview环境中，Paper.js路径无法正确渲染到画布上的常见问题及其解决方案。核心问题在于Paper.js库的加载方式。通过将本地脚本引用替换为CDN链接，可以确保Paper.js库被正确加载和初始化，从而使绘图功能正常运作。教程将提供详细的代码示例和步骤，帮助开发者在pywebview应用中成功集成并使用Paper.js进行图形绘制，确保图形内容能被正确渲染并导出。
2025-11-22 18:14:02
973
JavaScript安全实践_常见漏洞与防护方案 答案：JavaScript安全需防范XSS、CSRF、数据反序列化漏洞和敏感信息泄露。应转义用户输入、使用CSP、Anti-CSRFToken、禁用eval、避免前端硬编码密钥，并遵循最小权限原则。
2025-11-22 18:13:02
470
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部