开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JQuery筛选器

简介:
+关注继续查看
jQuery提供了强大的选择器让我们获取对象。在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件。选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象。



1.选择对象



1).基本




·#id根据给定的ID匹配一个元素。例如:$("#id")

·element 根据给定的元素名匹配所有元素。例如:$("div")

·.class 根据给定的类匹配元素。例如:$(".style1");

·* 匹配所有元素。例如:$("*")

·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如:$("#id,div,.style1")



2).表单



·:button 匹配所有按钮。例如:$(":button")

·:checkbox 匹配所有复选框。例如:$(":checkbox")

·:file 匹配所有文件域。例如:$(":File")

·:hidden 匹配所有不可见元素,或者type为hidden的元素。例如:$("input:hidden")

·:image 匹配所有图像域。例如:$(":image")

·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")

·:password 匹配所有密码框。例如:$(":password")

·:radio 匹配所有单选按钮。例如:$(":radio")

·:reset 匹配所有重置按钮。例如:$(":reset")

·:submit 匹配所有提交按钮。例如:$(":submit")

·:text 匹配所有的单行文本框。例如:$(":text")

·:header 匹配如 h1, h2, h3之类的标题元素。例如:$(":header").css("background", "#EEE");



2.筛选条件



1).属性筛选



·[attribute*=value] 匹配给定的属性是以包含某些值的元素。例如:$("input[name*='man'")

·[attribute!=value] 匹配所有含有指定的属性,但属性不等于特定值的元素。例如:$(input[name!='man');

·[attribute$=value] 匹配给定的属性是以某些值结尾的元素。例如:$("input[name$='man']")

·[attribute=value] 匹配给定的属性是某个特定值的元素。例如:$("input[name='man']");

·[attribute] 匹配包含给定属性的元素。例如:$("div[id]")

·[attribute^=value] 匹配给定的属性是以某些值开始的元素。例如:$("input[name^='man']")

·[selector1][selector2][selectorN] 同时满足多个条件。例如:$("input[id][name$='man']")

·:hidden 匹配所有的不可见元素。例如:$("tr:hidden")

·:visible 匹配所有的可见元素。例如:$("tr:visible")

·:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)。例如:$("input:checked")

·:disabled 匹配所有不可用元素。例如:$("input:disabled")

·:enabled 匹配所有可用元素。例如:$("input:enabled")

·:selected 匹配所有选中的option元素。例如:$("select option:selected")



2).内容筛选



·:contains(text) 匹配包含给定文本的元素。例如:$("div:contains('John')")

·:empty 匹配所有不包含子元素或者文本的空元素。例如:$("td:empty")

·:has(selector) 匹配含有选择器所匹配的元素的元素。例如:$("div:has(p)");

·:parent 匹配含有子元素或者文本的元素。例如:$("td:parent")



3).层级筛选



·ancestor descendant 在给定的祖先元素下匹配所有的后代元素。例如:$("form input")

·parent > child 在给定的父元素下匹配所有的子元素。例如:$("form > input")

·prev + next 匹配所有紧接在 prev 元素后的 next 元素。例如:$("label + input")

·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$("form ~ input")

·:first-child 匹配第一个子元素。例如:$("ul li:first-child")

·:last-child 匹配最后一个子元素。例如:$("ul li:last-child")

·:nth-child(index/even/odd/equation) 匹配其父元素下的第N个子或奇偶元素。例如:$("ul li:nth-child(2)")

·:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。例如:$("ul li:only-child")



4).方法筛选



·:animated 匹配所有正在执行动画效果的元素。例如:$("div:animated");

·:eq(index) 匹配一个给定索引值的元素。例如:$("tr:eq(1)")

·:even 匹配所有索引值为偶数的元素,从 0 开始计数。例如:$("tr:even")

·:first 匹配找到的第一个元素。例如:$("tr:first")

·:gt(index) 匹配所有大于给定索引值的元素,从 0 开始计数。例如:$("tr:gt(0)")

·:last 匹配找到的最后一个元素。例如:$("tr:last")

·:lt(index) 匹配所有小于给定索引值的元素。例如:$("tr:lt(2)")

·:not(selector) 去除所有与给定选择器匹配的元素。例如:$("input:not(:checked)")

·:odd 匹配所有索引值为奇数的元素,从 0 开始计数。例如:$("tr:odd")





     本文转自My_King1 51CTO博客,原文链接:http://blog.51cto.com/apprentice/1360778,如需转载请自行联系原作者







版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery筛选方法-13
jquery筛选方法-13
17 0
jQuery选择器
jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样。
45 0
jQuery计算器插件
在线演示 本地下载
936 0
jQuery|"+"相邻选择器
jQuery element + next 选择器 实例 选取与每个 元素相邻的下一个 元素: $("div + p") 定义和用法 ("element + next") 选择器选取指定元素 "element" 的下元素 "next"。
1052 0
jQuery|“>”选择器
:表示选取指定元素的直接子元素的所有元素。 实例 选取 元素的直接子元素的 元素: $("div > span") 定义和用法 ("parent > child") 选择器选取指定元素的直接子元素的所有元素。
742 0
jquery选择器
属性选择E[attr]:$("[title]").click()...    $("div[title]").click().... 选择所有元素内 属性带有title的元素即:li-1选择所有div标签(指定标签)下的所有带title的元素 即:li-1属性值选择E[@attr=val]$("div[title='ttt']").
791 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载