0

0

跟着Jquery API学Jquery之一 选择器_jquery

php中文网

php中文网

发布时间:2016-05-16 18:30:02

|

1825人浏览过

|

来源于php中文网

原创

有了Jquery的选择器,吃饭饭饭香,身体倍棒……
1.基本
我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法
css样式也有几种情况:1.类样式 2.id样式 3.标签样式,
如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{}
如果有一个bb的id,那么我们定义bb的样式就要写成 #bb{}
如果有标签

OmniAudio
OmniAudio

OmniAudio 是一款通过 AI 支持将网页、Word 文档、Gmail 内容、文本片段、视频音频文件都转换为音频播客,并生成可在常见 Podcast ap

下载
,那么我们定义的样式就写成 div{}
如果我们要定义所有的标签样式,那我们就写成 *{} (当然这样简写不太好)
如果我们要定义多个标签之类的就用分号来分开 比如 .aa,#bb,div{} 就定义了 class为aa,id为bb,标签为div的样式了。
我们看到上面5个如果 ,在和jquery的5个基本的选择器对比一下
如果我们要选择一个aa的类就写成 $(“.aa”)
如果我们要选择一个bb的id就写成$(“#bb”)
如果我们要选择div的标签就写成$(“div”)
如果我们要选择所有就写成 $(“*”)
如果我们要选择多个对象就写成 $ (“.aa,#bb,div”)
对比一下,发现基本的选择器完全是按在css的语法在操作,是不是很容易呢
2层次
我们现在知道了上面5个选择器的写法之后,现在我们来考虑如果对层次做选择器,
先想一下什么是层次,其实说的就是 HTML的DOM结构 一层一层的,或者说XML的结构层次
那我们就打开jquery的Api ,发现有4个关于层次的选择器。
归纳一下就是 a空格b,a>b ,a+b,a~b 当然我这里只是为了少打几个字而已,
比如有如下的一个结构
复制代码 代码如下:



12

3

4


我们现在想选择id为aa节点下所有的span节点 ,就用 $(“#aa span”)
我们现在想选择id为aa节点下第一层的span 就是span中文本为 3,4的两个,就用 $(“#aa >span”)
我们现在想得到跟在class为bb后的那个span 就是span中文本为3的那个,就用$(“.bb+span”)
现在我们想得到class为bb后所有的span 就用$(“.bb~span”)
总结一下:第一个的写法还是css样式的写法一样 用空格表示节点下的元素
第二个用>来表示子节点,和空格不同的是它只作用在第一层
第三个第四个都是用来表示跟随节点,只不过不同的是用+号表示紧接着的用~表示所有跟随的 我们是需要记住 (空格 > + ~ )四个符号就可以了
3简单
我们知道了基本的选择器和层次的选择器,有时候我们选择出的是多个比如
复制代码 代码如下:


  • 1

  • 2

  • 3

  • 4



我们想得到ul li的第一个(first) ,最后一个(last),基数行(odd),偶数行(even)匹配第三个(eq(2)),匹配大于2行(gt(1)),匹配小于第三行(lt(2)),这里说了7个那么我们要怎么来写这个选择器呢,比如匹配第一个$(“ul li:first”) ,匹配第三个$(“ul li:eq(2)”) ,其他的就不写了
这里我们想一下css中 a链接的几种样式的的写法 a:hover a:link ……是不是一样呢
好了 这里我们看了7种,在看看api 还有3种是什么呢,
1 :not 去除所有与给定选择器匹配的元素 语法一样 $(“ul li:not(#aa)”) 意思是去掉在ul li里面的含有id为aa的元素元素 我们用$(“ul li”)能够得到4个li 用 $(“ul li:not(#aa)”)就去掉了第一个li 只得到了三个
2:header 只是用来选择h1 h2 h3 ……这样的标题
3:animated匹配执行动画的元素
还是总结一下,上面的这几个其实就是对已经选择出来的在一次的做筛选。建立在基础和层次上面。
4 文本 可见性
继续往下看api,文本中有4个函数,当然功能还是对已经选择出来的内容做再次的筛选
上面是对节点的筛选,现在我们要对内容筛选
复制代码 代码如下:
 
 
xxiu zhang
 
zhang
 
 

包含指定文本 $("div:contains(xxiu)") 我们希望我们所选择的div的文本中含有xxiu这个字符串
匹配空文本 $("div:empty") 第四个div节点下什么都没有,就匹配它了
匹配含有某个节点的元素 匹配含有a节点的div $(“div:has(a)”)
匹配不为空文本的和2刚好相反 $(“div:parent”) 就匹配了前三个div
总结一下 文本匹配主要是做了 文本(1)和节点匹配(3) ,和匹配无文本或节点(2) 匹配有文本节点(4),两句话:有没有文本或节点,有什么文本和节点
然后我们在看一下可见性,可见性很容易理解就两种情况 可见:hidden选择可见节点或不可见:visible选择不可见节点,没什么好说的
5 属性选择器
我们先看看最基本的属性选择器
复制代码 代码如下:

zhang

asdf

xxiu


如上面的节点,我们想选择含有id的节点,我们如果用以前的方法要怎么做呢。
用多选择方式 $(“#aa,#bb”) 得到了我们想要的,但是如果有N个,那不是要跟很长吗,我们都是很懒的,于是就有了属性选择器 $(“div[id]”)就得到了我们想要的结果,对name做选择$(“div[name]”) 但是我们只想得到name为xxiu的 那我们就用$(“div[name ='zhang']”)
得到不为zhang的$(“div[name !='zhang']”),得到以zh开始的$(“div[name ^='zh']”)
以xxiu结尾的$(“div[name $='zhang']”),包含ang的$(“div[name *='ang']”)
或者是有id且包含xxiu的$(“div[id][name *='xxiu']”)
好,看了上面一对东西,肯定是有点晕了,总结一下
1 有什么[id] 等于什么[id='aa'] 不等于什么[id!='aa']
2 以什么开始 ^= 以什么结束$= 匹配什么 *= (完全是正则表达式的语法吗)
3 多属性选择 $(“div[id][name *='xxiu']”)
6 子元素
1匹配子元素中的第一个$("ul li:first-child") 最后一个$("ul li:last-child")
2 匹配在子元素中是唯一的$("ul li:only-child")
3匹配对于的元素$("ul li:nth-child(2)") 和$(“ul li:eq(1)”)一样,前者是从1开始计数,后者是从0开始计数
7表单
看看就知道是input中几种表单 $(“:text”) 得到文本表单 $(“:checkbox”) 得到复选表单等等 看看API就知道是怎么个回事了
我们用前面的选择方式 可以这样写$(“input[type='text']”) 但是少打几个字总比多大几个要好,$(“:text”)这样写是不是清爽的多呢
8 表单属性
1 可用 enabled和不可用 disabled
找出
2 被选中checked 和选择selected
好到这里 所有的API都过了一遍,对选择器基本上就差不多了,差的就是自己去写几句代码玩玩。本文中没有代码,只是对API归纳一下,如果要看代码,看Jquery文档就可以了

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

132

2026.02.06

java多线程方法汇总
java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容,阅读专题下面的文章了解更多详细内容。

52

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南
1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

748

2026.02.06

快手网页版入口与电脑端使用指南 快手官方短视频观看入口
快手网页版入口与电脑端使用指南 快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法,详细提供快手官网直接访问链接、网页端操作教程,以及如何无需下载安装直接观看短视频的方式,帮助用户轻松浏览和观看快手短视频内容。

442

2026.02.06

C# 多线程与异步编程
C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧,包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目,帮助开发者掌握 如何在 C# 中构建高并发、低延迟的异步系统,提升应用性能和响应速度。

48

2026.02.06

Python 微服务架构与 FastAPI 框架
Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用,涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例,帮助学习者掌握 使用 FastAPI 构建高效、可扩展的微服务应用,提高服务响应速度与系统可维护性。

51

2026.02.06

JavaScript 异步编程与事件驱动架构
JavaScript 异步编程与事件驱动架构

本专题深入讲解 JavaScript 异步编程与事件驱动架构,涵盖 Promise、async/await、事件循环机制、回调函数、任务队列与微任务队列、以及如何设计高效的异步应用架构。通过多个实际示例,帮助开发者掌握 如何处理复杂异步操作,并利用事件驱动设计模式构建高效、响应式应用。

37

2026.02.06

java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

91

2026.02.05

java中fail含义
java中fail含义

本专题整合了java中fail的含义、作用相关内容,阅读专题下面的文章了解更多详细内容。

38

2026.02.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.8万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10.7万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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