Jquery小点滴 - 获取元素(一)

Jquery获取元素的形式很多。而且很灵活。

例子代码

<style>

.red{

color:#ff0000;

}

.blue{

color:#0000ff;

}

</style>

<div id=a class="red">Hello a</div>

<div id=b class="blue">Hello b</div>

<div id=c class="red">Hello c</div>

<div id=d class="blue">Hello d</div>

1. 根据ID获取元素, 使用#来告诉jquery以ID获取元素。这里会返回单一元素

如，把<div id=a class="red">拿出来

var obj = $("#a")；

alert(obj.html()); <!-- 这里会显示 Hello a -->

var obj = $("#d")；

alert(obj.html()); <!-- 这里会显示 Hello d -->

2. 根据使用css类来找元素， 返回的是一个元素数组。直接在元素选择器里把css的名字放进去就行。

如， 把所有使用red类的元素找出来。

var obj = $(".red")；

这里会回来2个元素。

<div id=a class="red">Hello a</div>

<div id=c class="red">Hello c</div>

alert(obj[0].html()); <!-- 这里会显示 Hello a -->

alert(obj[1].html()); <!-- 这里会显示 Hello c-->

如果class在整个页面都使用到，而又不想拿太多的元素回来，那这么办呢？

jquery提供了filter（过滤器）。

例子代码：

<style>

.red

{

color: #ff0000;

}

</style>

<div id="a">

<span class="red">Hello World a</span>

<span class="red">Hello World b</span>

</div>

<div id="b">

<span class="red">Hello World c</span>

</div>

这里先介绍其中一种filter。

<script language="javascript">

<!--

在这里，我们在元素选择器里写上 #a .red ,告诉选择器，在id是a的元素里找那些使用css class red的元素。

-->

var obj = $("#a .red");

</script>

以上代码，会找到2个元素。

<span class="red">Hello World a</span>

<span class="red">Hello World b</span>

而

<span class="red">Hello World c</span>是不会在被选择之列。因为它不再<div id="a"></div>里。