欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery-选择器

程序员文章站 2022-03-22 13:21:10
使用jQuery选择器 1、可以使代码更简洁的写 document.getElementById()使用jQuery的写:$("#demo") 2、支持CSS选择器 3、提供了完善的处理机制 (完善的兼容处理) 1、基本选择器 基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素i ......
使用jquery选择器
  1、可以使代码更简洁的写
    document.getelementbyid()使用jquery的写:$("#demo")
  2、支持css选择器
  3、提供了完善的处理机制 (完善的兼容处理)
 
1、基本选择器
  基本选择器是jquery最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名来查找dom元素。
 
  * : 选择所有元素   //$("*").css("background","red")
  #id :通过id属性值获取元素   //$("#id").css("background","red")
  element :通过元素名获取元素
  selector1,selector2 :获取列表中指定的所有元素
  .class :获取使用class样式的所有元素、

2、层级选择器
  如果想通过 dom 元素之间的层次关系(后代元素, 子元素, 相邻元素, 兄弟元素等)来获取特定元素。

  ancetor descendant :匹配祖先元素下的后代元素    //$("body div").css("background","red")
  parent > child :匹配父元素下的子元素   //$("body>div").css("background","red")
  prev + next :匹配上一个元素的后面的元素,必须是挨着的
  prev~siblings :匹配前一个元素的所有平辈元素,在prev元素后面才能匹配    //$("#two").siblings("div").css("background","red")

3、过滤选择器
  在页面元素中先找到许多具有共同属性的元素,然后对这些元素加过滤条件,找到我们想要的这些元素。
  即通过特定的过滤规则来筛选出所需的 dom 元素。
  按照不同的过滤规则,又分为基本过滤选择器, 内容过滤选择器, 可见性过滤选择器, 属性过滤选择器, 子元素过滤选择器和表单对象属性过滤选择器。

3.1、基础过滤选择器
  :first :匹配第一个元素
  :last :匹配最后一个元素   //$("div:last")
  :even :匹配索引为偶数的元素    //$("input:even")
  :odd :匹配索引为奇数的元素
  :eq(index) :匹配索引为指定值的元素
  :gt(index) :匹配索引大于指定值的元素   //:gt(index)
  :lt(index) :匹配索引小于指定值的元素
  :not(selector) :匹配除了指定选择器之外的所有元素    //$("div:not(.class)").css("background","red")

3.2、内容过滤选择器
  :contains(text) :匹配内容中包含指定内容的元素
  :empty :匹配内容为空的元素
  :has(selector) :匹配内容中包含指定选择器的元素
  :parent :匹配内容不为空的元素

3.3、可见性过滤选择器
  :hidden :匹配隐藏的元素    //$("div:hidden").show(3000)
  :visible :匹配显示的元素

3.4、属性过滤选择器
  [attribute] :匹配具有指定属性的元素    //$("div[title]").css("background","red")
  [attribute=value] :匹配属性等于指定值的元素
  [attribute!=value] :匹配属性不等于指定值的元素
  [attribute^=value] :匹配属性值以指定值开始的元素   //("div[title^=en]").css("background","red")
  [attribute$=value] :匹配属性值以指定值结束的元素
  [attribute*=value] :匹配属性值中包含指定值的元素
  [selector1][selector2][selectorn] :同时满足所有条件,则匹配

3.5、子元素过滤选择器
  :nth-child(index/even/odd) :匹配指定索引的元素 从1算起   //$("div.one :nth-child(2)").css("background","red")
  :first-child :匹配第一个子元素
  :last-child :匹配最后一个子元素
  :only-child :如果子元素是父元素的唯一子元素,则匹配

3.6、表单对象属性滤选择器
  :enabled :匹配状态可用的表单元素
  :disabled :匹配状态不可用的表单元素
  :checked :匹配被选中的元素 匹配单选或复选    //$("#form1 input:checked").length
  :selected :匹配被选中的元素 匹配的是option

3.7、表单过滤选择器
  :input :匹配所有表单元素
  $(“:input”) :匹配所有表单元素 select、textarea
  $(‘input’) :匹配input标签
  :text :文本框
  :password :密码框 //$(":password")
  :radio :单选按钮
  :checkbox :复选框
  :submit :提交按钮
  :reset :重置按钮   //$(":reset")
  :image :图像按钮
  :button :按钮
  :file :文件框
  :hidden :隐藏域