zoukankan      html  css  js  c++  java
  • 十二、内容过滤器,可见性过滤器,属性过滤器,子元素过滤器,表单类别过滤器,表单属性过滤器

    所有内容过滤器列表如下:

    名称

    说明

    举例

    :contains(text)

    匹配包含给定文本的元素

    $(“div:contains(‘john’)”)查找所有包含JOHNdiv

    :empty

    匹配所有不包含子元素或者文本的空元素

    $(“td:empty”)

    :has(selector)

    匹配含有选择器所匹配的元素的元素

    $(“div:has(p)”).addClass(“test”)给所有包含p元素的div元素添加一个text

    :parent

    匹配含有子元素或者文本的元素

    $(“td”:parent)查找所有含有子元素或者文本的td元素

    内容过滤器使用要点:

    内容过滤器中的contains和has是经常使用的过滤器。一个用来查找包含“指定文本”的元素,一个用来查找包含“指定元素”的元素。

    如果contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。

    has是在已经选中的元素内部查找子元素。可以将not过滤器和has组合使用,查找“不含有img元素的div”。$(div:not(:has(img)));

    可见性过滤器:

    名称

    说明

    举例

    :hidden

    匹配所有的不可见元素

    $(“tr:hidden”)查找所有displaynonetr元素

    :visible

    匹配所有的可见元素

    $(“tr:visible”)查找所有display不为nonetr元素

    可见性过滤器根据元素的display属性选择元素,特别需要注意的是css的visibility属性也能控制元素的实现。但是仍然占据页面空间,可以理解为visibility样式与可见性过滤器无关。

    属性过滤器

     

    名称

    说明

    举例

    [attribute]

    匹配包含给定属性的元素

    $(“div[id]”)查找所有含有ID属性的div元素

    [attribute=value]

    匹配给定的属性是特定值的元素

    $(“input[name=’letter’]”).attr(“checked”,true)查找所有name属性是letterinput元素。

    [attribute!=value]

    匹配给定的属性不包含某个特定值的元素

    $(“input[name!=’letter’]”).attr(“checked”,true)查找name属性不是letterinput元素

    [attribute^=value]

    匹配给定的属性是以某些值开始的元素

    $(“input[name^=’’]”)

    [attribute$=value]

    匹配给定的属性是以某些值结尾的元素

    $(“input[name$=’letter’]”)查找所有nameletter结尾的input元素

    [attribute*=value]

    匹配给定的属性是以包含某些值的元素

    $(“input[name*=’man’]”)查找所有name包含‘man’的input元素

    [atttibutefilter1]

    [atttibutefilter2]

    [atttibutefilterN]

    复合属性选择器,需要同时满足多个条件时使用

    $(“input[id][name$=’man’]”)找到所有含有id属性,并且他的name属性是以man结尾的

    属性过滤器是最常使用的过滤器,所以如果记不住花样繁多的jQuery选择器,那么记住基础选择器和属性过滤器就可以完成大部分的任务。在使用属性过滤器时尤其要注意,尽量在过滤前缩小范围,否则默认*在所有元素中查找元素。

    子元素过滤器

    名称

    说明

    举例

    :nth-child(index/even/odd/qeuation)

    匹配其父元素下的第N个子或奇偶元素

    Eq()从0开始

    Nth-child1开始

    $(“ul li:nth-child(2)”)在每个ul查找第二个li

    :first-child

    匹配第一个元素

    $(“ul li:first-child”)在每个ul中查找第一个li

    :last-child

    匹配最后一个元素

    $(“ul li:last-child”)在每个ul中查找最后一个li

    :only-child

    如果某个元素是父元素中唯一的子元素,那么会被匹配

    $(“ul li:only-chlid”)ul中查找是唯一子元素的li

    子元素过滤器不常使用。使用时需要注意nth-child过滤器是从1开始的,而eq是从0开始的。

    表单类别过滤器

     

    名称

    说明

    举例

    :input

    匹配所有inputtextareaselectbutton元素

    $(“:input”)查找所有的form元素

    :text

    匹配所有文本框

    $(“:text”)

    :password

    匹配所有密码框

    $(“:password”)

    :radio

    匹配所有单选按钮

    $(“:radio”)

    :checkbox

    匹配所有复选框

    $(“:checkbox”)

    :submit

    匹配所有提交按钮

    $(“:submit”)

    :image

    匹配所有图像域

    $(“:image”)

    :reset

    匹配所有重置按钮

    $(“:reset”)

    :button

    匹配所有按钮

    $(“:button”)

    :file

    匹配所有文件域

    $(“:file”)

    除了input过滤器,几乎每个表单类别过滤器都对应一个input元素的type值。大部分表单类别过滤器可以使用属性过滤器替换。

    button是没有浏览器默认行为的表单元素。

    表单属性过滤器

    名称

    说明

    解释

    :enabled

    匹配所有可用元素

    $(“input:enabled”)查找可用的input元素

    :disabled

    匹配所有不肯用元素

    $(“input:disabled”)查找所有的不可用的input元素

    :checked

    匹配所有的被选中元素

    复选框单选框包括select中的option

    $(“input:checked”)查找所有选中的复选框元素

    :selected

    匹配所有选中的option元素

    $(“select option:selected”)查找所有选中选项的元素

    表单属性过滤器使用要点:

    表单属性过滤器能够快速选中页面上特殊属性值的表单元素,这是jQuery最有用的选择器之一。

  • 相关阅读:
    js获取url参数值的方法总结
    Tomcat的配置与在IDEA上使用Tomcat
    windows配置并启动apache的方法
    图解 | 你管这破玩意叫计算机?
    【.NET 与树莓派】PWM 调节LED小灯的亮度
    【.NET 与树莓派】i2c(IIC)通信
    【.NET 与树莓派】矩阵按键
    【.NET 与树莓派】使用 GPIO 库
    【.NET 与树莓派】上手前的一些准备工作
    《红楼梦》最经典的12首诗词,读懂了才是人生
  • 原文地址:https://www.cnblogs.com/tomkillua/p/2627730.html
Copyright © 2011-2022 走看看