过滤选择器-子元素过滤&表单过滤
| 选择器 |
描述 |
返回 |
示例 |
| :nth-child(index/even/odd/equation) |
选取每个父元素下的第index个子元素或奇偶元素.(index从1开始） |
集合元素 |
:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始. |
| :first-child |
选择每个父元素的第1个子元素 |
集合元 |
:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如:$(“ul li:first-child”)选择每个ul下的第一个<li> |
| :last-child |
选取每个父元素的最后1个子元素 |
集合元素 |
$(“ul li:last-child”)选择每个ul下的最后一个<li> |
:only-child |
如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配 |
集合元素 |
$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li> |
作者：曾庆林
| 选择器 |
描述 |
返回 |
示例 |
| :nth-child(index/even/odd/equation) |
选取每个父元素下的第index个子元素或奇偶元素.(index从1开始） |
集合元素 |
:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始. |
| :first-child |
选择每个父元素的第1个子元素 |
集合元 |
:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如:$(“ul li:first-child”)选择每个ul下的第一个<li> |
| :last-child |
选取每个父元素的最后1个子元素 |
集合元素 |
$(“ul li:last-child”)选择每个ul下的最后一个<li> |
:only-child |
如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配 |
集合元素 |
$(“ul li:only-child”)在<ul>中选取是惟一子元素的<li> |
:nth-child()选择器详细功能描述:
:nth-child(even) 能选择每个父元素下的索引值是偶数的元素
:nth-child(odd) 选择出每个父元素下的索引值是奇数的元素
:nth-child(2) 选取每个父元素下的索引值等于2的元素
:nth-child(3n) 能选出每个父元素下的索引值是3的倍数的元素,n从0开始
:nth-child(3n+1) 能选取每个父元素下的索引值是3n+1的元素.n从0开始
表单对象属性过滤选择器
| 选择器 |
描述 |
返回 |
示例 |
| :enabled |
选择所有可用元素 |
集合元素 |
$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素 |
| :disabled |
选择所有不可用元素 |
集合元素 |
$(“#form1 :disabled”)选取id为form1的表单内所有不可用元素 |
| :checked |
选择忾有被选中的元素(单选框,复选框) |
集合元素 |
$("input:checked")选择所有被选中的<input元素> |
:selected |
选择所有被选中的选项元素(下拉列表) |
集合元素 |
$("select :selected")选取所有被选中的选项元素 |
表单选择器
| 选择器 |
描述 |
返回 |
示例 |
| :input |
匹配所有<input> <textarea> <select> <button>元素 集合元素 |
$(“:input”) 同描述 |
| :text |
选择所有单行文本框 |
集合元素 |
$(“:text”)匹配所有单行文本框 |
| :password |
选择所有密码框 |
集合元素 |
$(“:password”) |
| :radio |
选择所有单选框 |
集合元素 |
$(“:radio”) |
| :checkbox |
选择所有复选框 |
集合元素 |
$(“:checkbox”) |
:submit |
匹配所有提交按钮 |
集合元素 |
$(“:submit”) |
| :image |
匹配所有图像按钮 |
集合元素 |
$(“:image”) |
| :reset |
匹配所有重置按钮 |
集合元素 |
$(“:reset”) |
| :button |
匹配所有按钮 |
集合元素 |
$(“:button”) |
| :file |
匹配所有文件域 |
集合元素 |
$(“:file”) |
| :hidden |
匹配所有不可见元素 |
集合元素 |
$(“:hidden”) |
选择器中的一些注意事项
选择器中包含空格
选择器中的空格是不容忽视的，多一个空格或少一个空格会得到截然不同的结果.
如:
$(“div:input”)
和
$(“div :input”)
jQuery中的方法初探
| 方法 |
功能描述 |
| show() |
显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒 |
| hide() |
隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒 |
| css(name,value) |
给匹配的元素设置css样式 |
| text(string) |
获取或设置匹配元素的文本内容,不包含html标签 |
| filter(expr) |
筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。 |
| addClass(class) |
为匹配的元素增加一个 类样式 |
| removeClass(class) |
为匹配的元素移除一个类样式 |
| html() |
获取或设置匹配元素的内容，包含html标签 |
| siblings() |
$(“.abc”).siblings()匹配得到class=abc的其它兄弟元素 |
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
