首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-10-10 
Jquery小点滴 - 获取元素(一)Jquery获取元素的形式很多。而且很灵活。例子代码style.red{color:#ff0000}.

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>里。

热点排行