jQuery入门：选择元素 Selecting Elements

最新推荐文章于 2021-08-03 23:53:14 发布

guoguo_5

最新推荐文章于 2021-08-03 23:53:14 发布

阅读量842

点赞数

分类专栏：学习英语学习jQuery 文章标签：选择器

学习英语同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

学习jQuery

14 篇文章 0 订阅

订阅专栏

jQuery的一个很基础概念是“选择某些元素并用它们做些事情”。jQuery不仅支持大部分CSS3的选择器，而且支持一些非标准的选择器。要查看完整的选择器参考资料，可访问Selectors documentation on api.jquery.com。

用ID选择元素

$( "#myId" ); //注意，ID在每个页面中必须是唯一的

用类名选择元素

$( ".myClass" );

用属性选择元素

$( "input[name='first_name']" ); // 当心，在老版本的浏览器中，这种方式会很慢

用混合的CSS选择器选择元素

$( "#contents ul.people li" );

伪选择器

$( "a.external:first" );
$( "tr:odd" );

//在表单中选择所有的input元素（更多的在这下面）。
$( "#myForm :input" );
$( "div:visible" );

// 除了前三个divs以外，所有的divs（index大于2的所有divs）
$( "div:gt(2)" );

//所有当前的动画divs。
$( "div:animated" );

注意：当应用 :visible 和 :hidden 伪选择器的时候，jQuery测试实际元素的可见性，而不是元素CSS的visibility 或 display属性。如果在页面中元素的物理高度和宽度都大于零，jQuery认为是看得到的。

当然，这个测试不能在运行于<tr> 元素。原因是 jQuery检查<tr>的CSS的display属性，并且认为如果元素的display属性是none的话它是隐藏的。

元素没有被增加到DOM中经常被认为是隐藏的，即使CSS影响了它们将它们渲染为可见的。查看操作元素章节来学习如何创建并且增加元素到DOM。

选择选择器

选择恰当的选择器是一种改进JavaScript’s性能的方法。少量的特异性——比如说，当用class名选择元素的时候包含元素类型——能够运用很广泛。另一方面，太多的特异性会是一个糟糕的东西。象#myTable thead tr th.special这样的选择器会覆盖#myTable th.special这样的选择器的运行。

jQuery提供了很多基于属性的选择器，允许基于任意属性的内容应用简单的正则表达式来实现选择元素。

//找到所有的rel属性是以"thinger"字符串结尾的<a>元素
$( "a[rel$='thinger']" );

虽然这些在紧急关头会很有用，但它们在旧的浏览器也会变得非常慢。只要可以，使用IDs，class名和标记名来建立包装集。

我的包装集包含了哪些元素？

一旦你创建了一个包装集，你通常会想知道能对包装集进行哪些操作。常犯的错误：

//不会工作！
if ( $( "div.foo" ) ) {
    ...
}

这是不会工作的。当一个包装集用$()创建，通常会返回一个对象，并且这个对像的评价通常是true。即使包装集中不包含任何元素，在if声明中的代码依然运行。

确定包装集中有多少元素，最好办法是检测包装集的.length属性，它会告诉你多少元素被选择。如果答案是0，当用做布尔值的时候，.length属性将评价为false 。

// 测试包装集中包含元素的数量
if ( $( "div.foo" ).length ) {
    ...
}

保存包装集

jQeury不会为你缓存元素。如果你已经创建了包装集，那么你需要再创建一次，你应该宁可把包装集保存在变量中也不愿意重复创建。

var divs = $( "div" );

一旦包装集被存储在变量中，你可以用这个变量来调用jQuery方法就像你用初始的包装集调用它们一样。

包装集仅仅可以取到创建包装集的当时已经存在于页面中的元素。如果元素晚一些被添加，你不得不重复这个包装集或者把它们的包装集另外的存储到变量中。当DOM改变的时候，保存的包装集不会魔法般的更新。

精练和过滤结果集

有时候包装集包含的元素比你想要的更多一些。 jQuery提供了一些方法来精简和过滤包装集。

//精简包装集
$( "div.foo" ).has( "p" );         //包含<p>标记的div.foo元素（s）
$( "h1" ).not( ".bar" );           //class不是bar的h1元素（s）
$( "ul li" ).filter( ".current" ); //class为current的无序列表项
$( "ul li" ).first();              //无序列表项的第一个元素
$( "ul li" ).eq( 5 );              //第六个