zoukankan      html  css  js  c++  java
  • jquery:选择器 过滤器

    容易理解错误的地方:

      1.假如我们想要让一个表格中第八列的所有单元格,都隐藏起来。我们可能会这么写$("table tr td:eq(8)").css("display","none");但是结果和我们想的不一样,只有第一行,第八列的单元格被隐藏了,而其他的并没有。如果我们要这么写     $("table tr).find("td:eq(8)").css("display","none")  结果就和我们想要的一样了。

      原因:alert($("table tr td").length) 结果为50   结果表格是10列5行。

      2.                                                           

                                                                             选择器和过滤器配合筛选

    演示:找到最后一个tr,然后再找他的第二个子元素,再从第二个子元素中找到他的input子元素

    $("tr:last>:nth-child(2)>:input").focus();

    简单选择器的开头部分(显式或隐式)是标签类型声明。如果选取的元素和标签名无关,则可以使用通配符 * 来代替。如果选择器没有以标签名或通配符开头,则隐式含有一个通配符

    标签名或通配符制定了备选文档元素的一个初始集。在简单选择器中,标签类型声明之后的部分是由零个或多个过滤器组成。过滤器从左到右应用,和书写顺序一致,其中每一个都会缩小选中元素集

    其中每一个都会缩小选中的元素,这句话,这里我需要进行深入的解释一下,简单选择器,首先,标签名或通配符制定了备选文档元素的一个初始集,然后我们在这个初始集的基础上,用过滤器过滤,一个过滤器过滤完了之后,初始集会变小,接着用下一个过滤,直到最后。假若某一个过滤器一个也没过滤到,那么这个选择器就是选择失败了,什么也没找到。

    举例:       

    <div id="c">        
    
         asdfasdf
    
            <div class="n">nnnn</div>        
    
            <div class="n">n2n2n2n2n</div>        
    
            <div class="t">tttt</div>        
    
            <div class="t">t2t2t2t2t</div>
    
    </div>

              $(".t:last-child").text("yoyo"); t2t2t2t2t会变成yoyo

          $(".n:last-child").text("yoyo");没任何反应。因为.n过滤之后是nnnn和n2n2n2n2n,然后我又用last-child,他的意思是父节点的最后一个子元素,父节 
             点是id为c的div,他的最后一个子元素是t2t2t2t2t,两个没有交集,自然取不到。虽然我们不会用到先.class后last-child的方式,但是这里举一个这样的例
             子。 如果想让div下面的样式为t的最后一个元素 改变 不能用last-child,需要用last,$(".n:last").text("yoyo");

    举例:$("[onclick]:button").val("mabo");   这里面就没有显示的标签名,所以不是以标签名开头,它会有一个隐式的通配符,其中[onclick]和:button都是过滤器    他代表的是选取 带有onclick属性的button按钮,为按钮的value属性值复制“mabo”,$("span.m").html("123"),这个例子里面就有显示的标签名,.m是过滤器。

                               组合选择器

    $("div.t+div.n").html("hahahaha");  div.t是一个简单选择器,div是标签名.t是过滤器 .n也是过滤器  +是组合选择器的一种。

    A B 从匹配选择器A的元素子孙元素中,选取匹配选择器B的文档元素。注意,组合符就是空白符

    A>B  从匹配选择器A的元素的子元素中,选取匹配选择器B的文档元素

    A+B  从匹配选择器A的元素的下一个兄弟元素(忽略文本节点和注释)中,选取匹配选择器B的文档元素

    A~B  从匹配选择器A的元素的后面的兄弟元素中,选取匹配选择器B的文档元素

                               过滤器列表

    #id

    .class

    [attr]  匹配拥有attr属性(和属性值无关)的所有元素。要是和值有关,请用[attr=val]、[attr!=val][attr^=val][attr$=val][attr*=val]  [attr~=val]                   举例:$("[onclick]").append("哈哈")  对包含onclick属性的元素append哈哈

    :button  匹配<button type="button">和<input type="button">元素  举例:$(":button").val("你妹")  把button的value属性值变成“你妹”

    :empty  匹配没有子节点、没有文本内容的元素

    :enabled

    :first

    :last

    :first-child

    :last-child

    :only-child

    :nth-child(n) 匹配的元素是其父节点的第n个子元素。n可以是树脂、单词even、单词odd或计算公式。使用nth-child(even)来选取那些在其父节点的子元素中排行第2或第4等序号的元素,nth-child(odd)则是第1、第3等元素。元素序号从0算。

    :nth(n)  与eq(n)相同

    :even  匹配列表中偶数序号的元素。由于第一个元素的序号为0,因此实际上选中的是第1个、第3个、第5个等元素

    :odd

    :parent

  • 相关阅读:
    微信小程序反编译
    Mac 绑定Gitlab或者GitHub帐号,从新生成公钥
    Vue调试工具vue-devtools安装及使用
    NPM和Yarn添加淘宝镜像
    权限菜单设计
    Axure RP 7.0注册码
    Mac用户抓包软件Charles 4.0 破解 以及 抓取Https链接设置
    [转]c++导出函数dll供c#调用
    ef(EntityFramework)动态传递数据库连接字符串
    [转]sqlserver查询系统表统计表行数和占用空间
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/5127445.html
Copyright © 2011-2022 走看看