jQuery选择器

来源:互联网 发布:软件许可使用授权书 编辑:程序博客网 时间:2024/05/01 08:31
一、jQuery基本选择器
  前面提到,选择器是jQuery的特色。jQuery的基本选择器主要分为以下五种类型:
  1. $(“#myId”) // 选择ID为myId的网页元素
  2. $(“标签名”) // 例如$(“div”)获取的就是HTML文档中的所有的div元素的jQuery对象集合
  3. $(“.myClass”) // 获取的是HTML文档中所有的class为“myClass”的元素集合
  4. $(“*”) // 这个获取的是HTML文档中的所有的元素
  5. $(“selector1,selector2,selector3…selectorN “) // 这种选择器叫做组选择器。例如:$(“span,#two”)
  // 选取所有的span标签元素和id=two的元素。
  二、jQuery层次选择器
  无论何时,通过jQuery选择器获取的jQuery对象任何时候都是一组元素。jQuery的层次选择器主要分为以下两种类型:
  1. $(“ancestor descendant”):选取parent元素后所有的child元素。ancestor的中文意思是“祖先”,descendant的中文意思是“后代”。例如:
  $(“body div”) 选取body元素下所有的div元素。
  $(“div#test div”) 选取id为“test”的div所包含的所有的div子元素
  2. $(“parent > child”):选取parent元素后所有的第一个child元素。例如:
  $(“body > div”) 选取body元素下所有的第一级div元素。
  $(“div#test > div”) 选取id为“test”的div所包含的所有的第一级div子元素
  三、jQuery过滤选择器
  jQuery最基本过滤选择器包括:
  1. :first // 选取第一个元素。$(“div:first”)选取所有div元素中的第一个div元素
  2. :last // 选取最后一个元素。$(“div:last”)选取所有div元素中的最后一个div元素
  3. :even // 选取索引是偶数的所有元素。$(“input:even”)选取索引是偶数的input元素。
  4. :odd // 选取索引是奇数的所有元素。$(“input:odd”)选取索引是奇数的input元素。
  5. :eq(index) // 选取索引等于index的元素。$(“input:eq(1)”)选取索引等于1的input元素。
  6. :gt(index) // 选取索引大于index的元素。$(“input:gt(1)”)选取索引大于1的input元素。
  7. :lt(index) // 选取索引小于index的元素。$(“input:lt(3)”)选取索引小于3的input元素。
  jQuery内容过滤选择器,可以轻松地对DOM文档中的文本内容进行筛选,从而准确地选取我们所需要的元素。
  1. :contains(text) // 选取含有文本内容为“text”元素。$(“div:contains(‘你’)”)选取含有文本“你”的div元素。
  2. :empty // 选取不包含子元素和文本的空元素。$(“div:empty”)选取不包含子元素(包括文本元素)的div空元素。
  3. :parent // 选取含有子元素或者文本的元素。$(“div:parent”)选取拥有子元素(包括文本元素)的div元素。
  可以看见,jQuery内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。
  jQuery可见性过滤选择器的用法如下:
  1. :hidden // 选取所有不可见的元素。$(“:hidden”)选取网页中所有不可见的元素。
  2. :visible // 选取所有可见元素。$(“div:visible”)选取所有可见的div元素。
  jQuery属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
  1. [attribute] // 选择拥有此属性的元素。$(“div[id]“)选取拥有属性id的元素。
  2. [attribute=value] // 选取属性值为value的元素。$(“div[name=test]“)选取属性name的值为“test”的div元素。
  3. [attribute!value] // 选取属性值不等于value的元素。
  4.[attribute^=value] // 选取属性的值以value开始的元素。
  5. [attribute$=value] // 选取属性的值以value为结束的元素。
  6. [attribute*=value] // 选取属性的值含有value的元素。
  7. [selector1] [selector2] [selectorN] //复合属性选择器。$(“div[id][name*=test]“)选取拥有属性id,且属性name的值含有“test”的div元素
  jQuery子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂。
  1. :nth-child(index/even/odd/equation) // 选取每个父元素下的第index个子元素或者奇偶元素。
  2. :first-child // 选取每个父元素的第一个子元素
  3. :last-child // 选取每个父元素的最后一个子元素
  jQuery表单对象属性过滤选择器主要是对所选择的表单元素进行过滤,例如选择不可用的表单元素、被选中的下拉框、多选框等等。
  1. :enabled // 选取所有可用的表单元素。$(“#form1 :enabled”)选取id为“form1”的表单内的所有可用元素。
  2. :disabled // 选取所有不可用的表单元素。
  3. :checked // 选取所有被选中的元素。$(“input:checked”)选取所有被选中的元素。
  4. :selected // 选取所有被选中的选项元素。$(“select :selected”)选取所有被选中的选项元素(option)。
  jQuery中引入了表单选择器,让我们能极其方便地获取到一个表单中的某个或某类型的元素。
  1. :input // 选取所有<input>、<textarea>、<select>、<button>元素。
         2. :text // 选取所有单行文框
         3. :password // 选取所有密码框
         4. :radio // 选取所有单选框
          5. :checkbox // 选取所有复选框
          6. :submit // 选取所有提交按钮
          7. :image // 选取所有的图像按钮
          8. :reset // 选取所有重置按钮
          9. :button // 选取所有按钮
          10. :file // 选取所有的上传域
          11. :hidden // 选取所有不可见元素
原创粉丝点击