zoukankan      html  css  js  c++  java
  • jQuery 获取对象 定位子对象

    选择中的特殊符号: 

    # 指示 id 
    . 指示 class 
    * 全选 
    , 多选 
    空格 后代 
    > 子 
    ~ 兄弟 
    + 下一个 
    : 子(多功能) 
    () 函数式的过滤与查找 

    获取 div 下的所有标题对象: $("div :header") 
    代码如下:

    <body> 
    <h3>AAA</h3> 
    <p>BBB</p> 
    <h4>CCC</h4> 
    <div> 
    <h3>DDD</h3> 
    <p>EEE</p> 
    <h4>FFF</h4> 
    </div> 
    </body> 

    获取所有标题对象: $(":header") 
    代码如下:

    <body> 
    <h3>AAA</h3> 
    <p>BBB</p> 
    <h4>CCC</h4> 
    <div> 
    <h3>DDD</h3> 
    <p>EEE</p> 
    <h4>FFF</h4> 
    </div> 
    </body> 

    获取 first, 如: $("li:first") 或 $("li").first() 或 $("ul :first") 或 $("ul li:first") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取每组的 first, 如: $("li:first-child") 或 $("ul li:first-child") 或 $("ul :first-child") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取 last, 如: $("li:last") 或 $("li").last() 或 $("ul :last") 或 $("ul li:last") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取每组的 last, 如: $("li:last-child") 或 $("ul li:last-child") 或 $("ul :last-child") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取第几个, 如(获取第三个, eq 是 0 起): $("li:eq(2)") 或 $("li").eq(2) 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取第几个之后的, 如(获取第三个之后的, gt 是 0 起): $("li:gt(2)") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取第几个之前的, 如(获取第三个之前的, lt 是 0 起): $("li:lt(2)") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取索引值是偶数的, 如(even 是 0 起): $("li:even") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取索引值是奇数的, 如(odd 是 0 起): $("li:odd") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取每组第偶数个, 如(nth-child 是 1 起): $("li:nth-child(even)") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取每组第奇数个, 如(nth-child 是 1 起): $("li:nth-child(odd)") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    获取每组第几个, 譬如第 2 个(nth-child 是 1 起): $("li:nth-child(2)") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    用表达式指示每组的第几个, 如(nth-child 是 1 起): $("li:nth-child(3n-1)") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    如果是父元素中唯一的子元素, 如: $("li:only-child") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 

    :not 是对其他选择的取反, 如: $("li:not(li:first-child)") 
    代码如下:

    <ul> 
    <li>AAA</li> 
    <li>BBB</li> 
    <li>CCC</li> 
    <li>DDD</li> 
    <li>EEE</li> 
    <li>FFF</li> 
    <li>GGG</li> 
    </ul> 
    <ul> 
    <li>111</li> 
    </ul> 
    <ul> 
    <li>XXX</li> 
    <li>YYY</li> 
    <li>ZZZ</li> 
    </ul> 
  • 相关阅读:
    分享一个自己写的vue多语言插件smart-vue-i18n
    利用vw+rem实现移动web适配布局
    你说前端不了解业务?
    小程序开发总结一:mpvue框架及与小程序原生的混搭开发
    小码农的职场人生一:由张小平离职引发的一些吐槽
    javascript本地缓存方案-- 存储对象和设置过期时间
    手淘移动适配方案flexible.js兼容bug处理
    微信小程序入坑之自定义组件
    vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
    非域环境下使用证书部署数据库(SqlServer2008R2)镜像
  • 原文地址:https://www.cnblogs.com/wh-king/p/3287435.html
Copyright © 2011-2022 走看看