开启辅助访问
帐号登录 |立即注册

jQuery 选取元素方法总结

 
用选择器选取元素
$(选择器 [, 父元素])
如:
$('#save-btn');// 所有 id 为 save-btn 的
$('.btn', $('form'));// form 元素下类名包含 btn 的元素
$('.box h2.title'); // 所有类名包含 box 的元素下的类名包含 title 的 h2

jQuery 支持的选择器包括:
CSS 1-3 定义的选择器。
jQuery 自定义的选择器。
注意:
对于 jQuery 自定义的选择器,为了性能,先用 CSS 定义的选择器选,再从结果集中筛选时用 jQuery 自定义的选择器。如:

// 不推荐
$('.form:visible');
$('.form :selected');
$('.list:eq(3)');
// 推荐
$('.form').filter(':visible');
$('.form').find(':selected');
$('.list').eq(3);


一些有用的选择器

表单类
:checked 选中的单选和复选按钮
:selected 选中的 <option> 元素
:disabled ji用的表单元素


是否可见
:visible 可见元素
:hidden 不可见元素


内容过滤
:contains(文本) 如: $("div:contains('John')")
:empty 没有子元素或没有文本内容的元素
:has(选择器) 有指定子元素的元素


其他
:not(选择器) 不满足指定选择器的元素
:animated 正在做动画的元素
:eq(下标值) 在兄弟节点中的位置等于下标值的的元素。下标从 0 开始。
:gt(下标值) 在兄弟节点中的位置大于下标值的的元素。下标从 0 开始。
:lt(下标值) 与 :gt 相反。


选择器中包含元字符的处理
选择器的元字符有:!"#$%&'()*+,./:;<=>?@[\]^{|}~。

选择器中如果要使用选择器的元字符,必须用 \ 来转义。如:选择 id 为 foo.bar 的元素,要使用 $("#foo\\.bar")。如果使用 $("#foo.bar"),则选择的是 id 为 foo 并且有 bar 的类名的元素。


从层级中选取元素

从父元素和祖系元素中找
.closest([选择器])
.parent([选择器])
.parents([选择器])
.offsetParent() 找最近的父级定位元素(position 不为 static 的元素)


从子元素中下找
.find([选择器])
.children([选择器])
.contents() 元素下的内容:包括文本节点和注释节点。常常也用来做选取 iframe 的内容,如
$('#frameDemo').contents().find('a');
// 等效与
$('#frameDemo')[0].contentWindow.$('a');


从兄弟元素中找
.siblings(选择器)
.prev()
.prevAll()
.next()
.nextAll()


过滤掉不满足条件的元素
.filter(选择器|函数) 如:
$(".btn")
.filter(function(index) {
return index > 2 && $(this).is(':visible');
});




回复

使用道具 举报

0 个回复

倒序浏览

快速回复

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

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。