博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery选择器
阅读量:5766 次
发布时间:2019-06-18

本文共 1940 字,大约阅读时间需要 6 分钟。

jQuery选择器分类

基本选择器 5(种)
层次选择器 4
过滤选择器 11+4+2+9+4+4
表单选择器 11

1.基本选择器

  • ID选择器
  • 类名选择器 .class
  • 元素选择器  element
  • 通配符选择器 *
  • 群组选择器

2.层次选择器

  • $("ancestor descendant")  后代选择器
  • $("parent>child")  子元素选择器
  • $("prev+next")  选取紧接在prev元素后的next元素   等同于next()方法
  • $("prev~siblings")  选取prev元素之后的所有sibling元素  等同于nextAll()方法  

3.过滤选择器

  • 基本过滤  11种
  • 内容过滤  4
  • 可见性过滤  2
  • 属性过滤   9
  • 子元素过滤  4
  • 表单对象属性过滤  4

3.1基本过滤选择器

  • :not(selector)  去除所有与给定选择器匹配的元素
  • :header  选取所有表题元素,如h1,h2,h3等
  • :animated  选取正在执行动画的所有元素,如$("div:animated")选取正在执行动画的div元素
  • :focus  选取当前获取焦点的元素
  • :first  选取第一个元素
  • :last  选取最后一个元素
  • :eq(index)  选取索引等于index的元素
  • :gt(index)  选取索引大于index的元素
  • :lt(index)  选取索引小于index的元素
  • :even  选取索引是偶数的所有元素
  • :odd  选取索引是奇数的所有元素

3.2内容过滤选择器

  • :contains(text)  选取含有文本内容为“”text”的元素
  • :has(selector)  选取含有选择器所匹配的元素,如$("div:has(p)")  选取含有p元素的div元素
  • :empty  选取不包含子元素或者文本的空元素
  • :parent  选取含有子元素或者文本的元素

3.3可见性过滤选择器

  • :hidden  选取所有不可见的元素
  • :visible  选取所有可见的元素

3.4属性过滤选择器

  • [attr]  选取拥有此属性的元素  $("div[id]")
  • [attr = value]  选取属性为value的元素      $("div[title=test]")
  • [attr != value]  选取属性不为value的元素 
  • [attr ^= value] 选取属性值以value开始的元素 
  • [attr $= value]  选取属性值以value结束的元素
  • [attr |= value]  选取属性值含有value的元素
  • [attr ~= value]  选取属性用空格分隔的值中包含一个给定值元素
  • [attr1][attr2][attr3]  用属性选择器合并成一个复合选择器,满足多个条件。每选择一次,缩小一次范围。eg:$("div[id][title$='test'")选取拥有属性ID,并且属性title以test结束的div元素

3.5子元素选择器

  • :nth-child(index|even|odd|equation)  选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
  • :first-child  选取每个父元素的第一个子元素    eg:$("ul li:first-child")选取每个ul中的第一个li
  • :last-child  选取每个父元素的最后一个子元素
  • :only-child  选取独生元素,即某个元素是给定父元素的唯一子元素

3.6表单对象属性过滤选择器

  • :enabled  选取所有可用元素
  • :disabled  选取所有不可用元素
  • :checked  选取所有被选中的元素(单、复选框)
  • :selected  选取所有被选中的选项元素(下拉列表)  eg:$("select option:selected");  选取所有被选中的option元素

4.表单选择器

  • :input  选取所有<input><textarea><select><button>元素
  • :text  选取所有的单行文本框
  • :radio  选取所有的单选框
  • :checkbox  选取所有的多选框
  • :submit  选取所有的提交按钮
  • :image  选取所有的图像按钮
  • :reset  选取所有的重置按钮
  • :button  选取所有的按钮
  • :file  选取所有的上传域
  • :hidden  选取所有的不可见元素

 

 

注意事项

  选择器中含有" . "、" # "  、" ( "或" ] "等特殊字符,要使用转义字符进行转义

  $("#id\\#b");

  $("#id\\[1\\]");

转载于:https://www.cnblogs.com/yugeyou/p/jquery_003.html

你可能感兴趣的文章
第三章 Python 的容器: 列表、元组、字典与集合
查看>>
微信小程序开发 -- 点击右上角实现转发功能
查看>>
[转载]ASP.NET MVC Music Store教程(1):概述和新项目
查看>>
js函数大全
查看>>
Mongodb启动命令mongod参数说明
查看>>
TCP&UDP压力测试工具
查看>>
Android 最简单的自定义Dialog之一
查看>>
磨刀不误砍柴 - 配置适合工作学习的桌面环境
查看>>
redux v3.7.2源码解读与学习之 applyMiddleware
查看>>
【React】为什么我不再使用setState?
查看>>
Git原理与高级使用(3)
查看>>
从JDK源码看Writer
查看>>
Express 结合 Webpack 实现HMRwi
查看>>
基于protobuf的RPC实现
查看>>
我的友情链接
查看>>
HAProxy负载均衡原理及企业级实例部署haproxy集群
查看>>
开源中国动弹客户端实践(三)
查看>>
Win 8创造颠覆性体验:预览版关键更新
查看>>
vim在多文件中复制粘贴内容
查看>>
Android ContentObserver
查看>>