jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等

jquery选择器大部分跟CSS3的选择器通用,但有部分特色选择器

  1. jquery基本选择器

    选择器名字 语法 含义
    id选择器 $("#id") 选择了id名为id的元素(单个)
    类选择器 $(".class") 选择了所有class名为class的所有元素(集合)
    标签选择器 $("p") 选择了所有标签名为p的所有元素(集合)
    并列选择器 $("#id1,#id2") 选择了id名为id1和id2的2个元素 (集合)
    过滤选择器 $("p.class") 选择了类名为class的所有p元素(集合)
  2. 关系选择器

    选择器名字 语法 含义
    后代选择器 $("div p") 选择所有的后代元素(集合)
    子代选择器 $("div>p") 选择所有的子代元素(集合)
    相邻元素选择器 $("div+p") 选择紧挨着的下一个元素
    兄弟选择器 $("div~p") 选择后面的所有的兄弟元素
  3. 过滤选择器

    语法 含义
    :eq(index) 比如 $("div").eq(0) 选择第一个匹配的div元素,也可这样写:$("div:eq(0)")。
    :gt(index) 比如 $("div").gt(2) 选择序号大于2的元素,也可这样写:$("div:gt(2)")
    :lt(index) 比如 $("div").lt(2) 选择序号小于2的元素,也可这样写:$("div:lt(2)")
    :not(selector) 比如 $("div:not(class)") 选择不为class的div元素
    :odd 比如 $("tr:odd") 所有奇数 元素
    :even 比如 $("tr:even") 所有偶数 元素
    :first 比如 $("p:first") 第一个 元素
    :last 比如 $("p:last") 最后一个元素
  4. 属性选择器-跟CSS通用

    语法 含义
    [attribute] 比如 $("[href]") 所有带有 href 属性的元素
    [attribute=value] 比如 $("[href=’#’]") 所有 href 属性的值等于"#"的元素
    [attribute!=value] 比如 $("[href!=’#’]") 所有 href 属性的值不等于"#"的元素
    [attribute$=value] 比如 $("[href$=’.jpg’]") 所有 href 属性的值包含以".jpg"结尾的元素
    [attribute^=value] 比如 $("[class^=’li’]") 所有 class 属性的值包含以"li"开头的元素
    [attribute=value] 比如 $("[class=’li’]") 所有 class 属性的值包含"li"的元素
  5. 表单选择器(JQ特有)

    语法 举例 含义
    :input $(":input") 选取所有的input、textarea、button、select元素
    :text $(":text") 选取所有的单行文本框
    :password $(":password") 选取所有的密码框
    :radio $(":radio") 选取所有的单选框
    :checkbox $(":checkbox") 选取所有的多选框
    :submit $(":submit") 选取所有的提交按钮
    :image $(":image") 选取所有的图像按钮
    :reset $(":reset") 选取所有的重置按钮
    :button $(":button") 选取所有的按钮
    :file $(":file") 选取所有的上传域
    :hidden $(":hidden") 选取所有的不可见元素
    :focus $(":focus") 选取当前获取焦点的元素
    :header $(":header") 選取h1~h6标题标签
  6. jQuery特有选择器

    语法 含义
    $("div").filter(".box") 选取含有指定选择器的div元素,也就是选择的是div,在div范围内包含了指定的选择器的该div都能被选择(过滤自己)
    $("div").find(".box") 选取在div元素内,所有包含了指定的选择器(".box")的元素都能被选择(通过父级找子元素时使用,等价于后代选择器)
    $("div:contains(‘text’)") 选取包含指定文本的元素
    $("div").has(选择器) 选取含有指定选择器的div元素,选的也是div,而不是“选择器”
//比如:
$("ul").has(".box");//返回ul中为.box的ul元素
此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 485
(0)
打赏 微信扫一扫 微信扫一扫

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表89篇文章了,你也来试试

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top