JQuery概述2——创建元素包装集

前言:

    在前述博文《JQuery概述1——JQuery 相关简介》中,通过JQuery实例,已经看到了一些创建包装集的例子,然而其并不完备,在此文中引述几种创建方法,并且在分类基础上,实现更好的掌握。

 

利用基本CSS选择器:

  参照CSS中的选择器(selector),在JQuery中可以直接通过它们获得所取元素,下列列出一些示例:

  • a——这个选择器匹配所有链接<a>元素;
  • #specialID——这个选择器匹配id为specialID的元素;
  • .specialClass——这个选择器匹配所有CSS的类specialClass元素;
  • a#specialID.specialClass——这个选择器匹配idweispecialID,拥有CSS类specialClass的链接元素;
  • p a.specialID——这个选择器匹配拥有CSS类specialClass,且在<p>元素内的所有链接元素;

 

子选择器、容器选择器和特性选择器:

 

子选择器:

   

<body>
    
<form id="form1" runat="server">
    
<div>
      
<ul class="myList">
        
<li><a href ="http://www.baidu.com">Baidu</a></li>
        
<ul>
           
<li><a href ="http://www.sina.com.cn">Sina</a></li>
           
<li><a href ="http://www.sohu.com">Sohu</a></li>
        
</ul>
      </ul>
    </div>
    </form>
</body>

此时,如果应用选择器:

                                        $("ul.myList li a")

这时我们所选取的元素集合为包含Baidu、Sina、Sohu的全部链接,因为它们三个都是马满足条件的li 的后代节点。

 而如果我们只想选取Baidu的节点链接,怎么做呢?幸好JQuery提供了子选择器: 即通过:

                                      $("ul.myList >li >a")

 即通过子选择器(方式:>)实现了对直接子节点元素的选取。

 

特性选择器:

如上例,如果为:

                                     $("a[href^=http://]")

 即表示,选取含有特性href,并且其以http://开头的所有链接<a>元素。^=只是一种,还有几种,见列表:

 

包含选择器:

 如上例,如果为:

                                   $(li : has(a))

 即表示,选取包含<a>元素的所有<li>元素。这就是包含选择器(亦即,容器选择器)。

 

位置选择器:

在上一篇博文《JQuery概述1——JQuery 相关简介》中应用到:

                      $("table tr:nth-child(even)").addClass("even")

这其中就应用到位置选择器。

 

 

综述之,上述几种选择器即是获取包装集的基本方法。下一节将继续讲解如何操作包装集中的元素。。。

posted @ 2010-02-26 15:29  Youngman  阅读(1293)  评论(0编辑  收藏  举报