UDN-企业互联网技术人气社区

板块导航

浏览  : 614
回复  : 2

[jQuery] jQuery 层级选择器

[复制链接]
葡萄柚的头像 楼主
发表于 2017-1-5 15:41:05 | 显示全部楼层 |阅读模式
  因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择。

  Descendant Selector

  语法:${'ancestor descendant')来选择,层级之间用空格隔开。

  如:
  1. <div class="testing">
  2.     <ul class="lang">
  3.         <li class="lang-JavaScript">JavaScript</li>
  4.         <li class="lang-python">Python</li>
  5.         <li class="lang-lua">Lua</li>
  6.     </ul>
  7. </div>
  8. $('ul.lang' 'li.lang-JavaScript')

  9. $('div.testing' 'li.lang-JavaScript');

  10. $('div.testing ul.lang li.lang-JavaScript');  //多层选择
复制代码

  Child Selector

  语法:$('parent>child')

  如:
  1. $('ul.lang>li.lang-JavaScript'); // 可以选出[<li class="lang-JavaScript">JavaScript</li>]
  2. $('div.testing>li.lang-JavaScript'); // [], 无法选出,因为<div>和<li>不构成父子关系
复制代码

  Filter

  过滤器一般不单独使用,通常附加在选择器上。

  如:
  1. $('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

  2. $('ul.lang li:first-child'); // 仅选出JavaScript
  3. $('ul.lang li:last-child'); // 仅选出Lua
  4. $('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
  5. $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
  6. $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
复制代码

  表单相关

  针对表单元素,jQuery还有一组特殊的选择器:

选择器
作用
:input
可以选择<input>,<textarea>,<select>和<button>
:file
可以选择<input type="file">,和input[type=file]一样
:checkbox
可以选择复选框,和input[type=checkbox]一样;
:radio
可以选择单选框,和input[type=radio]一样;
:focus
可以选择当前输入焦点的元素。例如把光标放到一个<input>上,用$('input:focus')就可以选出
:checked
选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked')
:enabled
可以选择可以正常输入的<input>、<select> 等,也就是没有灰掉的输入
:disabled
和:enabled正好相反,选择那些不能输入的
div:visable
可以选择所有可见的div
div:hidden
可以选择所有隐藏的div

相关帖子

发表于 2017-1-5 15:41:37 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“狂战灬梦舞“
使用道具 举报

回复

发表于 2017-1-5 21:38:57 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部