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}

----------------------------------------------------------------------------------------------------------------------------

原创粉丝点击