Study JQuery《2、选择器》
来源:互联网 发布:爱普生照片打印软件 编辑:程序博客网 时间:2024/06/06 12:54
一、基本概念
为了找到特定的DOM元素的一种方法。
二、基本选择器
通过元素id、class、标签名来查找DOM元素的方法。如:
$("#id1"):匹配id为id1的一个元素。
$(".class1"):匹配所有class为class1的元素。
$("element"):匹配所有标签名为element的元素。如:p、div。
$("*"):匹配所有元素。
$("#id1,.class1,element"):匹配每一个选择器的集合。
三、层次选择器
通过DOM元素之间的层次关系来获取特定元素。
$("body div"):匹配body中所有div元素,包括div中的子div。
$("body > div"):匹配body中div元素,div中的子div除外。
$(".class1 + div"):匹配class为class1的下一个div元素,div中的子div除外。
$("#id1 ~ div"):匹配id为id1的后面所有div兄弟元素。
四、过滤选择器
通过特定的过滤规则来筛选出DOM元素,都以一个冒号(:)开头。
1、基本过选择滤器
$("div:first"):匹配所有div中第一个div元素。
$("div:last"):匹配所有div中最后一个div元素。
$("div:not(.class1)"):匹配所有div除了class为class1的元素。
$("div:even"):匹配索引是偶数的元素,索引是从0开始。
$("div:odd"):匹配索引是奇数的元素,索引是从0开始。。
$("div:eq(index)"):匹配索引等于index的元素,索引是从0开始。
$("div:gt(index)"):匹配索引大于index的元素,索引是从0开始。
$("div:lt(index)"):匹配索引小于index的元素,索引是从0开始。
$(":header"):匹配网页中所有的标题元素。
$("div:animated"):匹配正在执行动画的div元素。
2、内容过滤选择器
$("div:contains(text)"):匹配含有文件内容为text的元素,包括父div。
$("div:empty"):匹配不包含子元素或者文本为空元素。
$("div:has(.class1)"):匹配含有选择器的元素,不包括本身。
$("div:parent"):匹配含有子元素或者有文本的元素。
3、可见性过滤选择器
$("div:hidden"):匹配不可见div元素,包括visibility和display。
$("div:visible"):匹配可见div元素。
4、属性过滤选择器
$("div[attribute]"):匹配有此属性的元素。
$("div[attribute=value]"):匹配属性值为value的元素。
$("div[attribute!=value]"):匹配属性值不为value的元素。
$("div[attribute^=value]"):匹配属性值以value开头的元素。
$("div[attribute$=value]"):匹配属性值以value结束的元素。
$("div[attribute*=value]"):匹配属性值含有value的元素。
$("div[][]"):匹配同时满足多个选择器。
5、子元素过滤选择器
$("div:nth-child(index/even/odd/equation)"):匹配每个父元素下第几个子元素,索引从1开始。
$("div:first-child"):匹配每个父元素下的第一个子元素。
$("div:last-child"):匹配每个父元素下的最后一个子元素。
$("div:only-child"):匹配父元素下只有一个子元素的元素。
注意:首先是前面的元素(div)
6、表单对象属性过滤选择器
$("#form1:enabled"):匹配表单为所有可用元素。
$("#form1:disabled"):匹配表单为所有不可用元素。
$("input:checked"):匹配所有被选中input元素。
$("select:selected"):匹配所有被选中项元素。
五、表单选择器
$("#form1:input"):匹配表单中所有input元素。
$("#form1:text"):匹配表单中所有单行文本框。
$("#form1:password"):匹配表单中所有密码框。
$("#form1:radio"):匹配表单中所有单选框。
$("#form1:checkbox"):匹配表单中所有多选框。
$("#form1:submit"):匹配表单中所有提交按钮。
$("#form1:image"):匹配表单中所有图像按钮。
$("#form1:reset"):匹配表单中所有重置按钮。
$("#form1:button"):匹配表单中所有按钮。
$("#form1:file"):匹配表单中所有上传按钮。
$("#form1:hidden"):匹配表单中所有不可见元素。
六、注意事项
1、选择器中的特殊符号
"."、"#"、"("、"["、"]"及引号
如:$("#id#b")应为$("#id\\#b")
2、选择器中的空格
主要体现在后代选择器与过滤选择器上,如下:
<div id="id1" class="test">
<div id="id1-id1" style="display:none;"></div>
<div id="id1-id2" style="display:none;"></div>
<div>
<div id="id2" class="test" style="display:none;"></div>
var t_a = $(".test :hidden");//{id1-id1,id1-id2,id2}
var t_b = $(".test:hidden");//{id2}
----------------------------------------------------------------------------------------------------------------------------
- Study JQuery《2、选择器》
- Study Jquery jqGrid (2)
- jQuery study note 2
- Jquery<2> Jquery选择器
- jquery 选择器(2) 过滤选择器
- jQuery 选择器(2)
- jQuery选择器(2)
- jQuery框架选择器2
- JQuery选择器2
- jquery选择器2
- jQuery选择器总结2
- jQuery(2)选择器
- jQuery(2)选择器总结
- jQuery 选择器 - 2
- jQuery 2 选择器
- jQuery选择器2
- jQuery选择器(2)
- jQuery选择器(2)
- 一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(2)
- C++ 虚函数解析
- 23种设计模式(5):原型模式 .
- PLSQL Developer 的自动登录
- fluent+mongodb搭建日志系统中的几个问题
- Study JQuery《2、选择器》
- Asp.Net对文件和文件夹的操作大全
- hadoop杂记
- 全局鼠标钩子
- 使用jxl读写excel
- @武汉常用网站地址(未完待续)
- Linux下Mysql自启动
- mongodb复制集搭建
- Google_Maps_API_V3 帮助文档