jQuery选择器总结

jQuery选择器完全继承了css的风格

常用的css选择器

选择器语法描述
标签选择器E{ }文档元素作为选择符
ID选择器#ID{ }文档元素的唯一标识ID作为选择符
类选择器.className{ }文档元素的class作为选择符
群组选择器E1,E2,E3{ }多个选择符应用同样的样式规则
后代选择器E F{ }元素E的任意后代元素F
通配选择器*{ }文档的所有元素为选择符

jQuery选择器获取的是jQuery对象,即使获取网页中不存在的元素也不会报错。而是用传统getElementById()使用前需检测元素是否存在,否则元素不存在会报错

使用jQuery检测元素在网页上是否存在:

if($("#ID").length>0)
{
    ...
}
//或转为DOM对象
if($("#ID")[0])
{
    ...
}

jQuery选择器

基本选择器

基本类似于上面列举的常用CSS选择器

  • $(“#id”)
  • $(“.class”)
  • $(“element”)
  • $(“*”)
  • $(“selector1,selector2…”)

层次选择器

语法描述
$(“ancestor descendant”)选取ancestor元素中所有descendant元素
$(“parent>child”)选取parent元素下的child元素
$(“prev+next”)选取紧接prev元素后的next元素
$(“prev~siblings”)选取prev元素后所有的siblings元素

后两种通常使用next( )和nextAll( )等价替换

过滤选择器

过滤规则与css中伪类选择器语法相同,以(:)开头

基本过滤选择器
语法描述
$(“div:first”)选取第一个元素
:last选取最后一个元素
:not(selector)去除所有与给定选择器匹配的元素
:even选取索引是偶数的所有元素,索引从0开始
:odd选取索引是奇数的所有元素,索引从0开始
:eq(index)选取索引等于index的所有元素,索引从0开始
:gt(index)选取索引大于index的所有元素,索引从0开始
:lt(index)选取索引小于index的所有元素,索引从0开始
:header选取所有标题元素
:animated选取当前正在执行动画的所有元素元素
:focus选取当前获取焦点的元素元素
内容过滤选择器
语法描述
:contains(text)选取文本内容为text的元素
:empty选取不包含子元素或者文本的空元素
:has(selector)选取含有选择器所匹配的元素的元素
:parent选取含有子元素或者文本的元素
可见性过滤选择器
语法描述
:hidden选取所有不可见的元素
:visible选取所有可见的元素
属性过滤选择器
语法描述
[attribute]选取拥有此属性的元素
[attribute=value]选取属性值为value的元素
[attribute!=value]选取属性值不等于value的元素
[attribute^=value]选取属性值以value开始的元素
[attribute$=value]选取属性值以value结束的元素
[attribute*=value]选取属性值含有value的元素
[attribute |=value]选取属性值等译给定字符串或以该字符串为前缀(字符串后跟连字符“-”)的元素
[attribute~=value]选取属性值用空格分隔的值中包含一个给定值的元素
[attribute1][attribute2][attribute3]复合属性选择器,满足多个条件
子元素过滤选择器
语法描述
:nth-child(index/even/odd/equation)选取每个父元素下(第index个/奇/偶)的子元素(index从1开始)
:first-child选取每一个父元素的第一个子元素
:last-child选取每一个父元素的最后一个子元素
:only-child若某元素是父元素中为一的子元素,则匹配

:eq(index)只匹配一个元素,从0算起;而:nth-child(index)为每一个父元素匹配子元素

表单对象属性过滤选择器
语法描述
:enabled选取所有可用元素
:disabled选取所有不可用元素
:checked选取所有被选中的元素(单选框/复选框checkbox)
:selected选取所有被选中的选项元素(下拉列表select)

表单选择器


  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden

属性值中若含有特殊字符,需使用转义符(“\\”)转义

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值