jQuery 中的 CSS 选择器

#id
- id 选择器
- $("#myDiv").css(...);
元素
- 标签选择器
- $("div")
*
- 通用符选择器
- 匹配所有元素
- $("*")
selector1,selectorN
- 将每一个选择器匹配到的元素合并后一起返回。
- 逗号是并列关系
- 共享
- $(".box,.box1")
parent child
- 后代选择器
- 所有包含的
- $("form input")
div>p
- 后代选择器
- 必须是第一级的
- $("form>input")
div + p
- 匹配所有紧接在 div 元素后的 p 元素
- $("div+p")
div ~ p
- 匹配 div 元素之后的所有 p 元素
- $("div~p")
:first/:first-child
- first 获取第一元素
- first-child 获取第一个子元素
- first 只能获取一次，而first-child 能获取多个父元素的子元素
- $("li:first")
:last/:last-child
- last 获取最后元素
- last-child 获取第一个子元素
- last 只能获取一个（不管多少个父元素），last-child 能获取多个父元素的最后一个元素
- $("li:first")
:not()
- 去除所有与给定选择器匹配的元素
- $(":not(div)")
:odd
- 匹配所有索引值为奇数的元素，从 0 开始计数
- $("li:odd")
:even
- 匹配所有索引值为偶数的元素，从 0 开始计数
- $("li:odd")
:eq(index)
- 匹配一个给定索引值的元素，从 0 开始计数
- $("li:eq(0)")
:gt(index)
- 匹配所有大于给定索引值的元素，从 0 开始计数
- $("li:gt(1)")
:lt(index)
- 匹配所有小于给定索引值的元素，从 0 开始计数
- $("li:lt(1)")
:header
- 匹配如 h1, h2, h3之类的标题元素
- $("li:header")
:animated
- 匹配所有正在执行动画效果的元素
- $("li:animated")
:contains(“text”)
- 匹配包含给定文本的元素
- $("li:contains("text")")
:empty
- 匹配所有 “不包含子元素或者文本的” 空元素
- $("li:empty)
:parent
- 匹配所有 “含子元素或者文本的” 非空元素
- $("li:parent)
:has()
- 匹配含有选择器所匹配的元素的元素
- $("li:has(img))
:hidden
- 匹配所有不可见元素，或者type为hidden的元素
- $("div:hidden)
:visible
- 匹配所有可见元素
- $(":visible)
[attribute]
- 匹配包含给定属性的元素。
- $("a[href])
- $("div[data='abc']) 查找 div标签中 data 属性的值为 abc 的标签
- $("div[data!='abc']) 查找 div标签中 data 属性的值不为 abc 的标签
- $("div[data^='abc']) 查找 div标签中 data 属性的值开头为 abc 的标签
- $("div[data$='abc']) 查找 div标签中 data 属性的值末尾为 abc 的标签
- $("div[data*='abc']) 查找 div标签中 data 属性的值包含 abc 的标签
[attr1][attr2]
- 匹配包含给多个定属性的元素。
- $("a[href][title])
:nth-child()
- 匹配其父元素下的第N个子或奇偶元素，下标从 1 开始
- $("ul li:nth-child(1)
:only-child
- 如果某个元素是父元素中唯一的子元素，那将会被匹配
- $("ul li:only-child
:input
- 匹配所有 input, textarea, select 和 button 元素
- $(":input)
:text
- 匹配所有的单行文本框
- $(":text)
:password
- 匹配所有的密码文本框
- $(":password)
:radio
- 匹配所有单选按钮
- $(":radio)
:checkbox
- 匹配所有复选框
- $(":checkbox)
:submit
- 匹配所有提交按钮
- $(":submit)
:image/:reset/:button/:file
- $(":submit)
:enabled
- 匹配所有可用元素
- $(":enabled)
:disabled
- 匹配所有不可用元素
- $(":disabled)
:checked
- 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
- $(":checked)
:selected
- 匹配所有选中的option元素
- $(":selected)

jQuery 中的 CSS 选择器相关推荐

jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
JQuery中的CSS属性及操作
目录 1.JQuery中的css()方法 1) 返回 CSS 属性 2) 设置 CSS 属性 3) 设置多个 CSS 属性 2.JQuery的CSS操作 3.JQuery的class操作 1.JQue ...
jQuery原理系列-css选择器实现
jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...
JQuery中的层级选择器
层级选择器文档中的所有的节点之间都是有这样或者那样的关系.我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了. 选择器中 ...
JQuery中的全选择器（通配符）
全选择器(*选择器) 在CSS中,经常会在第一行写下这样一段样式 * {padding: 0; margin: 0;} 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择 ...
jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...
html页面选择指定条件在下方显示,如何从符合特定条件的HTML中找到CSS选择器？...
我想解析任何给定的链接,看看是否有任何CSS选择器的属性可能部分或完全匹配特定的关键字.如果我的关键字是print,我希望给定链接中的每个CSS选择器都在其中的任何位置打印,它可能出现在name,id ...

jQuery 中的 CSS 选择器

jQuery 中的 CSS 选择器相关推荐

最新文章

热门文章