首页 > 技术文章 > jQuery选择器

niusan 2017-12-09 11:08 原文


id选择器 $('#id')
类选择器 $('.class')
元素选择器 $('element')
全选选择器 $('*')
子选择器 $('div > p') 直接子元素
后代选择器 $('div p')
相邻兄弟选择器 $('div + p') 所有紧接在div后的p元素,相同的父元素
一般兄弟选择器 $('div ~ p') 匹配div之后的所有兄弟元素,具有相同的父元素,并过滤p元素
// 筛选选择器
匹配第一个元素 $(':first')
匹配最后一个元素 $(':last')
选择所有元素去除不匹配给定的元素 $(':not(selector)')
匹配集中索引值为index的元素 $(':eq(index)')
匹配集合中所有大于给定index的元素 $(':gt(index)')
匹配集合中所有小于给定index的元素 $(':lt(index)')
索引值为偶数的元素 $(':even')
索引值为奇数的元素 $(':odd')
选择所有标题元素h1-h6 $(':header')
选择指定语言的所有元素 $(':lang(language)')
选择该文档的根元素 $(':root')
选择正在执行动画效果的元素 $(':animated')
选择包含指定文本的元素 $(':contains(text)')
选择元素中至少包含指定选择器的元素 $('has(selector)')
选择所有含有子元素或文本的元素 $(':parent')
选择所有没有子元素的元素 $(':empty')
选择所有显示元素 $(':visible')
选择所有隐藏元素 $(':hidden') 包括:display:none;type=hidden的表单;width/height为0;
属性筛选选择器
选择指定属性值等于给定字符串或该字符串为前缀 $('[arrt|="value"]')
选择指定属性具有包含一个给定的子字符串的元素(选择给定的属性是以包含某些值的元素) $('[arrt*="value"]')
选择指定属性用空格分割的值中包含一个给定值的元素 $('[arrt~="value"]')
选择指定属性是给定值的元素 $('[arrt="value"]')
选择不存在指定属性或不等于给定值 $('[arrt!="value"]')
选择指定属性是以给定字符串开始的元素 $('[arrt^="value"]')
选择给定属性是以定值结尾的元素,区分大大小写 $('[arrt$="value"]')
选择所有具有指定属性的元素 $('[attr]')
选择匹配所有指定的属性筛选器的元素 $('[attr1][attr2]')
选择所有父元素下的第一个子元素 $(':first-child')
选择所有父元素下的最后一个子元素 $(':last-child')
如果某个元素是其父元素的唯一子元素那么他就中了 $(':only-child')
选择他们所有父元素的第n个子元素 $(':nth-child(n)')
选择所有他们父元素的第n个子元素,计数从最后一个元素开始到第一个 $(':nth-last-child(n)')
// 表单元素选择器
选择所有input,textarea,select,button $(':input')
匹配所有文本框 $(':text')
匹配所有密码框 $(':password')
匹配所有的单选按钮 $(':radio')
匹配所有的复选框 $(':checkbox')
匹配所有提交按钮 $('submit')
匹配所有图像域 $(':imgae')
匹配所有重置按钮 $(':reset')
匹配所有按钮 $(':button')
匹配所有文件域 $(':file')
选取可用的表单元素 $(':enabled')
选取不可用的表单元素 $(':disabled')
选取被选中的input元素 $(':checked')
选取被选中的option元素 $(':selected')

// 属性和样式 .attr()与 .removeAttr()
1, attr(传递属性名) :获取属性值
2, attr(属性名,属性值) :设置属性值
3, attr(属性名,函数值) 设置属性的函数值
4, attr(attributes) : 给指定元素设置多个属性值{name1:"name1",attr2:"attr2"}
.removeAttr(); 为匹配的元素集合中的每一个元素,移除一个属性
获取Attribute需要用attr,获取Property就需要用prop

.html()和.text() .val()
添加样式.addClass();
删除样式.removeClass()
切换样式:.toggleClass()
样式:.css()
元素的数据存储:.data()

推荐阅读