zoukankan      html  css  js  c++  java
  • JQuery基础选择器

    jQuery选择器类似css选择器,所以学习起来也更加容易
    1.基础选择器
    1.All Selector("*")
    描述:选择所有元素
    语法:$("*")
    注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用
    2.Class Selector(".class")
    描述:选择给定样式类名的所有元素
    语法:$(".class")
    3.Element Selector("element")
    描述:根据给定的(html)标记名称选择所有元素
    语法:$("element")
    4.ID Selector("#id")
    描述:选择一个给定属性的单个元素。
    语法:$("#id")
    5.Multiple Selector("selector1,selector2,selectorN")
    描述:将每个选择器匹配到的元素合并后一起返回
    语法:$("selector1,selector2,selectorN")

    2.属性选择器
    1.Attribute Contains Prefix Selector [name|="value"]
    描述:选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连接符"-")的元素
    语法:$("[attribute|='value']")
    注意:引号是可选的,可以是一个不带引号的单词或一个带引号的字符串
    2.Attribute Contains Selector [name*="value"]
    描述:选择指定属性具有包含一个给定的子字符串的元素 (选择给定的属性是以包含某些值的元素)
    语法:$("[attribute*='value']")
    3.Attribute Contains Word Selector [name~="value"]
    描述:选择指定属性用空格分隔的值中包含一个给定值的元素。
    语法:$("[attribute~='value']")
    注意:前后都要用空格分隔
    4.Attribute Ends Width Selector[name="value"]
    描述:选择指定属性是给定值的元素
    语法:$("[attribute='value']")
    5.Attribute Not Equal Selector[name!="value"]
    描述:选择不存在指定属性,或者指定的属性值不等于给定值的元素
    $("[attribute!='value']")
    6.Attribute Ends Width Selector[name$="value"]
    描述:选择指定属性是给定值结尾的元素,这个比较是区分大小写的。
    语法:$("[attribute$='value']")
    7.Attribute Starts Width Selector[name^="value"]
    描述:选择指定属性是给定值开始的元素。
    语法:$("[attribute^='value']")
    8.Has Attribute Selector[name]
    描述:选择所有具有指定属性的元素,该属性可以是任何值。
    语法:$("[attribute]")
    9.Multiple Attribute Selector[name1="value1"][name2="value2"]
    描述:选择匹配所有指定的属性筛选器的元素。
    语法:$("[attributeFilter1][attributeFilter2][attributeFilterN]")

    3.基础过滤
    1.:animated Selector
    描述:选择所有正在执行动画效果的元素
    语法:$(":animated")
    2.:eq()Selector
    描述:在匹配的集合中选择索引值为index的元素
    语法:
    (1) $(":eq(index)") :index:要匹配元素的索引值(从0开始计数)
    (2) $(":eq(-index)") :index:呀匹配元素的索引值(从0开始计数),从最后一个元素开始倒计数。
    3.even Selector
    描述:选择索引值为偶数的元素,从0开始计数,也可查看odd(奇数).
    语法:$(":even")
    注意:这是基于0的索引,所以even是选择第一个元素,第三个元素,依次类推在匹配。
    4.first Selector
    描述:选择第一个元素
    语法:$(":first")
    5.focus Selector
    描述:选择当前获取焦点的元素。
    语法:$(":focus")
    6.header Selector
    描述:选择所有标题元素,像h1,h2,h3等.
    语法:$(":header")
    7.last Selector
    描述:选择最后一个元素
    语法:$(":last")
    8.:gt() Selector
    描述:选择匹配集合中所有大于给定index(索引值)的元素。
    语法:$(":gt(index)")或$(":gt(-index)")
    9.:lt() Selector
    描述:选择匹配集合中所有小于给定index(索引值)的元素。
    语法:$(":lt(index)")或$(":lt(-index)")
    10.:not() Selector
    描述:选择所有元素去除不匹配给定的选择器元素。
    语法:$(":not(selector)")
    4.子元素过滤
    1.first-child Selector
    描述:选择所有父级元素下的第一个元素。
    语法:jQuery(":first-child")
    2.last-child Selector
    描述:选择所有父级元素下的最后一个元素。
    语法:jQuery(":last-child")
    3.first-of-type Selector
    描述:选择所有相同的元素名称的第一个兄弟元素。
    语法:jQuery(":first-of-type")
    4.last-of-type Selector
    描述:选择所有相同的元素名称的最后一个兄弟元素。
    语法:jQuery(":last-of-type")
    5.nth-child() Selector
    描述:选择的所有父元素的第n个子元素。
    语法:jQuery(":nth-child(index/even/odd/equation)")
    5.内容过滤
    1.:contains() Selector
    描述:选择所有包含指定文本的元素
    语法:jQuery(":contains(text)")
    注意:text:用来查找的一个文本字符串,这是区分大小写的。匹配的文本可以直接出现在所选的元素中,或在该元素的任何后代中,或两者兼有。
    2.:empty Selector
    描述:选择所有没有子元素的元素(包括文本节点)
    语法:jQuery(":empty")
    3.:has() Selector
    描述:选择元素其中至少包含指定选择器匹配的一种元素
    语法:jQuery(":has(Selector)")
    4.:parent Selector
    描述:选择所有含有子元素或者文本的父级元素
    语法:jQuery(":parent")
    6.表单
    1.:button Selector
    描述:选择所有按钮元素和类型为按钮的元素。
    语法:jQuery(":button");
    2.:checkbox Selector
    描述:选择所有类型为复选框的元素。
    语法:jQuery(":checkbox")
    3.:checked Selector
    描述:匹配所有勾选的元素
    语法:jQuery(":checked")
    4.:disabled Selector
    描述:选择所有被禁用的元素
    语法:jQuery(":disabled")
    5.:enabled Selector
    描述:选择所有可用的(注:未被禁用的元素)元素
    语法:jQuery(":enabled")
    6.:file Selector
    描述:选择所有类型为文件的元素
    语法:jQuery(":file")
    7.:focus Selector
    描述:选择当前获取焦点的元素
    语法:jQuery(":focus")
    8.:image Selector
    描述:选择所有图像类型的元素
    语法:jQuery(":image")
    9:input Selector
    描述:选择所有input,textarea,select和button元素
    语法:jQuery(":input")
    10.:password Selector
    描述:选择所有类型为密码的元素
    语法:jQuery(":password")
    11.:radio Selector
    描述:选择所有类型为单选框的元素
    语法:jQuery(":radio")
    12.:submit Selector
    描述:选择所有类型为提交的元素
    语法:jQuery(":submit")
    7.层级
    1.Child Selector ("parent > child")子元素选择器
    描述:选择所有指定"parent"元素中指定的"child"的直接子元素
    语法:jQuery("parent > child")
    注:
    parent:任何有效的子元素
    child:用来筛选子元素的选择器
    2.descendant Selector(后代选择器)
    描述:选择给定的祖先元素的所有后代元素
    语法:jQuery("ancestor descendant")
    注:
    ancestor;任何有效的选择器。
    descendant:一个用来筛选后代元素的选择器
    3.next adjacent selector("prev + next")相连选择器
    描述:选择所有紧接在"prev"元素后面的"next"元素
    语法:jQuery("prev + next")
    注:
    prev:任何有效的选择器
    next:用于筛选跟在"prev"后面的元素的选择器
    4.Next Siblings Selector("prev ~ siblings")
    描述:匹配"prev"元素之后的所有兄弟元素。具有相同的父元素,并匹配过滤"siblings"选择器
    语法:jQuery("prev ~ siblings")
    注:
    prev:任何有效的选择器
    siblings:一个选择器来过滤第一选择器以后的兄弟元素

    ("prev + next")和("prev ~ siblings")之间最值得注意的不同点是他们各自的可及之范围,前者只达到紧随的同级元素,后者扩展了该达到跟随其呃所有同级元素
    8.jQuery扩展
    :animated Selector : 选择所有正在执行动画效果的元素
    Attribute Not Equal Selector[name!="value"]:选择不存在指定属性,或者指定的属性值不等于给定值的元素
    :button Selector : 选择所有按钮元素和类型为按钮的元素。
    :checkbox Selector : 选择所有类型为复选框的元素
    :eq() :even :file :firt :gt() :has() :header :hidden :image :input :last
    :lt() :parent :password :radio :reset :selected :submit :text :visible

    9.可见性过滤
    1.hidden selector
    描述:选择所有隐藏的元素
    语法:jQuery(":hidden")

    补充:
    元素以下几种情况可以被认为是隐藏:
    1)他们的css display值是none。
    2)他们是type="hidden"的表单元素。
    3)他们的宽度和高度都设置为0。
    4)一个祖先元素是隐藏的,因此该元素是不会在页面上显示。

    2.visible selector
    描述:选择所有可见元素。
    语法:jQuery(":visible")

    如果元素占据文档中一定空间,元素被认为是可见的。可见元素的宽度或高度,是大于零的。
    所以元素的visibiliy:hidden 或 opacity:0被认为是可见的,因为他们仍然占用空间布局。

    不在文档中的元素被认为是隐藏的;jQuery没法知道他们是否可见,因为元素可见性依赖于适用的样式。

    隐藏元素上做动画,元素被认为是可见的,知道动画结束。显示元素上做动画,在动画的开始处钙元素被认为是可见的。

  • 相关阅读:
    阿里风控大脑关于大数据应用的探索与实践
    MaxCompute
    Lyft 基于 Flink 的大规模准实时数据分析平台(附FFA大会视频)
    基于MaxCompute InformationSchema进行血缘关系分析
    阿里经济体大数据平台的建设与思考
    厉害了!阿里云首批通过边缘云标准符合性测试
    边缘计算和“寒武纪”有什么关系?阿里云资深专家刘强如是说
    阿里云荣获最佳智能边缘计算技术创新平台
    阿里云杨敬宇:四层技术构建基于城市场景的边缘计算
    阿里云移动研发平台 EMAS 助力银行业打造测试中台,提升发版效能
  • 原文地址:https://www.cnblogs.com/huzhuo/p/7460874.html
Copyright © 2011-2022 走看看